Cara membuat tab menu komentar fb dan blog berdampingan







Contoh tab view komentar blog berdampingan dengan komentar facebook 


seperti gambar di atas sob.


Jika anda penasaran ingin membuatnya,


berikut ini langkah2nya:










  • Login ke account blogger 

  • rancangan

  •  Edit HTML

  • Download template

  • centang Expand Template Widget

  • masukkan kode berikut ini di atas kode ]]></b:skin>





.comments-page { background-color: #ffffff;}


    #blogger-comments-page { padding: 0px 5px; display: none;}


    .comments-tab { float: left; padding: 5px; margin-right: 3px;


    cursor: pointer; background-color: #ffffff;}


    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}


    .comments-tab:hover { background-color: #eeeeee;}


    .inactive-select-tab { background-color: #d1d1d1;} 



ganti kode warna sesuai keinginan


 Masukkan kode berikut ini tepat di atas 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='ID FB Sobat disini' 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>






copy dan pastekan kode berikut ini di bawah kode <div class='comments' id='comments'> yg ke2









<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>






save template...





Selamat mencoba  komentar blog berdampingan dengan komentar facebook 


Comments

Post a Comment