Cara Membuat Slider Otomatis di Blog

Posted by Zona Komputer Posted on 08:43

Cara membuat/memasang slider otomatis pada blog

Hai sobat, sekarang saya akan post cara membuat slider otomatis di blog, jadi sobat tidak usah repot repot memasang photo dan link satu persatu kedalam slider.
Slider otomatis ini akan otomatis menampilkan post terbaru yang ada di blog anda.
Ok langsung next saja ke langkah-langkahnya.

1.Masuk ke akun blogger anda.
2.Pilih menu template lalu klik edit HTML

3.Cari kode </head> (gunakan CTRL+F untuk memudahkan pencarian) lalu letakkan kode berikut diatas </head>.

<style>
#featuredSlider {margin:10px; padding:0 0 10px;width:96%; position:relative;border:3px solid #444;box-shadow:1px 1px 5px #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/AVvXsEh1Mj64wKm41QBpuPaV2kJRPh2_9p7i3WUXgG-LmOtagqL5RDu6-Q3e7dAe38JJnRdST1S__8u4CN_suz1Biq-iqPYiPubY5eEXIckocjToXG8ujllktN8Q9iojkIclOmuoW5NvKY9QM80/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/AVvXsEhUeUmp_CffNHjLyp-tszQCpLu38V20yKQ4ACFRHHqNxyRG7kJitYxVRLJH-T21PeSm7C3a4lQD5bR5fOLMmvKtzCfSo5-_a-7PDWyK-eq-tzz44HyJjfpOkTAs2i8I9KuGSpLAW7fcPO8/s360/no-image-seocips.gif";
showRandomImg = true;
aBold = true;
summaryPost = 90;
summaryTitle = 25;
numposts  = 6;
//]]>
</script>

Keterangan  lanjutan: kode warna hijau width:96% bisa anda sesuaikan dengan kebutuhan anda, untuk kode hijau jquery.min.js jika di template anda sudah ada maka tidak usah ditulis (dihapus saja).

4.Ok jika sudah tugas sobat selanjutnya adalah memanggil slider tersebut agar tampil di blog sobat.
5.Cari kode <div id='main-wrapper'> (bisa berbeda tergantung blog sobat) lalu letakkan kode berikut di bawahnya.

<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>

Keterangan lanjutan: kode berwarna hijau tersebut bertujuan untuk menampilkan slider di halaman utama dan lainnya(tidak di halaman posting). Jika sobat ingin menampilkan slider di seluruh halaman, sobat tinggal menghapus kedua kode hijau tersebut.

6.Save template sobat dan lihat hasilnya.

Sumber seocips.com
Ok sekian tutorial kali ini, sebelum saya posting ini, saya telah mengujinya terlebih dahulu dan ternyata working 100%. Jika sobat tidak berhasil, harap cek lagi scipt sobat.
Terima kasih telah berkunjung, dan sampai jumpa. :D