Assalamu'alaikum, bagi sobat Download Ilmu yang sedang bingung mencari cara ataupun kode html untuk menambah widget recent post, tidak ada salahnya untuk mencoba tutorial yang diberikan Download Ilmu kali ini. Trik ini sudah di test dan work.
Widget 'recent post' sendiri berfungsi untuk menampilkan postingan terbaru dari blog-blog anda. Kelebihan dari widget recent post sendiri adalah recent post lebih aman daripada widget popular post. Karena widet popular post bisa di salah gunakan oleh oknum yang tidak bertanggung jawab untuk menembak keyword yang sendang ngetop di blog anda. Walhasil, visitor blog anda akan turun, terlebih lagi jika penembak keywordnya adalah master SEO.
Ok, setelah anda membaca uraian singkat diatas, silahkan dicoba tutorial berikut. Saya sertakan juga gambar dari recent post dengan slidernya.
- Login ke blogger
- Kemudian pilih tata letak, pilih tambah gadget
- Lalu pilih html/javascript
- Copy kode dibawah ini dan paste di kolom yang tersedia
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:245px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
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] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.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://rizkyynwa.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>
- Ket : Tulisan berwarna merah adalah ukuran widgetnya silahkan disesuaikan dengan blog anda
- Tulisan berwarna hijau adalah jumlah post terbaru yang akan ditampilkan
- Tulisan berwarna biru adalah homepage blog, silahkan diganti dengan url blog anda
Nah, begitulah cara untuk membuat widget recent post dengan slider di blog, mudah bukan? Sekian tutorial blog dari Download Ilmu. Nantikan tutorial blog yang lain. So stay tune at RizkyYNWA.Blogspot.Com wassalamu'alaikum
pertamax makasih gan
ReplyDelete