3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

Widget Popular Post merupakam bagian dari situs/blog. Yang menampilkan daftar update reguler suatu artikel yang paling banyak dibaca di situs Anda yang diperuntukan bagi pengunjung Anda. Karena widget ini berfungsi sebagai alat navigasi bagi pengunjung terhadap halaman web/blog anda. Blogspot juga menyediakan widget popular post bagi pengunjung, tetapi secara default itu sangat membosankan, maka saya coba membuat 3 koleksi widget popular Post terbaik menurut saya dengan menggunakan properti CSS3.

– Buka Blog masuk Dashboard → Template → Html Editor
– Cari (menekan Ctrl + F) “]]></b:skin>”
– Copy paste kode CSS dibawah ini tepat di atasnya.

3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

.popular-posts img{display:none}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
 list-style-type: none;
 margin:0 0 5px 0px;
 padding:5px 5px 5px 20px !important;
 border: 1px solid #dcdcdc;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 }
.popular-posts ul li:hover {
 background:#FF8040;
 }
.popular-posts ul li a {
 text-decoration:none;
 font:14px Georgia, verdana;
 color:#222222;
 }
.popular-posts ul li a:hover {
 text-decoration:none;
 color:#fff;
 }
3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

.popular-posts{margin-left:-20px}
.popular-posts li{background:#fff}
.popular-posts ul {
 padding-left: 0px;
 counter-reset: popcount;
 }
.popular-posts img{display:none!important}
.popular-posts ul li:before {
 list-style-type: none;
 margin-right: 15px;
 padding: 0.3em 0.6em;
 counter-increment:popcount;
 content:counter(popcount);
 font-size: 16px;
 background: #ff2e00;
 color: #ffffff;
 position: relative;
 font-weight: bold;
 font-family: georgia;
 float: left;
 border: 2px solid #dddddd;
 box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
 border-bottom: 1px dashed #dddddd;
 }
.popular-posts ul li:hover {
 border-bottom: 1px dashed #696969;
 }
.popular-posts ul li a {
 text-decoration:none; color:#5A5F63;
 }
.popular-posts ul li a:hover {
 text-decoration:none;
 }
3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

.PopularPosts h2{
 padding-right:.4em;
 padding-left:1em
 }
.popular-posts ul {  padding-left: 0;
 counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li { 
 border-bottom: 1px solid #f0f0f0; 
 list-style: none outside none !important; 
 margin-left: 0 !important; 
 overflow: hidden; 
 padding: 10px 0 !important; 
 transition: all 0.25s linear 0s;
 counter-increment: trackit;/*setting counter-increment*/
 }
.PopularPosts ul li:before{
 content: counters(trackit, ".");
 padding: 0 .1em 0 0;
 font-size: 20px;
 font-weight: bold;
 color: #C4C4C4;
 float:left;
 margin-right:10px;
 }
.PopularPosts li:first-child{
 border-top:1px solid #f0f0f0
 }
.PopularPosts li:nth-child(odd)
 {background:#f5f5f5}
.PopularPosts .item-thumbnail, .PopularPosts .item-snippet { 
 display: none!important}
.PopularPosts a, .PopularPosts a:hover{
 color:#959595;
 font-size:.9rem
 }
#PopularPosts1 li{
 padding-right: 1em !important;
 padding-left: 1em !important;
 }
.widget.PopularPosts{padding:1.2em 0em !important}

Tags:
Previous Post

Cara Membuat Widget Label Sendiri Untuk Blogger

Next Post

Memasang Meta Tag SEO Friendly Terbaru 2014 serta Valid HTML5

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Hosting Unlimited Indonesia
Advertisements
0

Your Cart