Cara Membuat Popular Post Simple Keren

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.

Bagikan Ke
26 Komentar untuk "Cara Membuat Popular Post Simple Keren"

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

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

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

simple sekali widget popular postsnya, izin dipakai ya ..

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

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

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

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

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

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

keren ya
salam dari northsumatravisit.blogspot.com

Artikelnya sangat membantu gan
terima kasih
www.rafcell.com

terimaksih gan ... masih belajar ngeblog nih

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

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

yukk baca juga cara yang lebih mudah dan lebih keren lain nya

di http://pengembarahitam.blogspot.com/

halo makasi infonya, lumayan dapet yg sederhana tp bagus

sangat sulit di mengerti bagi pemula