53 Featured Content Slider Using JQuery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

featured content slider using jquery     

    View Demo



Banyak hal yang bisa kita dapatkan dari dunia maya ini, baik yang positif ataupun negatif.. tinggal bagaimana kita memfilter diri untuk menyaring yang baik dan postif. Saya merasakan hal ini pada diri saya, saat berselancar di dunia maya, blog walking keblog teman-teman, bahkan sekedar melihat-lihat galery template, theme atau layout web site, saya menemukan ilmu dan informasi baru bahkan terkadang  inspirasi untuk postingan yang akan saya publikasikan diblog ini sampai rancangan planning yang ingin saya lakukan dimasa mendatang.
Alhamdulillah saat blogwalking kesuatu web site, saya melihat featured content slider ini, rasa keingintahuan saya mengantarkan saya tuk search digoogle bagaimana cara pembuatannya. Dan saya menemukan tutorial yang saya cari dari Web Developer Plus.
Nah disini saya ingin berbagi bagaimana caranya agar tutorial tadi bisa diterapkan khusus untuk template blogger.
Berikut tutorial menambahkan featured content slider menggunakan JQuery ini pada template blogger.
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
3. Tambahkan juga script berikut setelah kode diatas
<script>$(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });</script>
Catatan: 5000 adalah kecepatan link hover berpindah dari satu content ke content berikutya, sobat bisa mengganti angka itu sesuai selera
4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>
#featured{
    width:400px;
    padding-right:250px;
    position:relative;
    height:250px;
    background:#fff;
    border:5px solid #ccc;
}

#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}

#featured .ui-tabs-panel{
    width:400px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}

#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}

#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('images/transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{ 
  text-decoration:underline;
}
catatan: Silahkan edit css diatas dengan menambahkan image selected item, image transparent, atau  jika sobat ingin mengganti ukuran dari widget dan mengganti warna dari hover link dll. Untuk panduan kode warna lihat disini
4. Tambahkan kode HTML berikut diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget
<div id="featured" >
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="images/image1.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image2.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
        <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image3.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >35 Amazing Logo Designs</a></h2>
        <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
        </div>
    </div>
</div>
Catatan: Silahkan edit kode diatas dengan mengganti judul, deskripsi dan link content
6. Simpan template
Selesai.
Semoga bermanfaat.
View Live Demo


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

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 Tips Trik Blogging

53 komentar :

  1. Thanks tutor nya, bermanfaat bagi saya yang ingin selalu mencoba sesuatu yang baru.

    BalasHapus
  2. Wagh.. bagus ukhti Insya Allah ku coba langsung neh hehhehe

    BalasHapus
  3. edit kode diatas dengan mengganti judul, deskripsi dan link content

    maksudnya gmna nieh??
    yg paling akhir aku rada bingung gtu Ukhti...

    BalasHapus
  4. @ Chomisah: "#fragment-1" ukhty isi dgn link content pertama.
    "images/image1-small.jpg ukhty isi dgn url image kecil dari content.

    Demikian seterusnya tuk fragmen 2 isi dgn content ukhty yg kedua ...

    Judul content diapit tag h2 sdng descripsi diapit tag p

    Smg bisa membantu?

    BalasHapus
  5. wah keren..
    Terimakasih yah atas tispnya bagus sekali menambah pengetahuan saya tentang desain blog..
    sukses selalu^^

    salam blogger :D

    BalasHapus
  6. lihat live demonya bagus mba...
    tapi pusing buatnya...hehe...
    makasih tutorialnya.

    BalasHapus
  7. terus berbagi ilmunya ya mba...

    BalasHapus
  8. Tutorial yang sangat jelas, Awalnya saya gagal untuk mencoba trik ini (waktu itu ada script yang terhapus), namun sekarang saya berhasil.

    Terima kasih.

    BalasHapus
  9. mantap banget...
    Ilmu baru, makasih banyak sudah berbagi
    Salam Taksin

    BalasHapus
  10. variasi konten template yang dinamis biar ga bosen....thank's.

    BalasHapus
  11. salam,
    memang tidak bosan membaca tips disini, sering saja yang paling 'updated'. terima kasih ya..

    semoga sejahtera selalu

    BalasHapus
  12. Sebagai rasa terima kasih aku mau berbagi link dgn 3 buah blogku yg PR 3, link anda akan kuletakkan ke tiganya tanpa harus dilink balik ke 3 blog tsb, jadi oneway link, mau

    BalasHapus
  13. blog aku terhapus...
    silakan hapus saja backlink yang ada...
    saya masih berharap mendapatkan backlink dengan blog saya yang baru.
    terima kasih

    BalasHapus
  14. Saya lihat demonya bagus sekali mba.. cuma kira2 sebelum di pasang n sesudah di pasang berapa nambah berat loadnya ya..

    BalasHapus
  15. Wah tutorial yang mantap nih .. live domoonya juga ok .. makasih telah berbagi

    BalasHapus
  16. g tau knp bisa terhapus...
    aku sedih....
    capek2 bkn blog PR1, trus dikirimin email, ktanya blog aku SPAM.....
    hiks..hiks...
    :(
    hapus aj link Ikut Ngeblog, ntr diqira broken link..

    BalasHapus
  17. @ Nova: Turut prihatin. PR jgn dipikirin insyaAllah ntr naik lg. Hanya dollar dari google adsensenya bagaimana? Heh smg g' dihapus jg ya?!

    Iya nov, ntr ana ganti link ikut ngeblog dgn link br nova anchornya nice blog ya?

    BalasHapus
  18. terima kasih ya masih mau kasih link diblog ku yang belum ada apa2x....
    moga aj ni awal dari kesuksesan aku....
    sekali lagi terima kasih ya...
    aku jga udah taroh link

    BalasHapus
  19. mantaps mbak anaa...nah getu dong biar kami gak bosen2 kunjung terus ke sini..makasih mbak artikel nya..betul2 saling berbagi informsi

    BalasHapus
  20. Ass..maaf mbak.., link footer mana yg hilang, semalam sy ngedit template nggk bermaksud ngilangin linknya, sbenernya emang mau dipasang lagi linknya tp blm sempat, klo mbak nggak percya, silahkan aja lihat lagi, dan maaf masalah konten blogsaya emang kenapa mbak, saya rasa, nggak ada yg nyeleneh, blog saya cuma saya isi, masalah cinta, tips kesehatan, blog, sama tips seks, bukan kah itu masih dlm hal yg wajar2 saja lagi pula yg baca orang dewasa, cuma sekedar tips bukan blog porno, saya rasa orang pun bisa mengeambil hal2 positif nya, maaf sekali kalo saya buat salah atau yg menyinggung, karena saya tdk mau mngecewakan seseorang, kalo mbak keberatan templatenya dipakai dblog yg mungkin mbak rasa nggak sesuai isinya, nanti saya ganti templatennya. :) Sekali lagi maaf, kalo saya bikin2 salah, karena sy nggak ingin mengecewakan atau mencari musuh, slm...peace.. btw aku udh follow tuh mbak, semoga mbak memaafkan, dan ingin bershbat dgn org sperti sy.

    BalasHapus
  21. siiiip ilmunya nih, sangat membantu. trims sukses selalu n tetap semangat

    BalasHapus
  22. @ Nova: sama-sama nov
    @ Haniseh: terimakasih apresiasinya
    @ rc: wassalamun'alaik. sy g' baca isi blog anda, g' nyaman aja dgn image2 slide wanita2 yg tdk sadar dirinya dieksploitasi. kasihan jg sm laki-laki muslim yg melihatnya.

    soal link footer khn sblm mendownload sy dah smpaikn. gpp. itu hak anda.

    sy jg tdk suka punya musuh. sblm anda minta maaf sy dah maafin. sy jg minta maaf klu cara sy keliru!

    @ harto: terimakasih apresiasinya

    BalasHapus
  23. Nice posting sobat, mantab - mantab contentnya, Good post

    BalasHapus
  24. salam sahabat wahai ukhti..
    scriptnya simple dan dicoba berhasil memang setelah di upgrade lebih praktis,weleh kehapus lagi milik saya he..he..thnxs n good luck maaf baru sempat kunjunga ya..

    BalasHapus
  25. @ Blog...: Thanks apresiasix
    @ Dhana: Alhamdulillah, ukhty mah masyaAllah pinter jd pasti langsung berhasil. Apax yg kehapus? GPP

    BalasHapus
  26. tapi nambah berat buat loading ga yah, takute tar loadingnya lama?

    BalasHapus
  27. Wah mesti sering mampir ke sini kalau mau utak atik blogmah ya..

    BalasHapus
  28. bagus infonya mbak..
    salam kenal

    BalasHapus
  29. salam silaturrahmi balik ...
    akhirnya ketemu juga .....

    BalasHapus
  30. @ kak cipa: tdk jg, coba aja dl.
    @ richo: setiap nambah script pasti nambah loading page, tp cepat tdk jg tergantung koneksi. klu sekedar eksperimen tak ada slhx dicoba.
    @ yuni: terimakasih sering2 ja mampir
    @ kang tejo: terimakasih apresiasinya
    @ ahmad: terimakasih ninggalin jejak mmg tuk diikuti. ketemu apa?

    BalasHapus
  31. mantab ni tutorialnya sobat...

    BalasHapus
  32. thx infonya, yg penting ga terlalu nambah berat load page..
    salam kenal y....

    BalasHapus
  33. @ Fais: MasyaAllah, terimakasih apresiasinya
    @ Lifestyle: Sama-sama, iya plg tdk sbg bahan pelajaran tuk desain template sendiri. Terimakasih apresiasinya

    BalasHapus
  34. Matep banget deh tipsnya...maklum lah saya orang culun hhehe

    BalasHapus
  35. masih belum paham nih mbak fungsinya buat apa ya, duh :tuing-tuing:

    BalasHapus
  36. @ dede: terimakasih apresiasinya, silahkan dicoba
    @ oen: manfaat atau fungi dari featured post slider atau menu slider sbg selain u/mempercantik tampilan blog yg utama sbg promosi postingan, sering dilihat tentu insyaAllah akn meningkatkan click popularity, nambah page view dll

    BalasHapus
  37. Hmm..bagus juga, meski agak ribet buat saya yg gaptek bahasa HTML. Ini cocoknya buat highlight iklan mungkin ya..

    BalasHapus
  38. saya doeloe pake, skrg aku ilangin..hihihihi
    soalnya rada berat...huehuehue

    BalasHapus
  39. ampun diriku gaptek bosss suerrrrrr
    ampun bos

    BalasHapus
  40. lha kalo soewoeng ajah gaptek apalgi diriku yang plasunya soewoeng

    BalasHapus
  41. @ Darin: blh jg
    @ Beben: iya terserah yg punya blog
    @ Seowoeng & Kosong: Tp mantap SEO khn?

    All: Terimakasih kunjungan dan apresiasix

    BalasHapus
  42. kunjungan balik...

    wah bagus juga nih,coba jg ahhhhhhhhh

    lam kenal......!!!

    BalasHapus
  43. saya mau ganti slide yang ini aja ah, soalnya slide saya keliatannya berat, izin pasang di blog saya ya

    BalasHapus
  44. @ Rudyxp & Suraduja: Silahkan smg berhasil
    @ Kintaro: Jika anda bisa menerapkan tutorial umum itu ketemplate blogger silahkan sy dah cantumkan link diatas dgn jelas.

    Terimakasih apresiasi dari anda semua.

    BalasHapus
  45. wah dpet ilmu baru nih,,, :D
    saya coba ya..
    tp klo slah tolong di bntu ya.. :D

    BalasHapus
  46. haiiiiiiiiiiiiiiiii...!!! (teriak kencang dari ujung lorong...) wkwkwkwk.... alo mba, gadis dateng lage...

    BalasHapus
  47. Mantabbb tutorialnya sobat, Good informasi

    BalasHapus
  48. bagian images/image1-small.jpg di ubah imagenya hasilnya kok beda.
    http://4.bp.blogspot.com/-_8Svn5nJwyE/UduLM7K6JfI/AAAAAAAACcU/qxIVuZUlhnw/s1600/Capture+-+%27MTdemontion%27+-.jpg

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!