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.