Membuat Komentar Facebook dan Blogger Berdampingan | Bangiz

Membuat Komentar Facebook dan Blogger Berdampingan

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.

komentar facebook dan blogger
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 facebook dan blogger berdampingan
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(&quot;#fb-comments&quot;);' title='Komentar Facebook'>
<fb:comments-count expr:href='data:post.url'/> Facebook
</div>
<div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
<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(&quot;#fb-comments&quot;);' title='Komentar Facebook'>
    <fb:comments-count expr:href='data:post.url'/> Facebook
    </div>
    <div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
    <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.
Name

Blogging,108,CorelDRAW,14,Desain Grafis,25,Facebook,22,Foto Sampul,32,Gambar,53,Info,26,Instagram,2,Internet,28,Kata Mutiara,26,Kesehatan,31,Komputer,25,Microsoft Word,12,Office,12,PhotoScape,10,Resep,6,SEO,10,Sosial media,21,Tutorial,35,Twitter,2,Wallpaper,18,
ltr
item
Bangiz: Membuat Komentar Facebook dan Blogger Berdampingan
Membuat Komentar Facebook dan Blogger Berdampingan
Cara membuat kolom komentar facebook dan blogger berdampingan, Modifikasi komentar default blogger, membuat kotak komentar blogger dan fb pada blogspot, bikin komentar Blogger Facebook berdampingan...
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxU7e39NBoWb8CTWF8EQ23hwRK1Kcnjq198ZmxrK6hrCQmSdUS7tZyDolppm-CEDw1dFika_LJmZCKXBBU44umfjRPQgzzUmTgEVDt0LhF-PlVC2MHzy-HkNhMUOwbqz8UDqk-9E4aRBjP/s320/komentar+facebook+n+blogger.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxU7e39NBoWb8CTWF8EQ23hwRK1Kcnjq198ZmxrK6hrCQmSdUS7tZyDolppm-CEDw1dFika_LJmZCKXBBU44umfjRPQgzzUmTgEVDt0LhF-PlVC2MHzy-HkNhMUOwbqz8UDqk-9E4aRBjP/s72-c/komentar+facebook+n+blogger.jpg
Bangiz
https://bangiz.blogspot.com/2013/08/Komentar-Facebook-Blog.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2013/08/Komentar-Facebook-Blog.html
true
5131493432912556385
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RELATED POSTS LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy