Modifikasi Populer Posts Default Blogger

Modifikasi Populer Posts Default Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Modifikasi Populer Posts Default Blogger ini.

Populer Posts Default Blogger
Untuk tidak memberatkan pemasangan widget pada blogger salah satunya adalah memanfaatkan widget-widget bawaan blogger (default). Sebab widget tersebut tidak menggunakan javascript yang bisa berpengaruh pada loading blog.

Seperti halnya pada tutorial kali ini akan dibahas tentang cara memodifikasi populer posts yang disediakan oleh blogger tanpa harus mengotak-atik javascript pada blog.

1. Menambahkan Default Populer Posts pada Widget

Saatnya anda memasang modifikasi Populer Posts pada widget blog anda dengan langkah seperti ini.
  • Login Blogger dengan akun anda;
  • Pilih Rancangan;
  • Klik tab Tambahkan Elemen (Gadget);
  • Pilih Populer Posts Blogger;
  • Simpan Gadget.
ini ditunjukkan pada gambar berikut :
Populer Posts Default Blogger

2. Menambahkan kode CSS pada Template

untuk memodifikasi tampilan Populer Posts Default Blogger, anda harus meng-copy paste kode CSS berikut sebelum tag  ]]></b:skin>

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGI5GRbY-Cpcc89aQAPIqXyDbN0PLHTItdd9KAyZH057hc4oQShu14chiv6YItHApwQ_F-jVEV6-TU5nSbrRVl4ZUJrDFr2OI76NbDXw5SajfcVEQs-5XEofu6qeJnLxt4hYjZDcNocQ/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ECECEC;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Catatan :

  • Untuk mengganti image bullet anda silakan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGI5GRbY-Cpcc89aQAPIqXyDbN0PLHTItdd9KAyZH057hc4oQShu14chiv6YItHApwQ_F-jVEV6-TU5nSbrRVl4ZUJrDFr2OI76NbDXw5SajfcVEQs-5XEofu6qeJnLxt4hYjZDcNocQ/s400/261.gif
  • #ECECEC merupakan background yang bisa anda ganti sendiri.
  • Untuk mengganti border-nya bisa anda lihat ini #6BB5FF
Semoga ini bermanfaat bagi anda semua. SELENGKAPNYA atau SEPENUHNYA

Sistem Komputer

Sitemap 1 2 3 4 5