Cara Memasang Kotak Komentar Facebook & Blogger Responsive - Facebook & Blogger Comment Box

Alroud Blog |

Tertarik memasang 2 kotak komentar di blog anda. Kotak komentar facebook mampu menjadi salah satunya pilihan untuk dipasang di blog anda. Karena banyaknya pengguna facebook sehingga memudahkan dalam berkomentar tanpa harus login atau bahkan membuat akun lainnya. Makara pengunjung blog anda tidak perlu direpotkan untuk login untuk berkomentar.

Nah kali ini bukan hanya kotak komentar facebook yang akan kita pasang tetapi juga kotak komentar blogger atau kotak komentar default dari blogger. Kotak komentar dari blogger ini mampu anda atur supaya pengunjung harus login dulu biar mampu berkomentar atau tanpa login (tidak memiliki akun) mampu berkomentar. Jika anda mewajibkan pengunjung harus login maka mereka harus login dengan akun google biasanya atau akun lain.

Dengan banyaknya pengguna google tentu tidak menjadi dilema mewajibkan mereka login terlebih dahulu. Kembali ke kotak komentar facebook ,kekurangan dari kotak komentar ini yaitu jumlah komentar yang ada tidak dihitung jadi walaupun sudah ada 5 komentar dari kotak komentar facebook yang dihitung hanya dari kotak komentar deafult blogger. 

Keuntungan Memasang Facebook & Blogger Comments Box

Memasang 2 kotak komentar facebook dan default blogger menunjukkan solusi bagi pengunjung yang tidak memiliki facebook mereka mampu berkomentar dengan akun google ,sebaliknya bagi pengunjung yang tidak memiliki akun google mampu berkomentar dengan facebook. Gimana tertarik untuk memasang 2 kotak komentar isi ,ikuti langkah dibawah ini.

Cara Membuat Kotak Komentar Facebook dan Blogger

Langkah 1

Masuk ke Blogger ,pilih Template → Edit HTML

Langkah 2

Salin isyarat dibawah ini dan letakkan/pastekan diatas isyarat ]]></b:skin> atau </style>

/* Komentar Facebook dan Blogger */ .komentargabungan-page ,.komentargabungan-tab{display:inline-block;background:#fafafa;color:#fff;float:left;margin:0 10px 0 0;cursor:pointer;font-weight:bold;position:relative;font-size:110%;z-index:10} .komentargabungan-page{background:rgba(255 ,255 ,255 ,1);width:100%;max-width:100%;margin:0 0 20px} #blogger-comments-page h4{display:none} #blogger-comments-page p{color:#444;} #blogger-comments-page {padding:0px 5px;display:none;} .komentargabungan-tab{background:#3b5998;padding:12px;transition:all .3s;} .komentargabungan-tab:nth-child(2) {background:#fda753;transition:all .3s;} .komentargabungan-tab:hover:nth-child(2) {background:#e1954a;} .komentargabungan-tab-icon {height:14px;width:auto;margin:0 3px} .komentargabungan-tab:hover{background-color:#324c82;} .inactive-select-tab {background:#aaa} .inactive-select-tab ,.komentargabungan-tab:hover {background-color:#324c82;}

Langkah 3

Salin isyarat dibawah ini dan letakkan diatas isyarat </body>

<script type="text/javascript"> //<![CDATA[ $(window).bind("load resize" ,function(){var o=location.protocol+"//"+location.host+location.pathname ,t=$("#container-commentfb").width();$("#container-commentfb").html('<div class="fb-comments" data-href="'+o+'" width="'+t+'" data-num-posts="10"></div>') ,FB.XFBML.parse()}); //]]> </script>

Langkah 4
Didalam template blog biasanya terdapat 2 isyarat <div class='comments' id='comments'> lalu silakan salin isyarat dibawah ini dan letakkan dibawah kedua isyarat <div class='comments' id='comments'>

<div class='komentargabungan-tab' id='fb-comments' onclick='javascript: commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'> <fb:comments-count expr:href='data:post.url'/> Komentar Facebook</div> <div class='komentargabungan-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'> <data:post.numComments/> Komentar Blogger</div> <div class='clear'/> </div> <div class='komentargabungan-page' id='fb-comments-page'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div> </b:if></div> <div class='comments komentargabungan-page' id='blogger-comments-page'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script type='text/javascript'> function commentToggle(selectTab) {$(&quot;.komentargabungan-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.komentargabungan-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();} </script>

Ingat alasannya yaitu ada 2 kode <div class='comments' id='comments'> maka letakkan isyarat diatas dibawah kedua isyarat tersebut.

Lalu simpan template.

Selesai ,lalu sekarang coba lihat blog anda apakah 2 sistem komentar blogger dan facebook sudah muncul di blog anda. Cukup sekian tutorial ini jikalau ada pertanyaan pribadi saja tanyakan dikolom komentar. Semoga bermanfaat.