Cara Membuat Kotak Komentar Blog Berdampingan Dengan Komentar Facebook Lebih Style dengan Tombol Reply dan Emotions

Also Read Other Articles

Bagaimana Gambar di atas bos.. Ngeriii ga he..he... Pengen ga kaya itu he2. emmm Kasiiih Tau Ga Yaaa hiks..hiks.. Pasag aja gan.. Lumayan lah dari pada yang pertama ane posting Cara Membuat Kotak Komentar Blogger Berdampingan dengan Komentar Facebook Style Sobat mau coba yang ini he..he.. Perhatikan langkah berikut...

1. Masuk  akun blog sobat

2. Masuk dasbor klik rancagan, (Cadangkan dan Pulihkan)/(Download Full Templat)

3. Edit HTML (Exspand)/(Centang)

4. Cari Kode  #comments   
    kira2 ada 5 baris, hapus semua kode tersebut lalu ganti dengan kode berikut

Klik Show Untuk Melihat Kode

/* Comments ----------------------------------------------- */ #comments{font:normal normal 100% Georgia,Serif} #comments h4{margin:1em 0;color:# 0dc3ff;font:bold 10px Serif,Arial,sans-serif,"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica} #comments h4 strong{font-size:100%} #comments-block{margin:1em 0 1.0em;font:normal normal 100%/1.0em Georgia,Serif} #comments-block dt{color:#fff; border:0px inset #ffffff;padding:3px;text-align:center;-moz-border-radius-topleft:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomleft:0px;-moz-border-radius-bottomright:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJt_R8MQ7Y6Gq8OvFclr3QO33NyOO2NqUYFm58CK441Df0dwK9cyoptIQBrQfK-Hksbkzc9XLz6wuqu1kEd4N1nhyphenhyphenC02ByO8j6_UEVKQOynTQjRQ-XdExadksuG2pH84bX4-loSofjN78/s1600/catmenu.jpg);margin:10px 0 0 0;padding:3px;font:italic normal 11px Georgia,Serif} #comments-block dt a{text-decoration:none;color:#fff;font:italic normal 11px Georgia,Serif} #comments-block dd{color:#fff; border:0px inset #ffffff;padding:3px;text-align:left;-moz-border-radius-topleft:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomleft:0px;-moz-border-radius-bottomright:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY729Kz8lbSe4LMZs_Dk3GFywq4ANMvy-yNyLS-VwJVCfAPXcv5Io_HpQqQaSdCWFq1Talp2_BM_8ASC0pVr2D034wS7aKsbybEygJcZ6btLAMB8fhveU0QLYoZc8Hl0hmJJah8998XL0/s1600/catmenuhov.jpg) ;margin:.0em 0 0;padding:3px;font:normal normal 11px Georgia,Serif} #comments-block dd a{color:#fff;text-decoration:none;font:normal normal 11px Georgia,Serif} #comments-block dd.comment-footer{margin:0 0 0;border-left:0px solid #ffffff;border-right:0px solid #ffffff;border-bottom:0px solid #ffffff;padding:3px;font:normal normal 100%/1.0em Georgia,Serif} #blog-pager-newer-link{float:$startSide} #blog-pager-older-link{float:$endSide} #blog-pager{text-align:center} .feed-links{clear:both;line-height:1.0em}

5. Selanjutnya cari kode <div class='comments' id='comments'> dan masukkan kode berikut di bawah kode <div class='comments' id='comments'>
Klik Show Untuk Melihat Kode

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments us From Facebook'> <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/> <fb:comments-count expr:href='data:post.url'/> Comments </div> <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments us From Blogger'> <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments </div><div class='clear'/> </div> <div class='comments-page' id='fb-comments-page'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <fb:comments expr:href='data:post.url' num_posts='10' width='540'/> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://code.jquery.com/jquery-latest.js'/> <meta content='

ID SOBAT BLOGGER

' property='fb:admins'/> <script type='text/javascript'> function commentToggle(selectTab) { $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;); $(selectTab).removeClass(&quot;inactive-select-tab&quot;); $(&quot;.comments-page&quot;).hide(); $(selectTab + &quot;-page&quot;).show(); } </script> <style>.comments-page { background-colorscheme=dark;} #blogger-comments-page { padding: 0px 5px; display: none;} .comments-tab { float: left; border:5px inset #0dc3ff;padding:5px;text-align:center;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;cursor: pointer; background-color: #202020;} .comments-tab-icon { height: 14px; width: 60; margin-right: 3px;} .comments-tab:hover { background-color: #0dc3ff;} .inactive-select-tab { background-color: #CC0000;}</style>

6. Selanjutya cari kode <dd class='comment-footer'> dan masukkan kode berikut di bawah kode <dd class='comment-footer'>
Klik Show Untuk Melihat Kode

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrf89KsPzXzZUbdIsoieKfuiml4Uvg92AeM0JFoBbsk6ynbZ2JPjwNLlU8FfDz-reyeu9-yBGDhdSaRXDQ0LzCydKw-Q_eD-ZqKRc12pMqppAzfPFvpUtWAocsUZCstDdnMEn_Qvg6uEr/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=7702307313672594270&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.openundefinedthis.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src=' http://3.bp.blogspot.com/_3TLQUQnfZ8A/TBslIQjktDI/AAAAAAAAAH8/nPxq7Y9iEzg/s400/replyred+3.png ' style='float:right;' title='Reply Comment'/></a></span>

7. Cari lagi kode <p class='comment-footer'> dan masukkan kode berikut di bawah kode <p class='comment-footer'>
Klik Show Untuk Melihat Kode

<div style='border:3px inset #CC0000;padding:5px;text-align:center;-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;'> <b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :)) <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)] <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/> ;)) <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;) <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;) <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :p <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :(( <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :) <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :( <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :X <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =(( <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-o <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/ <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-* <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :| <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-} <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~x( <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/> b-( <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/> :-L <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> x( <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))</b></div>

8. Hampir selesai bos, sekali lagi.. Cari kode </body> lalu masukkan kode berikut diatasnya..
Klik Show Untuk Melihat Kode

<script src='http://hbhost.googlecode.com/files/yemoticon.js' type='text/javascript'/>

9. Pratinjau,   Klik Simpan

NB :

• Kode No 4 adalah kode Komentar Blog sobat, Bisa di ganti bisa tidak
• Kode No 5 adalah Kode komentar Blog dan Facebook berdampingan Cantik
• Kode No. 6 adalah kode tombol Reply (Bisa di pasang bisa tidak sumber usup blog)
• Kode No. 7 dan 8 adalah kode untuk Emotions, (Bisa di pasag bisa tidak)
• Gunakan atau tekan Control F untuk pencarian kode / Ctrl - F

Selamat Mencoba dan Salam Sukses !!!