Entri Populer Dengan Slide - Part 1

Halo semua sekarang dalam perjumpaan kali ini saya akan share tentang Entri Populer Dengan Slide - Part 1.
Ternyata bukan hanya gambar atau image saja yang bisa di jadikan slide tapi Entri Populer pun bisa untuk di jadikan Slide agar tampilannya lebih menarik. Untuk cara membuat  Entri Populer Dengan Slide - Part 1 juga gak ribet, alias mudah. Untuk contohnya sobat bisa lihat gambar di atas.
Mungkin gak perlu berlama-lama lagi sekarng mendingan kita bahas lansung aja cara membuatnya, ok!

1. Masuk ke akun blogger Sobat.

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 type="text/css" media="screen">
<!--
#PopularPosts1{
height:263px;
}
.item-content {
height:263px;
position:relative;
width:560px;
}
.slider {
height:263px;
margin-left:25px;
width:560px;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:263px;
}
.item-snippet {
background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/darksd.png) repeat scroll 0 0;
color:#FFFFFF;
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
width:560px;
font-size:9px;
font-style:italic;
}
.item-title{
color:#FFFFFF;
font-size:10px;
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}
.item-title a:link,.item-title a:visited{
color:#FFFFFF;
text-decoration:none;
border:none !important;
padding:0 !important;
}
.item-thumbnail img{
padding:0 !important;
}
.item-thumbnail a{
padding:0 !important;
}
.crosscol .widget-content {position:relative;}
.slider ul, .slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
.slider li, #slider2 li{
width:560px;
height:263px;
overflow:hidden;
}
.item-thumbnail img{width:560px;height:263px}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:582px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:100px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/next.png) no-repeat 0 0;
}
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
.test{
margin:30px;
}
-->
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script src='http://otowebsite.googlecode.com/files/entri_populer_slider_1.js' type='text/javascript'></script>

4. Penempatan Gadget Entri Populer dan Gadget HTML/Java Script kira-kira seperti ini.

5. Simpan.

Sekarang Sobat bisa lihat sendiri hasilnya di Blog Sobat.

Mudah bukan?

Oke saya rasa cukup untuk postingan atau articles Entri Populer Dengan Slide - Part 1.

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