CARA MEMBUAT KOTAK KOMENTAR BLOG DAN FACEBOOK BERDAMPINGAN

Untuk tampilan kotak komentar blog biasanya cuma ada satu, tapi kotak komentar tersebut dapat dimodifikasi dengan menambakan satu lagi yaitu kotak komentar facebook. Untuk letak dari komentar blog dan facebook (FB) akan serasi dan terlihat manis jika diletakkan saling berdekatan atau sejajar. Seperti yang telah diketahui bahwa kotak komentar disediakan untuk visitor dalam memberikan unek-uneknya atau komentarnya. Makin banyak pengunjung memerikan tanggapan / komentar yang pasti akan tambah baik kredibilitas konten dan pengelolaan blog tersebut.

Ada tips dan trik blogspot untuk mendapatkan atau memikat pengunjung blog untuk mau mengisi kotak komentar blog anda. Pengunjung/visitor blog akan senang berkomentar di form komentar blog, jika form komentar blog tersebut tidak merepotkan dan membuat jengkel pengunjung karena kotak komentar tersebut terlalu sulit untuk disii sehingga pengunjung malas mendatanginya lagi. Jadi buatlah nyaman pengunjung blog dalam memberikan tanggapan dalam kotak komentar blog anda.

Cara menggabungkan kotak komentar blog dan komentar facebook (FB) yang ada di bawah postingan blog ini selain form komentar blog tersebut akan tampil cantik, juga akan membuat pengunjung merasa enak dan dapat memilih untuk mengisi komentarnya pada kedua kotak komentar yang telah tersedia baik pada kotak komentar blog ataupun pada kotak komentar facebook.

Memasang komentar blogger dan facebook di bawah postingan saling berdampingan :
1. Login ke draftblogger.com 
2. Pilih Template
3. Pilih Edit HTML
4. Centang pada Expand Widget Templates 
5. Cari kode ]]></b:skin> 
6. Lalu letakkan kode dibawah ini diatas kode ]]></b:skin>

.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;}

7. Selanjutnya cari kode </head>
8. Lalu letakkan kode dibawah ini diatas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='Silahkan isi dengan ID Facebook anda' 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><span style="font-size: 50%">Widget by <a href="http://teknik-blog-tutorial.blogspot.com" target="_blank" rel="follow">tips dan trik blogspot</a></span>

Keterangan :
Tulisan pink diatas, silahkan ganti dengan https://www.facebook.com/nama anda. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka. untuk mengetahui ID anda silahkan pastekan link ini ke browser anda https://graph.facebook.com/username (contoh http://www.facebook.com/dedia.pandu maka usernamenya dedia.pandu)

9. Lanjut dengan langkah yang lain dengan mencari kode <div class='comments' id='comments'>

Jika menemukan 2 kode <div class='comments' id='comments'> maka copy dan paste saja kode dibawah ini pada keduanya dan letakkan dibawah kode <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</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'/><fb:comments expr:href='data:post.url' num_posts='2' width='400'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>

Keterangan :
1. angka 2 adalah jumlah komentar yang mau ditampilkan di komentar facebook.
2. angka 400 adalah lebar kotak komentar facebook. (sesuaikan dengan lebar template anda)
3. untuk kode warna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua menemukan kode yang sama, maka hapus salah satunya.

Lihat contoh dibawah ini yang akan dihapus jika ada 2 kode yang sama :

<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><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='2' width='400'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'> (ini yang harus dhapus)

9. Selesai, simpan templates

Penting :
Seperti biasanya untuk susunan template blog rata-rata tidak sama. Jika didalam template blog anda terdapat 2 kode yang sama yaitu kode <div class='comments' id='comments'>, maka untuk lebih mudahnya, letakkan kode-kode pada no.9 tersebut pada kode yang nomor 2 (dua) saja untuk ditempatkan dibawah kode <div class='comments' id='comments'> 

Jangan bingung untuk cara membuat komentar blog dan facebook berdampingan ini, jika anda masih belum paham silahkan simak lebih teliti lagi dan lihat berulang-ulang tutorial diatas.

SUMBER