Cara Mempercantik Artikel Populer

kali saya akan memposting mengenai cara mempercantik entri populer

 

Script ini sangat mudah untuk menginstal, Anda hanya  meletakkan dengan cara mengkopy script di bawah ini kemudia dengan Login Gadget baru ke Blogger Dashboard dan arahkan ke Desain - Halaman ElementsClick "Tambah Gadget" dan Pilih Popular Posts "(Jika Anda sudah memiliki gadget ini melewatkan langkah ini) Setelah Anda memiliki Gadget Popular Post "Tambah Gadget" lagi dan pilih HTML / Javascript Masukkan semua script di bawah ini . dengan itu entri populer anda  sekarang dengan animasi

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