Bumerang - Yazarkafe

Animasyonlu Popüler Yazılar Eklentisi

Blogger Kullanıcılarının çoğunun kullandığı bir eklenti olan Popüler Yayınlar Eklentisini Animasyonlu hale getirmeyi anlatacağız.Herkesin yapabileceği basit bir değişiklik sonrası popüler yazılarımız daha şık ve göz alıcı görünüme sahip olacak.Popüler Yayınlarımızı Animasyonlu hale getirmek için;
Popüler Yayınlar Eklentisinin blogunuzda kurulu olması gerekiyor.Eğer popüler yayınlar eklentisi blogunuzda kurulu değilse;
Kumanda Paneli>Tasarım>Gadget Ekle>Popüler Yayınlar yolunu takip edip popüler yayınlar eklentisini blogunuza kurabilirsiniz.(Görüntülenecek yazı sayısını 10 Adet olarak ayarlayın)
Popüler Yayınlar Eklentisini blogumuza kurduktan sonra, ufak bir kod ekleyerek Popüler Yayınlar Eklentimizi Animasyonlu hale getireceğiz.
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip ediyoruz ve aşşağıdaki kodu kopyalayıp açılan gadgetimizin içine yapıştırıp kaydediyoruz.
<!-- blogokulu.blogspot.com Kodu Baslat -->
<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;

}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
<!-- blogokulu.blogspot.com Kodu Bitir -->
Kod içerisinde: kırmızıyla yazdığımız width değerlerini değiştirerek genişlik ayarlarını yapabilirsiniz.
Animasyonun düzgün çalışması için yapmamız gereken son bir işlem daha var.Popüler Yazılar için eklediğimiz kodun bulunduğu gadgeti, Blog Kayıtları nın üst kısmına sürükleyip bırakıyoruz.Ardından kaydedip çıkıyoruz.
Animasyonlu Popüler Yazılar Eklentimiz kullanıma hazır.
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

27 yorum:

  1. Dilara AKSOY14 Mart 2012 11:29

    Yaptım ama kodu blog kayıtlarının üstüne aldığımda blogokulu.blogspot.com adresi çıkıyor ve görünüyor. Onu nasıl düzeltebilirim?

    YanıtlayınSil
  2. Uyardığını için teşekkürler.Kod düzeltildi.

    YanıtlayınSil
  3.  Yaptım ama hareket olmadı sabit duruyor...

    YanıtlayınSil
  4. Eklediğimiz Html/javascript Gadgetini Blog Kayıtlarının üzerine sürükleyip bırakmazsan dediğin hatayı verir.

    YanıtlayınSil
  5. http://uydublog.blogspot.com/ adresindeki, konu başlıklı yazılarımı çerceve içine almam için hangi kodları bulmam ve değiştirmem gerekiyor? Misal böyle bir çerceve istiyorum 
    https://lh4.googleusercontent.com/-_ezIKmFg5DE/T1WZD5UrH-I/AAAAAAAAAkw/DJzGTHfDveQ/s612/23.jpg

    YanıtlayınSil
  6. https://lh5.googleusercontent.com/-cYP3eqMyOdw/T2IvQLNy4fI/AAAAAAAAAys/8WqaCa5PUtQ/s640/ads%25C4%25B1z.jpg 94 tane post ifadesi buluyor şablonda.. birkaç kod ile sorunu çözerim diye düşünmüştüm, öyle değilse boşver.. 

    YanıtlayınSil
  7. POST başlığı ile başlayan css satırını bulman gerekiyor

    YanıtlayınSil
  8. ilgi ve alaka için tşkederim.. Nacizane fikrimide belirtmek gerekirse, daha çok css ağırlıklı, özelleştirmeye yönelik paylaşımlar olursa blog'da daha başarılı olur. Benzeri bloglar çok, farklı olmak iyidir.. Tekrar tşkler :) 

    YanıtlayınSil
  9. berkan güveçoğlu22 Mart 2012 10:56

    dostum eline sağlık paylaşım için :)

    YanıtlayınSil
  10. selam bır sey sorabılırmıyım kımse varmı

    YanıtlayınSil
  11. blogumda reklam yayınlıyorum ama sag tarafta ta da gorunuyor reklamlar  ne yapmam gerekıyor 

    YanıtlayınSil
  12. yokmu cevap verecek

    YanıtlayınSil
  13. SORUMA CEVAP VERECEK KIMSE VARMI

    YanıtlayınSil
  14. süpermiş çok teşekkürlerrrrrrrrrrr

    YanıtlayınSil
  15. konyasekerim3529 Nisan 2012 19:49

    Hocam emeğinize sağlık güzel bir çalışma olmuş yanlız bloğuma kodları eklediğimde daha önce eklemiş olduğum jquery haber slaytın çalışması durdu.Galiba jquery çakışması oldu bunu nasıl engelliyebilirim.Yardımınız için şimdiden tşkler.

    YanıtlayınSil
  16. aynı sotun bende de oluştu, yardım lütfen..

    YanıtlayınSil
  17. hareket etmiyor blog kayıtlarının üstüne koydm

    YanıtlayınSil
  18. bn sizin gibi çok tıklananlar yapmak istiyorum nasıl olucak

    YanıtlayınSil
  19.  Kumanda Paneli>Tasarım>Gadget Ekle>Popüler Yayınlar yolunu takip edip.Popüler yayınlar başlığınızı çok tıklananlar olarak değiştirerek bu eklentiyi ekliyebilirsiniz.

    YanıtlayınSil
  20. onu demiyorum slaytsız olanı yapmak istiyorum çerçeve şeklinde olsun 

    YanıtlayınSil
  21. hocam ekledım degısıklık yapmadan ama goruntu baslık hıcbırsey yok

    YanıtlayınSil
  22. http://menzilduragi.blogspot.com/

    YanıtlayınSil
  23. benim popüler yayınlarımda ressimlerim çıkmıyor. beni takip edenlerdede sadece yazılarım çıkıyor ressim yine yok. bunu nasıl değiştirebilirim.geçende yazmıştım ama şimdi yorumumu bulamıyorum cevap yazdınızmı bilmiyorum. bende sizin yan sutundaki gibi konular kategoriler sitene ekle sekmesi olsun istiyorum. bunu benim temamdada yapılırmı.

    YanıtlayınSil
  24. cevap yazmamışsız

    YanıtlayınSil
  25. görünmesini istediğiniz remi yazının en başına koyun görünecektir.ortalara yada sona koyulan resimler görünmüyor malesef,bende şimdi farkettim bunu..

    YanıtlayınSil
  26. selamlar şimdi şöle bir sorun bu yazının 2.si içince geçerli bu sorun.kod başlarken sizin adlesle başlıyor ve bitiyor ya o kısmı silip kendi adresimizi yazdım gene olmadı.kodu başlat kodu sil yazılarını sildim gene olmadı.zaten popiler yazılarım vardı slayt olsun istemiştim sizin eklentinizle var olan popiler yayınların boyuty değişti ama hareket etmiyor.tamamen kaldırdım sadece gadget olarak kaldı.?teşekkürler

    YanıtlayınSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...