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.
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>
3.
Kode Popular Post di atas ada di bawah ini!
4.
Kode Sript Popular post di atas,bisa di copy di bawah ini!
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.
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 |
-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;
}
2.Jika sudah,Klik Simpan Perubahan!
![]() |
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 |
<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.
sangat berkesan sekali kunjungan saya kali ini ke blog Anda gan, makasih banyak ya?
ReplyDeleteJangan lupa mampir ke blog Ane :D
http://kiwilherbal.blogspot.com/
sama-sama gan!!
Deleteblog mantap nih,dan Template nya SEO banget !!haha
Thanks broh untuk informasi artikelnya, sangat membantu :)
ReplyDeletehttp://goo.gl/lTbc2h
sama-sama mba,karena telah berkomentar di Widget popular post keren terbaru!!
Deletewah banyak juga pilihan widget random post ringannya gan!!
ReplyDeletemantap dah!!!
keren keren juga gan, kalo di blog saya sih menggunakan yang no 2 min hehe :D
ReplyDeletekeren gan,saya pilih nomor2 gan.!!mantapp randompost nya!!
ReplyDeleteliafilm.blogspot.com