Membuat Tab Komentar dengan efek CSS pada Blog

2 min read

Seperti tadi yang saya telah postingHari ini saya akan memberikan cara bagaimana membuat komentar pada blog dengan fitur tambahan yaitu CSS penampakan bisa dilihat di sedebar blog ini nah seperti itulah penempakannya.

Langsung saja ke step nya :

Masuk ke dasbor anda
Lalu pilih tab Tata Letak
Tambahkan Gadget
Pilih HTML/javaScript
Masukan script ini *jangan beri judul pada HTML/Javasrcipt nya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><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  = 6,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://awandcyber4rt.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>

Copy kemudian pilih Save
Dan lihatlah hasilnya.
*Saran agar terlihat lebih elegant satu rumpunkan antara :

Comment
Populer Post
Entri Post/Related Post

Agar terlihat style nya seperti pada blog ini.

Nah sekian dari saya. Semoga bermanfaat buat kalian semua para blogger :)

You may like these posts

Post a Comment