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.


Slider Otomatis
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
feedburner

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

6 komentar :

  1. infonya tambah keren aja ni...
    salam blogwalking

    BalasHapus
  2. Makasih atas follownya..,
    Dan kalau boleh kasih saran, Tolong dong bpk posting cara membuat link balasan komentar seperti di blog bpk ini...,
    Makasih sebelumnya...
    Semoga sukses selalu...

    BalasHapus
  3. Kenapa kagak bisa di pasang di blog an gan???

    BalasHapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |