H
alo Sobat
AHS, kali ini saya akan membagikan tutorial tentang bagaimana menyatukan
comment blogger dan G+ secara berdampingan.
ya sobat, comment fb sama blogger yang berdampingan sudah tidak jaman lagi xD, tapi herannya masih banyak banget blogger yang memakai itu.
maka dari itu sobat, pada tutorial kali ini, saya akan membagikan itu,
agar kalian semua, terutama sobat AHS, bisa mencobanya dan memakai itu untuk selamanya xD
anda perlu tau sobat, membuat komen blogger dan g+ berdampingan memang lebih susah dari membuat komen facebook dan blogger berdampingan, kenapa?? karena komen facebook dan blogger tidak memakai fitur javascript yang sangat banyak,
tapi anda jangan kuatir sobat, saya sudah berhasil menerapkan bentuk komen seperti ini, jadi, saya bisa membantu jika sobat ingin bertanya
oke, langsung saja ya sobat.yuk mari disimak sobat..
Tutorial Membuat Comment Blogger dan G+ Berdampingan[Teruji]
Untuk demonya silahkan lihat sendiri di kotak komentar xD
- pertama buka blogger sobat
- setelah itu, ke template
- setelah berada di template, segera cari kode <b:includable id='nextprev'> dengan Ctrl+F
- setelah ketemu,copy kode di bawah ini, lalu paste tepat di bawah/setelahnya kode tadi *nunjuk atas* itu
<div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script>
gapi.comments.render('gcomments', {
href: window.location,
width: '680',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
$('#comments-norm').click(function(){
// switch to normal comments displaying
$('#gcontainer').css('display','none');
$('#comments').css('display','block');
$('#comments-norm').addClass('comment-on');
$('#comments-gplus').removeClass('comment-on');
$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho3wmWZTSydqjYU31zKzXEaPAEYRIW_z-cZNALHsc_teczBQuR0x5QezMvGb9rjTm1l9vrNvQPA1pGv1UdIusdMNUJfEwUOmxj9yDcjLOV1RjfaFOfopv4tkpl5gW22BtZy-I9MjkoBUup/s50/blogger_on.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBqWFdWaWeiY5CVHJ1bDqxCXSnE3blCC_K8iyuuXIhBi8A0GbpC6WqbLQy5RiBF2G5_yC_-UPsoRCpfLAhU90w1F_jW-PGH_iCFVhoyHBk0dbrEP8l8UEd0KWp5hhgeUA1iidldTWoNyn/s50/plus_off.png');
});
$('#comments-gplus').click(function(){
// switch to google plus comments displaying
$('#comments').css('display','none');
$('#gcontainer').css('display','block');
$('#comments-norm').removeClass('comment-on');
$('#comments-gplus').addClass('comment-on');
$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghz_l2p_JDYoxNIlZ9uGOtYXoMVUPD5F1bNn34NdmbBQc9c4JlGRn4SVNt2uc1MolGchEsiCxqKGNp40o0tvDgWIybFXLDj52zj72ZV5kX5UTp00j4HENVSBIZJtWq2aZJmigOJ1ZwhWVD/s50/blogger_off.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRStyDzulDTeV1zeqFRpsXiXp6r7tA1DGmk_GvCOCEvgWXp1TXOYMs5YfwwX-i9YDIh98D8abYVq2DAFAPsFkPVey02FZo6_f-XPf8nGCPgXNOfuCZz_uPmK46fqLnCxu5ZlaOwIs5JIsc/s50/plus_on.png');
});
$('#comments-norm').hover(
// switch to normal comments displaying
function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho3wmWZTSydqjYU31zKzXEaPAEYRIW_z-cZNALHsc_teczBQuR0x5QezMvGb9rjTm1l9vrNvQPA1pGv1UdIusdMNUJfEwUOmxj9yDcjLOV1RjfaFOfopv4tkpl5gW22BtZy-I9MjkoBUup/s50/blogger_on.png');}
}, function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghz_l2p_JDYoxNIlZ9uGOtYXoMVUPD5F1bNn34NdmbBQc9c4JlGRn4SVNt2uc1MolGchEsiCxqKGNp40o0tvDgWIybFXLDj52zj72ZV5kX5UTp00j4HENVSBIZJtWq2aZJmigOJ1ZwhWVD/s50/blogger_off.png');}
});$('#comments-gplus').hover(
// switch to gplus comments displaying
function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRStyDzulDTeV1zeqFRpsXiXp6r7tA1DGmk_GvCOCEvgWXp1TXOYMs5YfwwX-i9YDIh98D8abYVq2DAFAPsFkPVey02FZo6_f-XPf8nGCPgXNOfuCZz_uPmK46fqLnCxu5ZlaOwIs5JIsc/s50/plus_on.png');}
}, function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBqWFdWaWeiY5CVHJ1bDqxCXSnE3blCC_K8iyuuXIhBi8A0GbpC6WqbLQy5RiBF2G5_yC_-UPsoRCpfLAhU90w1F_jW-PGH_iCFVhoyHBk0dbrEP8l8UEd0KWp5hhgeUA1iidldTWoNyn/s50/plus_off.png');}
});</script>
<style>
#gcontainer {display: none;}
#comments-norm, #comments-gplus {padding:0px 5px;float: left;}
#comment-header {margin-bottom:25px;padding-left: 10px;float: left;width: 595px;padding-top:20px;margin-left: 25px;padding-bottom: 5px;margin-right: 25px}
#gcontainer {margin-left: 40px;margin-top:20px;float: left;</style>
- sesudah itu cari kode ]]></b:skin> dengan Ctrl+F
- lalu pastekan kode dibawah ini tepat diatasnya
#comments-norm, #comments-gplus {padding: 0px 5px;float: left;}
#comment-header {margin-bottom:25px;padding-left: 10px;float: left;width: 595px;padding-top:20px;margin-left: 25px;padding-bottom: 5px;margin-right: 25px;}
#gcontainer {margin-left:20px;margin-top:20px;float: left;}
.commentwith h3 {
text-transform: uppercase;
font-family: 'Oswald', Arial, Helvetica, sans-serif;
font-size: 24px;
color:#2493C4;
font-weight: normal;
line-height: 25px;
margin-bottom: 45px;
float: left;
margin: 15px;
}
Ehhh.... Anda Belum Selesai Sobat..
- setelah itu cari kode <div class='post-footer-line post-footer-line-1'>
- kemudian, copy kode di bawah ini,pastekan tepat dibawah/setelahnya kode di atas *nunjuk atas lg*
<b:if cond='data:blog.pageType == "item"'>
<div id='comment-header'>
<div class='commentwith'><h3><b>Comment Using:</b></h3></div>
<img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho3wmWZTSydqjYU31zKzXEaPAEYRIW_z-cZNALHsc_teczBQuR0x5QezMvGb9rjTm1l9vrNvQPA1pGv1UdIusdMNUJfEwUOmxj9yDcjLOV1RjfaFOfopv4tkpl5gW22BtZy-I9MjkoBUup/s50/blogger_on.png' title='Blogger comments'/>
<div class='commentwith'><h3><b>OR</b></h3></div>
<image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBqWFdWaWeiY5CVHJ1bDqxCXSnE3blCC_K8iyuuXIhBi8A0GbpC6WqbLQy5RiBF2G5_yC_-UPsoRCpfLAhU90w1F_jW-PGH_iCFVhoyHBk0dbrEP8l8UEd0KWp5hhgeUA1iidldTWoNyn/s50/plus_off.png' title='Google+ comments'/>
<div class='commentwith'><h3><b>Choose It Now!!</b></h3></div>
</div></b:if>
Nah, sobat sekarang save lalu coba di lihat, apakah udah muncul atau belum..
Untuk Setting
- Untuk setting width/lebar comment G+,cari kode width: '680'
- lalu,ubah tulisan 680 disana menjadi angka sesuka hati anda
- Jika tampilannya tidak pas, silahkan atur sendiri CSSnya xD,atau bila anda butuh bantuan,bisa komen dibawah
- Jika anda ingin mengubah tulisan Comment Using blaa..blaa itu...silahkan cari kode ini
<div class='commentwith'><h3><b>Comment Using:</b></h3></div>
<img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho3wmWZTSydqjYU31zKzXEaPAEYRIW_z-cZNALHsc_teczBQuR0x5QezMvGb9rjTm1l9vrNvQPA1pGv1UdIusdMNUJfEwUOmxj9yDcjLOV1RjfaFOfopv4tkpl5gW22BtZy-I9MjkoBUup/s50/blogger_on.png' title='Blogger comments'/>
<div class='commentwith'><h3><b>OR</b></h3></div>
<image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBqWFdWaWeiY5CVHJ1bDqxCXSnE3blCC_K8iyuuXIhBi8A0GbpC6WqbLQy5RiBF2G5_yC_-UPsoRCpfLAhU90w1F_jW-PGH_iCFVhoyHBk0dbrEP8l8UEd0KWp5hhgeUA1iidldTWoNyn/s50/plus_off.png' title='Google+ comments'/>
<div class='commentwith'><h3><b>Choose It Now!!</b></h3></div>
- ubahlah tulisan di dalam kode itu,menjadi sesuka hati kalian
Maka demikianlah artikel
Cara membuat komen blogger dan G+ berdampingan
sampai jumpa :v