Rubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta' Official Site

Naah.. Untuk mempercantik atau memperindah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Agar hasilnya jadi seperti gambar dibawah ini:

http://picturestack.com/686/362/T3AcatsXga.jpg

http://picturestack.com/686/437/jIlLivedemor5n.png

Lalu bagaimana caranya biar tampilan Thread Comment'y gak monoton, agar tampilannya berubah seperti gambar diatas ? Keren bukan ? yuk, Silakan ikuti langkah-langkah dibawah ini:

1. Login ke blogger

2. Tata Letak.

3. Edit HTML.

4. Cari kode CSS Comment yang lama, kalau CSS punya anda 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;
}

Tapi yaa biasanya tiap template berbeda-beda bukan ? Jadi yaa kamu cari sendiri kode CSS komentar kamu versi template blog kamu. :D

5. Setelah ketemu, Kamu hapus semua kode CSS komentar yang lama versi template blog kamu, lalu kamu copy kode dibawah ini, diatas kode ]]></b:skin> (untuk menemukan kode yang dicari kamu tinggal CTR + F, lalu masukan kode yang ingin dicari.).

/* Blogger Threaded Comments */
#comments h4{width:auto;padding:5px 5px;margin-top:5px;margin-bottom:5px;background:#111;border-left:10px double darkred;border-right:10px double darkred;border-top:5px double #1d1d1d;border-bottom:5px double #1d1d1d;color:#CCC;text-shadow:0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red;font-family:dungeon;font-size:20px;font-weight:normal;margin:20px 0}
.cm_wrap {clear:both;margin-bottom:10px;float:right;width:100%;}
.cm_head{margin:0;width:70px;float:left}
.cm_avatar{background:#DDD;margin:0;vertical-align:middle;border:1px solid #111;padding:3px;width:36px;height:36px}
.comments .avatar-image-container {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWOdCM3fgldTBgMdDzdwwaP7FH8N8wwEzW9O0h2sj2IB6_uXiY3awgC9qtCpiHdRuXnKPEp4k9v-xQ9IVlgs3MEem71O8hk-ZUog-TxIZ8LMv29zSGUEHQnDbv-1hPCVENLB8s-f3LlZ0/s1600/default-avatar.png");
background-position: top center;
background-repeat: no-repeat;
width: 36px;
height:36px;
margin: 0;
padding:0;
overflow: hidden;
float: left;
margin-right: 33px;
display: block;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.cm_reply{padding-top:5px}
.cm_reply a{color:#CCC;display:inline-block;margin:0;padding:1px 6px;border:1px solid #C4C4C4;text-align:center;text-decoration:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#252525;font:12px/18px sans-serif}
.cm_reply a:hover{opacity:0.9;text-decoration:none !important;background:darkred;color:#fff}
.cm_entry{opacity:0.9;padding:16px; background:#111; border-bottom:5px double #666;border-left:10px double #252525;border-top:5px double #666;border-right:10px double #252525; overflow:hidden}
.cm_arrow{display:block;}
.cm_info{margin-bottom:5px}
.cm_name{text-shadow:0 0 1px red,0 0 1px red,0 0 1px red,0 0 1px red;font-family:dungeon;font-weight:bold;font-size:15px;float:left}
.cm_name a{color:white;}
.cm_date{font-size:13px;float:right;font-style:italic;color:darkred}
.cm_entry p{margin:0;font-family:dominican;font-size:18px;color:#ccc}
.cm_pagenavi{font-size:15px;text-transform:uppercase;color:#fff;font-weight:bold}
.cm_pagenavi a{color:white;text-decoration:none;padding:10px}
.cm_pagenavi a:hover{text-decoration:underline}
.cm_pagenavi span{background:#111;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 ANDA&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 ANDA&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 ANDA dengan ID blog kamu, misal: 3587929819661064232 (untuk mengetahui ID blomu, kamu bisa lihat deretan angka pada address bar pada saat membuka halaman Edit HTML.

9. Kalau sudah selesai semua, kamu klik Save, Lalu lihat hasilnya deh ^^

Hmm.. mungkin agak rumit yaa gan.. tapi yaa itulah yang utta ketahui. Selamat mencoba dan semoga berhasil yah kawan :D.

Semoga tutorial ini berguna bagi anda, jangan lupa komentarnya yach.hehee,.. ^^

Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan! Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah.. thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...

ping fast my blog, website, or RSS feed for Freegoogle pagerank

Ping your blog, website, or RSS feed for Free

Please rate this article:

{[['

', '

']]}

{["Useless", "Boring", "Need more details", "Perfect"]}

Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!

<a href="http://ut2a-4down.blogspot.com/2012/03/rubah-tampilan-comments-dengan-fitur.html">Rubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta'</a>

4 Comments

Comments

+ komentar + 4 Diskusi pada 'Rubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta''

Gojek Ewako2:05 PM
Keren Gan,,,,!!
BalasHapus
Balasan
← Ⓐкα UTτα`2:40 PM
@Andy Fauzan Akbar : Makasih gan
BalasHapus
Balasan
Gojek Ewako3:54 PM
@Utta' MOG-MOG : Sama2
BalasHapus
Balasan
Mohamad Rivai10:21 PM
bagus sih.
tapi nggak cocok buat template q.
makasih om.

mampir sini ya kalo sempet.
BalasHapus
Balasan

Tambahkan komentar

Tolong memberi komentar yang tidak melanggar norma-norma. Kami berhak menghapus komentar yang kasar, mengejek, bersifat menyerang, dan tidak berhubungan dengan artikel di atas. Oleh sebab itu, kiranya dapat menggunakan bahasa yang jelas!

Pedoman wajib untuk memasukkan komentar:
1. Tidak boleh memakai lebih dari satu kolom komentar.
2. Pertanyaan/masukan harus berhubungan dengan uraian diatas.
3. Sebaiknya satu atau dua pertanyaan dalam satu kolom komentar.
4. Hanya menggunakan bahasa Indonesia yang umum dan dimengerti semua orang.
5. Tidak diperbolehkan menggunakan huruf besar untuk menekankan sesuatu.
6. Tidak diijinkan mencantumkan hyperlink dari situs lain.

Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

Sebelumnya utta minta maaf yg sebsr2Nya jka komentar anda blm sempat dibls. ^^