Memasang Widget Popular Post Di Blog

Memasang Widget Popular Post- Assalamualaikum. Jika sobat seorang blogger pemula, anda bertanya-tanya bagaimana cara memasang widget popular post 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 konten paling banyak di kunjungi. Itulah yang di sebut dengan popular post sobat. Selain dapat mempercantik tampilan blog, widget ini juga berguna sebagai internal link untuk blog kita sobat. Internal link tersebut berguna juga dalam search engine optimation. Mengenai SEO atau search engine optimation akan saya jelaskan dilain waktu. Selain cara memasang popular post saya juga akan menjelaskan bagaimana cara membuat widget tersebut lebih kelihatan keren, elegan dan profesional.

Cara Memasang Widget Popular Post

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

Cara membuat popular post menjadi lebih 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 dan bagaimana cara membuat popular post lebih kelihatan menarik di atas. Semoga artikel ini dapat bermanfaat bagi kita semua. Assalamualaikum.