Minggu, 23 Maret 2014

Membuat Slideshow Gambar Ala Yahoo

mas template
Browse » Home » , » Membuat Slideshow Gambar Ala Yahoo

Membuat Slideshow Gambar Ala Yahoo

Meskipun sudah lama sekali saya tidak menulis karena banyak sekali kesibukan, kali ini saya akan menyempatkan waktu untuk berbagi dengan teman-teman semua mengenai cara membuat slide gambar seperti yang biasa kita lihat di id.yahoo.com. Sebelumnya saya sudah pernah membahas tentang memasang gambar slide ala drakon template dan zinmag primus, bagi yang belum menyimak bisa dilihat kembali.

Banyak saya temui blog yang sudah memakai animasi image slider dengan berbagai macam variasi. Blog akan semakin menarik dan lebih hidup dengan tampilan silih berganti dari text dan image yang disetting pada slider. Penempatan animasi slider Yahoo ini biasanya diletakkan tepat di bawah header tengah. Namun, Anda pun bisa menyesuaikannya pada desain template blog masing-masing. 

slideshow yahoo

Gambarnya kira-kira seperti diatas, jika anda ingin melihat demonya bisa dilihat disini. Bagaimana? Jika temen-temen tertarik untuk memasang slideshow ala Yahoo di blog masing-masing, maka bersiaplah dipusingkan dengan begitu banyaknya kode CSS dan setting gambar, link serta setting teks yang lumayan membingungkan. Kalau sudah terbiasa sih, pasti gampang. Paling tidak patut dan layak untuk dicoba.

Langkah Pertama
  1. Login ke blogger dengan akun anda
  2. Kemudian klik Tata Letak > pilih Edit HTML
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>
Langkah Kedua
  1. Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>
  2. Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti yang ada di demo, letakkan kode berikut di bawah kode diatas :
  3. Jangan lupa, jika anda sudah memasang kode javascript untuk waktu diatas, kode <body> pada template harus diganti dengan :
      <body onLoad='goforit()'>
  4. Save/simpan template terlebih dahulu sambil sejenak istirahat, sabar ya siapkan secangkir kopi atau teh biar agak adem sambil mendengarkan musik kesukaan anda. Masih ada satu langkah lagi
Langkah Ketiga
  1. Sekarang anda harus membuat satu kolom di atas postingan untuk meletakkan kode slide nantinya. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>
    view plainprint?
    1. /* Slide Content 
    2. ----------------------------------------------- */  
    3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;  
    4. word-wrap: break-word; overflow: hidden;}   
    5. .slide {color: #666666;line-height: 1.3em;}  
    6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
    7. .slide li {margin:0;padding-top:0;  
    8. padding-right:0;padding-bottom:.25em;  
    9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
    10. .slide .widget {margin:0px 0px 6px 0px;}  
  2. Kemudian untuk memunculkannya pada template (diatas postingan), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
    view plainprint?
    1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
    2.       <div id='slide-wrapper'>  
    3. <b:section class='slide' id='slide' preferred='yes'/>  
    4.       </div>  
    5. </b:if>   
  3. Setelah anda membuat satu kolom diatas postingan, klik menu Tata Letak >> Elemen Laman
  4. Klik Tambah Gadget >> pilih HTML/Javascript
  5. Copy kode di bawah dan letakkan di kotak HTML/Javascript
    Keterangan :
    -  Warna biru : URL image
    -  Warna merah : URL post
    -  Warna kuning : Ringkasan post
    -  Warna hijau : judul post
  6. Jika layout pada template Anda sudah terdapat satu kolom kosong di atas post, langkah ini tidak perlu. Langsung saja add gadget kemudian letakkan kode script diatas.
  7. Kemudian save/simpan template selesai sudah
Ribet banget ya, kalau ribet nggak usah dipasang masih banyak slider lain yang lebih gampang cara memasangnya dan tidak kalah menarik dengan slider Yahoo ini. Saya hanya memberikan alternatif lain untuk menghias blog agar tampak lebih menarik. Jika teman-teman sering meringkas kode javascript yang terlalu panjang di googlecode, sebaiknya diringkas saja selain terlalu panjang juga akan meringankan loading blog anda.  Selamat mencoba dan berpusing ria jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah. Jika ada waktu senggang Insya Allah saya jawab.

* Slider source by Borneo Template and plugin Yslider for Wordpress by Andrea Ferracani
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 Creating Website

91 comments:

  1. sipp gan ..
    thank's atas informasinyaaa .. !!
    Semoga sukses ..
    jngan lupa kunjungi blog saya

    http://hariezx6.blogspot.com

    Klo Bisa Follow yaa ..
    heheh
    Reply
  2. sory gan "Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti yang ada di demo, letakkan kode berikut di bawah kode diatas : " taro kodenya dimana??
    Reply
  3. @:
    Baca lagi pelan-pelan om, jangan terburu-buru. Coba baca kalimat yang saya kasih bold ini letakkan kode berikut di bawah kode diatas letakkan saja kode itu di bawah kode yang sudah ditaro sebelumnya...
    ocree...
    Reply
  5. Sory gan d blog saya gak bisa seperti yang ditampilkan seperti demo??
    Reply
  6. @:
    Santai aja kali om... hehehehe. Kalo mau template yang udah ada yahoo slidernya kirim aja ke email johnytemplate@gmail.com nanti dikirim scriptnya
    Reply
  7. hehe.. sudah saya kirim gan templatenya.. mohon bantuannya y.. :-)
    Reply
  8. askum gan,, ane coba ni ceritanya,, tapi ko lebarnya ga bisa ngepas ya? dah coba semua yang ukuran lebarnya dicoba tapi ga berubah,MOhon pencerahan ni gan buntu kayanya,, makasih,,salam
    Reply
  9. @:
    Yng harus diperhatikan, misalnya lebar kolom untuk tempat slider di template Anda 400px, maka untuk container anda kurangi 20px
    kemudian untuk pagination (paling bawah) anda bisa kurang 10px menjadi 390.
    setelah itu anda tingga menyesuaikan untuk gambar thumbnail kecil yang ada di bawah.
    Contohnya seperti diblog ini http://blackbauty-template.blogspot.com/
    Reply
  10. @:Mantap gan thanks ni ilmunya,, disini komplit abis,, ane jadi bulak balik,, kalo ntar ada yang ga mudeng lagi boleh nanya lagi ya gan..hoho
    Reply
  11. keren gan infonya.. tapi sepertinya byk bgt scriptnya ya. saya tkut sizenya jd berat
    Reply
  12. @:
    Iya kode2 terlalu panjang, tapi mas Fazri bisa meringkas sebagian kode script diatas di google code sehingga lebih ringan
    Reply
  13. Gan Mkasih bnget ya gan//////////
    ya muga 2 aen bisa utrak atik sendiri
    Reply
  14. code body gak ketemu gan,,,
    adanya body onload='new Accordian(&apos;basic-accordian&apos;,5,&apos;header_highlight&apos;);'
    Reply
  15. @:
    Ya itu sama aja, karena kode itu memang saya rubah agar accordion tab nya bisa jalan.

    Makasih
    Reply
  16. Saya udah coba atur size slidenya tapi gak pernah sesuai seperti diblog http://blackbauty-template.blogspot.com/.
    Klo boleh, saya mau template yg ini saja. :D
    Reply
  17. @:
    Template yang mana bro... bisa lebih spesifik.
    Tinggalkan email anda nanti saya kirim ...
    Reply
  18. Judul pada gambar THUMBNAIL diblog saya kenapa tulisannya besar ya?
    Reply
  19. @:
    Coba cari kata uppercase pada template anda, ganti dengan none
    Reply
  20. Template yg seperti di http://blackbauty-template.blogspot.com/ mas. Saya udah berburu template kemana-mana tapi lebih sregg sama tempalte yg satu ini, ada Yahoo Slider-nya. Klo mas berkenan tolong kirimi saya ke obugara@gmail.com.
    Thanx ya :).
    Reply
  21. @John L
    Yah gemana sih bro, template itu kan udah saya share
    lihat bagian bawah artikel disitu udah saya sertakan lengkap sama scriptnya tinggal download aja.
    Reply
  22. Okay bro, thanx berat...
    Reply
  23. Maaf bor gak konek nih. Sorry klo merepotkan. Btw Thanks berat ya . .
    Reply
  24. bro templetnya kok ga sama jadinya, sya mau yg ini neh http://blackbauty-template.blogspot.com/
    Reply
  25. @:
    Template itu bisa di download baca bagian bawah ya
    Reply
  26. thank banget ea atas informasi nya sekarang blog ku jadi lebih keren.... kalau mau berkunjung ke blog ku silahkan di

    http://gamerzamz.blogspot.com/
    Reply
  28. berhasil kang
    makasih tutornya sangat bermanfaat
    saya masih merancang template nih http://nnaufal.blogspot.com dengan adanya slide yahoo ini jadi tambah keren aja blog saya :D
    Reply
  29. pengen nyoba jadinya salam kenal Gan...sukses selalu
    Reply
  30. masih atas artikelnya,, tapi kalo misalnya gambarnya dilebarin gimana caranya mas?
    Reply
  31. Ini dia yang saya cari,....
    tpi di buat slider otomatis gmn mas...?
    kalau itu kan jadinya manual harus masukkan sendiri..??

    Di tunggu mas slider ala yahoo yang otomatis hehee,...
    Reply
  32. Sob, kode yg tdk ada<div id='main-wrapper ,mohon petunjuknya, syukron.
    Reply
  33. wah situs ini memang sangat top artikelnya!!! salam kenal facewoman.blogspot.com
    Reply
  35. susah om,, ngga' mau jadi".. padahal tmplate sy sudah mirip yahoo, tinggal slide shownya saja,, mampir ya om>> i-dil.blogspot.com
    Reply
  36. kok gak jalan slide nya mas
    Reply
  37. MANTAPPP !!!
    Thankss Gan Tutorialnya ...
    Reply
  38. gagal k....postingannya jadi turun ke bawah bukan ke pinggir...udah 2-3x nyoba...tetep gagal..apa ada yg miss ?..thanks klo di kasih tau pencerahannya...utk blog2 yg laen jg kebanyakan copy paste jadi kalimat2 nya sama seperti kata 2...
    Reply
  39. hi I would like to ask some help I want this slider I follow the rules but not working on my blog.. thank you here's my blog http://einews.blogspot.com/
    Reply
  40. @:
    You have two jquery.min.js in your template, remove one.
    And remove your slider default in your template first before you add this slider, cause that can make a conflict script
    Reply
  41. kak..
    kode ini div id='main-wrapper' kok gk ad ya

    padahal sudah saya seacrh berulang2 tpi tetap aj gk ad..

    pencerahan kak..
    newbie ... :D
    Reply
  42. gan kok mun cul nya di home doang., kalau buka postingan kok nggk muncul.,. mohon pencerahan nya gan.,.
    Reply
  43. @:
    Coba baca tips saya di
    Reply
  44. mantap gan sudah saya pasang,
    namun tolong petunjuk selanjutnya untuk mengaktifkan otomatis dengan feed post.
    karena pd kode jquery ada suggest begini.
    // when the DOM is ready, convert the feed anchors into feed content.
    http://www.radirachim.web.id
    mail: radirachim@ymail.com
    Reply
  45. mantap gan ..
    :D
    makasi infonya ..
    Reply
  46. gan, sms k no. aq donk.. aq mau tanya2 soal blog donk.. nih no. HP aq 085747175377
    Reply
  47. waw is amaging , saya pengen coba gan.web kamu bagus tuh I like it
    Reply
  48. Kalau mau buat slideshow yg sprti di 'Johny Joss Banget Blogger Template', itu bgmna crnya y?
    Reply
    Replies
    1. Coba baca artikel ini :
      http://creatingwebsite-maskolis.blogspot.com/2012/04/membuat-slider-carousel-otomatis.html
      Tinggal diperbesar ukuran gambarnya
  49. Bro, saya udah ikutin cara diatas, tapi kok jadinya bukan slider kayak yahoo ya?? tapi jadi tampilan foto biasa (bukan horizontal tapi vertikal), itu kenapa ya??
    mohon bantuannya..

    Trims
    Reply
  50. Di HTML Blolg saya kok tidak ditemukan kode: div id='main-wrapper'. Gimana solusinya? Terimakasih.
    Reply
  51. bro,untuk resize ukuran slide nya itu yang di rubah yang mana? terutama lebar slideshow nya
    ea di blog ku kurang lebar slideshow nya...
    Reply
  52. gkgkgk...asem gan...templat ane langsung berantakan ... jQuery yg udah ada gak fungsi jadinya ... ada trik nya biar fungsi semua gak ??? kepengen tuh yg kek gitu T_T
    eh iya,,,tolong di bales yak...kalo perlu lewat email aja , gimana caranya biar yg jadi gambar slide tuh recent post ato popular post gitu ... thanks gan seblumnya
    Reply
  53. kanng kolis saya ada sdikit prtanyaan nih...
    - kan Slide ala Yahoo sperti yg akan jelasin d atas uda slesai..
    trus saya pengen ngilangin 'Tab View Widget per Label' di blog ane... code yg d apus yg mna yah...?? mohon bntuannya...
    [TKP: www.g4mezone.com]

    Makasih..
    Reply
  54. sob ane udh coba dan akhir nya berhasil, tapi kenapa yah posisi nya gk pas berda di tengah2, di lebih condong ke kiri.....
    mohon bantuan nya..
    Reply
  55. mas slidenya sudah saya pasang tapi koq slider saya yang lain terganggu dan ukurannya pun tidak pas pd template saya bagaiman nih maskolis, tolong dibantu. Apakah maskolis mau memasangkan slider yahoo ini pada blog saya. saya tunggu balasannya. help me.
    Reply
    Replies
    1. Mas Icuk, setahu saya itu karena terjadi konflik pada dua jquery yang digunakan di template panjenengan.
  56. iya ribet banget.. :D but (y) makasih ilmunya kk.. cun dulu :*
    Reply
  57. - Warna biru : URL image
    - Warna merah : URL post
    - Warna kuning : Ringkasan post
    - Warna hijau : judul post


    ynag di maksud warna warna itu dmnnya yea,,,,
    Reply
  58. Your blog posts and articles are very interesting and make me become more scientific, keep your blog so I can visit again to see your blog posts and articles later .. thanks for the info
    Reply
  59. Thanks udh share gan ...
    tpi G' jadi di blog sya ....
    sya cari slide yg lain aj yg ad di blog maskolis ini ....
    Reply
  60. gak bisa otomatis ganti ya gan?harus ditulis sendiri deskripsinya dan gambarnya ya
    Reply
  61. makasih telah bantu, tapi masih ada yang kurang, nih. Gimana cara gantiinin feed slide postnya agar sesuai dengan posting lebel yang dibuat di blogku? Misalkan akan ku masukkan slide post HEADLINE. Coba mampir ke blogku: http://sukabuminews.blogspot.com
    Reply
  63. Gan, tanggalnya kok gak bisa muncul ya disini http://tanikedelai.alamfay.com/ . mohon bantuannya.
    padahal uda sesuai langkahnya.
    Reply
  64. mas, ga ada kode lgi?, jadi langsung automatic kluar langsung recent post atau artikel terbarunya di slide show nya
    Reply
  65. mas, tutorial diatas sudah saya coba, tapi kenapa ya, slider yahho-nya tidak berfungsi, apakah karena template yang saya pakai tidak cocok ? soalnya saya pakai template johny kenthir banget, mohon pencerahannya mas.
    Reply
  66. Akhh Tidakkk banyak sekali scriptnya...sy save aja dulu linknya..Nanti baru coba. Thx Infonya Admin. GBU
    Reply
  67. Widget sudah kami pasang di http://adiwimintermas.blogspot.com tapi masih belum disesuaikan. Jancok, keren Mas. Terima kasih..
    Reply
  68. Mas, gimana yah pasang slideshow kayak gini di pstingan ??? bs gak yah ???
    Reply
  69. mas ko diblog saya ga bisa ya ? ga ada gambarnya.. padahal jquery.min.js udah aku hapus 1
    Reply
  70. gan bsa mnta scrip yng sdh jd gk
    klw bsa qrim k andi.syaputra45@ymail.com
    Reply
  71. thanx infonya gan......... kalau ada waktu iseng, maen di http://d-banx.com ya
    Reply
  72. mas kolis yang langkah ketiga itu di template apa d add javascript atau diposting blog
    makasih
    Reply
  73. Thanks gan,, saya sudah ngerti kok,,, dan saya sudah coba lalu hasilnya memuaskan,,,
    semoga sukses yea,,,!! god job
    Reply
  74. i am not find code
    ]]>
    in template
    here link

    http://swisscomswitzerland.blogspot.com/
    Reply
  75. Terimakasih sangat membantu, trik ini berhasil. Akan tetapi, bagaimana cara agar melebarkan tampilan slide nya dan membuat nya berada di tengah? Dimana saya harus merubah nya? trims
    Reply
  76. Mas Kolis untuk kode
    ko saya engga bisa nemuin ya?
    Reply
  77. Sugeng siang mas, kok slidernya gak mau jalan, gambarnya malah berantakan kebawah. Itu karena apa ya mas ?
    Reply
  78. Halo mas, klo mau ngatur lebar slide nya yg mana ya?
    Reply
  79. Hebat banget Gan, kalo ada yg lebih simpel tolong dibagi gan, saya pengen slider untuk recent post dengan image plus kutipan teksnya dan letaknya di bawah header tepat selebar header, bagaimana caranya, please bantu saya Gan. Kalo saya minta Agan mempermak template agar bisa seperti yg saya maksud, ngirimnya kemana Gan, harap maklum newbie banget nih. Matur nuwun.
    Reply
  80. Gan untuk waktunya kok nggak jadi...? sebabnya apa ya...?
    Reply
  81. artikel yang bermanfaat sekali...
    ane coba dulu ya cara nya...

    www.kartunamamurah.com
    Reply
  82. pada langkah 2 nomor 3
    di blog edit HTML saya koq ngga ada?mohon pencerahannya?
    Reply
  83. tutorialnya emang mantap sob,
    tapi pusing bener kayanya..
    kunjungi jg blog ane sob
    http://188bet-sportsbook.blogspot.com
    Reply
  84. Kerennnnnnnnnnnnnn.......... hehehehe..........
    Reply
  85. wah sangat membantu,tampilan saya makin keren terimakasih bos..
    http://gsb12.blogspot.com/
    Reply
  87. Kalau supaya otomatis gimana gan ?saya nyoba dengan script seperti "Cara membuat Slide otomatis dengan label tertentu" itu cuma muncul gambarnya, tapi deskripsinya g bisa gan.Please pencerahanya gan...
    Reply
  88. saya tidak bisa menemukan kode div id='main-wrapper' , bagaimana ini ??
    apa ada masalah dg blog saya ??
    Reply
  89. gan kalo buka postingan lama ko slidenya ilang yah ?
    Reply
No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly
 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger
di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Vistanaya Ocha On Air