Tutorial Cara Memasang Popular Post Keren di Blog

Monday, October 16, 2017

Bagikan :

Tweet

Tutorial cara memasang popular post keren di blog - Entri populer atau popular post jika di pasang secara unik tentu akan menarik perhatian mata pengunjung untuk melihat dan bahkan tertarik untuk membaca artikel kita. namun popular post sendiri sejatinya di anjurkan terpasang di blog selain untuk menambah nilai SEO tentu saja supaya pembaca lebih mudah untuk menemukan artikel yang banyak di baca di blog kita.

Baca juga : Kumpulan Template Blogger fast loading Seo Responsive 2015 

Tutorial cara memasang popular post keren di blog

Langkah pertama  buat dulu widget popular post di blog ( apa bila sudah terpasang silahkan lanjut ke langkah kedua )

• Pastikan kalian sudah login di bloger
• Masuk ke dasbor lalu pilih tata letak lihat gambar di bawah

• Lalu klik pada tambah gadget cari entri populer dan pilih

• Setelah itu seting sesuai ke inginan kalian dan  jangan lupa klik simpan , disini kalian mampu mengatur yang akan di tampilkan pada entri populer .

Kini entri popular atau popular post telah selesai di buat dengan penampilan standar blogger . dan supaya tampilan entri popular atau popular post menjadi menarik ikuti langkah kedua di bawah ini.

Langkah ke dua cara membuat popular post keren di blog

• pastikan kalian masih login di blogger
• setelah itu pilih tempelate lalu klik edit html dan cari arahan ]]></b:skin>  gunakan kombinasi Ctrl + F untuk mempermudah pencarian.
• setelah ketemu copy semua arahan script di bawah ini lalu paste kan sempurna di atas arahan ]]></b:skin> 

 kode script

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

supaya lebih jelasnya lihat gambar di bawah ini.

• terakhir jangan lupa save dan lihat hasilnya 

Gimana tidak terlalu sulit kan Tutorial cara memasng popular post keren di blog , semoga mampu bermanfaat.

baca juga artikel lainya : cara mengetahui kualitas seo sebuah blog

Tag : tutorial blog, Tutorial cara memasng popular post keren di blog