Entri Populer Dengan Slide - Part 3

Entri Populer adalah article yang paling sering di baca oleh pengunjung atau mungkin sering di copas karna kepopuleran article tersebut. Script ini terinspirasi dari Abu Fahran. Sebelumnya saya pernah membahas Entri Populer Dengan Slide yang berjudul Entri Populer Dengan Slide - Part 1 dan Entri Populer Dengan Slide - Part 2 untuk kali ini saya akan membehas part ketiga yaitu Entri Populer Dengan Slide - Part 3.
Cara membuat Entri Populer Dengan Slide - Part 3 juga sangat mudah, untuk lebih jelasnya Entri Populer Dengan Slide - Part 3 Anda bisa melihat contoh gambar di bawah ini

Hasil dari penerapan Entri Populer Dengan Slide - Part 3 pada blogger.

---

Cara Membuat Entri Populer Dengan Slide - Part 3 di Blogger

---

1. Masuk ke akun blogger Anda.

2. Pada Dasbor klick Tata Letak ➨ Tambah Gadget ➨ Pilih Entri Populer dan Simpan (Penempatan Entri Populer seperti gambar berikut)

Contoh penerapan Widget Entri Populer dan Widget HTML/Java Script.

3. Lalu tambah Gadget ➨ Pilih elemen HTML/Java Script ➨ Copy kode berikut dan paste atau letakkan di dalamnya (Penempatan elemen HTML/Java Script seperti pada gambar di atas).

<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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_transparent_ow.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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_transparent_ow.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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_arrow-ow.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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_transparent_ow.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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_grad-ow.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="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="https://otowebsite-blogspot.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>

4. Simpan.

Sekarang Anda bisa lihat hasilnya!

Saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar Anda tentang postingan/article di atas!