Cara Membuat Widget Recent Comments Dengan Avatar Di Blog

Kali ini saya akan share Cara Membuat Widget Recent Comment Dengan Avatar Di Blog. Mungkin kamu sudah tidak asing lagi dengan widget ini. widget recent comment ini menampilkan komentar terbaru dari konten-konten pada blog kamu. widget ini dilengkapi dengan tampilan foto profil pemberi komentar dan tentunya menampilkan kata-kata dalam komentar.

Keuntungan dari widget ini, mungkin jika kamu tidak mengaktifkan moderasi komentar, kamu bisa mengetahui komentar-komentar yang masuk pada konten blog kamu. sehingga kamu bisa mengontrol komentar tersebut apakah perlu balasan atau perlu dihapus (karena dianggap spammy).

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<style type="text/css">
#komentar {
 background:#3eb5da;
 margin:0;
 padding:0;
 border:1px solid #00ff00;
}
#komentar ul{
 margin:0;
 padding:0px;
 list-style: none;
}
#komentar ul li:first-child {
 border-top:none;
}
#komentar ul li {
 height:46px;
 border-bottom:1px solid #0971c8;
 border-top:1px solid #cccccc;
 padding:2px 0;
 list-style:none;
}
#komentar ul li:last-child {
 border-bottom: none;
}
#komentar ul li:hover {
 background-color:#7bc4df;
}
#komentar a,
#komentar a:link,
#komentar a:visited {
 clear:both;
 color:#222;
 display:block;
 text-decoration:none;
}
#komentar .gamen {
 display: block;
 float: left;
 height: 42px;
 left: 4px;
 margin-right: 15px;
 position: relative;
 width: 42px;
}
#komentar .gamen>img {
 border: 2px solid #ffffff;
 -webkit-border-radius: 22px;
 -moz-border-radius: 22px;
 border-radius: 22px;
 box-shadow: 0 1px 2px #222222;
}
#komentar ul li div.ismen {
 color:#ffffff;
 text-shadow:-1px -1px 1px #0971c8;
}
#komentar .ismen {
 display: block;
 font-size: 1em;
 font-style: italic;line-height: 1.2;
 padding: 2px 4px 2px 0;
}
#komentar .gamen>span{
 width: 150px;
 height: auto;
 line-height: 20px;
 padding: 5px;
 left: 115px;
 margin-left: -64px;
 font-size: 1em;
 font-weight:bold;
 color: #212121;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 4px solid #0971c8;
 background: rgba(255,255,255,0.7);
 text-indent: 0px;
 border-radius: 5px;
 position: absolute;
 pointer-events: none;
 bottom: 100px;
 opacity: 0;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
#komentar .gamen>span:before,
#komentar .gamen>span:after{
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50%;
 margin-left: -9px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid rgba(0,0,0,0.1);
}
#komentar .gamen>span:after{
 bottom: -14px;
 margin-left: -10px;
 border-top: 10px solid #0971c8;
}
#komentar .gamen:hover>span{
 opacity: 0.9;
 bottom: 55px;
}
</style>
<div id='komentar'>
<ul>
<script type='text/javascript'>
//<![CDATA[
var jmlkomentar = 5;
var jmlkarakter = 60;
//]]></script>
<script type="text/javascript" src="https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-widget-recent-comments-dengan-avatar-di-blog.js"></script>
<script type="text/javascript" src="http://tutorial-blog-eno.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2014/10/cara-membuat-widget-recent-comments-dengan-avatar-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• height:46px; adalah ukuran tinggi, silahkan kamu ganti dengan selera yang kamu mau.
• var jmlkomentar = 5; adalah jumlah komentar, silahkan kamu ganti dengan selera yang kamu mau.
• var jmlkarakter = 60; adalah jumlah karakter, silahkan kamu ganti dengan selera yang kamu mau.
• Warna orange adalah link kode "JavaScript" blog.
• Silahkan kamu ganti http://tutorial-blog-eno.blogspot.com/ dengan URL blog kamu sendiri.

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

BACA JUGA ARTIKEL TERKAIT DI BAWAH INI :

Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.

Ditulis Oleh : Tutorial Blog Eno » Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.

Saat ini kamu sedang membaca artikel tentang Cara Membuat Widget Recent Comments Dengan Avatar Di Blog. silahkan kamu Copy-Paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link di bawah ini sebagai sumbernya. INGAT : saling menghargai kreatifitas sesama sobat blogger oke. <a href="http://tutorial-blog-eno.blogspot.com/2014/10/cara-membuat-widget-recent-comments-dengan-avatar-di-blog.html" target="_blank">Cara Membuat Widget Recent Comments Dengan Avatar Di Blog</a>

[Mau Seperti Ini?]