Assalamualaikum w.w. Apa kabar sahabat Minetutor . Sebagai pembuka cerita ternyata content di blog ini hampir semua tutorial disadap dan dicuri oleh pihak tidak jelas yang tidak mengikuti etika blogging dan ini meresahkan sahabat yang budiman. Sebagai informasi bagi sahabat minetutor, yang mengcopas content tanpa seijin dan menyertakan link sumber : dawudprionggodo[.]blogspot[.]com , ada yang lain memang, tapi ini yang kelewatan, otaknya hanya seputaran situ aja ya repot... piye om, judul sama isi kok ngelantur,he2...namanya juga kisah sedih bang...Oke kalau begitu saatnya kita kembali ke topik. Pada posting terdahulu sudah ada cara membuat komentar facebook di blog, nah kali ini kita akan coba sandingkan kotak komentar blog dan facebook secara sejajar...and How it can be bro, what do we do.., sok keren lu,he2....
Berikut Urairan sederhana langkah langkah yang perlu dilakukan serta disesuaikan :- Login ke akun blogger, as usually klick template, kemidian edit tempale dan centang expand template widget . Dianjurkan untuk memback up template terlebih dahulu untuk jaga jaga.
- Search / cari code : </head> dan posisikan code dibawah ini di ATAS nya :
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='minetutor' 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>
- Ganti Tulisan yang berwarna merah (minetutor) dengan id facebook sahabat. Misalnya alamat facebook kita : http://facebook.com/minetutor . maka id kita adalah minetutor.
- Selanjutnya kita search lagi code berikut : ]]></b:skin> , posisikan kode berikut di ATAS nya :
.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;}
- Kode yang ada warnanya dapat dimodifikasi sesuai kebutuhan sahabat.
- Selanjutnya kita cari lagi code : <div class='comments' id='comments'>
- Biasanya terdapat 2 kode tersebut di template, jika demikian posisikan kode berikut di BAWAH ke 2 kode : <div class='comments' id='comments'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div></b:if>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
- Kode dengan warna hijau adalah tambahan agar kotak komentar tidak muncul di halaman statis misalnya Contact Us dll. Kemudian kode 5 dan 600 masing masing dapat di modif sesuai keinginan.
- Terakhir jangan lupa and don't forget untuk save template.
Nah demikianlah step konfigurasi yang perlu kita lakukan, bagi yang berminat silahkan dicoba di blog masing masing. Bagi yang tertarik share posting ini silahkan di share namun tolong disertakan link ke sumber yaitu minetutor.blogspot.com. Oke sahabat minetutor, selamat mencoba dan semoga bermanfaat.
Comments
Post a Comment