CSS3 ile Blogger Popüler Yayınları Düzenleme
Blogger ın kullanıcılarına sunduğu en iyi uygulama olan
gedgıtlardan biri olan popüler yayınlar widgetini düzenlemek için verdiğim
aşağıdaki CSS3 kodu ile popüler yayınlar widgetini oldukça şık ve hareketli
hale getirebilirsiniz.
Sayfa
tasarımınıza göre bu CSS3 kodları ile oynayarak istediğiniz düzenlemeleri
yapabilirsiniz,örneğin yazı taşması bazı popüler yayınlar widgetinde
olabilir bu durum tamamen sayfa tasarımınız ile ilgilidir bunu düzeltmek için
verdiğim CSS3 popüler yayınlar widgetini kodlarıyla oynayarak
düzeltebilirsiniz.
Ayrıca daha önce
yayınladığımız aşağıdaki eklentilerde işinize
yarayabilir,deneyebilirsiniz.
---Blogger İçin Yüzer Sosyal Medya Widget
---Blogger Sosyal Medya Butonları Ve Abonelik Formu
1-İlk önce Blogger.com giriş yapınız sonra Şablon/ HTML Düzenle adımlarını takip ediniz.
2-Kodu yükleyeceğiniz yeri bulmak için,kodumuz CSS olduğu için ]> </ b:skin> buluyoruz.
Bu kodu bulmak için ]> </ b:skin> kodunu kopyalayarak Ctrl + F tuşlarına basıp kodlarınızın içinde aratın
3-Bulduğunuz ]]> </ b:skin> kodunun üstüne aşağıda verdiğim kodu ekleyiniz ve son olarak Şablonunuzu kaydediniz.
---Blogger İçin Yüzer Sosyal Medya Widget
---Blogger Sosyal Medya Butonları Ve Abonelik Formu
1-İlk önce Blogger.com giriş yapınız sonra Şablon/ HTML Düzenle adımlarını takip ediniz.
2-Kodu yükleyeceğiniz yeri bulmak için,kodumuz CSS olduğu için ]> </ b:skin> buluyoruz.
Bu kodu bulmak için ]> </ b:skin> kodunu kopyalayarak Ctrl + F tuşlarına basıp kodlarınızın içinde aratın
3-Bulduğunuz ]]> </ b:skin> kodunun üstüne aşağıda verdiğim kodu ekleyiniz ve son olarak Şablonunuzu kaydediniz.
/*--- Seo Mektebi Popular Yayınlar Widget- */
.popular-posts .item-thumbnail img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
.popular-posts .item-thumbnail img {
border-radius: 100px 100px 100px 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border: 5px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.popular-posts ul li {
margin: 12px;
opacity: 0.8;
border: 5px solid #eee;
border-radius: 100px 100px 100px 100px;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
}
.popular-posts a{
font-size: 13px solid;
}
Yukarıdaki CSS kodları
içindeki #xxx şeklindeki renk kodlarını istediğiniz gibi değiştirebilirsiniz.
Sonraki Yazılar
« Prev Post
« Prev Post
Önceki Yazılar
Next Post »
Next Post »
Çok güzel oldu iyiki varsınız teşekkürler
YanıtlaSil