Pada kesempatan kali ini Bangiz 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.
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:
1. Masuk Dasbor Blogger > Template > Edit HTML
2. Copy-paste kode berikut dibawah kode <head>
2. Copy-paste kode berikut dibawah kode <head>
<meta content='Profile ID' property='fb:admins'/>Ganti Profile ID dan App ID dengan yang Anda miliki
<meta content='App ID' property='fb:app_id'/>
3. Copy-paste kode berikut sebelum kode ]]></b:skin (gunakan Ctrl+F untuk memudahkan)
.comments-page{ background:#fff;}Untuk mendapatkan kode warna yang lain silahkan lihat disini atau disini
#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);
}
4. Berikutnya copy-paste kode berikut di atas kode </head>
<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>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.
<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>
<div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Komentar Facebook'>Untuk Anda yang menggunakan template responsive silahkan gunakan kode yang ini:
<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/AVvXsEhau4agOoxP17Uq1UjPkFTQ-NeuUIBYSpleJlFtiFF6JsE-bxmXD7Zr0RCr33Ol_cJkcbY9DrOUjqAYNg42izpsqOhKVbabO6mt0q2s77e7_F-iZkogvwP3hrLKPzBcc4kJgNul6IGBsX-Z/s1600/facebook-icon.png'/><div align='right'/><a href='http://downloadwallpaperanimasi.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/AVvXsEjdSE-0d5gjAjyEHH2jZzEFey_6LgaML_4psjV0QXWbh3mD7mXzyxsrw_3U-uEZ2_RSf-9trFbCcD7GS0uwN0n-KaMm1zSvOWGhAv-xnLPqRSrHZSk87uqangjzY83sqkxTYQBm8VxWsVNV/s1600/Blogger-icon.png'/>
<div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Komentar Facebook'>6. Simpan Template dan lihat hasilnya. Semoga berhasil.
<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/AVvXsEhau4agOoxP17Uq1UjPkFTQ-NeuUIBYSpleJlFtiFF6JsE-bxmXD7Zr0RCr33Ol_cJkcbY9DrOUjqAYNg42izpsqOhKVbabO6mt0q2s77e7_F-iZkogvwP3hrLKPzBcc4kJgNul6IGBsX-Z/s1600/facebook-icon.png'/><div align='right'/><a href='http://downloadwallpaperanimasi.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/AVvXsEjdSE-0d5gjAjyEHH2jZzEFey_6LgaML_4psjV0QXWbh3mD7mXzyxsrw_3U-uEZ2_RSf-9trFbCcD7GS0uwN0n-KaMm1zSvOWGhAv-xnLPqRSrHZSk87uqangjzY83sqkxTYQBm8VxWsVNV/s1600/Blogger-icon.png'/>
Jika ada pertanyaan seputar topik di atas, silahkan tinggalkan komentar dan bagikan artikel ini melalui sosial media atau ikuti Bangiz untuk mendapatkan update terbaru.
Tidak ada komentar:
Posting Komentar