Latest News

Cara Membuat Widget Popular Post Evo Magz Di Blogger - Berjalan

Popular post merupakan widget yang berisi urutan artikel yang paling banyak dibaca dan dibuka di blog kita. Widget ini uga mampu membantu pengunjung lain untuk mengetahui artikel yang paling popular dan rupawan di blog kita.

Tentu pemilik blog harus memakai style / gaya popular post yang menarik untuk dilihat pengujung. Dan mungkin anda ingin memasang style popular post yang satu ini. Kali ini aku akan membagikan tutorial cara membuat widget popular post warna warni ibarat evo magz.

Cara Membuat Widget Popular Post Evo Magz Di Blogger - Berjalan

Popular post pelangi ini yaitu popular post yang hampir sama dengan popular post di template blog Evo Magz ori yang tentunya anda sudah mengetahuinya. Kesamaan yang mampu dilihat yaitu dari tampilan warna yang ada.

Tampilan gaya warna-warni memang rupawan untuk dilihat dan memanjakan mata. Widget popular post mampu ada tampilkan di sidebar atau footer blog. Untuk membuat widget popular post ini ana cukup menambahkan style CSS kedalam template untuk memasang popular post warna-warni. Bagi anda yang ingin memasang widget popular post maka ikuti langkah berikut

Cara Memasang Widget Popular Post Evo Magz

Langkah 1 (Buat Widget Popular Post)
Silakan masuk ke blogger,lalu klik Tata LetakTambahkan gadget → Entri Popular
Lalu klik simpan

Langkah 2
Silakan klik Template → Edit HTML ,lalu cari instruksi ]]></b:skin>

Langkah 3
Salin instruksi CSS dibawah ini lalu letakkan diatas instruksi ]]></b:skin> 

.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;   font:normal normal 13px/1.4 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;Arial Narrow&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,Arial,Sans-Serif;   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;   padding:.5em 1.5em .5em .5em;   counter-increment:num;   position:relative; }  .PopularPosts ul li:before, .PopularPosts ul li .item-title a {   font-weight:bold;   font-size:120%;   color:inherit;   text-decoration:none; }  .PopularPosts ul li:before {   content:counter(num);   display:block;   position:absolute;   background-color:black;   color:white;   width:30px;   height:30px;   line-height:30px;   text-align:center;   top:50%;   right:-10px;   margin-top:-15px;   -webkit-border-radius:30px;   -moz-border-radius:30px;   border-radius:30px; }  /* Set color &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; level */ .PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%} .PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%} .PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%} .PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%} .PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%} .PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%} .PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%} .PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%} .PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%} .PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Ganti instruksi yang berwarna merah dengan instruksi warna yang anda inginkan

Lalu simpan template.

Selesai,sekarang lihat blog sahabat untuk melihat hasil popular post yang telah dibuat. Itulah tutorial cara membuat popular post evo magz. Semoga bermanfaat.