Template Blog SEO Friendly Blogger Terbaru

Sunday, January 10, 2016

CSS Popular Post Mirip Detikcom untuk Blogger

CSS Popular Post Mirip Detikcom untuk Blogger
Kode CSS Popular Post Mirip Detikcom untuk Blogger.

WIDGET Popular Post yang biasa ditampilkan di sidebar adalah elemen penting dalam sebuah blog atau website. Daftar posting terbanyak dibaca ini menjadi konten unggulan yang akan menarik perhatian pengunjung untuk membacanya.

Karenanya, popular post harus diperlakukan "istimewa" dari segi desain tampilan, minimal berbeda dengan tampilan judul posting lainnya.

Kode CSS Popular Post Mirip Detikcom untuk Blogger:


#PopularPosts1 ul{list-style-type:none;margin:0;padding: 0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out}
#PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;}
#PopularPosts1 ul li:first-child  {  border-top:none;  }
#PopularPosts1 ul li:last-child  {  border-bottom:none;  }
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #016FBA !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em}
#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}

.PopularPosts h2{
padding-right:.4em;
padding-left:1em
}
.popular-posts ul {  padding-left: 0;
  counter-reset: trackit;
 }
.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;
  }
.PopularPosts ul li:before{
content: counters(trackit, ".");
    padding: 0 .1em 0 10px;
    font-size: 20px;
    font-weight: bold;
    color: #F66;
    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}/* Hides Thumbnail and Snippet */

.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}


CSS Popular Post Default Blogger:
.PopularPosts .item-thumbnail{padding:3px;float: left;margin-right: 14px;margin-top: 5px;}
.PopularPosts .item-thumbnail:hover{background:#3C4042}
.PopularPosts .item-title{font-weight:700;}
.PopularPosts .item-snippet{font-size:11px;color:#888;overflow:hidden;text-align:left}
.PopularPosts ul li {padding:5px 0px}

No SPAM, Please....!!!