Artikel ini menjelaskan bagaimana memasang slideshow coinslider yang sudah digabungkan dengan blogger feed sehingga menjadi autoslideshow yang akan menampilkan artikel baik itu yang terbaru maupun berdasarkan label artikel.

Memasang Auto Slideshow CoinSlider di Blogger/Blogspot - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Artikel ini menjelaskan bagaimana memasang slideshow coinslider yang sudah digabungkan dengan blogger feed sehingga menjadi autoslideshow yang akan menampilkan artikel baik itu yang terbaru maupun berdasarkan label artikel.

Memasang Auto Slideshow CoinSlider di Blogger/Blogspot

Memasang Auto Slideshow CoinSlider di Blogger/Blogspot

Coinslider merupakan slideshow yang dibuat dengan jQuery yang memiliki efek transisi yang menarik. Efek transisi yang ada pada slideshow ini yaitu swirl, rain, straight. Karena efeknya yang tidak terlalu banyak sehingga slideshow ini hanya memiliki ukuran (12kb).
Melihat struktur HTML untuk membuat slideshow ini tidak terlalu rumit. Sehingga saya mencoba membuatnya dalam versi autoslideshow (digabung dengan feed blogger). Nah bagi anda yang ingin memasang diblog anda bisa ikuti langkah-langkah yang ada dibawah ini. Sedangkan yang tertarik untuk versi manualnya dapat membaca diwebsitenya workshop.rs.

Menampilkan Add a Gadget diatas Blog Post

Menambahkan Gadget HTML diatas Blog Post

Jika diblog anda belum tampil tombol/tulisan add gadget di atas Blog Posts ikuti langkah berikut untuk menampilkannya:
  1. Pada dashbord pilih Template kemudian klik tombol Edit HTML
  2. Kemudian cari kode <b:section class='main' id='main' showaddelement='no'> lalu ganti rubah showaddelement menjadi yes sehingga menjadi seperti ini <b:section class='main' id='main' showaddelement='yes'>
    NB: Untuk mempermudah dalam pencarian tekan Ctrl+F pada keyboard lalu tulis <b:section class='main' id='main' showaddelement='no'>.
  3. Klik Simpan

Menambahkan gadget HTML dan Script Slideshow CoinSlider

  1. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
  2. Setelah itu scroll kebawah hingga menemukan HTML/JavaScript lalu klik tombol tambah yang ada disudut kanan
  3. Kemudian Masukkan Kode berikut:
    <style scoped="" type="text/css">
    #coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
    .coin-slider{overflow:hidden;zoom:1;position:relative}
    .coin-slider a{text-decoration:none;outline:none;border:none}
    .cs-buttons{font-size:0;padding:10px;float:left}
    .cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
    .cs-active{background-color:#B8C4CF;color:#FFFFFF}
    .cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
    a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
    .cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
    .cs-title strong{display:block;font-size:120%}
    .cs-title p{margin:0}
    .cs-title cite{font-size:90%}
    .cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
    .cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
    var AutoCoinConfig = {  
     url_blog: "http://mkr-site.blogspot.com", 
     MaxPost: 7, 
     cmtext: "Komentar", 
     MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], 
     pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", 
     NoCmtext : "Belum Ada Komentar",
     imageSize :500,
     SumChars : 100,
     tagName:false,
     width: 500,
     height: 250,
     spw: 7,
     sph: 5,
     delay: 3000,
     sDelay: 30, 
     opacity: 0.7,
     titleSpeed: 500,
     effect: '',
     navigation: true,
     links : true,
     hoverPause: true,
     prevText: 'prev',
     nextText: 'next'
    };
    </script>
    <script src="https://ivyth.googlecode.com/svn/js/autocoin.min.js" type="text/javascript"></script>
    NB: Pada line 17 adalah link script jQuery library. Jika di template ada sudah ada silahkan hapus kode ini. Karena pemasangan lebih dari 1 jQuery Library dapat membuat error
  4. Klik Simpan

Membungkus Gadget HTML dengan Tag Kondisional

Jika tahap diatas sudah selesai sekarang tahap pembungkusan gadget dengan tag kondisional untuk mengatur dimana saja slideshow ini mau ditampilkan.
Misalnya gadget itu hanya ingin ditampilkan dihalaman depan/beranda cara sebagai berikut
  1. Pada dashbord pilih Template kemudian klik tombol Edit HTML dan centang pada bagian Expand Widget Templates
  2. Kemudian cari kode <b:section class='main' id='main' showaddelement='yes'>, karena sebelumnya telah ditambahkan HTML widget maka akan terlihat widget type HTML dengan id HTMLxx (xx: nomor widget HTML).
    Misalnya widget HTML dengan id HTML5 yang akan saya tambahkan tag kondisional hanya pada halaman depan/beranda
    Maka akan menjadi seperti ini:
    <b:widget id='HTML5' locked='false' title='' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'> 
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
    
      <b:include name='quickedit'/>
    </b:if>
    </b:includable>
    </b:widget>
  3. Klik Simpan


Opsi-Opsi
Deskripsi
url_blog
Isikan dengan link blog anda misal:http://mkr-site.blogspot.com
MaxPost
Maksumal jumlah post/artikel yang ingin ditampilkan
cmtext
Tulisan Jika terdapat komentar
imageSize
ukuran gambar yang ingin ditampilkan
SumChars
Jumlah karakter yang ingin ditampilkan pada ringkasan
NoCmtext
Tulisan jika tidak terdapat komentar.
pBlank
Backup gambar jika artikel tidak memiliki gambar
MonthNames
Format tulisan pada nama bulan.
tagName
Jika ingin menampilkan artikel berdasarkan tag/label, misalnya tag blogger maka ditulis seperti ini : tagName:"blogger"
width
Lebar dari slideshow.
height
tinggi dari slideshow.
spw
Jumlah kotak pada lebar (jumlah kolom)
sph
Jumlah kotak pada tinggi (jumah baris)
delay
Waktu pergantian slide
sDelay
waktu pergantian untuk kotak pada efek slide(spw dan sph)
opacity
Tingkat tranfaransi (0-1)
titleSpeed
Waktu untuk efek pada pada bagian Judul
effect
Jenis efek pada pergantian slide. pilihan: "random" , "swirl" , "rain" , "straight".
navigation
Jika ingin menampilkan navigasi nilainya: true atau false
links
Jika ingin mengaktifkan link pada gambar. Nilainya :true atau false
hoverPause
Menghentikan slide jika mouse ada diatasnya.
prevText
Tulisan Prev
nextText
Tulisan Next
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

49 comments:

  1. Like This, ^^! Simple and Sweety
    www.bunganajwa.com

    BalasHapus
  2. Ini Responsive Gak mas Satank...?

    BalasHapus
  3. Alexsander Gordon21 Maret 2013 15.32

    kok ga pernah bikin postingan lagi
    aku kan nunggu postingan mas
    cara bikin recent post percategory disidebar
    gaya dan style nya seperti fitured post my extra news
    ;-(

    BalasHapus
    Balasan
    1. di post selanjutnya akan saya buat..

      Hapus
    2. saya sangat tertarik dengan image slider recent post pada template adosive yang mas buat.jika tidak keberatan saya berharap mas mau membagikan caranya, jika sudah ada boleh saya minta link url postingannya,terima kasih :))

      Hapus
  4. keren yah, lebih elegan gimana gitu.. :)

    [ Gabung yuk ke Direktori Backlink Gratis Berkualitas No.1 Indonesia ]

    BalasHapus
  5. aku tunggu yah mas
    aku penggemar setia blog kamu
    :-d

    BalasHapus
  6. mas satank Mkr saya sudah coba pasang slider ini di template JP Station Blue, Tapi Kok setelah saya pasang sidebar malah ketengah post, dan footernya kearah kanan sidebar. Mohon bantuannya :)

    BalasHapus
    Balasan
    1. sama kasusnya seperti saya !

      Hapus
    2. sama seperti saya nih
      www.cpartikel.com

      Hapus
  7. Kak, ini blog saya http://mohnurfawaiq.blogspot.com/ , saya ajari seo blog a kak, saya baru kelas X SMK, tapi saya suka banget belajar tentang blog.

    BalasHapus
  8. KEREN BANG..
    INI YG SAYA CARI..
    MACAM SLIDE SHOW JKT48.COM ...

    BalasHapus
  9. apa bisa next nya di ganti dgn tanda PANAH. ?
    tolong pencerahan nya..

    BalasHapus
  10. ada yg bukan post ndk bang?

    cuma tampilan gambar aja...
    please ;-( ;(( ,,, tolong beri tau cara nya buat slide show macam JKT48.COM ..

    BalasHapus
  11. Keren mas, saya udah make..

    thanks tutorialnya

    BalasHapus
  12. mas klo agar slidenya tidak tampil pada saat dipostingan itu gimana yah mas?? mohon bantuannya mas.. :)

    BalasHapus
  13. halo mas bung, btw kok bisa menggeser sidebar , cara memperbaikinya gimana nih?

    blognya http://selobang.blogspot.com/

    BalasHapus
  14. top markotop....
    thanks gan salam kenal
    www.wahana-kom.blogspot.com

    BalasHapus
  15. saya pengguna template JPstation karya mas satank, saya bermaksud menambahkan slideshow pada halaman depan tapi permasalahanya kok bagian footer dan sidebar jadi acak-acakan? tolong bantuanya mas...
    terimakasih sebelumnya....

    BalasHapus
  16. merhaba ben bu slideri ekledim yanlız sidebar tarafı post yayınının aşağısında kalıyor bunun için ne gerekli örnek site http://joencarlos.blogspot.com/

    BalasHapus
  17. Halo, saya telah menambahkan sisi sidebar slider saja masih di bawah situs sampel pasca-publikasi untuk apa yang kami butuhkan http://joencarlos.blogspot.com/

    BalasHapus
  18. Thx :)
    http://frenzyyakuza.blogspot.com

    BalasHapus
  19. Thanks buat tutorialnya, udah nyoba dan ternyata keren nih slidenya.

    BalasHapus
  20. sister is not nested inside footer comes with a slider please help ;(

    BalasHapus
  21. Punya ku masih error gan, padahal kode no 17 nya udah di hapus, kenapa ya?

    Mohon solusinya,

    BalasHapus
  22. All widgets are getting error from the javascript source https://ivyth.googlecode.com looks like the link is broken

    BalasHapus
  23. mas, widgetnya error nih. jadi ga kebuka. solusinya ya mas. makasih. :)
    http://blog.ridhomf.web.id/

    BalasHapus
  24. mas, boleh share script yang di code.google nya gak?
    script situ dipassword'in -_-

    BalasHapus
  25. http://ex.yakupcetin.com/Eklentiler/BlokSlider/ Çalışır haldeki demo widget

    BalasHapus
  26. iya nih diprotect kyaknya gan.. ;-(

    BalasHapus
  27. Sob, saya udah coba tapi kok gagal ya?
    Saya lihat di demo nya juga gagal. Solusinya dong??

    BalasHapus
  28. script ivyth.googlecode.com nya sudah gak bisa kebuka, jelas slidernya gak muncul
    apa gak di update scriptnya? supaya bisa dipakau lagi

    BalasHapus
  29. good post
    salam WWW.CANOPYBAGUS.COM

    BalasHapus
  30. gan, scriptnya googlecode gak bisa dipake lagi, disuruh sign in.. diupdate donk

    BalasHapus
  31. gagal gan ? aku mau nambahin slide show ...

    BalasHapus
  32. wah ini kontes seo ya.... Keren dah...

    BalasHapus
  33. terima kasih gan infonya...
    keren . .

    BalasHapus
  34. you can see my website about marketing and business online

    ban hang truc tuyen
    aand
    ban hang online

    What do you comment ?

    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: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP