Iklan

Cara Modifikasi Tampilan Popular Post Bawaan Blogger ( Default ) Dengan CSS3

Cara Modifikasi Tampilan Popular Post Bawaan Blogger ( Default ) Dengan CSS3

Salam Blogger, bloggingpasuruan mua berbagi tentang Cara Modifikasi Tampilan Popular Post Bawaan Blogger ( Default ) Dengan CSS3. Popular post memang sangat penting untuk di tampilkan dalam blog guna memberikan informasi seputar artikel terpopuler dari Blog kita, atau artikel yang paling sering dikunjungi.

Buat Sobat yang ingin mencoba untuk merubah tampilan popular post nya bisa lihat tutorialnya di bawah ini.


1. Login ke Akun Blogger Sobat.
2. Masuk ke bagian Template >> EDIT HTML
3. Cari kode ]]></b:skin> dan letakan kode di bawah tepat di atasnya.

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3-b0i2VFnMQSSUqwbrg0lkQcIcloGoyxgaSzxFYFkjltOcndifFcng_AOLwB9spQ2FvNM_5b9WqjPfMYcRXpn_p1LvEX4lQ4fiTqlZE8A9Xk4Z6_Pl2io0oI0EGHdFksnHPnyx7ix0Yg/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:2px solid #6BB5FF;
background:#000000;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
color:#FFF8DC;
}
.popular-posts .item-thumbnail img {
  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);
}

4. Kemudian save,dan silahkan sobat lihat hasilnya.

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Modifikasi Tampilan Popular Post Bawaan Blogger ( Default ) Dengan CSS3. Semoga bermanfaat dan terima kasih...

Next
Prev Post
Previous
Next Post

3 comments:

  1. Gan numpang tanya Knapa populer post, entri post tidak muncul pada tampilan ponsel ya padahal peletakan nya udh benar di samping dan di bawah pos ada.
    cocclasher.blogspot.com

    ReplyDelete
  2. Gan, coba masuk ke artikel saya yang ini ---> http://bloggingpasuruan.blogspot.co.id/2015/04/cara-test-website-atau-blog-sudah.html

    ReplyDelete