Popular post ada berbagai macam tampilannya, dari yang sederhana sampai yang elegan. Di blogger sudah disiapkan widgetnya tapi tampilannya sederhana. Banyak para blogger yang menginginkan tampilan popular post mereka terlihat cantik dan elegan supaya pengunjung betah berlama-lama di blog mereka.
Nah, pada postingan kali ini saya akan membagikan script yang bisa anda gunakan untuk mempercantik tampilan blog anda yaitu script popular post rainbow. Dari namanya pasti kalian sudah mengetahui arti dari Rainbow (pelangi). Jika kita melihat pelangi terlihat banyak warna ( MeJiKuHiBiNiU). Nah Popular Post inipun seperti itu di tampilkan dengan banyak warna seperti pelangi seperti gambar di bawah ini.
 |
| Membuat Popular Post Rainbow Di Blogspot |
Membuat Popular Post Rainbow Di Blogspot
Langkah -langkah membuatnya sangat mudah
- Dari Dashboard blog sobat >> buka menu Template
- Kemudian klik >> Edit Html
- Setelah itu maka akan terbuka tampilan code-code HTML dari template blog yang kita gunakan lalu cari code yang berhubungan dengan Popular posts. Biasanya disetiap template yang kita gunakan ada .popularpost / #popularposts. Supaya tidak bingung hal pertama cari code ]]></b:skin> dengan menekan Ctrl + F maka akan muncul box kecil dan copykan code ]]></b:skin> di dalamnya kemudian tekan enter.
- Jika sudah ketemu silakan cari kode yang berisikan tulisan Popular Post jika ada lalu ganti semua kode yang berhubungan dengan popular post. contoh codenya bisa dilihat di bawah ini
.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-weight:bold;
color:#3a3a3a !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !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 {margin-right:1% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11.5px;
color: #5C5C5C;
}
- Setelah itu blok semua code tersebut dan gantikan dengan code di bawah ini
/* Rainbow Popular Post http://www.adyajust.in*/
#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}
/* Rainbow Popular Post*/
- Setelah itu tinggal simpan template anda dan lihat hasilnya
Demikianlah tutorial blog kali ini yang membahas tentang cara Membuat Popular Post Rainbow Di Blogspot. Semoga bermanfaat bagi teman-teman semua yang ingin tampilan blognya berbeda. Saya sangat mengharapkan sekali masukan dari teman-teman semua untuk membantu saya daam mempelajari dunia blogging. Sampai jumpa di postingan selanjutnya dan Thank's for Reading...Good Luck..
EmoticonEmoticon