Membuat Kotak Komentar Blog dan Facebook berdampingan 100% Work

 oke selamat siang sobat DxRooters, siang yang panas ini enaknya minum yang dingin-dingin, sambil di depan rumah lihat cewek cantik lewat :D

kali ini saya akan memberikan sebuah tutorial, dimana tutorial ini dapat kalian gunakan di Blogger kalian yaitu Bagaimana Caranya membuat Kotak Komentar Blogger dan Facebook di blog yang berdampingan..??

Mau.. Blog kalian kotak komentarnya seperti ini...??

WANI PIRO...!!!! hahahahahaha... :D

Bercanda saja...

tanpa basa basi lagi kita langsung saja ke TKP..  ( Cara ini digunakan untuk blogger tampilan baru yang tidak ada tanda Centang Expand Template Widget ) :D

Bahan yang wajib ada :

1. Ice Kopi / Teh ( cocok kalau suasana panas gini ) :D
2. 1 Buah Komputer / Laptop dan sejenisnya milik Pribadi ( nanti pakai komputer tetangga lagi ) :D
3. Jaringan Internet ( ya eyalah.. kalau ngga pakai jaringan internet apa mau pakai jaringan cinta ) cieee... :D
4. SMS / BBM / Social Media di Off terlebih dahulu biar Konsentrasi ( jangan takut, saya bukan Hipnoters ) :D

  Langkah :

1. Minum Ice buatan kalian tadi sedikit saja biar relax.
2. Hidupkan Komputer / laptop kalian
3. Coneksikan ke internet
4. buka blogger
5. isi login ( kalau belum punya akun silahkan daftar simbah google )
6. masuk ke blogger
7. Pilih Template ( bahasa Bule : Rancangan )=> Edit HTML 
8. Cari Code ]]></b:skin> ( biar mudah carinya pakai CTRL + F ).
9. Masukan Script dibawah ini tepat di atas code ]]></b:skin> ( jangan diatas genting )..comments-page { background-color: #f2f2f2;}
   #blogger-comments-page { padding: 0px 5px; display: none;}
   .comments-tab { float: left; padding: 5px; margin-right: 3px;
   cursor: pointer; background-color: #f2f2f2;}
   .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
   .comments-tab:hover { background-color: #eeeeee;}
   .inactive-select-tab { background-color: #d1d1d1;}
   
   Catatan : Warna bisa kalian Rubah sesuai Keinginan yang saya kasih tanda Yellow ( bahasa Bule : Kuning )
10. Lalu Cari Code </head> dan Pastekan Code dibawah ini tepat di atas code tersebut.
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
        <script src='http://code.jquery.com/jquery-latest.js'/>
        <meta content='ID FB Anda disini' property='fb:admins'/>
        <script type='text/javascript'>
        function commentToggle(selectTab) {
        $(".comments-tab").addClass("inactive-select-tab");
        $(selectTab).removeClass("inactive-select-tab");
        $(".comments-page").hide();
        $(selectTab + "-page").show();
        }</script>
    Perhatikan tulisan yang berwarna Yellow di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/Mas.ganteng, maka ID Anda berada pada tulisan yang berwana merah tersebut. 
11. lanjut cari Code <div class='comments' id='comments'> dan Pastekan code dibawah ini tepat dibawah code tersebut.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with 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 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='5' width='500'/>
    </b:if>
    </div>
<span style='font-size: 85%'>Widget Comment <a href='http://bloggermahir.blogspot.com/2013/01/kotak-komentar-facebook-dan-blog-berdampingan.html' rel='follow' target='_blank'>FB-Blog </a></span>
    <div class='comments comments-page' id='blogger-comments-page'>

keterangan : Code <div class='comments' id='comments'> ada 2, pilih salah satu tidak masalah, kalau boleh saya sarankan pilih yang bawah karena lebih enakan bila terjadi evakuasi...untuk yang warna Yellow ( Bahasa Bule : Kuning ) itu adalah jumlah tampilan komentarnya, sedangkan yang berwarna Blue ( Bahasa Bule : Biru ) itu adalah lebar kotaknya ( bukan lebar badan kalian ) :D sekian tutorial kami semoga bermanfaat untuk kalian semuanya.

_________________________________________________________________________
Peringatan :

1. Berikan Komentar yang Baik dan Sopan.
2. Tidak boleh mengandung Unsur Pelecehan, SARA, Sesat, Kriminalitas.
3. Hormatilah Karya orang lain sebagaimana kalian menghormati aturan undang-undang
4. Peraturan ini akan berubah sewaktu-waktu sesuai keadaan yang ada

_________________________________________________________________________