Cara Memasang Widget Popular Post Di Blog

Cara Memasang Widget Popular Post Di Blog - Pada kali ini saya akan menjelaskan cara memasang widget popular post di blog atau cara membuat artikel terpopuler di blog. Jika sobat sering melihat-lihat atau membaca artikel di sebuah blog atau website, pasti anda akan melihat sebuah widget di sidebar blog yang menampilkan postingan terpopuler. Itulah yang di sebut dengan popular post. Selain dapat mempercantik tampilan blog, widget popular post juga berguna sebagai internal link untuk blog kita sobat. Internal link tersebut berguna juga dalam search engine optimation. Bagi yg ingin memasang widget popular post di blog, simak langkah-langkah berikut.

Memasang Widget Popular Post Di Blog

• Login ke akun blogger sobat.
• Klik menu tata letak.
• Kemudian klik tambahkan element/Add gadget dimanapun anda suka. Tapi sebaiknya di sidebar.
• Kemudian cari widget popular post tersebut dan klik " + " .

• Kemudian klik simpan.

Selamat widget popular post anda sudah jadi. Nah sekarang saya akan menjelaskan bagaimana cara membuat popular post tersebut kelihatan lebih keren. Dengan mempercantik popular post sobat mungkin para pembaca tertarik untuk mengklik popular post sobat. Bagaimana cara membuatnya, simak langkah-langkah di bawah ini.

Script Popular Post Keren

• Login ke akun blogger sobat.
• Klik menu template > Edit HTML
• Cari ]]></b:skin>, Agar lebih mudah tekan CTRL + F.
• Kemudian pastekan salah satu kode di bawah ini di atas ]]></b:skin>

.sidebar .PopularPosts .widget-content ul li{ height: 100%; line-height: 22px; float: left; clear: left; list-style-type: none; overflow: hidden; color: gray; } .sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;} .sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -ms-transition:all 0.4s; -o-transition:all 0.4s;} .sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0} .sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%} .sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"} .sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%} .sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"} .sidebar .PopularPosts .widget-content ul li:first-child:after, .sidebar .PopularPosts .widget-content ul li:first-child + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;} .sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px} .sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -ms-transition:all 0.4s; -o-transition:all 0.4s; } .sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

• Kemudian klik simpan template.

Sekarang anda lihat hasilnya, widget popular post anda lebih keren dan menarik kan. Demikianlah penjelasan saya mengenai  cara memasang widget popular post di blog atau cara membuat artikel terpopuler di blog. Semoga artikel ini dapat bermanfaat bagi kita semua.