Bumerang - Yazarkafe

Blogger Popüler Yazılar-Animasyonlu 2

Popüler Yazılarınızı şekildeki gibi sola doğru kayan şık tasarımlı, animasyonlu slaytta göstermek istermisiniz? Öncelikle blogger hesabınızla giriş yaptıktan sonra Tasarım>Gadget Ekle>Popüler Yayınlar yolunu takip edip Popüler yayınlar eklentisini blogunuza kurmanız gerekiyor, popüler yazılar eklentisini blogunuza kurduktan sonra ufak bir kod eklentisi ile popüler yazılarınız şekildeki gibi şık tasarımlı,animasyonlu,slayt olarak görüntülecek,bu sayede popüler yazılarınız dahada poüler olacak.

Popüler Yayınlar Eklentisini kurduktan sonra;
Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetimizin içine yapıştırıp kaydediyoruz.
<!-- blogokulu.blogspot.com Kodu Baslat -->
<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent{
    position:relative;
    overflow:hidden;
    border:#F4F4F4 solid 1px;
    width:892px;
    height:300px;
}
.lof-slidecontent .preload{
    height:100%;
    width:100%;
    background:#FFF;
    position:absolute;
    top:0;
    left:0;
    z-index:100000;
    color:#FFF;
    text-align:center
}
.lof-slidecontent .preload div{
    height:100%;
    width:100%;

    background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
    position:relative;
    height:100%;
    width:600px;
    z-index:3px;
    overflow:hidden;
    float:right;
}

/*******************************************************/
.lof-main-item-desc{
    z-index:100px;
    position:absolute;
    top:150px;
    left:50px;
    width:400px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

    /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
    color:#FFF;
    margin:0 8px;
    padding:8px 0
}
.lof-main-item-desc h3 a{
    color:#FFF  !important;
    margin:0 !important;
    font-size:140% !important;
    padding:20px 8px 2px !important;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif !important;
}
.lof-main-item-desc h3 a:hover{
    color:#FF6;
    text-decoration:underline;
}

/* main flash */
ul.lof-main-wapper{
    /* margin-right:auto; */
    overflow:hidden;
    background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
    padding:0px;
    margin:0  !important;
    height:300px;
    width:600px;
    position:absolute;
    overflow:hidden;
}

ul.lof-main-wapper li{
    overflow:hidden;
    padding:0px  !important;
    margin:0px;
    height:100%;
    width:600px;
    float:left;
}
.lof-opacity  li{
    position:absolute;
    top:0;
    left:0;
    float:inherit;
}
ul.lof-main-wapper li img{
    padding:0px !important;
    width:600px  !important;
    height:300px  !important;
}

.lof-main-wapper{
        margin-left:auto;
        margin-right:inherit;
        clear:both;
        height:300px;
    }

li-desc{
    z-index:100px;
    position:absolute;
    top:150px;
    left:50px;
    width:400px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

    /* filter:0.7(opacity:60) */
}
li-desc p{
    color:#FFF;
    margin:0 8px;
    padding:8px 0
}
li-desc h3 a{
    color:#FFF;
    margin:0;
    font-size:140%;
    padding:20px 8px 2px;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
    color:#FF6;
    text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
    top:0  ;
    padding:0  ;
    margin:0 ;
    position:absolute ;
    width:100% ;
    background:none !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
ul.lof-navigator li{
    cursor:hand ;
    cursor:pointer ;
    list-style:none ;
    width:100%  !important;
    padding:0  !important;
    margin:0 !important;
    overflow:hidden !important;
}
.lof-navigator-outer{
    position:absolute !important;
    z-index:100 !important;
    height:300px !important;
    width:310px  !important;
    overflow:hidden  !important;
    color:#FFF !important;
    left:0 !important
    top:0 !important;
    right:inherit !important;
}
.lof-navigator li.active{
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-bg2.gif) center right no-repeat;
    color:#FFF
}
.lof-navigator li:hover{

}

.lof-navigator li h3{
    color:#FFF;
    font-size:120%;
    padding:15px 0 0 !important;
    margin:0;

}
.lof-navigator li div{
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);
    color:#FFF;
    height:100%;
    position:relative;

    padding-left:15px;
    border-top:1px solid #E1E1E1;
    margin-left:inherit;
    margin-right:18px;
}

.lof-navigator li.active div{
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/grad-bg2.gif);
    color:#FFF;

    margin-left:inherit;
    margin-right:18px;

}
.lof-navigator li img{
    height:60px;
    width:60px;
    margin:15px 15px 10px 0px;
    float:left;
    padding:3px;
    border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
    border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
    color:#FFF;

.PopularPosts .item-title{0 !important; }
}
.PopularPosts .widget-item-control {display:none}

    ul.lof-main-wapper li {
        position:relative;
    }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofslider.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
        $('#lofslidecontent45').lofJSidernews( { interval:2000,
                                                 easing:'easeOutBounce',
                                                duration:1200,
                                                auto:true } );
    });

</script>
<!-- blogokulu.blogspot.com Kodu Bitir -->
Kod içerisinde, sonda kırmızı renkle belirttiğim interval değerini değiştirerek slaytın geçiş hızını ayarlayabilirsiniz.
Son olarak yapmanız gereken basit bir işlem daha var.Popüler Yayınlar Gadgetinizi Blog Kayıtları nın üzerine sürükleyip bırakıyoruz ve kaydediyoruz.Animasyonlu Popüler Yayınlar eklentisi 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ı

29 yorum:

  1. afedersiniz merak ettim reklamları hangi siteden alıyorsunuz?

    YanıtlayınSil
  2. Daniel Craig27 Mart 2012 13:42

    Hızını Nasıl Ayarlayacağız ? Çok hızlı Geçişler..

    YanıtlayınSil
  3. Çok teşekkür ederim bu soruyu sorarak unuttuğum bir noktayı bana hatırlattınız sorunuzun cevabını yazı içerisine ekledim.İnterval değerini değiştirerek slayt geçiş hızını ayarlayabilirsiniz.

    YanıtlayınSil
  4. sayenizde blogum çok dah profesyonel görünmeye başladı. teşekkürler....

    YanıtlayınSil
  5. Rica ederim,blogunuzun daha da profesyonel olması için çalışmaya devam:)Bu yorumlar azmimi arttırıyor,çok teşekkürler

    YanıtlayınSil
  6. GENİŞLİĞİNİ NASIL AZALTABİLİRİZ
    http://hocanne.blogspot.com/ 

    DİĞER GADGET LARLA ÇAKIŞIYOR

    YanıtlayınSil
  7. width=genişlik ve height=yükseklik değerlerini değiştirerek kendinize göre boyutlandırma yapabilirsiniz.

    YanıtlayınSil
  8. yalnız binlerce widht ve height var burda :-)

    YanıtlayınSil
  9. neden cevaplamıyorsunuz sorularımı acaba

    YanıtlayınSil
  10. kusura bakmayın sorunuzu görmedim.
    bumerang ve maxgelir.com dan

    YanıtlayınSil
  11. ben bitürlü yapamadım bunu. fotoğraf yükleniyo gibi daire çıkıyo öle kalıyo

    YanıtlayınSil
  12. ekledim ama hiçbir görüntü çıkmadı

    YanıtlayınSil
  13. merhaba 

    ben bu anımasyonu çok istiyorum ama doğru düzgün açılmıyor 
    yardım edin lütfen.. :( ağlıycam akşamdan bu yana.. 
    gurbet_uzakdiyar@hotmail.com burdan ekleyin ne olur..

    YanıtlayınSil
  14. takıldığınız nokta neresi?

    YanıtlayınSil
  15. takıldığım nokta yok bılıyorum azcok.. ama ekleince cıkmıyor görüntü.. yarım yamalak cıkıyor :(

    YanıtlayınSil
  16. İYİ GÜNLER HOCAM BELİRTTİĞİNİZ GİBİ TÜM İŞLEMLERİ YAPTIM AMA BİR TÜRLÜ YUKARIDAKİ GÖRÜNÜM OLUŞMADI ,SORUN NE OLABİLİR ACABA ?
    SİTE : http://cyberrx-bloggertest.blogspot.com

    YanıtlayınSil
  17. Poüler Yazılar gadgetiniBlog Kayıtlarının üzerine sürükleyip bırakman gerekiyor.en sondaki hareketli resmi tıkla nedemek istediğimi anlarsın.sen başlığın altyına eklemişsin oyüzden görünmüyor.

    YanıtlayınSil
  18. yardım edin lütfen..:( 

    YanıtlayınSil
  19. blog adresinizi verin bir bakalım,bu eklentiyi engelleyen başka bir eklenti olabilir.

    YanıtlayınSil
  20. http://hazandakar.blogspot.com/  yardımlarınızı bekliyorum..

    YanıtlayınSil
  21.  yeni eklediğim popüler yazılar slayt alanını deneyin.Ayrıca blogunuzdaki ney sesi mükemmel...

    YanıtlayınSil
  22. merhaba, harika işler başarıyorsunuz, bloggerlar sizden çok faydakanıyor, sağolun.

    şunu soracaktım: üstteki animasyonun bire bir aynısını "son yazılar" için kullanmak mümkün mü acaba?

    YanıtlayınSil
  23. Sağlıklı şekilde çalışırken ne yaptım bilmiyorum fakat slayt çalışmıyor sadece ekranda görünüyor acil yardım lütfen.

    Teşekkürler

    YanıtlayınSil
  24. kaldırırp tekrar yüklemeyi dene.

    YanıtlayınSil
  25. Denedim olmadı :((

    YanıtlayınSil
  26. Merhaba Slayt ekranı donuk şekilde duruyor ne yaptımsa olmadı diğer slayt şablonlarını denedim bu sefer ortada cd şeklinde sürekli yükleniyor işareti veriyor yukarıda ki şablonda sadece ekran görüntüsü var ve geçişler olmuyor.

    HTLM şablonlarından kaynaklı bir sorun mu var sizce kodlarla uğraşmıştım çünkü taslak içerisine facebook uygulamasını eklemek için.

    Varsa nasıl düzeltebilirm.

    Teşekkürler

    YanıtlayınSil
  27. şablon kodlarınız bozulmuş demekki,bu tür durumlarda şablonunuzun yedeğini mutlaka alın diye sık sık uyarıyoruz,eğer yedeğiniz varsa onu geri yüklemeyi deneyin.

    YanıtlayınSil
  28. malesef bu eklenti bende çalışmadı. 

    YanıtlayınSil

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