Buat/Memasang Slider Otomatis Keren di Blog

Untuk memperlengkap dan mempercantik blog anda, dengan memasang slider otomatis atau bisa dikatakan recent post slider di blog anda merupakan pilihan yang tepat. slider yang akan blogsmanado bagikan merupakan slider otomatis yang menempatkan postingan terbaru di dalam slider tersebut.

Jadi anda tidak akan kesulitan untuk mengganti gambar ataupun link.
Sebelumnya juga blogmanado sudah membagikan Cara Buat Responsive Slider atau Recent Post Keren di Blog

Cara Memasang Slider Otomatis Keren di Blog

1. Login ke Blogger
2. Pilih Template/edit html

3. Ctrl+f cari kode </head> dan letakkan kode dibawa ini diatas kode </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/AVvXsEi6s_H1S1OKjuqNTm5P0lLJdZzMZmv4mYvwLBaUAmK5-AV9e1ehB6bsK-dQJbbdd_DhfibIfHdzyROpbh6kdPHOcu5Rv1aE8OIX6Ez2BjBfMVmAg9FY_iTdJhzfrL2cMHbXxrj4nLWUIVg/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/AVvXsEjeS1oca3mR0xiHfABjFvvKlDRnLdWvjodeS5UEwbnVNc_ngyWDy8KmOCWhzkqFs2Sw_B-4cwJcIjP6MGcBV3yZZESVHHq8OPjQz8yKPBRqIqAtjvPGLsY84j6VEKm6MerkdFoJcKNt1c88/s320/no-image-blogs-manado.gif";
showRandomImg = true;
aBold = true;
summaryPost = 90;
summaryTitle = 25;
numposts  = 6;
//]]>
</script>

Setting

Kode width:96% adalah lebar slider otomatis, silahkan sesuaikan dengan ukuran template yang anda gunakan.

kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> jika pada template anda gunakan sudah ada jangan diikut sertakan, meskipun kode tersebut taksama tetapi kode jquery.min.js sama bekerjanya.

Memunculkan Slider di blog anda.

Ini adalah langkah terakhir. Cari kode seperti ini <div id='main-wrapper'> dan letak kode dibawah ini dibawah kode tersebut.

<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 berwarna merah ada kode untuk menampilkan slider di semua tampilan template kecuali dihalam postinga. Tapi jika teman - teman ingin menampilakan disemua halaman bisa hapus kode warna merah diaatas.

jika sudah selesai, save dan lihat hasilnya. semoga berhasil dan bisa mermanfaat untuk teman-teman blogmanado.