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!

Poskan Komentar Blogger Disqus

  1. @Nurdin RahmanJika anda sudh bnar mgikuti instruksi dn printah di atas, dan bila widget tersebut tidak berjlan dngn smstinya, berti tmplte Anda sudh trinstal kode jquery 1.6.1- Maka tinggl Anda hpus sja kode <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    Ingat juga untuk memasang Entri populer sperti ini minimal lbar halaman postingan Anda adalh brukuran normal.

    BalasHapus
  2. punyaku cuma jquery 1.4.2..
    nggak ada 1.6.1

    BalasHapus
  3. @Nurdin Rahman Ya sudh klo bgtu hlman postigan Anda hrus lbih lbar, mnimal lbarnya sma sperti hlmann postingan blog ini.

    BalasHapus
  4. gak bisa gan nih liat http://dikyandrean15a.blogspot.com/

    BalasHapus
  5. @Dieky AndreanSeperti yang saya katakan pada
    Nurdin Rahman
    di atas, jika Anda ingin widget ini berjalan dengan semestinya maka minimal halaman post Anda berukuran lebar standart.

    BalasHapus
  6. Sukses Selalu Blogger Indonesia

    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