6++ Style Widget Popular Posts Keren dan Responsive untuk Blogger

6++ Style Widget Popular Posts Keren dan Responsive untuk Blogger

6++ Style Widget Popular Posts Keren dan Responsive untuk Blogger - Widget popular posts atau sering disebut postingan populer ialah salah satu widget yang penting bagi sebuah blog blogger selain widget recent posts, label/tag, dll.

Beberapa tujuan membuat widget popular posts ini menjadi menarik ialah bisa meningkatkan kesan pengunjung, memperkecil rasio pentalan (Bounce rate) dan juga dapat meningkatkan peringkat Alexa blog kalian.

Oleh karena itu, dibawah ini Saya sudah menyiapkan 6++ style widget postingan populer yang tentunya keren dan responsive di template blog Sobat. Serta menambah kesan menarik dihati pengunjung.
Agar hasilnya berjalan lancar, pastikan kalian sudah mem-BACKUP TEMPLATE blog kalian dan menghapus semua kode CSS Widget Popular Posts yang lama di template blog kalian.

6++ Style Widget Popular Posts Keren untuk Blogger


Style Widget Popular Posts #1

Kode CSS
.PopularPosts .item-thumbnail {margin-right: 10px;margin-bottom: 0;box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;border-radius: 50%;-webkit-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;-moz-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;-webkit-border-radius: 50%;-moz-border-radius: 50%;} .PopularPosts ul li img {border-radius: 50%;width: 50px;height: 50px;background: #333;padding-right: 0;-webkit-border-radius: 50%;-moz-border-radius: 50%;} .PopularPosts .widget-content ul li {background: #00aeef;} .PopularPosts ul li a {display: block;color: #fff;padding: 12px;line-height: 20px;font-family: Arial,serif;font-weight: 500;font-size: 15px;} .PopularPosts .widget-content ul li+li {margin: 0 10px 0 0;transition: all 0.4s ease;-moz-transition: all 0.4s ease;-webkit-transition: all 0.4s ease;} .PopularPosts .widget-content ul li+li+li {margin: 0 20px 0 0;} .PopularPosts .widget-content ul li+li+li+li {margin: 0 30px 0 0;} .PopularPosts .widget-content ul li+li+li+li+li {margin: 0 40px 0 0;} .PopularPosts .widget-content ul li:hover {opacity: 0.8;-moz-opacity: 0.8;-webkit-opacity: 0.8;} .PopularPosts .widget-content ul li:nth-child(2n+1) {background: #222;}

Style Widget Popular Posts #2

Kode CSS
.sidebar .popular-posts ul {padding: 0;margin: auto;}
.sidebar .popular-posts ul li {list-style: none !important;float: left;position: relative;overflow: hidden;margin: 0 5px 5px 0;padding: 2px; border: 1px solid #f5f5f5;}
.sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;}
.sidebar .PopularPosts ul li img {float: left;display: block;height: 85px;padding: 0;}
.sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);}
.sidebar .item-title {display:none !important;}
.sidebar .item-title a {display:none !important;}

Style Widget Popular Posts #3

Kode CSS
.popularposts{line-height:1.6;color:#fff;font-size:100%;border-radius:5px 5px 0 0;} .popular-posts{font-size:100%;line-height:1.6;border-radius:0; color:#fff} .popular-posts a{color:#fff} .popular-posts a:hover{color:#fff} .PopularPosts ul{counter-reset:popcount;list-style:none;padding:0;margin:0;} .popular-posts ul li:before{counter-increment:popcount;list-style-type:none;margin:10px 15px 0 5px;padding:0.3em 0.8em;content:counter(popcount);color:#fff;font-size:16px;position:relative;border:1px solid #fff;border-radius:100%;float:left;} .PopularPosts li{background:none;list-style:none;display:block;text-transform:uppercase;padding:10px 18px;margin:0;clear:both;overflow:hidden;border-bottom:none;font:13.5px/140%;} .PopularPosts li a{text-decoration:none} .PopularPosts li:hover{background:#0FB9BB} #PopularPosts1 .widget-content{margin-bottom:-2px;padding:0px 0 0 17px;} .PopularPosts ul li{padding:3px 7px;border:none} .PopularPosts ul li:nth-child(1){margin-right:0;background-color:#F48067;} .PopularPosts ul li:nth-child(2){margin-right:0;background-color:#2ba6e1;} .PopularPosts ul li:nth-child(3){margin-right:0;background-color:#718397;} .PopularPosts ul li:nth-child(4){margin-right:0;background-color:#11b7b5;} .PopularPosts ul li:nth-child(5){margin-right:0;background-color:#d9ba71;} .PopularPosts ul li:nth-child(6){margin-right:0;background-color:#d9ba71;} .PopularPosts ul li:nth-child(7){margin-right:0;background-color:#2ba6e1;} .PopularPosts ul li:nth-child(8){margin-right:0;background-color:#718397;} .PopularPosts ul li:nth-child(9){margin-right:0;background-color:#11b7b5;} .PopularPosts ul li:nth-child(10){margin-right:0;background-color:#d9ba71;}

Style Widget Popular Posts #4

Kode CSS
#PopularPosts1 ul{width:290px;counter-reset:li;left:-7px;padding:8px 0px 1px;list-style:none;} #PopularPosts1 li{left:5px;width:95%;position:relative;margin:0 0 10px 0;padding: 3px 2px 0 17px;} #PopularPosts1 ul li{position:relative;display:block;margin: .5em 0;*padding: .2em;background:#ddd;padding: .4em .2em .4em 1em;transition: all .3s ease-out;border-radius: .3em;text-decoration: none;} #PopularPosts1 ul li:before{position:absolute;background:#FB8835;color:#fff;content: counter(li);counter-increment: li;margin: -1.3em;left: 0;top: 50%;width: 2em;border: .2em solid #fff;height: 2em;border-radius: 2em;font-weight: bold;font-size: 15px;text-align: center;line-height: 2em;box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;-webkit-box-shadow: 0 8px 5px -7px #888;transition: all .3s ease-out;} #PopularPosts1 ul li:hover:before{transform: rotate(360deg);} #PopularPosts1 ul li:hover{background: #eee;} #PopularPosts1 ul li a{min-height:25px;color:#444;display:block;font: 14px Georgia, serif;text-decoration:none;text-transform:uppercase;text-shadow: 0 -1px 2px #fff;} #PopularPosts1 ul li a:hover{color: #444;}

Style Widget Popular Posts #5

Kode CSS
.popular-posts ul{padding-left:0px;} .popular-posts ul li {list-style-type: none;background: #FFF url(https://3.bp.blogspot.com/-Q-VefH-Eqzk/WBnscTcBXfI/AAAAAAAAD8s/vYPfjhijx5gv4ccT2BXkkmkP6pL8A1D3wCLcB/s1600/bo-pp-arrow.gif)  no-repeat scroll 5px 10px;border: 1px solid #ddd;padding:5px 5px 5px 20px !important;margin:0 0 5px 0px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} .popular-posts ul li:hover {border:1px solid #6BB5FF;} .popular-posts ul li a:hover {text-decoration:none;} .popular-posts .item-thumbnail img {border-radius: 100px;-moz-border-radius: 100px;webkit-border-radius: 100px;  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}

Style Widget Popular Posts #6

Kode CSS
.sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li {list-style: none !important;float: left;font-family:'Oswald',Arial,Tahoma,sans-serif;position: relative;width: 48%;height: 130px;overflow: hidden;margin: 2px;padding: 0 !important;border: 0;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {float: left;display: block;height: 130px;width: 100%;padding: 0;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;transition:1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;right: 0;left: 0;bottom:0;padding-bottom: 0;z-index: 999;} .sidebar .PopularPosts .item-title a {display: block;padding: 5px 0px 2px 5px;background: rgba(32, 32, 32, 0.77);text-transform: capitalize;font-size: 12px;color: #fff;line-height: normal;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;float: left;position: absolute;content: counter(popcount, decimal);list-style-type: none;background: #e2e2e2;top: 0;font-size: 14px;color: #000;line-height: 20px;padding: 0px 8px 1px 1px;z-index: 4;border: solid #FFF;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;}

Style Widget Popular Posts #7

Kode CSS
.widget .widget-item-control a img {background: none;height: 20px !important;width: 20px !important;border: none;padding: none;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;-ie-box-shadow: none;} .sidebar .PopularPosts .widget-content ul li {overflow: hidden !important;height: 73px !important;list-style-type: none !important;list-style: none;padding: 0px 0px 0px;} .sidebar .popular-posts ul {list-style-type: none !important;padding-left:0px !important;} .sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li:before {float: right;display: inline-block;position: relative;list-style-type: none;color: #000;background: rgba(247, 247, 247, 1);box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7);counter-increment: popcount;content: counter(popcount,decimal);font-size: 15px;font-weight: normal;line-height: 20px;right: 1px;top: 0px;z-index: 999999999999;padding: 0px 6px 1px 5px;border: solid #B5B5B5;border-width: 0px 1px 1px 1px;border-radius: 0px 0px 7px 7px;} .sidebar .PopularPosts .item-thumbnail {float: left;margin: 0px!important;} .sidebar .PopularPosts img {overflow: hidden !important;height: 72px;width: 72px;margin-right: 0px;padding-right: 0px !important;} .sidebar .PopularPosts .item-title a:hover {background: #f6f6f6;color: #000;} .sidebar .PopularPosts .item-title a {display: block;text-decoration: none;font-family: "Oswald",sans-serif;font-weight: normal;font-size: 14px;padding: 10px 30px 0px 78px;background: #EAEAEA;height: 62px;color: #6E6E6E;border-bottom: 1px solid #cccccc;line-height: normal;transition: all .4s ease-in-out;}

Cara Memasang Widget Popular Posts di Blogger

  • Tentunya kalian login dahulu diakun blogger kalian, lalu klik opsi Tata Letak atau Layout => Tambahkan Gadget => pilih Popular Posts / Postingan Populer
  • Kemudian, kalian pilih menu Tema atau Theme => klik Edit HTML => pastekan salah satu kode CSS diatas sebelum kode ini ]]></b:skin>
  • Simpan perubahan.

Akhir Kata …..


Bagaimana Sob hasilnya? Kira-kira ada yang pas tidak dengan template blog kalian?

Oh ya, jika kalian mengalami kendala saat ingin memasang salah satu widget postingan popular diatas, kalian bisa menuliskan masalah kalian dikolom komentar dan semoga saja Saya bisa membantu mengatasi masalah tersebut.

Oke, sekian saja artikel mengenai 6++ Style Widget Popular Posts Keren dan Responsive untuk Blogger dari Saya. Kurang lebihnya mohon maaf dan semoga bermanfaat bagi kalian. Terimakasih …..

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel