Malam minggu ini karna di lokasi tempat saya lagi hujan dan dari pada cuma bengong karna gak bisa malam mingguan hehehe . . . untuk itu sekarang saya ingin share di Oto Website kembali dan kali ini saya akan berbagi trick tentang Entri Populer Dengan Slide - Part 2 sebelumnya Oto Website pernah membahas tentang Entri Populer Dengan Slide - Part 1. ya bisa di bilang ini adalah lanjutan dari sebelumnya dengan versi yang berbeda namanya juga part 2. Untuk hasilnya dari Entri Populer Dengan Slide - Part 2 akan menjadi seperti gambar berikut ini.

Contoh hasil dari penerapan Entri Populer Dengan Slide - Part 2.




Cara Memasang Entri Populer Dengan Slide - Part 2 di Blogger



1. Masuk ke akun blogger Anda.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget ➨ Pilih Entri Populer dan Simpan.

3. Lalu tambah Gadget lagi ➨ Pilih HTML/Java Script ➨ Copy kode berikut dan paste atau letakkan di dalamnya.



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

/*******************************************************/
.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;
margin:0;
font-size:140%;
padding:20px 8px 2px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
.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;
}

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 !important;
cursor:pointer !important;
list-style:none !important;
width:100% !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
}
.lof-navigator-outer{
position:absolute !important;
right:0 !important;
top:00px !important;
z-index:100 !important;
height:300px !important;
width:310px !important;
overflow:hidden !important;
color:#FFF
}
.lof-navigator li.active{
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-bg.png) no-repeat scroll left center;
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;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
}

.lof-navigator li.active div{
background:url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/grad-ow.gif);
color:#FFF;
}
.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}

</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/scriptlofslider.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
$('#lofslidecontent45').lofJSidernews( { interval:2000,
  easing:'easeInOutQuad',
duration:1200,
auto:true } );
});

</script>
<style>

ul.lof-main-wapper li {
position:relative;
}
</style>


4. Simpan.

Keterangan:
Penempatan Gadget Entri Populer dan Gadget HTML/Java harus seperti ini.



Sekarang Anda bisa lihat sendiri hasilnya di Blog Anda.

Nah mudah bukan?

Oke saya rasa cukup untuk postingan atau articles Entri Populer Dengan Slide - Part 2. Silahkan anda tunggu lanjutan dari Entri Populer Dengan Slide - Part 2 ya itu Entri Populer Dengan Slide - Part 3 (Telah di publikasikan)

Bagaimana apakah Anda berhasil menerapkannya ke blog Anda? silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau articles di atas!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top