Cara Membuat Popular Post Keren di Blog

Popular post adalah widget artikel atau postingan paling populer atau banyak dibaca pengunjung. Widget ini biasanya dipasang pada sidebar blog paling atas agar mudah terlihat pengunjung.

Jika anda tidak suka tampilan popular post secara default dari blogger, maka bisa menggantinya dengan popular post keren dengan berbagai macam variasi.  Kali ini saya akan memberikan beberapa koleksi popular post keren warna warni di blog.

Baca juga: Cara Membuat Label Cloud Keren dan Cantik di Blog

Koleksi Popupar Post Keren untuk Blogger

Berikut Cara Pemasangan di blog:

  1. Silahkan Sobat Login ke akun Blogger.
  2. Langsung Pilih Template >> Klik Edit HTML.
  3. Sobat Cari kode ]]></b:skin> (gunakan CTRL+F).
  4. Lalu kode-kode berikut ini, dan letakkan tepat diatas ]]></b:skin>

Popular Post Keren dan Simple

cara membuat popular post keren di blog

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

Popular Post Keren Warna Warni di Blog

membuat popular post warna warni di blog

/* Popular Post */
.PopularPosts ul,.PopularPosts li,
.PopularPosts li img, .PopularPosts li a,
.PopularPosts li a img {margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul {margin:.5em 0;list-style:none;color:black;counter-reset:num;}
.PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;}
.PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0 !important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative;}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#444 !important;text-decoration:none;}
.PopularPosts ul li:before {content:counter(num) !important;display:block;position:absolute;background-color:#333;color:#fff !important;width:22px;height:22px;line-height:22px;text-align:center;top:0px;right:0px;padding-right:0px !important;}
.PopularPosts ul li:nth-child(1) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts .item-thumbnail {margin:0 0 0 0;}
.PopularPosts .item-snippet {font-size:11px;}
.profile-img{display:inline;opaciry:10;margin:0 6px 3px 0;}

Popular Posrt Keren ala Vio Magz

cara memasang popular post keren di blog

/* Popular Posts */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {margin: 0 0;padding: 0 0;list-style:none;border:none;outline:none;}
.PopularPosts .widget-content ul {margin: 0;list-style:none;counter-reset:num;}
.PopularPosts .widget-content ul li img {display: block;width: 70px;height: 70px;float: left;}
.PopularPosts .widget-content ul li {margin: 0 0 10px;counter-increment: num;position: relative;}
.PopularPosts ul li:last-child {margin-bottom: 0px;}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight: 500;text-decoration: none;color: #444444;}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {color: #49ACE1;}
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before, .PopularPosts ul li > a:before {
content: counter(num) !important;font-size: 30px;font-weight: 500;display: block;position: absolute;top: 0;left: 0;bottom: 0;background: linear-gradient(#49ACE1, #fff);color: #fff !important;width: 26px;padding-top: 10px;
text-align: center;}
.PopularPosts ul li > a {display: block;padding-left: 32px;min-height: 45px;}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {margin-left: 32px;}
.PopularPosts .item-title {line-height: 1.6;margin-right: 8px;min-height: 40px;}
.PopularPosts .item-thumbnail {float: left;margin-right: 8px;}
.PopularPosts .item-snippet {line-height: 1.6em;font-size: 14px;margin-top: 8px;}

Cara Memasang Widget Popular Post di Blog

  1. Masuk akun blogger >> Pilih Tata letak atau layout >> tambah gadget
  2. Pilih entri populer (khusus yang ala vio magz harus cek list pada image thumbnail)
  3. Terakhir klik OK dan jangan lupa save pengaturan.

Sampai disini anda sudah berhasil memasang popular post keren di blog. Namun jika masih kesulitan silahkan bertanya melalui kolom komentar yang sudah tersedia.

Leave a Reply