Cara Membuat Widget Komentar Terbaru Dengan CSS

Selamat pagi, kali ini bang-e mau memberi tips Cara Membuat Widget Komentar Terbaru Dengan CSS, silahkan di simak semoga bermanfaat.

• Pertama masuk ke Blog

• Lalu masukan email dan sandi, jangan masukan alamat FB : D

• setelah masuk Blog pilih Tata letak jangn tata dado ia :D

• Setelah itu maka akan tampil 

• Pilih Tambah Gadget, lalu pilih HTML/JavaScript 
• Lalu masukan kode dibawah ini
<style type="text/css">
#komentar {
 background:#720AAD;
 margin:0;
 padding:0;
 border:1px solid #9209C8;
}
#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 #9209C8;
 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:#8B2CB0;
}
#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 #520C63;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 1px 2px #222222;
}
#komentar ul li div.ismen {
 color:#ffffff;
 text-shadow:-1px -1px 1px #9209C8;
}
#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 #9209C8;
 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 #9209C8;
}
#komentar .gamen:hover>span{
 opacity: 1;
 bottom: 55px;
}
</style>
<div id='komentar'>
<ul>
<script type='text/javascript'>
//<![CDATA[
var jmlkomentar = 5;
var jmlkarakter = 40;
//]]></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<script type="text/javascript" src="http://riezky-doea.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>

• Setelah itu simpan

Sumber : http://riezky-doea.blogspot.com/2012/09/cara-membuat-widget-komentar-terbaru.html

terimaksih telah membacanya semoga bermanfaat