Menjadi seorang blogger harus berusaha lebih kreative untuk menulis sebuah postingan dan juga memberikan sentuhan yang berbeda pada halaman blognya agar tidak membosankan apabila kita melihatnya agar para pengunjung betah untuk membaca artikel artikel kita yang telah susahpayah kita tulis.
Salah satu yang bisa kita lakukan adalah menampilkan postingan kita yang paling populer. Akan lebih terlihat beda lagi apabila kita menyuguhkannya dengan model slide. Bagi para profsional yang dah menggeluti tentang membangun blog tentunya sangat sangat mudah. Akan tetapi bagi yang belum mengetahui tentulah sangat membingungkan.
Di postingan kali ini aku ingin berbagi cara membuat slide popular post.
2. Pilih HTML/JavaScript
2. Copas code dibawah ini :
<div class='widget-content'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:430px;
width:200px;
}
#spylist ul{
width:200px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:200px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#141414;
border:1px pixed #666666;-moz-border-radius:3.5px;border-radius:3.5px;
}
#spylist li a {
text-decoration:none;
color:#7fffff;
font:verdana;
font-size:10px;
height:12px;
width:28px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#0000ff;
border:0;
border:1px pixed #333333;-moz-border-radius:3px;border-radius:3px;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#ffffff;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#ffffff;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://www.videokl.com/thumbs/no_image.gif";
imgr[1] = "http://www.videokl.com/thumbs/no_image.gif";
imgr[2] = "http://www.videokl.com/thumbs/no_image.gif";
imgr[3] = "http://www.videokl.com/thumbs/no_image.gif";
imgr[4] = "http://www.videokl.com/thumbs/no_image.gif";
imgr[5] = "http://www.videokl.com/thumbs/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#333333";
bgTD = "#0000ff";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 10;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://sundulsatu.blogspot.com/";
limitspy=5
intervalspy=5000
</script>
<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogid=2715999999824144958&widgettype=html&widgetid=html13&action=editwidget' onclick='return _widgetmanager._popupconfig(document.getelementbyid("HTML13"));' target='confightml13' title='edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div></div>
PERHATIAN
* Warna merah ganti dengan url blog anda.
* Warna kuning sesuaikan dengan lebar dan tinggi yang anda inginkan
* Warna Putih : jumlah postingan yang akan di slide
* Warna Hijau : kode warna background, ganti sesuai keinginan anda
Sambil belajar , anda bisa otak atik code di atas biar nantinya lebih mengerti lagi
Semoga bermanfaat
8 Comments
