Cara Membuat Widget Popular Post Blogger Round Corners

Posted by Wahyu basofii on Sabtu, 13 Juli 2013

Popular Post Round Corners - wahyu only
Tentu anda sudah tahukan mengenai widget popular post? yaitu widget yang berfungsi untuk menampilkan artikel-artikel popular di blog kita, tidak seperti widget-widget HTML/Javascript lainya, popular post ini bersifat resmi atau official dari blogger, jadi widget ini terkesan lebih baik dan tidak memberikan efek yang signifikan terhadap berat loading blog. Selain itu, terkadang seringkali kita juga mengalami kebosanan dengan tampilan popular post yang itu-itu saja,

Kali ini saya akan memberikan tutorial tentang modifikasi Widget Popular Post , Tampilan dari modifikasi popular post yang akan saya bahas ini sebenarnya cukup sederhana,widget ini akan mempunyai tampilan melingkar Panjang pada keseluruhan atau bisa disebut Round Corners.

Popular Post Blogger Round Corners
Cara mengaplikasikanya juga tergolong cukup mudah, kita hanya perlu memasang widget popular post seperti biasa terlebih dahulu, baru kemudian ditambahkan dengan beberapa kode css yang sudah di customisasi. Jika anda tertarik untuk menerapkanya, maka silahkan disimak yang berikut ini.

Cara Modifikasi wideget Popular Post
1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih "Entri Populer" atau "Popular Post" (tergantung bahasa yang digunakan).

5. Lalu, centang box thumbnail gambar. (jangan centang "snippet" atau cuplikan

pilih popular post
6. Klik "Save/Simpan" gadget.

7. Sekarang beralih ke halaman Template > Edit HTML.

8. Klik tanda panah hitam disebelah kode yang mirip seperti kode ini: <b:skin>...</b:skin> (untuk membuka kode css).

9. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini tepat diatasnya.

/* The CSS Code for the menu starts here */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}
  10. Klik "Save/Simpan" template, dan selesai.

Bagaimana? mudah bukan cara memodifikasi popular post agar terlihat lebih stylish. Demikian informasi terbaru tentang Cara Modifikasi Widget Popular Post Blogger.
via blogertix
Judul : Cara Membuat Widget Popular Post Blogger Round Corners
Label :
URL : http://wahyu-only.blogspot.com/2013/07/cara-modifikasi-widget-popular-post-blogger.html

27 komentar:

  1. Tampilan popular postnya jadi tambah keren mas :D

    BalasHapus
  2. mantap bro...
    bro jngn lupa kunujgi blog sya yg baru ya.
    http://seputar-edukasi.blogspot.com/

    BalasHapus
  3. hohoho.. pake CSS yah :D

    thanks sob :)

    BalasHapus
  4. kereeeen kang mantap... Tp apa popular post valid HTML5 ??

    BalasHapus
    Balasan
    1. hmm..kalo valid html gk tau lah saya sob... gk ngerti soal valid2 tan :D

      Hapus
  5. tapi popular post rawan copas :D hehhehehe :-bd

    BalasHapus
  6. kira-kira ini jadi memperberat loading blog gak sob? makasih ^_^

    BalasHapus
    Balasan
    1. Insyaallah gak mas ,enteng kok :)

      Hapus
  7. widgetnya terlihat lebih elegan

    BalasHapus
  8. wah ini keren banget gan widget popular postnya :-bd

    BalasHapus
  9. bagus jg nih widgetnya..ijin nyoba bang heheh.nice dahh

    komen back yeee

    BalasHapus
  10. Pertanyaan saya kenapa blog ini tidak ada popular post-nya?

    BalasHapus
    Balasan
    1. memangnya semua tutorial yg saya bagi harus di terapkan pada blog ini ?

      Hapus
  11. ga work gan, thumbnailnya terlalu besar. jadi acak2an

    BalasHapus

------------------------------------------------------------------------------------------
Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Kritik dan Saran sangatlah dibutuhkan, agar blog ini menjadi blog
yang lebih berkualitas.

Thank's
------------------------------------------------------------------------------------------


Flag Counter