Sebelum ini CK ada mengeluarkan post mengenai cara meletakkan Widget Komen Terkini Blogger di sidebar tetapi tanpa avatar pemberi komen. Untuk widget kali ini, CK akan menunjukkan cara memasukkan komen terkini berserta dengan avatar-avatar sesiapa yang memberi komen terkini termasuk komen daripada pemilik blog itu sendiri.
Untuk menambahkan widget ini ke dalam blog anda, ikuti langkah-langkah di bawah:
2. Pilih "Layout"
3. "Add a Gadget"
4. Scroll ke bawah sedikit dan klik "HTML/JavaScript"
5. "Copy" kod di bawah dan "paste" ke dalam kotak Content
<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: #ffffff;
-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: 3px;
color: #555;
display: block;
font-size: 11px;
font-style: italic;
line-height: 1.3;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 50,
roundAvatar = true, characters = 50,
showMorelink = true,
moreLinktext = "Berikutnya »",
defaultAvatar = "http://1.bp.blogspot.com/-EuNpJ48c_X8/UcITqryxVmI/AAAAAAAABCE/resw623kKeU/s1600/ck-avatar.jpg",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/4231695015/ck-komenterkiniavatar.js"></script>
<script type="text/javascript" src="http://URL-Blog-Anda/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
<span id=ck-wkt><a href=http://cikgukacamata.blogspot.com/2013/06/widget-komen-terkini-dengan-thumbnail.html target=_blank>Widget Komen Terkini Dengan Avatar</a></span>
<style type=text/css>
#ck-wkt {font-family: Arial,Tahoma;font-size:9px;font-style:italic;padding-top:7px;display:block;text-align:right;}
</style>
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: #ffffff;
-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: 3px;
color: #555;
display: block;
font-size: 11px;
font-style: italic;
line-height: 1.3;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 50,
roundAvatar = true, characters = 50,
showMorelink = true,
moreLinktext = "Berikutnya »",
defaultAvatar = "http://1.bp.blogspot.com/-EuNpJ48c_X8/UcITqryxVmI/AAAAAAAABCE/resw623kKeU/s1600/ck-avatar.jpg",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/4231695015/ck-komenterkiniavatar.js"></script>
<script type="text/javascript" src="http://URL-Blog-Anda/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
<span id=ck-wkt><a href=http://cikgukacamata.blogspot.com/2013/06/widget-komen-terkini-dengan-thumbnail.html target=_blank>Widget Komen Terkini Dengan Avatar</a></span>
<style type=text/css>
#ck-wkt {font-family: Arial,Tahoma;font-size:9px;font-style:italic;padding-top:7px;display:block;text-align:right;}
</style>
Nota:
- Kod Warna Biru:
Untuk menukar warna border pada avatar - Kod Warna Hijau:
Untuk memaparkan jumlah bilangan komen terkini (tukar kedua-duanya sekali dengan nilai yang sama) - Kod Warna Ungu:
Untuk menukar saiz avatar - Kod Warna Oren:
Untuk menukar jumlah huruf (character) komen termasuk jarak - Kod Warna Aqua:
Buang saja jika tidak diperlukan atau ganti dengan perkataan yang lain - Kod Warna Merah:
Gantikan URL-Blog-Anda dengan URL blog anda sendiri (contoh: cikgukacamata.blogspot.com)
