Blogger Slider- Popüler Yazıları Slayt Olarak Görüntüleme

Popüler yazılarınızı slayt alanı ve 3D dönen küp şeklinde yayınlama imkanını veren kodları daha önce sizlerle paylaşmıştık.Şimdi ise farklı bir görünüme sahip, şık tasarımı olan, blogunuzun başında popüler içeriklerinizden  slayt halinde gösterim yapan eklentiyi sizlere sunuyoruz.
Popüler Yazıları Slayt olarak kullanmanızın avantajları;
Blogunuza şık ve dikkat çekici bir görünüm kazandırır.Ziyaretçilerinizi  yazılarınızı tıklamaya teşvik eder.Sliderlerde resim boyutlarını slayt alnınıza göre ayarlamak, resim linkini elle girip açıklamaları manuel yazmak zorundasınız.Blogunda slayt alanı kullanmak isteyen arkadaşları Popüler Yazılar Slayt Alanında Görüntüleme eklentisi ile bu uğraştan kurtarıyoruz.Eklenti sayesinde en çok tıklanan yazılarınız hangisi ise otomatik olarak slayt alanında görünecektir.Herhangi bir boyutlandırma yapmanıza,link vermenize açıklama yapmanıza gerek yok  Popüler Yazılar Slayt Alanı  eklentisi herşeyi otomatik olarak yapıyor.

Eklentiyi blogunuza kurmak için;
Blogger hesabınızla giriş yaptıktan sonraTasarı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.

<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent, .lof-slidecontent a {
    color:#FFF;
}
.lof-slidecontent a.readmore{
    color:#58B1EA;
    font-size:95%;

}
.lof-slidecontent{
    position:relative;
    overflow:hidden;
    border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:100000;
    text-align:center;
    background:#FFF
}
.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:800px;
    z-index:3px;
    overflow:hidden;
}

/*******************************************************/
.lof-main-item-desc{
    z-index:100px;
    position:absolute;
    bottom:50px;
    left:0px;
    width:350px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png);
    height:100px;
    /* filter:0.7(opacity:60) */
    padding:10px;
}
.lof-main-item-desc p{
    margin:0 8px;
    padding:8px 0
}
.lof-main-item-desc h3{
    padding:0;
    margin:0
}
.lof-main-item-desc h2{
    padding:0;
    margin:15px 0 0 0px;
}
.lof-main-item-desc h3 a{
    margin:0;
    background:#C01F25;
    font-size:75%;
    padding:2px 3px;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
    text-transform:uppercase;
    text-decoration:none
}
.lof-main-item-desc h3 a:hover{

    text-decoration:underline;
}
.lof-main-item-desc h3 i {
    font-size:70%;
}

/* 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;
    position:absolute;
    overflow:hidden;
}

ul.lof-main-wapper li{
    overflow:hidden;
    padding:0px   !important;
    margin:0px;
    float:left;
    position:relative;
}
.lof-opacity  li{
    position:absolute;
    top:0;
    left:0;
    float:inherit;
}
ul.lof-main-wapper li img{
    padding:0px  !important;
}

/* item navigator */
.lof-navigator-wapper {
    position:absolute;
    bottom:10px;
    right:10px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat;
    padding:5px 0px;
}
.lof-navigator-outer{
    position:relative;
    z-index:100;
    height:180px;
    width:310px;
    overflow:hidden;
    color:#FFF;
    float:left
}
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 !important;
    cursor:pointer !important;
    list-style:none !important;
    padding:0 !important;
    margin-left:0px !important;
    overflow:hidden !important;
    float:left !important;
    display:block !important;

    text-align:center !important;

}
ul.lof-navigator li img{
    border:#666 solid 3px;
}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
    border:#A8A8A8 solid 3px;
}
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
    display:block;
    width:22px;
    height:30px;
    color:#FFF;
    cursor:pointer;

}
.lof-navigator-wapper .lof-next {
    float:left;
    text-indent:-999px;
    margin-right:5px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center;
}
.lof-navigator-wapper .lof-previous {
    float:left;
    text-indent:-999px;
    margin-left:5px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center;
}
#lofslidecontent45 {width:600px;height:300px;}
.lof-main-outer {width:600px; height:300px;}

.lof-main-wapper img {height:300px !important; width:600px !important}
.lof-navigator-wapper img {height:32px !important; width:80px !important}
</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/scriptlofblogv2.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
        var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
                        next:$('#lofslidecontent45 .lof-next') };

        $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
                                                direction        : 'opacitys',
                                                 easing            : 'easeOutBounce',
                                                duration        : 1200,
                                                auto             : true,
                                                maxItemDisplay  : 4,
                                                navPosition     : 'horizontal', // horizontal
                                                navigatorHeight : 32,
                                                navigatorWidth  : 80,
                                                mainWidth:600,
                                                buttons            : buttons} );
    });
</script>

Kod içerisinde renkli olarak belirttiğimiz  bütün width ve height değerlerini değiştirerek slayt alanını isteğinize göre boyutlandırabilirsiniz.
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.