Blogger Popüler Yayınlar Slider

Otomatik olarak Son yayınları manşet alanından slayt şeklinde gösteren bir güzel bir eklenti.



<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>


width ve height değerlerini değiştirerek slayt alanını isteğinize göre boyutlandırabilirsiniz.
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz
Popüler post gadgetini eklediğiniz yerde görünecektir.

Meraklısına .js kodu :





Meraklısına .js kodu :

1 yorum: