meletakkan featured post dibagian atas postingan merupakan hal yang biasa. Tapi meletakkannya di sidebar itu jarang dilakukan. Nah dengan widget ini anda dapat meletakkannya pada sidebar sehingga terlihat lebih menarik. Selain menampilkan artikel terbaru juga dapat menampilkan artikel berdasarkan tag tertentu.

Sidebar Featured Post dengan CSS dan jQuery - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

meletakkan featured post dibagian atas postingan merupakan hal yang biasa. Tapi meletakkannya di sidebar itu jarang dilakukan. Nah dengan widget ini anda dapat meletakkannya pada sidebar sehingga terlihat lebih menarik. Selain menampilkan artikel terbaru juga dapat menampilkan artikel berdasarkan tag tertentu.

Sidebar Featured Post dengan CSS dan jQuery

Sidebar Featured Post dengan CSS dan jQuery

Sebelumnya saya pernah membagikan featured post seperti ini, tapi untuk ditempatkan pada bagian atas posting. Sedangkan pada featured post ini untuk diletakkan pada bagian sidebar.
Script yang saya gunakan pada sedikit berbeda agar dapat digunakan pada sidebar. Karena biasanya bila diletakkan pada sidebar tidak hanya untuk artikel terbaru tapi juga untuk label-label tertentu.
Bagi anda yang tertarik untuk memasang diblog anda bisa ikuti cara berikut ini:

Menambahkan gadget HTML dan Script Featured Post

  1. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget yang ada pada sidebar
  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">
    ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
    ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
    ul.rcentside{width:100%;height:500px}
    ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
    ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
    ul.rcentside img{border:0;width:100%;height:100%}
    ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
    ul.rcentside li:nth-child(2){left:0;top:50%}
    ul.rcentside li:nth-child(3){left:50.5%;top:50%}
    ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
    ul.rcentside  .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
    ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
    ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
    ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
    ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
    ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
    ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
    ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
    ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
    .buttons{margin:5px 0 0}
    .buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
    .buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
    .buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
    </style>
    <div id="featuredpostside"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="https://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
    //<![CDATA[
    FeaturedPostSide({
    blogURL:"http://mkr-site.blogspot.com",
    MaxPost:8,
    idcontaint:"#featuredpostside",
    ImageSize:300,
    interval:5000,
    autoplay:true,
    tagName:false
    });
    //]]>
    </script>
    NB: Pada line 29 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


Opsi-Opsi
Deskripsi
blogURL
Isikan dengan link blog anda misal:http://mkr-site.blogspot.com
MaxPost
Maksumal jumlah post/artikel yang ingin ditampilkan
idcontaint
ID tempat slideshow akan ditampilkan
ImageSize
ukuran gambar yang ingin ditampilkan
interval
Waktu pergantian slide. satuan dalam milidetik
autoplay
Jika ingin menampilkan slide yang bergerak secara otomatis: pilihan true atau false
pBlank
Backup gambar jika artikel tidak memiliki gambar
MonthNames
Tulisan pada nama bulan. Defaultnya seperti ini: MonthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
tagName
Jika ingin menampilkan artikel berdasarkan tag/label, misalnya tag blogger maka ditulis seperti ini : tagName:"blogger"
NB: Jika ingin merubah warna birunya dengan warna yang lain silahkan ganti kode warna #2E8DCE dengan kode warna Heksa yang anda inginkan menggunakan tool ini Generator Kode Warna Heksa.

Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

68 comments:

  1. Kalau mau modifikasi featured slider manual menjadi otomatis script yang mana tuh yang ditambahkan? Ajarinki dl, bnyk draft tutorial membuat slider anaa yg lama, blm smpat posting krn skrg kayakx zamanx org2 nyari yg otomatis. He.

    Ini karena anaa prnah lama fakum ngeblog draftxpun jd usang, skrg jg lagi...

    BalasHapus
    Balasan
    1. intinya mengerti susunan HTML untuk memanggil slider secara manual..
      kemudian membuat output dari feed blogger yang sama dengan susunan dari slider manual tadi..
      lalu perintah untuk menjadikannya slideshow diletakkan dibagian akhir dari fungsi outputnya..
      nanti saya akan coba buat bagaimana penjelasannya di post yang lain, menggunakan contoh coin slider..


      Hapus
  2. Thanks, Alot ^^! Nice N Simple
    www.bunganajwa.com

    BalasHapus
  3. pertamax :d

    good bagus buat di terapkan di blog gue

    BalasHapus
  4. serasa berada di blognya taufik nurrohman!!!
    fiturnya perasaan banyak dr sana nih blog :-d
    keep creativity beroooo :-b

    BalasHapus
  5. untuk mengganti sidebar "popular" di template anda darkred dengan sidebar featured post yg ini kyk apa caranya? :-?
    yg ku ganti popularnya malah temasuk di label tampilan featured postnya. ;-(

    di tunggu jawabannya. :-t

    BalasHapus
  6. mas gimana cara buat recent post percategory di sidebar
    kyk yang di situs Engadget itu

    BalasHapus
  7. Slidenya keren gan, klu membuat slide berdasarkan label dengan fitur slide ini bisa ga gan ? Mohon pencerahannya :), Thank you

    BalasHapus
  8. Why dont you add google translate to your blog?

    BalasHapus
  9. sidebarnya bisa buat khusus label gak bang atau buat popular post
    mohon bimbingannya bang (p)

    BalasHapus
    Balasan
    1. ternyata bisa
      aku kurang teliti baca opsinya
      makasih bang

      Hapus
  10. gan..ane berhasil nyobanya..tapi setelah itu ..submenu sroll nya gak nayala gan..kenapa itu gan?

    BalasHapus
  11. waaaaahhhhh bisaaaaaa gan....... sambangi dong blog ane :D http://sumatracyber.blogspot.com/ blog ini keren juga isi2nya... ane mau nyoba ngubah arsip jadi kalender tapi kayaknya susah.. ajarin ane donk gan :D

    BalasHapus
  12. assalamu'alaikum,.
    mas boleh minta Sidebar kayak punya blog ini gk mas.. :)) :)) :)) :)) :)) :))

    BalasHapus
  13. ;(( keren kali ini tipsnya!! tengkyu Gan, ane jadi terharu...maen-maen ke blog ane ya cheer
    http://rickorockers.blogspot.com/

    BalasHapus
  14. I dont see any Google translate in your blog, seems like you have good post.Famous Gift Card

    BalasHapus
  15. Gan link js scrip https://ivyth.googlecode.com/svn/js/featuredpostside.min.js

    harus menggunakan password, mohon untuk tidak mempasswordnya atau menggantinya

    Thanks before

    BalasHapus
  16. Simple tapi rumit, ini dia Blog widget Creator :v

    BalasHapus
  17. kalau yg html biasa ada ga gan..? thanks gan...

    BalasHapus
  18. Produk yang Kami tawarkan semuanya aslyOriginal,
    Ada Garansi Resmi Distributor dan Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.dan Buruan belanja dan dapatkan promo dari kami untuk semua produk kami.Dijual> BlackBerry> Nokia> Samsung> Apple> Acer> Dell> Nikon. beminat hub/sms 0857-3103-0120 atau klik website resmi kami http:/Citra-shopelektroniik.blogspot.com

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Nokia Lumia 800 MORE PICTURES
    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock ! Nokia C2-06 Touch & Type - Dual GSMRp.450.000,-

    Nokia Lumia 710 T-Mobile MORE PICTURES
    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-
    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Linux Blue
    Rp 1.700.000

    Acer Aspire One AOD270 10.1" Netbook
    Ready Stock !
    Acer Aspire One AOD270 10.1
    Rp. 1.000.000,-

    Acer TravelMate TM8481-2462G32 14" Notebook
    Ready Stock !
    Acer TravelMate TM8481-2462G32
    Rp. 1.400.000


    Ready Stock !
    Acer ICONIA Tab W500 10.1" Tablets Notebook
    Rp. 1.100.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mmRp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000 Ready Stock !

    BalasHapus
  19. hi buddy, this code dons't work anymore, https://ivyth.googlecode.com/svn/js/featuredpostside.min.js there is anyway to reup it?

    BalasHapus
  20. Will you tell me how i can costumize the category of adsosive template....?

    BalasHapus
  21. good bagus buat di terapkan di blog gue

    xổ số minh ngọc

    BalasHapus
  22. hi. Nice to be your friends..

    Chuyên thiết kế nhà đẹp

    http://thietkenha.pro/thiet-ke-nha-pho

    Shop nước hoa xách tay

    http://animaplaza.com/san-pham/nuoc-hoa-cho-quy-ba/

    Nội thất đẹp ghế sofa cao cấp

    http://sofathecity.vn/

    BalasHapus
  23. Gan cara buat emoticon seperti di blog agan ini cemana ya? bole minta html-nya? kalo pake emo kan lebih asik.,

    BalasHapus
    Balasan
    1. oke gan saya dapat artikelnya dari blog agan http://mkr-site.blogspot.com/2013/02/emoticon-pada-komentar-blogspot.html, terimakasih gan. sukses selalu. Please visit my blog kocrot-kecret.blogspot.com . thanks :)

      Hapus
  24. tải zalo ở đây http://tai-zalo.quangninhwap.com/

    BalasHapus
  25. Demonya kok gak kelihatan Gan...?

    BalasHapus
  26. saya blogger pemula mas, jadi saya baru belajar mencari backlink
    maaf atas komentarnya ini Cara Deface Website Dengan Mudah

    BalasHapus
  27. cai tao nha pho don nam moi. Gia re, chat luong bao dam

    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