Kumpulan Widget Popular Post Keren dan Ringan

Kumpulan Widget Popular Post Keren dan Ringan-Di mulai ketika  saya memulai nge blog,saya menemukan banyak sekali tempilan tampilan Popular Post selain dari bawaan Blogger.Dari situ saya berpikir untuk mengumpulkan Widget widget tersebut dan ingin membagikannya kepada yang membutuhan,supaya lengkap dan komplit jika setiap mencari widget Popular Post keren dan ringan hanya dalam satu blog saja,jadi hanya kamu tinggal memilih milih saja.Tapi sebelum memasang Kumpulan Widget Popular Post Keren dan Ringan ini,sebelum nya kamu harus memasang widget popular post bawaan dari Blogger dulu,jika sudah,tidak usah mengikuti langkah di bawah ini.

Menambahkan Widget popular Post dari Blogger!

1.Buka Dasboard Blogger

2.Pilih Tata Letak/layout

3.Klik Tambahkan Gadget/Add Gadget

4.Cari Entri Populer /Popular Post
   Most Viewed/Paling banyak di kunjungi: All Time / Setiap Saat
   Show/Tampilan : Hilangkan centang
5.Simpan

Setelah Di atas selesai,langkah selanjutnya adalah mencari widget Popular Post yang keren.Di bawah ini saya menyediakan beberapa Kumpulan Widget Popular Post Keren dan Ringan untuk di pasang di sidebar atau lebih di kenal dengan widget Blog.

Silahkan Di pilih tampilan Widget Popular post keren dan ringan!

1.

Source : d-genera.blogspot.com

Untuk cara pemasangan Widget Popular Post seperti di atas,Bisa di ikuti langkah seperti di bawah ini!!

-Buka Dasboard > Template >  Edit Template (Jangan lupa di Backup data templatenya terlebih dahulu supaya,jika ada kesalahan bisa di atasi.
-Copy Kode di bawah ini dan pastekan tepat diatas ]]></b:skin>

/*--- Genera Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtnXHRC6jeCaDSuf2XSdFLeCqFQTrZmvcZP4m_1jbOquDlvHGJXIue-TianoQ_EzJiQ95yiklRP-2h2o91OfqTCqMKN_NVjEbL1F0mpQZkquytSWogzMzwqG8y4qUPf82qCAdrxV8jxQcO/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Jika sudah,Klik Simpan Perubahan!

2.

Souce :seputarblog1.blogspot.com

Kode Scypt Widget Popular Post Warna Warni:

 #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 10px 0px -5px; 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;}#PopularPosts1 img {border-radius:200px;width:60px; height:60px;margin-left:4px;}

3.

Source : duniahenkz.blogspot.com

 Kode Popular Post di atas ada di bawah ini!

 <style>
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjULAFv9JTuHbMXSNkYFKGJCHt2rnIy8u51_QuYEjxdmMcMmeO9vEdAOYqkZXRBtF4X_-fnUQVMdIwL0_BCwr_v5iKt414y75Rsp9Vua_MlB3noLbFKm3zRWcnaaUD0JjWPL8CmPXtz0h4/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 33px !important;
border: 1px dashed #dddddd;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNUOCcuFZwhiH6Ka7JqoaHphg2dpwOtbfDLshclFl8zsJ5ZF-8fQfNQEIjKwtqyj92GQe_CDT_tRCIBbOukFGvOiCd6c7eDKABetYA9trsT1BUw06qZ1j9cL7FZT4N-FNKlmTmKxSL4H0/s1600/rb+mark+icon...jpg) no-repeat 2px;
border: 2px solid #b60000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
</style>

4.

Kode Sript Popular post di atas,bisa di copy di bawah ini!

.PopularPosts li {margin-bottom:-10px}
.PopularPosts .item-thumbnail {float:left}
.popular-posts ul li img {
  width:60px;
  height:60px;
  padding:2px;
  -moz-border-radius:60px;
  -webkit-border-radius:60px;
  border-radius:60px;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  border:2px solid #CCC;
}
.popular-posts ul li img:hover {
  border:2px solid #ccc;
  -moz-transform:scale(1.2) rotate(-360deg);
  -webkit-transform:scale(1.2) rotate(-360deg);
  -o-transform:scale(1.2) rotate(-360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(-360deg);
}
.popular-post-isi {
  position:relative;
  background-color:#f7f7f7;
  padding:5px;
  min-height:60px;
  border:1px solid #ccc;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  margin-left:75px;
  margin-bottom:5px;
}
.popular-post-isi:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  right:100%;
  top:19px;
  border-width:10px;
  border-style:solid;
  border-color:transparent #f7f7f7 transparent transparent;
}
.item-title {
  font-size:12px;
  line-height:1.1em;
}
.item-snippet {
  color:blue;
  font-size:11px;
  line-height:1em;
}

Untuk Semua Popular tersebut,untuk menyimpannya sama dengan langkah nomor 1.

Semoga  Kumpulan Widget Popular Post Keren dan Ringan bisa bermnafaat bagi para pembaca
Mungkin bagi kalian yang mencoba memasang widget ini,mungkin mengalami kendala dalam pemasangan,bisa memasukan komentarnya di bawah ini!
Tags:Mengatur Tampilan Popular Post,Widget Popular Post keren terbaru.