Entri Populer Dengan Slide - Part 4

Entri Populer Dengan Slide - Part 4.
Di dalam tutorial Oto Website kali ini saya akan membahas Entri Populer Dengan Slide - Part 4 untuk melengkapi artikel sebelumnya. Ini adalah trick sederhana dan sangat mudah.
Seperti yang pernah saya sebelumnya Entri Populer adalah Entri/artikel blog Anda yang paling sering di baca oleh pengunjung blog Anda jadi saya rasa tidak perlu menjelaskan lagi tentang Entri Populer dan Apa itu Entri Populer.
Dan perlu Anda ketahui Script ini di buat oleh Abu Fahran untuk melihat hasil dari penerapan Entri Populer Dengan Slide - Part 4 di blogger bisa Anda lihat contoh gambar berikut.

Hasil penerapan Entri Populer Dengan Slide - Part 4

---

Artikel Sebelumnya

---

Perlu juga Anda ketahui juga, sebelumnya Oto Website pernah membahas Entri Populer yang lainnya di antaranya:

• Entri Populer Dengan Slide - Part 1.
• Entri Populer Dengan Slide - Part 2.
• Entri Populer Dengan Slide - Part 3.

---

Cara membuat Entri Populer Dengan Slide - Part 4

---

1. Pergi 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, .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://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: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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_transparent_ow.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:880px;height:340px;}
.lof-main-outer {width:880px; height:340px;}
.lof-main-wapper img {height:340px !important; width:880px !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="https://otowebsite-blogspot.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:880,
buttons : buttons} ); });
</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!