CARA MEMBUAT KOTAK RECENT COMMENT

Blog BLOGGER ANTI KEKERASAN kali ini akan membahas tips-trik blogging yang berkaitan dengan membuat kotak recent comment. Membuat kotak recent comment versi blog BLOGGER ANTI KEKERASAN ini sebenarnya merupakan suatu hal yang mudah dan hanya membutuhkan sedikit ketelitian serta kejelian. Kotak recent-comment ini adalah merupakan sebuah widget, tepatnya side-bar widget yang berisi tentang uraian komentar-komentar para visitor blog yang bersedia meninggalkan komentarnya, berikut dengan gambar avatarnya.

Gambar di samping ini menunjukkan sample kotak recent-comment yang akan kita bahas cara pembuatannya. Cara membuat recent-comment pada blog ini sebenarnya telah banyak dibahas oleh beberapa sahabat blogger, namun kali ini blog BLOGGER ANTI KEKERASAN ingin memadukannya dengan kotak semacam text-area sebagai batasnya.

Bila anda belum memiliki widget recent-comment, maka copykan script di bawah ini pada salah satu sidebar widget anda dengan menambahkan fungsi HTML pada blog anda. Berikut ini scriptnya :

<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 = 4,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
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://lora-malunk.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=4"></script>

Selanjutnya bilamana anda ingin menambahkan kotak-area sebagai batasnya, maka script lengkapnya adalah sebagai berikut  : 

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px;
width:247px; height:315px; background-color: transparant;
border: 3px inset rgb(8, 8, 8);
box-shadow: 0 0 10px black;">

<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 = 4,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
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://lora-malunk.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=4"></script>

</div>

Demikianlah cara membuat Kotak Recent Comment, semoga bermanfaat.

Posted in: tips-trik