Cara Membuat Popular Post Simple Keren

Cara Membuat Popular Post Simple Keren. Sobat Blogger.. Apa kabar,sudah lama sekali gak update nih di karenakan sibuk di dunia offline,namun pada waktu luang kali ini saya sempatkan untuk update dan ingin membagikan tutorial cara membuat popular post anda bisa menjadi keren dan simple, anda pasti sudah tau popular post, widget yang menampilkan artikel blog anda yang paling popular,nah pada kesempatan kali ini bagi anda yang bosan dengan tampilan popular post anda di hompage, saya punya cara khusus untuk merubahnya, pastinya anda juga ingin tampilan blog anda lebih menarik di pandang dan tentunya untuk pembaca juga.

Baca Juga : Cara Membuat Popular Post Seo Friendly

Sobat blogger, kali ini saya akan menawarkan kepada anda empat tampilan popular post yang bisa anda terapkan di blog anda, disini anda akan di pilihkan tampilan popular sesuai selera atau keinginan anda, tentu saja cara penerapannyapun sangat mudah sekali,jadi jika anda berminat silahkan untuk anda terapkan di blog anda sesuai popular post pilihan anda.

Cara Membuat Popular Post Simple Keren.
Disini anda hanya perlu memilih salah satu popular post dan menerapkan kode css nya di template anda.
1. Buka akun blogger anda.
2. Pilih menu template > klik Edit HTML.
3. Lalu anda pilih salah satu kode css di bawah sesuai keinginan dan letakan tepat diatas kode ]]></b:skin>

Tampilan Popular Post Pertama :

Cara Membuat Popular Post Simple Keren 1
Code

 .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
           -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
    }

    .popular-posts ul li:hover {
      -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
    border:1px solid #333333;
color:#fff;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#ffffff;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
   
    } 

Tampilan Popular Post Kedua

Cara Membuat Popular Post Simple Keren 2
Code :

 .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #ffffff  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    }
    .popular-posts ul li:hover {
        border:1px solid #555555;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#333333;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#555555;
    } 

Tampilan Popular Post Ketiga

Cara Membuat Popular Post Simple Keren 3
Code

 .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dcdcdc;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    }

    .popular-posts ul li:hover {

    background:#FF8040;

    }

.popular-posts ul li a
{
text-decoration:none;
font:14px Georgia, verdana;
color:#222222;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#fff;
    } 

Tampilan Popular Post Ke Empat

Cara Membuat Popular Post Simple Keren 4
Code :

 .popular-posts ul
{
padding-left:0px;
    -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
 border: 1px solid #dcdcdc;

}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
   border-bottom:1px dashed #dcdcdc;
       background:#ffffff;
    }

  .popular-posts ul li a
{

text-decoration:none;
font:16px georgia,verdana;
color:#3d87c4;
}

    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#333333;
    } 

Silahkan Pilih salah satu dan simpan code css nya lalu save template anda.
Nah itulah tampilan popular post yang bisa anda terapkan, lebih dan kurangnya saya mohon maaf, semoga sukses.

27 Responses to "Cara Membuat Popular Post Simple Keren"

  1. Terimakasih informasinya sangat membantu :)
    http://goo.gl/zxbefd

    BalasHapus
  2. Thanks gan artikelnya sangat membantu :)
    s.id/5DR

    BalasHapus
  3. Izin mampir agan. terimakasih :)
    http://goo.gl/hSnIaa

    BalasHapus
  4. simple sekali widget popular postsnya, izin dipakai ya ..

    BalasHapus
  5. nice post agan, thanks...
    http://bit.ly/1GJaHgb

    BalasHapus
    Balasan
    1. spam nya kurang banyak bro... :) pake nama cewe segala... nama asli berani nggak?

      Hapus
  6. Sangat bermanfaat gan, terimasih sudah mau berbagi, like back ya :)
    musliadi-syaukath.blogspot.com

    BalasHapus
  7. Ada yang lebih keren lagi gak madam, soalnya saya mau yang lebih kuereeeen lagi

    BalasHapus
  8. hay gan.. salam kenal yahh dari ane
    terimakasih niee atas infonya...
    http://rajalistrik.co.id

    BalasHapus
  9. wah sukses gan thx. kunjungi blog saya yah vanoverhelsing.blogspot.co.id

    BalasHapus
  10. keren ya
    salam dari northsumatravisit.blogspot.com

    BalasHapus
  11. Artikelnya sangat membantu gan
    terima kasih
    www.rafcell.com

    BalasHapus
  12. terimaksih gan ... masih belajar ngeblog nih

    BalasHapus
  13. sangat membantu gan,makasi bannyak
    yang laen jangan lupa kunjungi http://acabbaca.blogspot.co.id/

    BalasHapus
  14. keren mas lanjut kan
    http://www.bloginterpadu.com/

    BalasHapus
  15. http://intek-baru.blogspot.com

    BalasHapus
  16. yukk baca juga cara yang lebih mudah dan lebih keren lain nya

    di http://pengembarahitam.blogspot.com/

    BalasHapus
  17. halo makasi infonya, lumayan dapet yg sederhana tp bagus

    BalasHapus
  18. terima kasih infonya,,
    ijin Share om www.servicehemat.blogspot.in

    BalasHapus