Membuat slider otomatis dari postingan

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat slider otomatis dari postingan dan semoga artikel ini bermanfaat.

---

Membuat slider otomatis dari postingan ini saya buat setelah beberapa hari kebelakang saya memposting membuat slider yang secara manual yaitu pada Membuat Slider Gambar Zinmag Primus dan Membuat Slider gambar keren dengan Nivo Slider dengan slider otomatis dari postingan 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.

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 ]]></b:skin> 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBCcG9gwbrU8qnfwYLqgPGd_d3ob3BJg74wXFo7Tsa2D97XrTGE-hW1vc1d7iQuAn7x7fq7uOe2sEOtq89oHlD7ufmER-BA20P6u091HK3-jcQSUUegTvvAu5hmkR6PHOMpvfPZc_V0Y0/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 </head> 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 Kedu 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 Belajar Komputer Melalui Internet tentang Membuat slider otomatis dari postingan kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 12:37