Membuat Popular Post Ala Evo Magz

Membuat Popular Post Ala Evo Magz - Evo Magz lagi hangat hangatnya dibacarakan akhir akhir ini bukan?
ada hal yang menarik yang baik untuk ditiru dari evo magz, yaitu model dari Popular Postnya.
jika anda ingin melihatnya silahkan lihat Screenshotnya disamping ini.
Namun untuk mendapatkan Template Evo Magz, anda harus menyiapkan kocek yang lumayan, yaitu senilai kurang lebih $8 untuk mendapatkannya secara resmi.

Namun pada kali ini saya akan memberikan tutorial Cara membuat popular post seperti yang ada di evomagz milik mas sugeng.
Jika anda tertarik. yuk simak langkah langkahnya dibawah ini.

Step 

• Login ke Blogger terlebih dahulu
• Pilih Template
• Edit HTML
• Cari Kode ]]></b:skin> dengan menekan CTRL + F untuk lebih mempercepat pencarian
• Lalu Copy Kode dibawah ini diatas Kode ]]></b:skin>

  
/* 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 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:#000 !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:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}

.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}

.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}

.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}

.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}

.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}

.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}

.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}

.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}

.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}

.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;

}  

• Lalu Simpan Template
• Selesai. Jika popular post anda berubah seperti gambar yang ada diatas. maka cara ini berhasil. 

Jika anda ingin mencopas artikel ini, silahkan saja, namun cantumkan link yang lengkap ke blog atau post ini

Sekian dari saya, semoga ini dapat bermanfaat bagi anda. 

Terimakasih

Tweet

Posted by Unknown