Latest News

Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger

Popular post yaitu widget pada blog yang menampilkan artikel yang paling banyak dibaca oleh pengunjung. Popular post warna-warni dipopularkan oleh template Evo Magz yang menggunakan popular post warna-warni. Warna-warni ini berarti memiliki banyak macam warna menyerupai pelangi. Selain memiliki style warna-warni popular post ini mampu menampilkan tumbnail dan juga cuplikan artikel. Bisa anda munculkan dengan mengaturnya ketika membuat popular post.

Popular post ini juga aktif bergerak dan berjalan sesuai dengan banyaknya views suatu post,semakin besar views post tersebut maka akan bergerak keatas. Anda juga mampu menampilkan gambar atau thumbnail di dalam popular post.

Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger

Popular post ini sangatlah menarik dan keren. Anda mampu mengganti warna di popular post ini menjadi warna yang anda sukai. Selain menarik perhatian pembaca tetapi juga menambah nilai estetika blog anda. Bagi anda yang ingin membuat widget popular post maka silakan ikuti langkah-langkah berikut.

Cara Membuat Widget Popular Post Warna-Warni

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

Langkah 2 (Menambahkan style)
Silakan klik Template → Edit HTML ,lalu cari arahan ]]></b:skin>

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

#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}

Lalu klik Simpan

Sekarang buka blog anda dan lihat apakah popular post sudah muncul. Jika sudah saatnya kita berpisah. Cukup sekin tutorial yang mampu aku bagikan biar bermanfaat.