Artikel ini menjelaskan bagaimana cara memasang featured post yang menarik dengan menggunakan css dan jquery pada blogger/blogspot. Featured post ini memiliki tampilan yang modern sehingga dapat membuat pembaca lebih menikmati isi dari blog anda.

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

Artikel ini menjelaskan bagaimana cara memasang featured post yang menarik dengan menggunakan css dan jquery pada blogger/blogspot. Featured post ini memiliki tampilan yang modern sehingga dapat membuat pembaca lebih menikmati isi dari blog anda.

Featured Post Menarik dengan CSS dan jQuery

Featured Post Menarik dengan CSS dan jQuery

Desain yang menarik pada sebuah blog dapat membuat pembaca nyaman dalam menikmati bacaan yang anda sajikan. Banyak blogger menambahkan fitur-fitur bagi blog mereka. Fitur yang biasanya ada yaitu fitur featured post.
Nah kali ini saya akan membagikan featured post yang memiliki tampilan yang berbeda dari biasanya. Tampilan dari featured ini menggunakan CSS pseudo nth-child untuk mengatur lebar dari tiap tampilannya.
Featured post seperti sudah saya terapkan pada template MyTimeLine.

Konsep dari featured post ini seperti gambar barikut:
Konsep featured post CSS dan jQuery

Bagi anda yang tertarik untuk memasang diblog anda bisa ikuti cara berikut ini:

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 Featured Post

  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">
    #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
    #slides ul{height:250px}
    #slides li{width:49.9%;height:100%;position:absolute;display:none}
    #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
    #slides li:nth-child(1){left:0;top:0}
    #slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
    #slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
    #slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
    #slides a{display:block;width:100%;height:100%;overflow:hidden}
    #slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
    #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;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;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
    #slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
    #slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
    #slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
    #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
    #slides .overlayx,#slides 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}
    #slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
    #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}
    @media only screen and (max-width:600px){
      #slides ul{height:600px}
      #slides li:nth-child(1){width:100%;height:49.8%}
      #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
      #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
      #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
    }
    </style>
    <div id="featuredpost"></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/featuredpost.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function () {
    FeaturedPost({
    blogURL:"http://mkr-site.blogspot.com",
    MaxPost:8,
    idcontaint:"#featuredpost",
    ImageSize:300,
    interval:5000,
    autoplay:true,
    tagName:false
    });
    });
    //]]>
    </script>
    NB: Pada line 24 adalah kode untuk responsive. Kode itu jalan ketika tampilan layar kurang dari 600px. jika tidak ingin menyertakan fungsi responsive silahkan hapus kode line 24-30.
    Pada line 33 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
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 #0097BD dengan kode warna Heksa yang anda inginkan menggunakan tool ini Generator Kode Warna Heksa. Kode warna #0097BD ada 2 jadi harus diganti semua.

Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

29 comments:

  1. mantap mas ,
    terus berkarya ,

    hehehe :D
    :>)

    BalasHapus
    Balasan
    1. kira" fitur target blanknya bisa dihilangin gak mas...?

      Hapus
  2. Gan .. tolong napa ya pas waktu dipindahkan (bergerak), tulisan ma gambarnya ga barengan pindahnya.. maksudnya waktu bergerak gambarnya duluan tapi tulisannya telat .. liat gan sekrinjot dibawh ini ..

    http://4.bp.blogspot.com/-gpwpJ7Lu3J8/UTvAsm7tp5I/AAAAAAAA718/jxUp6y4EECU/s1600/Untitled.png

    liat gan di sini => http://sexyrated.blogspot.com/

    BalasHapus
    Balasan
    1. kode CSSnya kurang..
      sekarang sudah ditambahkan..

      Hapus
  3. gimana buat recent post perkategory
    efek nya kayak gini????

    BalasHapus
  4. Awesome, it works for me now ;-)
    Thanks so much!

    BalasHapus
  5. How to open link of the gadget in a new browser window to a Blogger blog. thanks

    BalasHapus
  6. Saya mengucapkan terimakasih gan... (h) kode css bisa ditambahkan ke blog saya... (h) (h)

    BalasHapus
  7. Ijin bookmark blog agan.... :))

    BalasHapus
  8. thanks berat gan untuk tutornya, tutornya simle tapi hasilnya keren (h)

    BalasHapus
  9. Ditunggu tutorial selanjutnya. :-t
    Saya suka berkunjung di blog ini. http://direktoriblogg.blogspot.com
    (o)

    BalasHapus
  10. Haturnuhun, Bang. Tutorialnya sudah saya terapkan di Blog saya.

    BalasHapus
  11. mas makasih udah aku pakai di blog ku mohon sekiranya jika bersedia untuk berkunjung :>) :>) :>) :>) simpelstars.blogspot.com

    BalasHapus
  12. gan, kok featured postnya gak jalan ya ? mohon diliat disini gan http://sumatracyber.blogspot.com/ mohon bantuannya

    BalasHapus
  13. kalo mau nambahain kotaknya gimana ya mas :-?

    BalasHapus
  14. ;(( Gan Satank....kasi script buat random post donk...

    BalasHapus
  15. kok 'add gadget' nya g ad :-?
    pdhl showaddelement udh 'yes' :-?

    BalasHapus
  16. Gan, gimana caranya supaya gambarnya full tidak dicrop?

    BalasHapus
  17. mas kode "https://ivyth.googlecode.com/svn/js/featuredpost.min.js" gak berfungi lagi ;-(

    BalasHapus
    Balasan
    1. sama gan, mau pasang gk tau password nya

      Hapus
  18. Hi Admin!
    After install Future post widget on My blog show information require Login: username and password when access to my blog, Please help me !

    BalasHapus
  19. (h) (h) (h) (h) ijin bookmark gan, mantepp nih tutornya :d

    BalasHapus
  20. Gan kenapa nggak muncul ya? pas udh di add ada kolom username sma password ? Itu kenapa ?

    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