Membuat Komentar Facebook dan Blogger Berdampingan

• min read

Table of Contents

Bangiz - Pada kesempatan kali ini admin mau berbagi tentang tips dan trik blogging. Yang akan kita bahas kali ini yaitu tentang komentar di blog. Banyak sekali akun yang bisa kita gunakan ketika mau berkomentar pada tampilan komentar blogger yang default , disana ada akun Google, Live Journal, Wordpress, TypePad, AIM, OpenID, Nama/URL dan Anonymous.

Apabila Anda kurang suka tampilan default, Anda bisa menggantinya dengan komentar Google+ atau Facebook.

Facebook - Blogger

Sesuai dengan judul di atau yaitu cara membuat kolom komentar facebook dan blogger berdampingan. Jika tertarik, Anda bisa menggunakannya di blog yang Anda miliki. Untuk screenshootnya, lihat gambar di bawah ini:

Komentar FB dan Blogger berdampingan

1. Masuk Dasbor Blogger > Template > Edit HTML.

2. Copy-paste kode berikut dibawah kode <head>:

<meta content='Profile ID' property='fb:admins'/>
<meta content='App ID' property='fb:app_id'/>

Ganti Profile ID dan App ID dengan yang Anda miliki.

3. Copy-paste kode berikut sebelum kode ]]></b:skin (gunakan Ctrl+F untuk memudahkan):

.comments-page{ background:#fff;}
#blogger-comments-page { padding: 5px; display: none;border:0px solid gray;border-radius:5px; margin-top:5px;}
#fb-comments-page{border:0px solid gray;border-radius:5px;padding:5px;margin-top:5px;}
.facebook-tab { float: left;cursor: pointer;margin-right:2px;border:1px solid #99FFFF; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:trebuchet, arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow:none;font-weight:bold; text-align: center; color: #FFFFFF; background-color: #3B5998;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3B5998), color-stop(100%, #99FFFF));
background-image: -webkit-linear-gradient(top, #3B5998, #99FFFF);
background-image: -moz-linear-gradient(top, #3B5998, #99FFFF);
background-image: -ms-linear-gradient(top, #3B5998, #99FFFF);
background-image: -o-linear-gradient(top, #3B5998, #99FFFF);
background-image: linear-gradient(top, #3B5998, #99FFFF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3B5998, endColorstr=#99FFFF);
}
.facebook-tab:hover {border:1px solid #FF4000; background-color: #FF4000;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF4000), color-stop(100%, #FF400F));
background-image: -webkit-linear-gradient(top, #FF4000, #FF400F);
background-image: -moz-linear-gradient(top, #FF4000, #FF400F);
background-image: -ms-linear-gradient(top, #FF4000, #FF400F);
background-image: -o-linear-gradient(top, #FF4000, #FF400F);
background-image: linear-gradient(top, #FF4000, #FF400F);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF4000, endColorstr=#FF400F);
}
.blogger-tab {float: left;cursor: pointer;border:0.5px solid #ffc826; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:trebuchet, arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: none;font-weight:bold; text-align: center; color: #FFFFFF; background-color: #FE6602;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FE6602), color-stop(100%, #febf04));
background-image: -webkit-linear-gradient(top, #FE6602, #febf04);
background-image: -moz-linear-gradient(top, #FE6602, #febf04);
background-image: -ms-linear-gradient(top, #FE6602, #febf04);
background-image: -o-linear-gradient(top, #FE6602, #febf04);
background-image: linear-gradient(top, #FE6602, #febf04);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FE6602, endColorstr=#febf04);
}
.blogger-tab:hover{ border:1px solid #FF4000; background-color: #FF400F;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF4000), color-stop(100%, #FF400F));
background-image: -webkit-linear-gradient(top, #FF4000, #FF400F);
background-image: -moz-linear-gradient(top, #FF4000, #FF400F);
background-image: -ms-linear-gradient(top, #FF4000, #FF400F);
background-image: -o-linear-gradient(top, #FF4000, #FF400F);
background-image: linear-gradient(top, #FF4000, #FF400F);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF4000, endColorstr=#FF400F);
}

Untuk mendapatkan kode warna yang lain silahkan lihat disini atau disini

4. Berikutnya copy-paste kode berikut di atas kode </head>:

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

5. Selanjutnya cari kode <div class='comments' id='comments'> lalu copy-paste kode berikut sesudah atau dibawahnya. Apabila ada lebih dari satu maka paste di bawah semuanya.

<div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Komentar Facebook'>
<fb:comments-count expr:href='data:post.url'/> Facebook
</div>
<div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Komentar Blogger'>
<data:post.numComments/> Blogger
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><div align='left'><font color='#4862A3' size='4'><strong>Comment with Facebook</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoT53BA-fM3nhLXOsTIEaAHOQgGd54qwj7yf5EC9i5QKgdqPQcMvBe0LtqlUEPfOUIMHVUtwwjF3zlrgX4RYBkkxEIG4dYqXY_Sa8M1oy-mnlCZkyV6g6D5U48fc7lI1-QPLOh6nf36TF/s1600/facebook-icon.png'/><div align='right'/><a href='http://bangiz.blogspot.com/2013/08/Komentar-Facebook-Blog.html' target='blank'><small>Get This</small></a></div>
<fb:comments expr:href='data:post.url' num_posts='20' width='650'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div align='left'><font color='#FE6602' size='4'><strong>Comment with Blogger</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5MoNTCAw7WCMYK0Fj9qQena3bYfzSg3m9_kPTx_sB8KdLhPUP4FiCgKH_CQ2_OZePvXyG54e3JPyUOeiJ7G4ODAOpZFreeSQmzuaq9aOE-AB-bT547YIkzl1KurRHZj7mKsyh7olA7l9/s1600/Blogger-icon.png'/>

Untuk Anda yang menggunakan template responsive silahkan gunakan kode yang ini:

     <div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Komentar Facebook'>
    <fb:comments-count expr:href='data:post.url'/> Facebook
    </div>
    <div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Komentar Blogger'>
    <data:post.numComments/> Blogger
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == "item"'>
    <div id='fb-root'/><div align='left'><font color='#4862A3' size='4'><strong>Comment with Facebook</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoT53BA-fM3nhLXOsTIEaAHOQgGd54qwj7yf5EC9i5QKgdqPQcMvBe0LtqlUEPfOUIMHVUtwwjF3zlrgX4RYBkkxEIG4dYqXY_Sa8M1oy-mnlCZkyV6g6D5U48fc7lI1-QPLOh6nf36TF/s1600/facebook-icon.png'/><div align='right'/><a href='http://bangiz.blogspot.com/2013/08/Komentar-Facebook-Blog.html' target='blank'><small>Get This</small></a></div>
    <div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='20' width='650'/></div>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
    <div align='left'><font color='#FE6602' size='4'><strong>Comment with Blogger</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5MoNTCAw7WCMYK0Fj9qQena3bYfzSg3m9_kPTx_sB8KdLhPUP4FiCgKH_CQ2_OZePvXyG54e3JPyUOeiJ7G4ODAOpZFreeSQmzuaq9aOE-AB-bT547YIkzl1KurRHZj7mKsyh7olA7l9/s1600/Blogger-icon.png'/>

6. Simpan Template dan lihat hasilnya. Semoga berhasil.

Jika ada pertanyaan seputar topik di atas, silahkan tinggalkan komentar dan bagikan artikel ini melalui sosial media atau ikuti Bangiz untuk mendapatkan update terbaru.