Blogger Widget: siderNews trượt - Phần Popular Blogger Bài viết 2

Bạn có thể xem demo từ liên kết dưới đây

Demo
Kịch bản này rất dễ dàng để cài đặt, bạn chỉ phải đặt các kịch bản để các tiện ích mới

• Đăng nhập vào Blogger Bảng điều khiển và điều hướng đến thiết kế - Page Elements
• Nhấp vào "Thêm Tiện ích" và Chọn "Phổ biến bài viết" ( Nếu bạn đã có tiện ích này bỏ qua bước này )
• Sau khi bạn có Popular Post Tiện ích "Thêm Tiện ích" một lần nữa và chọn "HTML / Javascript"
• Đặt tất cả các kịch bản dưới đây để "nội dung" HTML / Javascript Gadget
• Nếu bạn đã có jQuery trong Template của bạn, xin vui lòng xóa từ kịch bản của tôi
• Thực hiện bài viết của bạn phổ biến bây giờ với hình ảnh động

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

   Sưu tầm bởi    www.meovatcuocsong.blogspot.com