Cara Membuat Kotak Komentar Facebook Dan Blogger Berdampingan

Oleh Unknown

Kamis, 19 Desember 2013

Bagikan :

Tweet

Ok guys, kali ini saya akan Share Tips Blog, yakni Cara Membuat Kotak Komentar Facebook Dan Blogger Berdampingan

Guna dari Tips Blog kali ini ialah :

• Banyak orang yang ingin berkomentar namun tidak memiliki Akun Blogger, sehingga mereka tidak jadi berkomentar, meski bisa berkomentar dengan nama Anonymous namun banyak orang yang lebih suka dengan menggunakan namanya sendiri, dengan adanya Tips ini mereka bisa berkomentar di Blog Anda, karena 98% orang yang suka browsingan pasti punya Akun Facebook, kalau gak punya ya kagak tau gua lagi :D >.< -_-
• Akan lebih mudah, dan Practice untuk Pengunjung, sehingga Pengunjung Anda pun semakin Nyaman di Blog Anda :)

Ok Langsung aja Tutorialnya :

• Buka Dashboard Blogger Anda => Template => Edit Html =>
• Cari kode ]]></b:skin> dengan CTRL+F agar lebih mudah
• Jika sudah ketemu masukkan kode di bawah ini di atas kode ]]></b:skin>

.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;}

• Cari lagi kode </head> dan letakan kode di bawah ini di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='apranoto.budi' 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>

• Kemudian cari lagi kode <div class='comments' id='comments'> dan letakan kode dibawah ini dibawah kode <div class='comments' id='comments'>

  <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='2' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

NOTE : Biasanya kode <div class='comments' id='comments'> 2 buah, letakan kode yang saya suruh taruh itu di kedua-dua kode tersebut

• Save Template :) 

Tag : Blogger, Script, Tips