Popüler Yazılar Widgeti uzun süre önce Blogger tarafından yayımlanmıştır. Blog da en çok izlenen veya okunan konuları göstermek yararlı bir widgettir. Bu yazıda, bu widgetin nasıl güzel ve heyecan verici görünmesisini sağlayacağınızdan kısaca bahsetmek istiyoruz.Detaylar ipucular devamında.
Bloğunuzdaki en çok okunan poüler yazılarınız ziyaretçiler tarafından da dikkar çekcektir. Aşağıda gördüğünüz resimde en çok okunan yazılarınız en aza göre azalan renklerde çıkacaktır.
Peki nasıl yapacağız.
1.Blogger panelinizden Tasarım ardında HTML Düzenleye gidin.
2.]]></b:skin>
kodunu bulup ,bu koddan önce aşağıdaki kodları yerleştirin.
Bloğunuzdaki en çok okunan poüler yazılarınız ziyaretçiler tarafından da dikkar çekcektir. Aşağıda gördüğünüz resimde en çok okunan yazılarınız en aza göre azalan renklerde çıkacaktır.
Peki nasıl yapacağız.
1.Blogger panelinizden Tasarım ardında HTML Düzenleye gidin.
2.]]></b:skin>
kodunu bulup ,bu koddan önce aşağıdaki kodları yerleştirin.
.mostpopular {3.Şablon tasarımına gelin widget eklemek istediğiniz konumu seçin HTML Javascript ekle ve sonra aiağıdaki kodu ekleyin
list-style: none outside none;
margin: 0.3em 0 !important;
padding: 0;
}
.mostpopular_li {
background-image: none !important;
border: 0 none;
list-style: none outside none !important;
margin: 0 0 -7px !important;
padding: 13px 0 8px 8px !important;
position: relative;
width: 100%;
}
.mostpopular_li.color0 {
background-color: #EE5826 !important;
width: 100%;
}
.mostpopular_li.color1 {
background-color: #27B6E2 !important;
width: 93%;
}
.mostpopular_li.color2 {
background-color: #C5E627 !important;
width: 89%;
}
.mostpopular_li.color3 {
background-color: #FF6F51 !important;
width: 84%;
}
.mostpopular_li.color4 {
background-color: #D59B8E !important;
width: 80%;
}
.mostpopular_li.color5, .mostpopular_li.color6, .mostpopular_li.color7, .mostpopular_li.color8, .mostpopular_li.color9, .mostpopular_li.color10, .mostpopular_li.color11, .mostpopular_li.color12, .mostpopular_li.color13, .mostpopular_li.color14, .mostpopular_li.color15 {
background-color: #888888 !important;
width: 74%;
}
a.barlinko {
background: none repeat scroll 0 0 transparent;
display: block;
font: italic 13px georgia,serif;
margin: 0 6px 0 0;
padding: 0;
text-decoration: none !important;
}
a.barlinko:hover {
color: #FFFFFF;
}
.barco {
display: block;
right: 0;
}
.mostpopular_li img {
margin-top: 15px;
position: absolute;
right: 5px;
}
a.thethingwithc {
border: 0 none !important;
color: #FFFFFF !important;
display: block;
font-family: arial;
font-size: 11px;
font-weight: bold;
padding: 0 9px 0 0;
text-align: right;
text-decoration: none !important;
}
