Inilah Memasang Komentar Facebook Dan Blogger Responsive - Fezarzone

Memasang Komentar Facebook dan Blogger Responsive - Komentar Facebook dan Blogger Berdampingan merupakan dua hal yang sangat berafiliasi alasannya yaitu ibarat kita ketahui bahwa pada komentar blogger biasanya Admin hanya menyodorkan kolom komentar bawaan blogger dan sebagian pengunjung mungkin tidak mempunyai akun gmail melainkan facebook.

Kaprikornus yang perlu kita lakukan disini meletakkan juga kolom komentar facebook berdampingan dengan komentar blogger biar pengunjung yang tidak mempunyai gmail sanggup berkomentar memakai akun facebook mereka. Kode responsive komentar facebook digabungkan dengan tutorial dari blog pada artikel Cara Memasang Komentar Facebook Responsive di Blogger

Cara Memasang Komentar Facebook dan Blogger Responsive Berdampingan

1. Login ke blog > Buka Template > Salin isyarat di bawah ini sebelum ]]></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;}

2. Kemudian salin isyarat di bawah ini sebelum </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>

3. Biasanya di dalam template terdapat dua isyarat <div class='comments' id='comments'>, salin isyarat di bawah ini sempurna di bawah 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>

4. Simpan template dan lihat jadinya di blog.

Sekian tutorial Cara Memasang Komentar Facebook dan Blogger Responsive di Blog, semoga dengan tutorial di atas berhasil diterapkan pada blog. Terima kasih.