14 Haziran 2010 Pazartesi

Blogcu Son Yazılar Eklentisi Süper

Merhaba Arkadaşlar Bugün blogcuda Çığır açacam.Doğrusu ben öyle düşünüyorum :).

Çığır açma sebebim ise blogcuda biliyorsunuzki tabanı blogger kadar sağlam değil ve eklentiler sınırlı sayıda.Fakat Bugün Yaptığım bir buluş ile (havamıda atam buluş yaptım :D) konuların altına son yazılar eklentisini "CSS Sprite" tekniği ile Feedburner BuzzBoost yani son yazxılar eklentisi ile entegre ederek hoş bir görünüm ortaya çıkarmayı başardım sanırım bu tutulur :)

Şimdi o kadar terim kullandımki kimse anlamadı İşte size Demo

Yazı linklerinin üzerine geldiğinizde yandaki resimlerin değiştiğini göreceksiniz.Ziyaretçiye gayet hoş bir görünüm kazandırıyor.

Şimdi gel gelelim kodlarımıza


Öncelikle Şablonu Düzenle HTML diyoruz

</style> buluyoruz ve aşağıdaki kodları yapıştırıyoruz

#mucozer ul li {
  list-style-type:none;
}
#mucozer ul li a {
  display:block;
  background:url(http://i49.tinypic.com/mbj1gg.png) left center no-repeat ;
  padding:5px 0px 5px 25px;
  text-decoration:none;
  color: #006400;
}
#mucozer ul li a:hover {
  background:url(http://i49.tinypic.com/9srvj6.gif) left center no-repeat ;
  color:#666666;
}

Şimdi kaydediyoruz.

Ardından Feedburner hesabımıza giriş yapıyoruz. istediğimiz RSS okuyucumuzu seçiyoruz Publicize' ye tıklıyoruz ardından sol tafataki menüneden BuzzBoost 'u seçiyoruz alttaki seçim kutularından ben hiçbirini seçmedim sade oldu benimki.

Şimdi Kodumuzu alıyoruz benim kodum.

<script src="http://feeds.feedburner.com/mucozer?format=sigpro" type="text/javascript" ></script>

bunun yerine.
<div id="mucozer">
 

 <script src="http://feeds.feedburner.com/mucozer?format=sigpro" type="text/javascript" ></script>
  </div>



kodunu yapıştrıyorum ve kaydediyorum işte hepsi bu kadar.
Onun Haricinde Örneğin bir link vereceğiz linki verirken en basitinden şöyle göstereyim.


<div id="mucozer">
    <ul>
        <li><a href="anasayfa.html" title="Anasayfa">Anasayfa</a></li>
        <li><a href="hakkimizda.html" title="Hakkımızda">Hakkimizda</a></li>
        <li><a href="arsiv.html" title="Arşiv">Arşiv</a></li>
        <li><a href="yardim.html" title="Yardım">Yardım</a></li>
        <li><a href="iletisim.html" title="İletişim">İletişim</a></li>
    </ul>
</div>

gibi kullanıyoruz işte hepsi bu kadar ani mantığımız CSS Sprite denilince akla gelecek olan şey resim üzerine gelindiğinde resim değişsin olarak bu mantık yani biz bunu sadece Feedburner Son Yazılar eklentisi İle Entegre Ettik Yazılarımızda kullanırken artık alt tarafta görünecek hepsi bu kadar. Bir Tşk Yeter :)

Hiç yorum yok:

Yorum Gönder

Yorum Almak Bir Site Sahibine Verilecek En Güzel Hediyedir Teşekkür Ederim..