Cara Memasang Slider Otomatis Keren di Blog (Update)

Posted by Night Raid Script Posted on 00.29

Kamu dapat mempercantik tampilan blog dengan memasang slider otomatis artikel terbaru ini (recent post slider) di blog kamu. Slider berikut adalah slider otomatis dimana artikel terbaru yang ada di blog akan otomatis ditunjukan oleh slider ini, jadi kamu tidak perlu repot-repot memasukan gambar dan link satu persatu ke dalam slider.

Sebelumnya juga sudah pernah dibagikan slider otomatis responsive artikel terbaru di blog, sekarang slider yang sederhana saja tampilannya, ok sobat cekidot...

Slider Otomatis Di Blogspot

Cara Memasang Slider di Blogger

1. Masuk di Blog kamu di Blogger
2. Pilih Template kemudian Edit HTML
3. Letakan kode dibawah ini 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/AVvXsEiLIsW6TW_G_OrX3WdVrRVTgYIwEZD-kDzj4BmEis6oKY663Na9s-42PYig111ooXy3GQzbyMSO11o0UxPtxBCY_h7qDp4TJxt-Jd4RF3B7dJ7qCY0evNeumDHVsBPvNZ9Ff95jNDwjUa0/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/AVvXsEidgP51_bu-BIAJSylGSiwWbt8yjKdFYwFp-FEOxkyyRAbcq_-CBxIbfK1dtEWSAutxmstocUiOxEUNB1APCgXhzT50_wy1-LQFTrULCypHa1NXFywmmpmkj3cVt03O5b3MyOys2j6xr14/s360/no-image-seocips.gif";
showRandomImg = true;
aBold = true;
summaryPost = 90;
summaryTitle = 25;
numposts  = 6;
//]]>
</script>

Setting

• Kode width:96% adalah lebar slider otomatis ini, silahkan sesuaikan dengan template yang kamu gunakan. 
• Kode warna merah diatas (kode jQuery.min.js), Jika pada template kamu sudah terdapat jQuery.min.js walaupun serinya berbeda, maka kode warna merah diatas tidak perlu dipasang lagi

Memunculkan Slider di Blog

Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'> (kode ini bisa berbeda penamaannya di template kamu), letakkan kode berikut ini dibawahnya :

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

Kode tag kondisional pembuka dan penutup warna merah adalah untuk menapilkan widget ini kecuali di halaman posting (slider akan muncul di homepage dan lain-lain) hapus jika ingin memunculkan disemua halaman.

Save tamplate dan lihat hasilnya. Semoga berhasil, selamat mencoba.