Cara Memasang Widget Recent Comment di Blogger

September 13, 2017
Cara Memasang Widget Recent Comment di Blogger - Membuat dan memasang recent komen di blog dapat memudahkan anda dan pengunjung untuk mengetahui komentar terkahir yang baru saja masuk ke blog anda . Di samping itu widget recent Comment ini juga dapat mengisi ruang yang kosong yang biasanya terletak pada sidebar blog , sehingga blog tidak tampak kosong ala kadarnya begitu saja. Namun jika terlalu banyak widget , blog juga tidak seo frendly untuk pengunjung , dikarenakan loading blog akan bertambah semakin berat .

Dalam membuat widget Recent Comment ini tidaklah terlalu sulit , kita hanya tinggal pakai widget dari para mastah yang sudah membuat dan membagikanya , jadi anda tidak usah memikirkan koding css dan javascript yang bikin kepala pusing tujuh keliling , kecuali jika anda sudah terbiasa , maka tidak sulit bagi anda untuk meodifikasi widget recent Comment ini atau bahkan menciptakan widget yang jauh lebih keren lagi.

Cara Memasang Widget Recent Comment di Blogger
credit image : blog.kangismet.net
Bagi sobat yang belom tahu seperti apa itu recent comment dan sekaligus mematangkan sobat tentang pemahaman sobat mengenai widget ini ( sudah baca artikel diatas tadi ) silahkan sobat melihat gambar diatas , Nah nantinya widget recent komentar yang akan kita buat seperti itu

Tutorial / Cara Membuat Widget Recent Comment Keren di Blogger

Kelebihan widget recent komen ini adalah sudah valid html5 , jadi bagi anda pecinta validator , tidak usah susah - susah untuk mengeditnya lagi , selain itu widget recent comment ini juga di lengkapi dengan wajah avatar orang yang berkomentar sehingga kita dapat mudah siapa saja yang berkomentar , oke langsung saja ke tiknya :

1. Pastikan sobat sudah masuk terlebih dahulu ke dasbhor blog sobat
2. Lihat menu pada bagian samping kiri , pilih menu Tata Letak => Tambah Gadget => Html/Javascript
3. Lalu salin kode dibawah ini dan tempelkan di dalam kolom html/javascript tadi :
<style type="text/css" scoped>
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px 
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #ddd;}
.kangismet_recent a {text-decoration:none;}
.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;width:35px;height:35px}
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Mas Yadi';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>
4. Terkahir Klik Simpan

Namun sebelum menyimpanya sobat harus perhatikan dulu , kode - kode diatas , yaitu dengan menyesuaikan kode diatas dengan blog sobat , seperti menentukan jumlah komentar yang ingin di tampilkan dan lain sebagainya , untuk jelasnya silahkan perhatikan kostumisasinya.

Kostumisasi Widget Recent Comment With Avatar

Untuk membuat tampilan berbeda, silahkan edit CSS diatas. Penjelasan script yang bisa dikostumisasi :

numComments = 5 (jumlah komentar yang ditampilkan)
showAvatar = true (false, apabila ingin menyembunyikan avatar)
avatarSize = 35 (ukuran avatar dalam pixel)
roundAvatar = true (avatar bulat)
characters = 40 (jumlah karakter isi komentar)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
adminBlog='Kang Ismet' (nama admin blog, wajib diganti)

Nah gimana bro cara membuat recent comment sendiri di blog ? begitu gampang sekali bukan ? saya yakin jika anda membaca dan mengikuti tutorial diatas insya Allah bisa , bahkan newbie sekalipun yang baru saja mengenal blog kemaren sore , bisa mempraktekan hal semacam ini.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

1 comment