Cara Membuat Popular Post Pada Blogspot

ara membuat popular post di blogger.com merupakan hal yang sangat mudah. Banyak blogger  memasang widget popular post ini di blog mereka. Memasang popular post di blog tentunya harus mempuyai keuntungan bagi blog kita. Dengan popular post kita dapat memberikan kemudahan kepada pengunjung blog kita untuk membuka artikel yang paling populer di blog kita. Selai itu dengan popular post, blog kita menjadi lebih cantik dan menarik perhatian pembaca.


Soal tampilan atau desain popular post, para blogger mempunyai desain mereka masing-masing sesuai yang mereka kehendaki. Ada berbagai macam desain popular post. Yang saya akan bagi totorialnya disi adalah bagaimana membuat popular post dan kemudian memodifikasi popular post tersebut menjadi warna-warni.

Cara membuat popular post di blog

Untuk membuat popular post warna warni sobat terlebih dahulu harus mempunyai popular post default dari blogger.com. Untuk itu silahkan membuat popular post di blogger.com, berikut langkah-langkahnya:

• Silahkan sobat sign in di blogger.com. Kemudian buka blog sobat yang akan ditambahkan popular post
• Silahkan menuju ke Layout, Pada bagian side bar klik Add a Gadget. Kemudian cari dan tambahkan widget popular post.

• Pada Title Silahkan masukkan judul popular post yang anda sukai. Misalnya "paling dicari". Pada Most Vieuwed pilih rentang waktu popular post yang akan di tampilkan, misalnya "All time" untuk menampilkan popular post selama blog kita dibuat. Pada Show image thumbnail untuk menampilkan gambar kecil dan  snipet untuk menampilkan beberapa kata atau kalimat pembuka artikel. Pada contoh ini saya tidak mencentang image thumbnail ataupun snipet. Kemudian pilih jumlah artikel yang akan di tampilkan. Misalnya Display up until 10 post.

• Terakhir klik save

Cara membuat popular post warna warni di blog

Setelah kita menambahkan popular post di blog, sekarang kita akan memodifikasinya menjadi popular post warna warni. Berikut langkah langkah cara membuat popular post warna warni :

• Silahkan sobat buka dulu blog sobat. Kemudian menuju bagian Template.
• Kemudian klik Edit HTML. Klik pada bagian dalam editor HTML kemudian Cari atau CTRL+F kemudian cari code ]]></b:skin> jika sudah dapat silahkan copy copy code berikut lalu letakkan atau paste di atas code ]]></b:skin>

/*----- TAB POPULER -----*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

• Terakhir Save Template . Jika berhasil sobat akan melihat tampilan popular post sobat seperti berikut ini.

Demikian cara membuat popular post di blog semoga bermanfaat

Tweet

Artikel keren lainnya:

Ditulis oleh famadaya pada hari Saturday, January 17, 2015