Di artikel postingan sebelumnya kita sudah mempelajari Cara Membuat Search Engine Blog (Google). Nah, sekarang kita akan mempelajari cara memperkeren dan mempercantik blog dengan Cara Membuat Popular Post Bernomor Seperti Evo Magz Terbaru. Cara ini sangat sangat simple. Sehingga tidak akan membuat anda terlalu pusing dengan cara ini.
Artikel Pilihan ini biasanya untuk mengisi artikel-artikel atau postingan yang paling laris, naik daun, ataupun postingan yang terbaik. Berikut ini caranya Cara Membuat Populer Post atau Cara Membuat Artikel Pilihan Seperti Evo Magz Terbaru.
Cara Membuat Artikel Pilihan Bernomor Seperti Evo Magz Terbaru
1. Buka Blogger,2. Pilih Template,
3. Edit HTML,
4. Salin atau copy kode di bawah ini!
/* 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 0 !important;
padding:10px 20px 10px 10px !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:-5px;
right:-5px;
border-radius:16px;
background-color:#333;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #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;
}5. Kemudian pastekan atau tempelkan kode diatas tadi tepat di atas kode
]]></b:skin>6. Jika sudah selesai, langsung Simpan Template nya.
7. Sekarang pindah ke Tata Letak / Page Element.
8. Lalu untuk membuat Popular Post atau Entri Populer nya silakhan klik add gadget atau gadget baru lalu pilih Popular Post atau Entri Populer.
Jika ada masalah atau kurang paham anda bisa bertanya melalui komentar, dan mungkin saya akan balas jika ada kesempatan.
Sekin, itu saja dari saya tentang Cara Membuat Popular Post Seperti Evo Magz Bernomor semoga bermanfaat. Terimakasih.
