Masih seputar tutorial blog, kali ini Belajar Komputer memenuhi
permintaan sobat blogger yaitu cara pasang Recent Post Thumbnails dan
Recent Comment. Sebenarnya sudah banyak sobat blogger memposting artikel
yang sama, akan tetapi demi mengormati permintaan sobat blogger tidak
ada salahnya berbagi, karena ilmu tidak baik dipendam harus dibagi
dunkz...sepp.
Langsung saja kepada pokok persoalan, disini sobat tidak perlu sampai
edit template cukup login ke dasbor sobat Rancangan - Elemen Laman
tambah gadget selanjutnya sobat pilih HTML/JavaScript selanjutnya copy
pastekan kode berikut :
Untuk Recent Post berikut kodenya :
<div style="overflow:auto; padding:5px; width:270px; height:280px; background-color: ; border:0px solid #ccc;">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[1] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[2] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[3] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[4] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
showRandomImg = true;
boxwidth = 268;
cellspacing = 8;
borderColor = "";
bgTD = "";
thumbwidth = 40;
thumbheight = 40;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://www.andisyam.web.id/";
</script>
<script src="http://vbcomp.googlecode.com/svn/trunk/js/recentposts_thumbnail.js" type="text/javascript"></script>
</div>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[1] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[2] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[3] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[4] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
showRandomImg = true;
boxwidth = 268;
cellspacing = 8;
borderColor = "";
bgTD = "";
thumbwidth = 40;
thumbheight = 40;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://www.andisyam.web.id/";
</script>
<script src="http://vbcomp.googlecode.com/svn/trunk/js/recentposts_thumbnail.js" type="text/javascript"></script>
</div>
Ket : untuk yang berwarna merah, silahkan
sobat atur sesuai keinginan sepeti lebar kotak, jarak antara, lebar dan
tinggi image thumbnails, ukuran huruf dan jumlah recent post yang akan
sobat tampilkan.
Untuk Recent Comment berikut kodenya :
<div style="overflow:auto; padding:5px; width:270px; height:280px; background-color:#FFFFFF ; border:0px solid #ccc;">
<script style="text/javascript" src="http://vbcomp.googlecode.com/svn/trunk/js/showrecentcomments.js"></script>
<script style="text/javascript">var numcomments = 15;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://www.andisyam.web.id/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>
Ket : untuk style-nya silahkan sobat atur
sesuai lebar dan tinggi widget sobat, jika ingin tranparan sobat hapus
saja kode background-color. Ganti feeds comment default sobat.
Sampai disini save dan lihat hasilnya, OK sobat semoga berhasil.
0 komentar:
Posting Komentar