Latest News

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

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. Kaprikornus pengunjung blog anda tidak perlu direpotkan untuk login untuk berkomentar.

Kotak

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 supaya 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 duduk perkara 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 menawarkan 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 arahan dibawah ini dan letakkan/pastekan diatas arahan ]]></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 arahan dibawah ini dan letakkan diatas arahan </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 arahan <div class='comments' id='comments'> lalu silakan salin arahan dibawah ini dan letakkan dibawah kedua arahan <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 ada 2 kode <div class='comments' id='comments'> maka letakkan arahan diatas dibawah kedua arahan 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.