Cekidot!!
Gimana?? keren bukan?? hheeheh dengan tempilan nya yg beda bget cocok ni buat blog blog megazine,woke gak usah basa basi lagi langsung aja di cobain.... yuk
1. Login ke blogger
2. Tata Letak.
3. Edit HTML.
4. Cari kode CSS Comment yang lama, kalau CSS punya kamu Biasanya sih seperti dibawah ini..
#comments h4 {
color:#666666;
font-weight:normal;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
font-size:14px;
text-transform:none;
}
#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}#comments-block .comment-author{background:#e0dede;border-top:1px solid #ddd;margin:.5em 0;padding-left:0px;color:#111}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-body{padding-left:0px;color:#333}#comments-block .comment-footer{padding-left:0px;margin:.25em 0 2em;line-height:1.5em;font-size:9px;border-top:1px solid #ddd}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:justify;margin:0 1em .75em;padding-left:5px;border-left:3px solid #f0f0f0}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic; color:gray}.owner-Body{padding-left:0px;color:#333}.owner-Body p{text-align:justify;margin:0 1em .75em;padding-left:5px;background:#f5f5f5;border-left:3px solid #ddd}
#blog-pager-newer-link {
float:left;
}
5. Setelah ketemu,ganti semua kode di atas/kode komentar mu yg lama,ganti dengan kode di bawah ini
Setelah itu cari lagi kode ]]></b:skin> lagi,lalu letakkan lagi kode di bawah ini di atas kode
]]></b:skin>
6. Setelah itu kamu cari lagi kode </body>, lalu paste kode berikut diatas kode </body>.
7. Selanjutnya cari kode <b:includable id='comments' var='post'> , lalu Hapus kode antara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> (kode yang berwarna biru yang harus didelete).
Contoh :
8. Setelah ketemu, Lalu Paste kode berikut ini diantara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> yang sudah dihapus tadi gantikan dengan kode dibawah..
/* Blogger Threaded Comments */
#comments h4{padding:5px 5px;margin-top:5px;margin-bottom:5px;margin:0 0 10px;font-family:dungeon;font-size:25px;font-weight:normal;text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00FCDA,0 0 70px #00FCDA,0 0 80px #00FCDA,0 0 100px #00FCDA,0 0 150px #00FCDA;
color:#FFF;
background:#101113;box-shadow:0px 1px 3px #000;box-shadow:inset 0px 0px 5px #000;
border: 2px solid rgba(255, 255, 255, 0.03);
border-left: 20px solid rgba(255, 255, 255, 0.03);}
#comments {
padding:20px 20px 10px;
position:relative;
margin:0 auto;
background-color:#101113;
border:2px solid #333;
color:#333;
-webkit-box-shadow:inset 1px 1px 10px #000;
-moz-box-shadow:inset 1px 1px 10px #000;
box-shadow:inset 1px 1px 10px #000;
}
#comments a {color:#ccc;}
#comments .note {
padding:5px 10px;
border:1px solid #222;
background-color:yellow;
background-image:linear-gradient(top,#333, #222);
box-shadow:0px 0px 0px 1px black;
color:#333;
font:normal 12px century gothic;
text-shadow:0px 1px 0px black;
}
#comments .note a,
#comments .note code {font-size:11px;}
#comments img.incomment {display:block;margin:2px 0px;}
#comments a.allow {font-size:97%;}
#comments code {
color:white;
font:normal 12px "Consolas","Courier New",Courier,mono,serif;
}
#comments code a {color:white;}
#comments code a:hover {background:transparent;}
#comments iframe.video {
width:320px;
max-width:320px;
height:224px;
box-shadow:0px 1px 3px black;box-shadow:inset 0px 0px 5px black;
display:block;
margin:10px auto 10px;
border:4px solid #444;
}
.comment-form {max-width:none;}
#comment-form {
clear:both;
margin-top:50px;
padding:20px 20px 20px 20px;
box-shadow:0px 1px 5px black;
width:auto !important;
display:block;
}
#respond {display:block;}
#comment-form h4 {margin-bottom:15px;}
#respond p {
margin:0px 0px 10px;
font-size:98%;
}
#comment-form iframe, #comment-editor {height:270px;border:none !important;}
#frameholder {border:4px solid #333;box-shadow:0px 1px 3px black;}
.comments .avatar-image-container {
margin:0px 0px 3px;
vertical-align:middle;
border: 1px solid rgba(255, 255, 255, 0.04);
padding:4px;
width:45px !important;height:45px !important;
max-width:100%;max-height:100%;
float:none;
box-shadow:0px 1px 2px black;
}
.comments .avatar-image-container img {
background-image: url("http://picturestack.com/453/380/pdPdefaultavaagv.png");
background-position: top center;
background-repeat: no-repeat;
display: block;
width:45px !important;
height:45px !important;
max-width:100%;border: 1px solid rgba(255, 255, 255, 0.04);
max-height:100%;
overflow:visible;
float:none;
}
.cm_avatar{}
.cm_entry a:after {
content:"";
width:0px;
height:0px;
border:12px solid transparent;
border-right-color:#FAFAD2;
border-bottom-color:#FAFAD2;
position:absolute;
right:0px;
bottom:0px;
}
.cm_wrap {clear:both;margin-bottom:4px;float:right;width:100%;}
.cm_head{margin:0;width:58px;float:left}
.cm_reply{}
.cm_reply a{display:block;
width:auto;
margin:0px 0px 1px 3px;
text-decoration:none;
padding:2px 7px 3px;
text-transform:none;background-color:#111;
color:#bbb !important;
border-bottom:1px solid #333;border-top:1px solid #333;
font-size:10px;font-family: "Consolas","Courier New",Courier,mono,serif;
box-shadow:0px 2px 2px black;
border-radius:3px 0px 0px 3px;transition:all 0.16s ease-in-out;}
.cm_reply a:hover{margin:0px 0px 1px -3px;background:#ccc;background:rgba(0,0,0,.1);
padding:2px 10px 3px 7px;}
.cm_entry{padding:16px 16px 16px;
border:1px solid #222;
background-color:transparent;
box-shadow:0px 1px 3px black;box-shadow:inset 0px 0px 5px black;
overflow:hidden;
position:relative;}
.cm_entry p{font-family: "Consolas","Courier New",Courier,mono,serif;font-size:12px;color:#bbb;padding:5px 10px;margin:2px 0px 0px;font-size:12px;
clear:both;border:1px solid #333;box-shadow:0px 1px 2px #222;box-shadow:inset 0px 0px 3px #222;
background: #ccc;
background: rgba(0,0,0,.1);
word-wrap:break-word;}
.cm_arrow{display:block;}
.cm_info{border:1px solid #333;
background: #ccc;
background: rgba(0,0,0,.1);
padding:5px 10px;box-shadow:0px 1px 2px #222;box-shadow:inset 0px 0px 3px #222;
margin:0px 0px 2px;}
.cm_name{text-shadow:0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black;font-family: "Consolas","Courier New",Courier,mono,serif;font-weight:bold;font-size:14px;float:left;text-decoration:none;}
.cm_name a{color:#777;}
.cm_date{font-family: "Consolas","Courier New",Courier,mono,serif;
text-decoration:none;font-size:11px;float:right;font-style:italic;color:darkred}
.cm_pagenavi{font-size:12px;text-transform:uppercase;color:#fff;font-family: "Consolas","Courier New",Courier,mono,serif;
font-weight:bold;}
.cm_pagenavi a{color:white;text-decoration:none;padding:10px}
.cm_pagenavi a:hover{text-decoration:underline}
.cm_pagenavi span{background: #ccc;
background: rgba(0,0,0,.1);padding:4px;border:1px solid #E0E0E0;
}
6. Setelah itu kamu cari lagi kode </body>, lalu paste kode berikut diatas kode </body>.
- <script type="text/javascript" src="http://najib.googlecode.com/files/threaded%20comment.js"></script>
7. Selanjutnya cari kode <b:includable id='comments' var='post'> , lalu Hapus kode antara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> (kode yang berwarna biru yang harus didelete).
Contoh :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>
</span> comment<b:else/>
<span id='cm_total'>
<data:post.numComments/>
</span> comments</b:if>
</b:if>
</h4>
------------ sebagian kode yang harus didelete -------------------
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/>
</a>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>
8. Setelah ketemu, Lalu Paste kode berikut ini diantara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> yang sudah dihapus tadi gantikan dengan kode dibawah..
<div class='comments' id='comments'><a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'></div>
<div class='cm_pagenavi' id='cm_page'></div>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=id blog lo&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>Reply</a>
</div>
</div>
<div class='cm_entry'>
<span class='cm_arrow'></span>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<p><data:comment.body/></p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'></div>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>
- Sehingga hasil Keseluruhannya seperti berikut :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'><a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'></div>
<div class='cm_pagenavi' id='cm_page'></div>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=id blog lo&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>Reply</a>
</div>
</div>
<div class='cm_entry'>
<span class='cm_arrow'></span>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<p><data:comment.body/></p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'></div>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>
NB:Ganti Tulisan id blog lo dengan ID blog kamu, misalnya seperti punya saya: 2324407930757050560 (untuk mengetahui ID blomu, kamu bisa lihat deretan angka pada address bar pada saat membuka halaman Edit HTML)
Huf.....mungkin buat newbi agak susah ya??
tetapi jika berhasil thread comment sangat keren lo...
oke,sekian postingan saya pagi ini :D
See you
Backlink Please !
| URL |
| Code For Forum |
| HTML Code |
0 komentar:
Posting Komentar
Catatan :
[+] Usahakan Berkomentar Tidak Menyinggung
[+] Tidak Mengandung Kata Kasar
[+] Boleh Berupa Kritik Atau Saran
[+] Dilarang Berkomentar Berbau Porno
[+] Diharapkan tulis URL Blog Kalian
[+] Sisipkan Banner Blog Kalian Di Komentar
By : Eka