Cara Membuat Slider Image di Blog

DEMO

Hay sobat blogger, setelah sebelumnya saya share tentang Cara Membuat Headline News di BLog, maka selanjutnya pada kesempatan ini, saya kembali ingin share tentang Cara Membuat Slider Image di Blog, untuk mengetahui seperti apa itu slider image, silahkan klik tombol Demo diatas. Langsung saja deh, buat anda yang tertarik dan ingin menerapkannya di blog anda, silahkan ikuti langkah singat dibawah ini.

Cara Membuat Slider Image di Blog :

1. Login ke akun blogger anda
2. Klik Template > Edit HTML lalu centang pada Expand Template Widget
3. Disarankan backup terlebih dahulu template anda, untuk berjaga-jaga, bila ada kesalahan dalam pengeditan, Klik Disini untuk cara mem-backup template.
4. Cari Kode ]]></b:skin> , setelah itu letakkan kode dibawah ini tepat diatasnya
   Klik Buka untuk Melihat Script:

   #featuredSlider {background:#fff;float:left;margin:0; padding:0 0 10px; width:610px; position:relative;color:#666;border-bottom:0px solid #c3c3c3} #featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;} #featuredSlider .container {height:250px; margin:0 10px 0 0;overflow:hidden; position:relative;} .featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;} .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;} ul.pagination a { float:left; margin:0 5px; display:inline; } ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCV-QNNsjsGqfxJbBhV9Q9E-VwgbqO_UssMyaV5mJJst6ED6yzQg_UmXMkOwLG7C_2JpDVmfAN55JeKP1JU8Ixtp9e9boF9bB-VAQ-bPVZTbcrTKWZV80Oj-861bNvhbc2FO6u7pbcy20/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; } ul.pagination a:hover { background-position:0 -12px; } ul.pagination a:hover { background-position:0 -12px; } ul.pagination a.activeSlide { background-position:0 -12px } a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrG4OzuExHn5sKMbyIaVTi75jGFdNjrrFvrTeofwb7AB7rxccwhW0RKZSNzJpB6676_iKFNLv4Vajmwl5vwBmXnOqD2BDgyLnU-96qRLgyv6MDI5hgopECzRkgqb7wcnRUZVMc4sKszoQ/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}

   Sesuaikan Angka yang berwarna merah diatas, untuk menyesuaikan lebar dan tinggi slider pada blog anda.
5. Selanjutnya cari kode </head>, lalu letakkan kode dibawah ini tepas diatasnya.
   Klik Buka untuk Melihat Script:

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/> <script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/> <script src='http://rudi-here.googlecode.com/files/news.js' type='text/javascript'/>

6. Setelah itu cari kode <div id='main-wrapper'> , lalu letakkan kode berikut ini, tepat dibawahnya.
   Klik Buka untuk Melihat Script:

   <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: 6000, pager:  &#39;.pagination&#39; }); </script> </div> </div> <!--end .container--> </div> </b:if>

   Jika anda ingin menampilkan gambar slider per kategori atau label silahkan lihat kode berwarna biru diatas, kemudian ganti menjadi :
   

   /feeds/posts/default/-/your_label?max-results

   
   
   
   
   Silahkan ganti tulisan your_label, sesuaikan dengan label yang ingin anda tampilkan di slider image.
7. Setelah selesai, klik simpan template dan lihat hasilnya
8. selesai.

Selamat Mencoba dan Semoga bermanfaat..^_^

NB: Script yang dipasang diatas kode </head> telah saya simpan dalam google code, demi mengurangi loading blog, untuk melihat isi script lengkapnya silahkan kunjungi blog referensi saya disini

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post