Cara Membuat Slider Popular Post Pada Blog
Pada tutorial kali ini saya akan mencoba memberikan lagi satu tips dan trik blogging kepada sobat setia Juned al~Bughisy yaitu bagaimana cara membuat Cara Membuat Slider Popular Post Pada Blog ala Abu Farhan seperti gambar di bawah ini
1. Login ke blogger atau klik disini
2. Pilih tata letak » tambah gadget » Html/JavaScript
3. Copy paste script di bawah ini.
<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>Selamat mencoba, Happy blogging
4 comments
terima kasih
:)