Cara Membuat Slider/Slide Show Menampilkan Artikel Terbaru di Homepage

Oleh Blogger Kode

Rabu, 15 Juni 2016

Bagikan :

Tweet

"Mas, pengen buat slider atau slide show di halaman utama (homepage)?"

"Mas, udah coba cari di internet tapi banyak yang error?"

"Mas, kasih tutornya ya.. biar template ane lebih elegan?"

Fenomena pemakaian slider memang banyak menarik perhatian pengunjung blog, karena tampilan blog tampak elegan. Slider atau slide show biasanya dipakai website niche travel, kuliner, photography dan lain sebagainya. Slider bisa di pasang secara permanen maupun tidak, tapi kali ini saya akan memberikan tutor secara permanen karena menurut saya lebih efisien dan efektif tanpa perlu widget tambahan.

Slider atau slide show adalah gadget yang menampilkan beberapa gambar dan deskripsi singkat dari gambar tersebut. Slider bisa dijadikan solusi bagi sobat blogger yang mau menampilkan artikel terbarunya.

Berikut cara membuat slider atau slide show menampilkan artikel terbaru di halaman utama (homepage)

#1. Masuk Edit HTML
#2. Letakkan kode berikut di atas kode </head>. Ukuran bordernya bisa diubah di #featuredSlider bagian Width:570px. Untuk setingan post, title dan jumlah kemunculan post bisa diedit pada kode yang saya beri warna merah

<style>
#featuredSlider {margin:10px; padding:0 0 10px;width:570px; position:relative;border:1px dashed #444;box-shadow:1px 1px 3px #666;}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0;}
#featuredSlider .container {height:246px; margin:0 10px 0 0; overflow:hidden; position:relative;}
.featuredTitle{padding-top:15px;font:16px Arial;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;display:none}
a.readmore {float:left;border:1px solid #444;background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHbh-akB51poZp9WFm7UCcVO3p2iKzMGc8jBjuL-lWnCiLdCHShNn915p3UtiVeo91dNVoJ1josQ3sH4SwFpEDs8y_b_85I_ux8imVdf6xKq2L_aOsoHl95ERcvZVbH6BeKzu8ICDYtR8/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/Brando07/share/master/slider-otomatis-seocips-1.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlx09o-8GUYNtAv73uIfZ4zo0K4t_RdPF5AFrEnIejDSR_6On6Vq31K8DSMDVl1NEZlcfv8xuA1jDSCa0p7oBSrAIOO2XpiokPac4uTQCnV4qUDE8tebuL-Lt58Ll4lEJ9szy-nyv9TtU/s360/no-image-seocips.gif";
showRandomImg = true;
aBold = true;
summaryPost = 0;
summaryTitle = 25;
numposts = 2;
//]]>
</script>

#3. Memunculkan slider di blog, letakkan kode berikut di bawah kode <div id='main-wrapper'> atau <aside id='article' biasanya beda template beda kodenya juga. jika ingin menampilkan pada hompage dan di atas postingan hapus tag kondisional yang berwarna merah

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/> <script>
$(&#39;.slides&#39;).cycle({
fx: &#39;fade&#39;,
speed: &#39;slow&#39;,
timeout: 3000,
pager: &#39;.pagination&#39;
});
</script>
</div>
</div>
</div>
</b:if>

#4. Simpan template

Sekian tutor membuat slider untuk menampilkan artikel terbaru di homepage, pemasangan kode-kode berikut jika mengalami kesulitan atau error silakan bertanya di kolom komentar. Semoga bermanfaat

Terima Kasih

Tag : Tutorial Blog