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:

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!

Poskan Komentar Blogger Disqus

  1. Nice info

    ditunggu kunjungan baliknya

    BalasHapus
  2. Mohon izin... saya memasang webnya Mas di blog saya... denidt28.blogspot.com Insya Alloh menjadi berkah....

    BalasHapus
  3. berat nih gan CSSnya Ada gak yg lain

    BalasHapus
  4. @arief paracitAda, masih dalam proses pembuatan.

    BalasHapus
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