Blogger kullanıcıları için tasarlanmış olan bu yeni şık stil popüler mesajlar widget'ı ile altın yayınlarınızı gösterin. Daha önce 2 farklı sürümde, bu blogda kullandığım ilk popüler gönderim widget'ımı (kenar çubuğunda asılı olduğunu görebilirsiniz) paylaştım . Ama bu sefer ben güzel vurgulu efekti ve sayaç kutusu ile başka serin profesyonel görünümlü popüler mesajlar widget tasarladık.
Yapılandırma Ayarlarını Değiştir
Şimdi, snippet'in işaretini kaldırmanız gereken yeni eklenen popüler gönderiler widget'ının yapılandırma ayarlarını değiştirmeniz yeterli. Aşağıdaki ekran görüntüsüne bakınız.
Şimdi eklenti için anlatım işlemine geçelim ;
Öncelikle HTML şablon editör sayfamızda <head> kodunu Ctrl+F yardımıyla aratalım ve bulduğumuz kodun altına gelecek şekilde aşağıda ki Google Font Awesome ekleyelim.
<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
Şimdi eklentinin CSS kodlarını eklemeye geldi sıra. Aşağıda ki CSS kodlarını şablon editör sayfamızda bulunan ]]></b:skin> kodunun üzerine gelecek şekilde ekleyelim.
/*----Sidebar Popular Posts Widget Style by www.TwistBlogg.com----*/
.widget .widget-item-control a img {
border: none;
width: 20px !important;
height: 20px !important;
padding: none;
background: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-ie-box-shadow: none;
box-shadow: none;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 0px 0px;
height: 73px !important;
overflow: hidden !important;
list-style-type: none !important;
list-style: none;
}
.sidebar .popular-posts ul {
padding-left:0px !important;
list-style-type: none !important;
}
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0; padding: 0;
}
/*---- Change Counter Box Style Here ----*/
.sidebar .popular-posts ul li:before {
background: rgba(247, 247, 247, 1);
color: #000000;
content: counter(popcount,decimal);
counter-increment: popcount;
float: right;
font-size: 15px;
line-height: 20px;
list-style-type: none;
padding: 0px 6px 1px 5px;
border-radius: 0px 0px 7px 7px;
position: relative;
display: inline-block;
box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7);
font-weight: normal;
top: 0px;
right: 1px;
z-index: 999999999999;
border: solid #B5B5B5;
border-width: 0px 1px 1px 1px;
}
.sidebar .PopularPosts .item-thumbnail {
float: left;
margin: 0px!important;
}
.sidebar .PopularPosts img {
padding-right: 0px !important;
width: 72px;
height: 72px;
overflow: hidden !important;
margin-right: 0px;
}
.sidebar .PopularPosts .item-title a:hover {
background: #f6f6f6;
color: #000;
}
/*-----Change Font Family -Background - Style - Size or Color Here-----*/
.sidebar .PopularPosts .item-title a {
background: #EAEAEA;
color: #6E6E6E;
display: block;
font-size: 14px;
font-weight: normal;
line-height: normal;
font-family: "Oswald",sans-serif;
padding: 10px 30px 0px 78px;
transition: all .4s ease-in-out;
height: 62px;
text-decoration: none;
border-bottom: 1px solid #cccccc;
}
Kodları ekledikten sonra temanızı kaydedin. Bütün işlemler bu kadar herkese kolay gelsin.