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ıtlaSil
  2. Daniel Craig27 Mart 2012 13:42

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

    YanıtlaSil
  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ıtlaSil
  4. sayenizde blogum çok dah profesyonel görünmeye başladı. teşekkürler....

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

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

    DİĞER GADGET LARLA ÇAKIŞIYOR

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

    YanıtlaSil
  8. teşekkürler

    YanıtlaSil
  9. yalnız binlerce widht ve height var burda :-)

    YanıtlaSil
  10. neden cevaplamıyorsunuz sorularımı acaba

    YanıtlaSil
  11. kusura bakmayın sorunuzu görmedim.
    bumerang ve maxgelir.com dan

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

    YanıtlaSil
  13. ekledim ama hiçbir görüntü çıkmadı

    YanıtlaSil
  14. 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ıtlaSil
  15. takıldığınız nokta neresi?

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

    YanıtlaSil
  17. İ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ıtlaSil
  18. 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ıtlaSil
  19. yardım edin lütfen..:( 

    YanıtlaSil
  20. blog adresinizi verin bir bakalım,bu eklentiyi engelleyen başka bir eklenti olabilir.

    YanıtlaSil
  21. http://hazandakar.blogspot.com/  yardımlarınızı bekliyorum..

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

    YanıtlaSil
  23. 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ıtlaSil
  24. 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ıtlaSil
  25. kaldırırp tekrar yüklemeyi dene.

    YanıtlaSil
  26. Denedim olmadı :((

    YanıtlaSil
  27. 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ıtlaSil
  28. ş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ıtlaSil
  29. malesef bu eklenti bende çalışmadı. 

    YanıtlaSil

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