Cara Membuat Widget Recent Post Bergerak Di Blogger

AHMAD HAMBALI: Tutorial : Blog

Menampilkan Recent post dalam halaman blog, membuat Recent post bergerak -gerak, Recent post dengan thumbnail gambar pada blogspot. Ingin mencoba membuatnya? Silahkan lanjut membaca postingan ini, dan ikuti tutorial cara pembuatannya step by step hingga selesai terpasang dalam halaman blog sobat. Baiklah tanpa berpanjang lebar lagi dan aku rasa sobat blogger semua juga sudah mengetahui fungsi serta kegunaan Recent post ini pada halaman blog, maka kita langsung saja pada cara membuat widget Recent post bergerak di blogger.

Seperti biasa masuk atau login terlebih dahulu kedalam dasbor blog



Kemudian pilih tata letak



Kemudian pilih tambah widget



Kemudian pilih HTML/JavaScript


Kemudian masukkan kode script dibawah ini kedalam widget HTML/JavaScript

<script src=" http://ceritangeblog.googlecode.com/files/Recentpos.js.txt " type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:830px;
}
#spylist ul{
width:335px;
overflow:hidden;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#b4b6af url(http://cerita-ngeblog.blogspot.com/images/rcpost.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:328px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:show;
font-size:10px;
color:#0284C2;
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:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTkDAi4oG18t7u-ZB-QMqDw8BCw8pxcsHIjtCfdFGIfPhhpBEjN67bAkKbWpNsG9-A7yyz8OIDfRCw7uKPWheF3vDCp9ylFOBIay4pJQln6_BcTFVOkus4-tC8guyXpPE2VsFrqzwnmNE/s72-c/screenshot.10.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivvjZBtRZpRdYVBoB8fa-eLA8x8NZnmluXPURoctQz9KlzDsLfFWUH9-SKOOcE1eEgj2d4RUiTycURI-ks8MpAT3SNYalHt09hfmL-ilhr2GYWWc-RsvBq_9Rk_a1bOdl9L4xci2QN3U84/s72-c/screenshot.45.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY32KeYzG_dyon6o-YqOTalU8j4RodGyZ1b0zrWyLRe9h149mWhV4Za83zF59GGrU6M5t4zW46146TFdyWxH8ybSejbEpTrFXpyY9nLbgR_uV7TmiO2Ww58cuAZXAolEbl1Kptk67Us-wP/s72-c/harapan.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMIFJRRAlblN61sLzw5Yy7rmGGE02osssGbJr_2p2k1K3okWegUaQMPspKJna3_vFLGpeC7_WzbQi_4Pt33NNpjZknoM9CjbHyawVwEAGJVYkDPbMYnyyS3rawo1BDwNFYtvFhdsooq3nd/s72-c/flagcounter.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgctIh47Tszk-3AkPYpG1JKNYhpOSV31M-dFiC5nj8SXCV9Z8hNxJ1pito1_sH4Bm0GPsGapQ4MjSRq9PDPzntb5M_1aM0vkt_H0R3Nx9d1UAMmb4XR9wm07-RTxtCsg_ZCkfbBLigwShws/s320/00078ndhjbd.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 9;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comment";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 25;
home_page = "http://cerita-ngeblog.blogspot.com/";
limitspy=9
intervalspy=4000
</script>
<div id="spylist">
<script src=" http://ceritangeblog.googlecode.com/files/Recentpost.js.txt " type="text/javascript">
</script></div>

Keterangan: perhatikanlah salah satu kode yang aku beri tanda merah, itu adalah jumlah Recent post yang akan tampil. Dan sobat bisa mengganti jumlahnya, sementara untuk mengubah ukuran tinggi widget, silahkan mengubah nominal Hight-nya.

Kemudian pilih simpan, dan selesai !.

Widget Recent post pun sudah terpasang dalam halaman blog sobat, sementara penampakkannya kurang lebih akan terlihat seperti pada screen shoot dibawah ini.

Aku ucapkan selamat mencoba bagi sobat yang ingin membuat widget Recent post bergerak ini, dan akhirnya sampai disini dahulu cara membuat widget Recent post bergerak di blogger ini, semoga bermanfaat and bye-bye….

Posted in: Onma Free,Tips Blog,Tutorial Blog