March 05, 2016

Cara membuat widget popular post warna warni rata pinggir di sidbar

Tags

triknews - Cara membuat popular post atau entri populer warna-warni di sidbar blog sangat lah mudah kok, kita cukup pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode css pada laman edit html , dan popular posts ini nantinya akan terlihat rapi, desain warna-warninya rata pinggir ,karna pada kebanyakan tutorial tentang pembuatan popular post di internet tampilan widget popular postnya hampir semua lebar di atas dan mengecil turun kebawah , lihat gambar

Tampilan popular post warna-warni rata pinggir

membuat popular post warna warni rata pinggir di sidbar

Tampilan popular post warna-warni menyempit kebawah

membuat popular post warna warni rata pinggir di sidbar

Cara pasang popular post warna warni rata pinggir di sidbar blog

Pastikan kamu sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:

Baca juga : Cara Modifikasi indeks label cloud warna warni

  1. Pertama pastikan anda sudah pasang widget poular post
  2. Kemudian pergi ke editor template [ edit html ]
  3. Copy kode css berikut dan paste
  4. diatas kode  ]]></b:skin> atau </style>

/*Popular Post Trikpos*/
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font:normal 13px Fjalla One, Helvetica, Arial, sans-serif;
color:#086D72 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#FFFFFF;
color:#000000!important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#20F415;margin-right:0% !important}
.PopularPosts ul li:nth-child(2) {background-color:#12F89C;margin-right:0% !important}
.PopularPosts ul li:nth-child(3) {background-color:#10AFF9;margin-right:0% !important}
.PopularPosts ul li:nth-child(4) {background-color:#0B89FE;margin-right:0% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FCA22C;margin-right:0% !important}
.PopularPosts ul li:nth-child(6) {background-color:#F631ED;margin-right:0% !important}
.PopularPosts ul li:nth-child(7) {background-color:#F962C9;margin-right:0% !important}
.PopularPosts ul li:nth-child(8) {background-color:#64F7A1;margin-right:0% !important}
.PopularPosts ul li:nth-child(9) {background-color:#ECD788;margin-right:0% !important}
.PopularPosts ul li:nth-child(10) {background-color:#B1F60E;margin-right:0% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:12px;
}

Terkahir simpan template dan lihat hasilnya
catatan ;
jika anda ingin merubah warna sesui warna yang kalian sukai silahkan ganti kode-kode warna.

kode warna bisa lihat disini

Demikian penjelasan kami mengenai Cara membuat widget popular post warna warni rata pinggir di sidbar Semoga bisa menjadi referensi serta bermanfaat bagi anda.

3 komentar

trims sharenya... pada template yg lama saya pernah nyoba.. keren

Widgetnya persis kayak punya blog saya kang, emang keren kang he..he...


EmoticonEmoticon