Cikgu Kacamata


27
Widget Komen Terkini Dengan Thumbnail


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:

1. Masuk ke akaun blogger anda -->>> "More options"

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>


Nota:

6. "Save" dan tadaaaaa...








Sila Share Post CK Ini Sekiranya Anda Suka
Dapatkan Widget Ini!

27 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Wahh , menarik la CK . Ada masa nanti nak buat la . hehe :)

    ReplyDelete
    Replies
    1. InsyaAllah ada update lagi menarik drp ni. Nanti CK post. Anyway thanks ya ;)

      Delete
  3. this one menarik juga ni! terima kasih sharing ye CK (^^,)

    ReplyDelete
    Replies
    1. Ya...sama-sama. CK harap ianya berguna ;)

      Delete
  4. komen terbanyak atau komen terkini paling bagus

    ReplyDelete
    Replies
    1. Yup...CK setuju sgt2. InsyaAllah nanti CK post komen terbanyak :)

      Delete
  5. tak ajak pon g bekpes + lunch..:)

    ReplyDelete
    Replies
    1. Hehe...nak ajak segan. Mata bengkak lg, baru bangun tido :D :P

      Delete
  6. visit and support your everyday. Please support me back. Thank you in advance.

    ReplyDelete
    Replies
    1. Thanks for supported and visited me often. I really appreciated it. Done following you and added you in circle :)

      Delete
  7. kena try ni.. nak letak org yang rajin komen kat blog kita tu macamana yer CK?

    ReplyDelete
    Replies
    1. Mesti tryyy...hehe. InsyaAllah nanti CK akan post kan camner nak buat komen terbanyak macam kat sidebar CK tu...

      Delete
  8. nice tutorial cikgu =) kalau nak, nnti sy ambil..trima kasih

    ReplyDelete
    Replies
    1. Terima kasih SKA. Silakan anytime :)

      Delete
  9. tq sharing..insyaallah nanti nak ltk jgak dlm blog sy

    ReplyDelete
    Replies
    1. Terima kasih kembali bg supported kat CK ;)

      Delete
  10. terima kasih..saya copy code. memang menjadi

    ReplyDelete