This site uses cookies from Google to deliver its services, to personalize ads and to analyze traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Learn More

[Bulan Puasa] Cara Membuat Popular Post Warna Warni Dengan Gambar

baca98.blogspot.com - Hi sobat, artikel ni merupakan artikel lanjutan dari artikel yg kemarin Cara Memasang Widget Popular Post di Blog Blogspot hanya saja kali ni popular post yg sudah terpasang akan kita buat jadi warna warni seperti apa jadinya?
Sobat bisa lihat gambar dibawah ini


Cara Membuat Popular Post Warna Warni Dengan Gambar
Inilah Penampakan Popular Post warna warni
Jangan hiraukan postingannya ya..


Nah, gimana tertarik / tidak? kalau sobat tertarik, sobat bisa membuatnya sendiri kok..
Kami berikan tips trik serta tutorial cara membuat popular post warna warni ini..
Jika belum memasang Popular Post di blog sobat silahkan pasang dulu. Sobat bisa baca artikel ini
Cara Memasang Widget Popular Post Di Blog Blogspot

Oke berikut ni langkah-langkah yg harus sobat lalui

Cara Membuat Widget Popular Post Berwarna
  • Silahkan Sobat Login ke Blogger dan Masuk ke Dashboard Blog
  • Pilih Tab Template
  • Silahkan Klik Edit Template
  • Cari kode ]]></b:skin> tekan CTRL+F untk memudahkan pencarian
  • Setelah ketemu kode ]]></b:skin> silahkan sobat copas kode dibawah ni dan letakkan di atas kode ]]></b:skin> tadi


Klik Show untk membuka /* Custom CSS for Blogger Popular Post Widget */
.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 0 0.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-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
font-family:arial, sans-serif !important;
font-size:12px;
font-weight:bold !important;
display:block;
position:absolute;
top:-3px;
right:-3px;
border-radius:12px;
background-color:#333;
color:#fff !important;
width:24px;
height:24px;
line-height:24px;
text-align:center;
padding-right:0px !important;
box-shadow: -1px 1px 0px #fff;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;
}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;
}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;
}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;
}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;
}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;
}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;
}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}
  • Langkah terakhir klik Simpan Template
Setelah mengikuti tahap-tahap di atas maka popular post sobat akan terlihat seperti blog ini... Popular post / entri populer akan terlihat lebih cetar membahana.. heheh Sekian artikel ni terima kasih...

source : http://reddit.com, http://tribunnews.com

0 Response to "[Bulan Puasa] Cara Membuat Popular Post Warna Warni Dengan Gambar"

Post a Comment

Contact

Name

Email *

Message *