Menu

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
CSS3 ile Blogger Popüler Yayınları Düzenleme

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
Önceki Yazılar
Next Post »

1 yorum ''CSS3 ile Blogger Popüler Yayınları Düzenleme"

YORUM EKLE
  1. Çok güzel oldu iyiki varsınız teşekkürler

    YanıtlaSil

Önerilen Yazı
×