13 Nis 2012

Blogger Renkli Popüler Yayınlar Eklentisi


Blogger Renkli Popüler Yayınlar Eklentisi

Bu eklentimizde , blogunuzda bulunan popüler yayınlarınız renkleniyor , Popüler yayınlarınıza renk katmak isterseniz bu eklenti tam size göre..

Görsel açıdan oldukça şık olan Blogger Renkli Popüler Yayınlar Eklentisini tavsiye ediyoruz..

Anlatıma geçelim hemen..

Şablona girerek , Widget Şablonlarını Genişlet diyoruz ve Aşağıdaki kodumuzu buluyoruz
/* Variable definitions
   ====================
Bu kodumuzun hemen altına aşağıdaki kodlarımızı ekliyoruz..
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>
Şimdi ise bu kodu bulalım.
]]></b:skin>
Hemen üstüne aşağıdaki kodlarımızı ekliyoruz..
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
Yukarıdaki işlemleri yaptıysanız eklentimiz şuan için çalışacaktır , ama popüler yayınlarda resim kullanıyorsanız aşağıdaki anlatımıda yapmanızı öneririz , yoksa resimler düzgün görüntülenmeyebilir , resim kullanmıyorsanız üstte anlatılanlar yeterli..

Öncelikle popüler yayınları blogunuza eklediğinizden emin olun , standart olarak popüler yayınlar başlığınız , "Popüler Yayınlar" şeklindedir..Bu yüzden biz popüler yayınlar kelimesini arayacağız , farklı bir isim kullandıysanız siz o ismi aratın..
<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>
x
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
</b:widget>
Yukarıdaki kodlar , popüler yayınların bulunduğu kodlar , burada yapmamız gereken ilk kod ile son kod arasını silip , aşağıdaki kodlarımızı sildiğiniz yere eklemek , yukarda silmeniz gereken yerleri kırmızı x ile gösterdim( sizde x yerine kodlar olacak) diğer ilk ve son koda dokunmayın...aralarını silip aşağıdaki kodlarımı ekleyin..
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
Yukarıdaki kodlarıda eklediyseniz , Blogger Renkli Popüler Yayınlar Eklentisine artık sahipsiniz, güle güle kullanın..DEMO


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Renkli Popüler Yayınlar Eklentisi , Blogger Renkli Popüler Yayınlar Gösterme , Renkli Popüler Yayınlar eklentisi , Popüler Yayınlar , Popüler Yayınlar eklentisi , Blogger Popüler Yayınlar Eklentisi


Eklentileri.blogspot.com Hakkında.


Blogumuz ilk yayınından bu güne , blogger eklentilerini , tüm blogger kullanıcılarına ulaştırmak için yayın yapmış , bu süre içinde hiç bir şekilde kar/gelir elde etmemiş , etmiyecektir..Lütfen desteklerinizi bizden esirgemeyin..

Bizi Facebook ve Twitter üzerinden de takip edebilirsiniz..

22 yorum:

Adsız dedi ki...

Sayfanın dış görünümünde geçersiz değişken ifadesi: İyi biçimlendirilmemiş olduklarından dış görünüm değişkenleri ayrıştırılamadı. Girişi:

hatası alıyorum

Eklentileri.Blogspot dedi ki...

kodu bir kaç tema içinde daha denedim , herhangi bir sıkıntı göremedim , muhakkak bir yerlerde hata yapıyor olabilirsiniz..

tekrardan denermisiniz..

Bilgi Star dedi ki...

en üstte ki kod görünmüyor /* Variable definitions böyle bişey çıkıyor ?

Eklentileri.Blogspot dedi ki...

bu kod bütün temalarda mevcut..


/* Variable definitions
====================

hemen altına kodları ekliyeceksiniz..

Bilgi Star dedi ki...

/* Variable definitions
====================

bu şekilde aratıyorum ama bişey bulmuyor, 3 farklı temada denedim yok kod ?

Bilgi Star dedi ki...

Bir de şurda ki: http://game5peed.blogspot.com/ manşetin hemen altında sol tarafta 3 tane alt alta haber bandı var o tarzda yan yana 4 tane ekleyebilir miyiz daha küçük boyutla ?
Haber sitelerinde üst bölümde çıkan bölümler gibi.

Eklentileri.Blogspot dedi ki...

@Bilgi Star

< b:skin> kodu altında bir yere ekleyin o halde , birde öyle deneyelim.. kod içindeki "b" den önceki bışluğu silin.

diğer dediğiniz blogu bi inceleyim dönerim.

Bilgi Star dedi ki...

Olmuyor kenardaki rakamlar görünüyor ama renkler görünmüyor. Neyse artık.

Diğer üst tarafa haber bandı olayını bekliyorum..

Bilgi Star dedi ki...

Bu arada link değişim yapabiliriz istersen. 125*125 banner yani.

Eklentileri.Blogspot dedi ki...

http://eklentileri.blogspot.com/2012/03/reklam-link-degisim.html adresindeki koşullara uyduğunuzu düşünüyorsanız neden olmasın...

Bilgi Star dedi ki...

Söylemek istediğim bu adresteki gibi üst taraftaki haber bandı: http://magazine3.com/techblog/demo/ kayıt sayfasına gelince haberler küçülüyor... Bu daha iyi hatta bunu blogger a uyarlayabilir misin ?

Eklentileri.Blogspot dedi ki...

Daha sonra bir ara deneyebilirim uyarlamayı , şuan için çok vaktim yok malesef.

Mert Albayrak dedi ki...

Blogger'ınız sayesinde bugün birçok değişiklik yaptık. Her şey için teşekkürler. ;)

Eklentileri.Blogspot dedi ki...

Reca ederiz , yine bekleriz =)

Bilgi Star dedi ki...

Tamam bekliyorum o zaman.. Teşekkürler...

Bilgi Star dedi ki...

hocam bak yeni bir örnek buldum, üstte ki 3 tane band haber var o şekilde biraz daha küçüğü olucak , 4 tane ya da 5 tane bunu alabilir misin ordan ?
http://www.spicytricks.com/

Eklentileri.Blogspot dedi ki...

css ile yapmak mümkün , pazartesi paylaşırım takip edin..

Serhat Yıldıko dedi ki...

tamam beklemedeyim..

Adsız dedi ki...

Bende de renkler çıkmadı.
Renkleri gruplamak yerine CSS'lerine ekleyeyim dedim yapamadım.
El atabilir misin admin?

Eklentileri.Blogspot dedi ki...

@Adsız

Nasıl el atabilirim ? adsız yorum yapmışınız , siteniz blogunuz belli değil ?

Cananca dedi ki...

Bunu yapmayı çok istedim ama beceremedim. Yinede sağolun.

Eklentileri.Blogspot dedi ki...

@Cananca

Eğer dikkatlice üstte yazanları yaparsanız olacaktır mutlaka...tekrar deneyin isterseniz..

Yorum Gönder

Blogger tarafından desteklenmektedir.