pasang widget recent posts di blogger

pasang widget recent posts di blogger yang akan kita bahas pada artikel kali ini.mungkin sobat blogger sudah banyak yang sharing maupun telah memasang widget recent posts atau yang biasa di sebut artikel terbaru dari suatu blog yang berguna agar pengunjung blog tahu artikel apa saja yang baru di tulis oleh admin blog.di bawah ini ada beberapa pilihan untuk membuat widget recent posts di blogger.langsung saja kita bahas untuk membuat widget recent post di blogger.

1. Pasang widget recent post default blogger

widget Recent post ini di peruntukkan bagi blogger yang tidak ingin mengotak-atik kode javascript.mungkin karena tidak suka mengotak-atik kode javascript (tidak mau ribet)atau mungkin tidak tahu sama sekali tentang javascript oleh karena itu widget ini cocok untuk tipe pengguna blogger yang seperti itu.
Login blogger >> rancangan/design >> page elements >> add gadget >> pilih menu featuredtambah gadget recent post.
ada dua gadget untuk recent posts default blogger yaitu recent post tanpa thumbnail atau tanpa gambar dan recent post with thumbnail.
  • untuk recent post tanpa thumbnail sobat pilih yang seperti gambar di bawah ini.
setelah pilih tambah gadget recent posts maka akan muncul form seperti di bawah ini.
setelah selesain mengatur gadgetnya jangan lupa pilih save.
  • Untuk recent post with thumnail atau artikel terbaru dengan gambar sobat bisa lihat gambar di bawah ini.
kemudian akan muncul form pengaturannya.
setelah selesai jangan lupa simpan gadget dan lihat hasilnya.

2. Pasang widget recent post di lengkapi thumbnail


recent post serta thumbnail ini sangat cocok untuk blogger yang ingin blognya di percantik dengan thumbnail atau gambar tentang artikel terbarunya.caranya cukup mudah.
Login blogger terlebih dahulu kemudian pilih menu rancangan/design setelah itu pilih sub menu page elements dan pilih tambah/add gadget kemudian tambahkan gadget HTML/javaScript.setelah menambahkan gadget HTML/javaScript maka letakkan kode di bawah ini ke dalam content.
<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 = 300;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://NAMABLOGKAMU.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
kemudian apabila sobat ingin mengedit kode javascriptnya di bawah ini adalah kode yang sobat edit/sesuaikan dengan blog sobat.

 boxwidth = Ukuran dari kotak Widget
cellspacing = Spasi diantara cells
thumbwidth dan thumbheight = Ukuran lebar dan tinggi kotak gambar
numposts = Jumlah recent post yang akan sobat tampilkan..
home_page = http://NAMABLOGKAMU.com/ (ganti alamat blog sobat)

setelah selesai mengedit jangan lupa pilih save/simpan dan lihat hasilnya.

3. Pasang widget recent post with slideshow

Untuk widget recent posts yang ketiga ini menggunakan fasilitas slideshow agar blog lebih indah di pandang.caranya cukup mudah yaitu login blogger >> rancangan/design >> page elements >> add gadget >> tambahkan gadget HTML/javaScript kemudian masukkan kode di bawah ini ke dalam 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:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
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://www.blog-sobat.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>
kemudian pilih simpan gadget dan lihat hasilnya.

Mungkin untuk sementara hanya itu pilihan cara memasang widget recent poats di blogger apabila ada terdapat kesalahan kami mohon bantuan sobat blogger untuk sama-sama memperbaikinya dengan cara berkomentar.untuk artikel pasang widget recent posts di blogger saya cukupkan sampai disini semoga bermanfaat dan selamat mencoba.

baca artikel yang lain :

1 comments:

mochammad hamdani said...

thanks gan tutorialnya..
sangat membantu..
langsung tak praktekin..hohoho

mampir keblog ane ya gan..
jarowak.blogspot.com
makasih banyak..hoho :)

Post a Comment