Percantik Sidebar Komentar Versi 2.0 ~ Belajar Blog

Satu tahun yang lalu Blogger Tune-Up pernah membuat widget komentar yang berfungsi untuk menampilkan komentar para pengunjung dengan bantuan JSON. Namun, widget tersebut belum bisa menampilkan avatar/gravatar pengujung yang meninggalkan komentar. Beauty Recent JSON Comments Sidebar 2.0 adalah penyempurnaan dari widget sidebar sebelumnya, yang telah mampu menampilkan avatar pengunjung. Selain mampu menampilkan avatar pengunjung, ketika kita mengarahkan mouse pada avatar maka akan muncul tooltips cantik yang menampilkan nama komentator. Tooltips ini tidak menggunakan jQuery tapi murni menggunakan CSS Level 3, dengan animasi yang tidak kalah menariknya dengan jQuery.

Demo Widget Komentar dengan Avatar

Memasang Widget Komentar Dengan Avatar

Dibawah ini langkah-langkah pemasangan widget komentar dengan avatar pada sidebar. Blogger Tune-Up menyedia 2 jenis style dan pada langkah ini style yang digunakan merupakan style dengan warna yang telah diset. Sedangkan untuk style yang tanpa warna (menyesuaikan dengan template) disediakan pada bagian bawah langkah ini.

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Tambah Widget/Gadget baru dengan type "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada bagian "Konten":

<style type="text/css">
#komentar {
 background:#3eb5da;
 margin:0;
 padding:0;
 border:1px solid #0971C8;
} 
#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 = 20;
var jmlkarakter = 60;
//]]></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<script type="text/javascript" src="http://modification-blog.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>

Perhatian :

Ubahlah alamat blog (modification-blog.blogspot.com) sesuai dengan alamat blog anda.
var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar yang akan ditampilkan.
var jmlkarakter = 60; ubah nilai 60 untuk menentukan jumlah karakter yang akan ditampilkan (termasuk spasi).

Langkah 5
Simpan Widget dan preview blog anda...

Widget Komentar Dengan Avatar Tanpa Style

Jika kode di atas (lihat Langkah 4) akan menghasilkan tampilan yang memiliki style tersendiri, maka kode dibawah merupakan kode yang tanpa style. Ketika dipasangkan pada sidebar maka bentuk dan posisi akan mengikuti style default yang digunakan oleh blog anda. Untuk menggunakan kode dibawah ini, ganti saja kode pada Langkah 4 dari tag <style type="text/css"> sampai dengan tag </style>. Berikut kode CSS Widget Komentar Dengan Avatar Tanpa Style:

<style type="text/css">
#komentar {
 margin:0;
 padding:0;
} 
#komentar ul{
 margin:0;
 padding:0px;
 list-style: none;
} 
#komentar ul li {
 height:46px;
 margin:0 !important;
 padding:4px 0 !important;
 display:block;
 clear:both;
 list-style:none;
} 
#komentar ul li:last-child {
 border-bottom:none;
} 
#komentar ul li:hover {
 background-color:#ccc;
} 
#komentar a, #komentar a:link, #komentar a:visited {
 clear:both;
 color:#222;
 display:block;
 text-decoration:none;
 text-shadow:0 1px 0 #ccc;
} 
#komentar .gamen {
 display: block;
 float: left;
 height: 42px;
 left: 4px;
 margin-right: 15px;
 position: relative;
 width: 42px;
}
#komentar .gamen>img {
 border: 2px solid #fefefe;
 -webkit-border-radius: 22px;
 -moz-border-radius: 22px;
 border-radius: 22px;
 -webkit-box-shadow:0 1px 2px #222;
 -moz-box-shadow:0 1px 2px #222;
 box-shadow:0 1px 2px #222;
}
#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 #ccc;
 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 #ccc;
}
#komentar .gamen:hover>span{
 opacity: 0.9;
 bottom: 55px;
}
#komentar .ismen {
 display: block;
 font-size: 1em;
 line-height: 1.2;
 padding: 2px 4px 2px 0;
}
</style>

Kode CSS Widget Komentar Yang Dipadatkan

Dibawah ini kode CSS Level 3 untuk widget komentar beravatar yang dipadatkan. Silahkan anda ganti kode CSS diatas dengan kode CSS dibawah ini agar lebih pendek dan sederhana. Dan silahkan anda berekspresi dan modifikasi kode CSS tersebut sesuai kebutuhan.

Style

<style type="text/css">
#komentar {background:#3eb5da;margin:0;padding:0;border:1px solid #0971C8;} 
#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>

Non Style

<style type="text/css">
#komentar {margin:0;padding:0;} 
#komentar ul{margin:0;padding:0px;list-style: none;} 
#komentar ul li {height:46px;margin:0 !important;padding:4px 0 !important;display:block;clear:both;list-style:none;} 
#komentar ul li:last-child {border-bottom:none;} 
#komentar ul li:hover {background-color:#ccc;} 
#komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#222;display:block;text-decoration:none;text-shadow:0 1px 0 #ccc;} 
#komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
#komentar .gamen>img {border: 2px solid #fefefe;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;-webkit-box-shadow:0 1px 2px #222;-moz-box-shadow:0 1px 2px #222;box-shadow:0 1px 2px #222;}
#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 #ccc;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 #ccc;}
#komentar .gamen:hover>span{opacity: 0.9;bottom: 55px;}
#komentar .ismen {display: block;font-size: 1em;line-height: 1.2;padding: 2px 4px 2px 0;}
</style>

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Belajar Blog

Saturday, March 3, 2012