Selasa, 15 Januari 2013

Cara Membuat Recent Post Bergerak Di Blog

Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini. Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak (animasi) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini. Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut. Kode ini asli Hanif Maliki, kalo kamu cari di website laen gak bakalan ada. Dan kalo sudah pasang Rechent Postnya tolong follow blog Hanif Maliki sebagai tanda terimakasih.
1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

<div class='widget HTML' id='HTML2'>
<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:600px;
}
#spylist ul{
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:300px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:83px;
overflow: hidden;
background:#;
border-bottom:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#FFFFF0;
font-size:13px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#FF0000;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#FFFAF0;
padding:0px 0px;
margin:0px 0px;
}

-->

</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg";
imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg";
imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://ramdanikodok2.blogspot.com/";
limitspy=6
intervalspy=4000
</script>

  1. Ganti tulisan berwarna hijau menjadi alamat blog anda (Wajib).
  2. Ganti kode berwarna kuning menjadi kode warna yang kamu mau, ini warna judul posting.
  3. Ganti angka berwarna oren sesukamu ( jumlah posting yang diperlihatkan ).
  4. Ganti kode berwarna biru muda menjadi sesukamu, ini ukuran tinggi gadget.
  5. Ganti kode warna ungu menjadi sesukamu, ini ukuran tinggi per-posting.
  6. Lainya coba edit sendiri dengan ilmu CSS kalian, Kalo ada yang gak donk comment aja.
"Maaf kalo kodenya obrak-abrikan soalnya baru belajar, tapi hasilnya bagus kok ini hasil bangmashanif"

4. Klik save dan lihat hasilnya. 

Tidak ada komentar:

Posting Komentar