Pasang Tab View di Komentar Blogger & Facebook

Koben akan berbagi kembali tentang bagaimana cara membuat tab view kolom komentar blogger dan facebook. Untuk itu bagi yang belum punya facebook comments harap membuatnya terlebih dahulu facebook comments box plugin for blogger! Sebenarnya mau diisi apaan juga terserah sih, tapi memang mau menerangkan ke sana Koben ;))
Trik tab view berikut memakai plugin jQuery. Oleh sebab itu harap cek & ricek di dalam template kalian apa sudah terpasang script<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Kalau sudah ada tidak usah dipasang lagi. Karena buat apa juga memasang sampai dua biji :)) Jangan lupa juga selalu melakukan backup download full template ketika ingin mengedit dalaman template ;) Takut kebingungan lompat kesana kesini, Koben sikat semua sekalian deh dengan menanamkan FB komentarnya :P

Langkah pertama lakukan Expand Widget Templates. Cari tagging penutup </body> Masukan resep berikut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script type='text/javascript'>
//<![CDATA[
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
//]]>
</script>

Cari lagi kode ]]></b:skin> bubuhkan ramuan ini

.comments-page {
padding: 0;
}
#fb-comments-page {
padding: 0 5px;
display: none;
}
.comments-tab {
float: left;
padding: 5px;
cursor: pointer;
margin-right: 3px;
background-color: #090;
}
.comments-tab-icon {
height: 14px;
width: auto;
margin-right: 3px;
}
.comments-tab:hover {
background-color: #aaa;
}
.inactive-select-tab {
background-color: #333;
}

Itu default CSS coded tab-view, hiaslah menurut kesukaan masing² :)

Dalam keadaan tercentang cari kode<b:includable id='comment-form' var='post'>Letakan tepat di bawah kode tersebut bumbu ajaib brkt

<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.google.com/s2/favicons?domain=blogger.com'/> <data:_post.numComments/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://www.google.com/s2/favicons?domain=facebook.com'/>
<fb:comments-count expr:href='data:_post.url'/> Comments
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:_post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments-page' id='blogger-comments-page'>

Kode data:_post.url tidak pakai garis bawah :_p bentrok sama emotikon. Satukan penulisannya yah :)
Scroll ke bawah sedikit temukan ini <script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data: post.appRpcRelayPath/>&#39;, &#39;<data: post.communityId/>&#39;);
</script>
</div>
</b:includable>Pasangkan tag penutup </div>Menjadi kayak gini<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data: post.appRpcRelayPath/>&#39;, &#39;<data: post.communityId/>&#39;);
</script>
</div>

</div>

</b:includable>SAVE. God luck.
Begitu sekiranya cara memasang tab view komentar blogger & facebook ;) Kalau mau instant dan lebih full stylish mungkin berminat dengan cara berikut add twitter and facebook comments :D
Happy coding \m/