6 Kotak Pencarian Yang Fresh dan Trendy

Kotak Pencarian, sobat pasti tahu manfaatnya bukan. Kotak pencarian ini selain berguna untuk mencari suatu artikel pada sebuah blog juga kalau dibuat dengan sentuhan artistik maka hasilnya pun akan lebih indah dan mempunyai nilai seni dan estetika yang juga menggambarkan si pembuatnya.

Ada 6 buah kotak pencarian yang fresh dan trendy saya kutip dari W2B, menurut saya patut dicoba, sobat bisa langsung ke sumbernya W2B atau bisa juga di blog ini.

6 Kotak Pencarian Yang Fresh dan Trendy :

contohnya seperti ini, boleh dicoba berfungsi atau tidak !

1. Kotak Pencarian Model 1
   
   

   <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhzVX-IVetUUk2DuCB0jSVnqLxmNG_QGcaG8DtDJkTsKqBBPxSu0IkuvQhAYwZHfrHLvfqrXGYXLThNL99SRQ63-d29jiIrcHeWfru4_4aDv6nU0apxfjX06Y1GoCHAvQPiyGYbSRLqwi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   <br /> <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhzVX-IVetUUk2DuCB0jSVnqLxmNG_QGcaG8DtDJkTsKqBBPxSu0IkuvQhAYwZHfrHLvfqrXGYXLThNL99SRQ63-d29jiIrcHeWfru4_4aDv6nU0apxfjX06Y1GoCHAvQPiyGYbSRLqwi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
2. Kotak Pencarian Model 2
   
   
   script kodenya seperti di bawah ini :

   <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDis0UZc4BpAgaIuhsU8W5rbUoSXs7a_h-wkF57du9GkV84m2e9Wjlhkp7c1oY3n-GafNsa1n792q5wh-Q4zwV3XDs4efNoA86q3YDEAZj9PALhe0TrqDOoVsmd8kiYgeFFu6YLMIxDNU/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   <style type="text/css"> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDis0UZc4BpAgaIuhsU8W5rbUoSXs7a_h-wkF57du9GkV84m2e9Wjlhkp7c1oY3n-GafNsa1n792q5wh-Q4zwV3XDs4efNoA86q3YDEAZj9PALhe0TrqDOoVsmd8kiYgeFFu6YLMIxDNU/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form></div>
3. Kotak Pencarian Model 3
   
   
   script kodenya seperti di bawah ini :
   

   <style type="text/css">
   #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6fqiz-H86uIK6cgpCj8ieNiASaRfobVsfhWqLBSypJJxI1hxGwuw89ueWgTgZpRLppx2-2f71q2YVeglxsU9IktJQk_5UOSiMMbQE_SDGE5O8Da-BeVUvo8Rsm5HvvlaysSAxowr-1dSZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
   form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
   form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
   form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
   </style>
   <div id="w2b-searchbox">
   <form id="w2b-searchform" action="/search" method="get">
   <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
   <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
   </form>
   </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6fqiz-H86uIK6cgpCj8ieNiASaRfobVsfhWqLBSypJJxI1hxGwuw89ueWgTgZpRLppx2-2f71q2YVeglxsU9IktJQk_5UOSiMMbQE_SDGE5O8Da-BeVUvo8Rsm5HvvlaysSAxowr-1dSZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   
4. Kotak Pencarian Model 4
   
   
   script kodenya seperti di bawah ini :
   

   <style type="text/css">
   #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7-OFb54uvWscVYqABygmMJCPMIMNnFRI73Qmje2KIviQWIRB_1zne6WiPR0yAgPGH-nJq0kqqYHVD6gbyB6cS4uoRGNh9kN2jTIi88s6hLuiA-z1zI4EMEclM3_jK9oW48npI17ZAqfi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
   form#w2b-searchform{display: block;padding: 12px;margin:0;}
   form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
   form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
   </style>
   <div id="w2b-searchbox">
   <form id="w2b-searchform" action="/search" method="get">
   <input type="text" id="s" name="q" value=""/>
   <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
   </form>
   </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7-OFb54uvWscVYqABygmMJCPMIMNnFRI73Qmje2KIviQWIRB_1zne6WiPR0yAgPGH-nJq0kqqYHVD6gbyB6cS4uoRGNh9kN2jTIi88s6hLuiA-z1zI4EMEclM3_jK9oW48npI17ZAqfi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   
5. Kotak Pencarian Model 5
   
   
   script kodenya seperti di bawah ini :
   

   <style type="text/css">
   #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvMloXiL3ScdsTHM_HAySBe7JuhKhXQzs7oZ7WTJlv5jzyg5e4KpsDmuySkhbDsfjdbJkVUT0ru10HiZ6VBZ4bEH4_wrGnAO0BmUlF63aPqJWBROHfyoQmWsZjUJkaT4i4p0cyHiE731B/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
   form#w2b-searchform{display: block;padding: 12px;margin:0;}
   form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
   form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
   </style>
   <div id="w2b-searchbox">
   <form id="w2b-searchform" action="/search" method="get">
   <input type="text" id="s" name="q" value=""/>
   <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
   </form>
   </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvMloXiL3ScdsTHM_HAySBe7JuhKhXQzs7oZ7WTJlv5jzyg5e4KpsDmuySkhbDsfjdbJkVUT0ru10HiZ6VBZ4bEH4_wrGnAO0BmUlF63aPqJWBROHfyoQmWsZjUJkaT4i4p0cyHiE731B/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   
6. Kotak Pencarian Model 6
   
   
   script kodenya seperti di bawah ini :
   

   <style type="text/css">
   #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkUi9kKRa0KYza3VJJcc3aiTgmUaFndrmNPpfXggLZ0kOhaqfOxASUWoH6QSuQTpY7r0N-IFCFg2M6USYF-al_t23YHaJJvvofCeIX9WlidxhjKraWMy9kEtu5YXQT65zd-V1Lk9JDRh3/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
   form#w2b-searchform{display: block;padding: 12px;margin:0;}
   form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
   form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
   </style>
   <div id="w2b-searchbox">
   <form id="w2b-searchform" action="/search" method="get">
   <input type="text" id="s" name="q" value=""/>
   <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
   </form>
   </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkUi9kKRa0KYza3VJJcc3aiTgmUaFndrmNPpfXggLZ0kOhaqfOxASUWoH6QSuQTpY7r0N-IFCFg2M6USYF-al_t23YHaJJvvofCeIX9WlidxhjKraWMy9kEtu5YXQT65zd-V1Lk9JDRh3/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   

Cara menginstal Joomla di komputer (offline)

Pada postingan yang lalu pernah saya bahas tentang install Wordpress di PC. Kali ini saya ingin membahas cara instalasi Wampserver untuk media install Joomla di PC. Yang dimaksud dengan install Joomla d PC adalah instalasi secara offline pada komputer sendiri dan tidak terhubung dengan internet, yang biasa disebut juga localhost. Untuk melakukan instalasi ini diperlukan dua tahap, yaitu :

1. Instalasi perangkat lunak server. Di sini saya menggunakan Wampserver.
2. Instalasi CMS Joomla. Di sini saya menggunakan CMS Joomla 1.0.15

Berikut ini langkah-langkah untuk mengistall Wampserver pada komputer dengan sistem operasi yang digunakan Windows.

1. Yang pertama pastinya harus memiliki software Wampserver, kalau belum ada bisa download di www.wampserver.com.
2. Saya asumsikan sobat sudah memilikinya, selanjutnya kita cari file WampServer2.0f.exe yang sobat sudah download tersebut dan di klik ganda, dan akan tampil jendela seperti berikut ini.

3. Selanjutnya klik Yes untuk melanjutkan proses instalasi, dan akan tampil jendela seperti berikut

4. Pada jendela tersebut ada tombol Next, langsung saja diklik, selanjutnya akan tampil jendela berikut ini

Pada gambar di atas, merupakan jendela yang menjelaskan tentang lisensi WampServer, yaitu GNU GPL. Artinya kita diperbolehkan meng-copy dan mendistribusikannya, namun tidak boleh mengubahnya.
5. Berikutnya pada tampilan jendala di atas, sobat pastikan untuk mencentang atau mengaktifkan bagain I accpet the aggreement yang menyatakan bahwa sobat setuju dengan lisensi tersebut (diatas), kemudian klik tombol Next dan akan tampil jendela selanjutnya seperti di bawah ini.

pada jendela di atas, sobat diminta menentukan lokasi tempat penginstalasian WampServer, secara default diletakkan pada lokasi C:\wamp. Kemudian klik tombol Browse kalau sobat ingin menempatkan di lokasi lain. Tapi sebaiknya biarkan saja pada lokasi default.
6. Setelah menentukan lokasi untuk instalasi WampServer kemudian klik tombol Next, sehingga akan tampil jendela seperti berikut ini. Di sini sobat diberikan feature tambahan seperti "Create a Quick Launch Icon dan "Create a Desktop Icon, sebaiknya sobat centang kedua opsi tersebut. Pilihan ini nantinya akan memudahkan sobat untuk mengakses WampServer, yaitu ketersediaan shortcut pada desktop dan pada menu quick Lauch, yang akan memudahkan sobat untuk menjalankan WampServer nantinya, setelah itu tekan tombol Next.

7. Akan tampil jendela selanjutnya seperti di bawah ini, dan langsung saja klik tombol Install untuk melaksanakan proses instalasi.



Pada saat penginstalasian nanti, sobat akan menemukan "WARNING" dengan pesan :"KEEP BLOCKING", "UNBLOCK" dan "ASK ME LATER". Peringatan ini abaikan saja, karena sobat akan menginstallnya di localhost. Jika instalasi online maka peringatan ini harus dijawab dengan memilih opsi "UNBLOCK", jika tidak MAKA WampServer sobat akan diblok oleh firewall Windows.
8. Setelah itu klik tombol Next dan akan muncul jendela berikutnya, seperti ini

Tampilan jendela di atas menjelaskan bahwa sobat telah berhasil menginstall WampServer di localhost yaitu di PC secara offline. Kemudian klik tombol Finish untuk menutup jendela ini, dan menjalankan secara langsung WampServer sobat. Tanda WampServer aktif adalah muncul icon WampServer (simbol) berwarna putih pada bagian kanan bawah taskbar Windows sobat. Untuk menjalankan WampServer, sobat cukup meng-klik tombol icon WampServer tersebut.
9. Jika sobat mau melihat atau mengecek apakah server Apache, PHP dan Database MYSQL sudah aktif dan berjalan dengan baik, lakukan dengan cara :
   Klik menu Localhost pada menu di atas, atau bukalah browser sobat, kemudian ketikan localhost pada bagian Address. Dan pastikan halaman yang tampil seperti gambar berikut ini.
   
   

Demikian, cara menginstal Joomla di komputer (offlie), semoga bermanfaat.




referensi:
http://www.dillablog.co.cc

WordPress.org dan WordPress.com

Buat yang baru belajar (seperti saya) maupun yang sudah mengerti (seperti sobat), supaya ngga tambah bingung lagi. Perlu sobat tahu bedanya WordPress.org dan WordPress.com, yang punya dan pengembangnya sama, yaitu Matt Mullenweg dkk.

WordPress.org itu, bahasa kerennya standalone blog atau self-hosted, kalau sobat punya domain dan hosting sendiri, sobat bisa instal script khusus bernama WordPress. Script ini bisa diunduh gratis dari www.WordPress.org bagian halaman download. Jadi masih tetap script gratis, modal sobat hanya beli domain dan sewa hosting saja. Tapi kalau mau coba-coba, bisa dengan yang gratisan dulu (hosting dan domain-nya).

WordPress.com, ini Multi user blogs, yang di hosting di WordPress.com, sobat ngga perlu susah-susah beli domain dan sewa hosting, tinggal daftar di www.WordPress.com dan dalam 5 menit sobat sudah punya blog sendiri dan bisa langsung posting2, asli gratis. Aksesnya jadi seperti di subdomain : namablogsobat.wordpress.com. sama halnya di blogspot : namablogsobat.blogspot.com.

Fitur dari kedua platform ini antara lain :

Fitur	WordPress.Org	WordPress.com
Akses	Nama domain sendiri	Subdomain dari WordPress.com Bisa redirect tapi harus Upgrade (bayar)
Themes	Bebas upload/instal	ditentukan di menu Designs Bisa edit CSS tapi harus upgrade (bayar)
Plugins	bebas upload/instal	sudah diatur, tidak bisa nambah
Kode Javascript (kode iklan Adsense, etc)	Bisa	Tidak bisa
Space	sesuai hostingan anda	space file & images max 3GB bisa nambah tapi upgrade
Bandwith	sesuai hostingan anda	no limit
Upload Single File	sesuai kapasitas hosting anda	max 75MB
Forum	ada	ada
Upgrade Versi	sendiri	otomatis

Recent Comment Thumbnail With Avatar

Banyak cara dan gaya untuk menampilkan recent comment yang intinya untuk mempercantik penampilan suatu web-blog baik di blogspot maupun di wordpress. Recent comment pada umumnya ditampilkan dalam bentuk summary text saja namun ada juga yang dikombinasikan dengan thumbnail, dan biasanya thumbnail tersebut diambil dari gambar/foto blogger yang diupload melalui blogspot. Namun kali ini saya ingin memperkenalkan pada sobat membuat recent comment thumbnail dengan Avatar. Jadi tentu saja hanya bagi blogger yang mempunyai Avatar akan ditampilkan gambar/fotonya.

Ok, caranya cukup mudah. Sobat tinggal copy script di bawah ini :

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 10,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 60,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://namablog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>

Lalu tambahkan gadget dan pilih HTML/JavaScript, selanjutnya tinggal di-paste script di atas yang telah dicopy. Selesai.

Sedikit penjelasan, untuk menampilkan jumlah recent comment yang akan ditampilkan. Sobat bisa merubah nilai pada "numComments". Di atas bisa dilihat numComments = 10, ini maksudnya untuk menampilkan jumlah recent comment sebanyak 10 komentar terakhir.

Sedangkan untuk menampilkan summary teks yang akan ditampilkan pada recent comment dapat diatur pada "characters". Di atas bisa dilihat characters = 60, ini maksudnya untuk menampilkan panjang teks 60 pixel.

Ok, semoga widget ini bermanfaat.