Tutorial Cara Membuat Slider Image Otomatis

Sebelum tutorial ini muncul beberapa kali admin blog ini menggunakan slider image yang dibuat secara manual. Perlu waktu yang sedikit lama kalau hal ini dilakukan manual dibandingkan yang otomatis. Kita pasti mengenal Slider Gambar Zinmag Primus bukan? Ya itu menjadi master slider yang pada waktu lalu banyak diminati.
Semenjak penemuan cara membuat slider image otomatis beberapa blogger memilih menggunakan yang cara ini untuk mengganti slider gambar yang masih menggunakan cara yang lama.

Cara kerja slider otomatis ini memanfaatkan feed blog.
Dengan slider otomatis ini maka gambar slider akan otomatis ditransfer dari postingan, penyesuaiannya dapat berdasarkan label atau secara defaul keseluruhan.
Buat sobat yang suka menampilkan gambar-gambar diblognya mungkin cara ini cocok buat sobat, nah mungkin sobat ingin melihat seperti apa tampilannnya silahkan lihat di blog ini.

Bagaimana sudah melihat demonya? apa sobat ingin mencobanya? ya mungkin tidak ada salahnya buat dicoba kan sebagai pembelajaran biar ilmu ngedit blognya makin mantap, ingat sobat pengalaman adalah guru paling utama ini juga pengalaman mengedit blog akan jadi modal ilmu kita jangan takut tidak berhasil atau gagal asal sobat selalu mendownload lengkap templatenya sebelum mengedit. dalam mengedit blog selalu berlaku prinsif Tray and error sehingga kita harus selalu berpikir bagaimana mengatasinya, nah dari situlah ilmu kita akan bertambah.
Oke. buat sobat yang mau mencoba berikut langkahnya.
Langkah Pertama Membuat Slider Otomatis

• Seperti biasa saja login dahulu ya..
• Klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin, alasannya.
• Klik edit HTML klik lanjutkan kemudian cari kode ]]> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.
  

#featuredContent{float:left;width:500px;margin-left:230px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:500px;height:268px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:485px;min-height:30px;height:auto!important;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png);margin:5px 7px;}
#featured-slider .sliderPostInfo p{color:#fff;font-size:11px;padding:0 10px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 10px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin:0 0px;padding:0;}
#paginate-featured-slider ul{width:485px;padding:0;list-style:none;margin:0 5px;}
#paginate-featured-slider ul li{display:inline;width:85px;float:left;margin-left:0;margin-right:5px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

• Selanjutnya sobat cari kode setelah ketemu letakan kode dibawah ini sebelumnya atau diatasnya.
  

<!-- Slider otomatis -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://johny-template.googlecode.com/files/contentslider.js' type='text/javascript'/>
<script src='http://my-project-favicon.googlecode.com/files/Carousel.js' type='text/javascript'/>
<!-- Slider otomatis end -->

• Setelah selesai simpan dulu templatenya,
  

Langkah Kedua Membuat Slider Otomatis

• Pada langkah kedua ini sobat harus sudah keluar dari halaman edit HTML dan klik Tata letak selanjutnya klik tambah gadget yang berada dibawah judul header. atau dimana saja terserah sobat.
• Setelah klik tambah gadget selanjutnya klik HTML/javascript dan masukan kode dibawah ini
  

<div id="featuredContent">
<div class="sliderwrapper" id="featured-slider">
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script></div>
<div id="paginate-featured-slider">
<ul><script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script> </ul>
<div class="clear">
</div>
</div>
<script type="text/javascript">
featuredcontentslider.init({id:"featured-slider",contentsource:["inline",""],toc:"markup",nextprev:["",""],revealtype:"mouseover",enablefade:[true,0.4],autorotate:[true,5000],onChange:function(previndex,curindex){}})
</script>
</div>

• Simpan lagi dan lihat hasilnya

Buat sobat yang mau menampilkan slider berdasarkan label tertentu sobat perhatikan kedua kode yang berwarna merah, feeds/posts/default?max-results rubah kode menjadi feeds/posts/default/-/nama label sobat?max-results. ganti untuk keduanya dan ingat ya sobat apabila labelnya mempunyai judul atau kalimat yang lebih dari satu kalimat spasinya harus dipisah dengan %20 sebagai contoh untuk label: Seni Budaya maka penulisannya menjadi Seni%20Budaya.
Mungkin sampai disini dulu Tutorial Blogger tentang Membuat slider otomatis dari postingan kali ini, semoga bermanfaat bagi Anda.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di www.watubudug.blogspot.com