Memasang Komentar Facebook Dan Blogger Responsive

Memasang Komentar Facebook dan Blogger Responsive - Komentar Facebook dan Blogger Berdampingan merupakan dua hal yang sangat berafiliasi alasannya ialah 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 semoga 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 instruksi 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 instruksi 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 instruksi <div class='comments' id='comments'>, salin instruksi di bawah ini sempurna di bawah kedua instruksi <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 kesannya di blog.

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

Tweet

Subscribe to receive free email updates: