Cara Memasang Recent Post Dan Recent Comment

Cara Memasang Recent Post Dan Recent Comment - Masih seputar tutorial blog, kali ini saya 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://nbtutorial.blogspot.com/";
</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:#000000 ; 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://nbtutorial.blogspot.com/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.

atau cara dua nih yang paling cimpel pellll
Bisa teman-teman lihat sekarang di blog saya ini ada tampilan widget baru yaitu berubahnya widget New Recent Comment-nya. Nah, widget ini berbeda dengan yang pernah saya buat sebelumnya, yang masih menggunakan Url Feed sebagai recent comment-nya. Untuk membuat New Recent Comment dengan menggunakan Url Feed bisa teman-teman lihat di sini.

Inovasi ini terus saya lakukan agar teman-teman blogger tidak pernah bosen untuk berkunjung kemari dan selalu menemukan hal yang baru, tentunya juga saya praktekkan caranya sehingga teman-teman bisa melihat hasilnya (NO PRACTISE NO ARTICLE).

Lihat pict

Kelebihan widget ini adalah bentuk nya yang rapi karena menggunakan scroll down, sehingga bisa teman-teman atur posisinya agar tidak makan tempat terlalu banyak. Kekurangannya mungkin agak sedikit menambah berat load page dari blog teman-teman, tapi saya pikir hal itu tidak menjadi masalah asal teman-teman bisa mengatur widget mana saja yang perlu ditampilkan di dalam blog teman-teman.

Bagaimana menurut pendapat teman-teman, perlu di coba bukan ?

Ok, langkah-langkahnya adalah sebagai berikut:

1. Login ke akun blogspot teman-teman,
2. Klik Design/Layout/Tata Letak >> Page Element >> Add a Gadget >> HTML/Javascript,
3. Copy paste kode di bawah ini dan taruh di dalam kotak gadget (konten), silahkan teman-teman atur sendiri di mana posisi terbaik nya,

<div style="overflow:auto;width:170px;height:200px;border:1px solid #eee;padding:8px;margin:10px 0 0"> <script style="text/javascript" src="http://files.bloggerplugins.org/widgetcomments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=true;var n_rc=true;var o_rc=60;</script><script src="http://nbtutorial.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script> <div style="font-size:9px; padding:8px 0px 0px 0px"></div></div>

Keterangan:

Ganti tulisan yang berwarna merah dengan alamat Url blog teman-teman, lalu silahkan di atur sendiri seberapa lebar dan tinggi widgetnya dengan merubah tulisan yang berwarna biru, kemudian atur banyaknya recent comment yang masuk dengan merubah tulisan berwarna hijau dan terakhir atur jumlah karakter kata yang akan ditampilkan dengan merubah tulisan warna pink.

4. Jika sudah klik Save dan lihat perubahannya, view blog. Selamat mencoba Membuat New Recent Comment dengan Scroll Down di Blogspot!

GUEST BLOG: Penulis dibalik Artikel ini:
Ali Bloggers  | m-wali.blogspot.com