Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog

Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog

Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog

Berhubung ada salah seorang sobat blogger yang meminta untuk dibuatkan tutorial mengenai cara membuat multi tabs pada kolom komentar, maka pada kesempatan kali ini saya akan coba membagikan tutorialnya.
Oh ya mohon maaf untuk sobat yang merequest tutor ini, karena baru sekarang bisa saya buatkan, disebabkan kesibukan di dunia nyata.

Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog
Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog

Baiklah langsung saja kita mulai ya, langkah membuat multi tabs ini sebenarnya sangatlah simple sekali namun sedikit diperlukan ketelitian dan meletakan code-code yang sudah saya siapkan dibawah ini.
Alert message (Wajib !!!): "Simpan atau backup terlebih dahulu template sobat agar jika terjadi kesalahan dapat dengan mudah di restore kembali".

Bagian Pertama

Langkah-1 : Seperti biasa masuklah ke dasboard blogger sobat, lalu buka Edit HTML.
Langkah-2 : Ganti semua kode  css comment yang ada dengan kode css comment dibawah ini:

Css comment:
.blogger-tab{display:block}
.comments{clear:both;margin-top:0;margin-bottom:0;color:#010101}
.comments h4{font-size:13px;text-transform:capitalize;font-weight:400;padding:10px 0;margin:0;border-bottom:1px solid #eee}
.comments .comments-content{padding:10px 0}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:8px}
.comments .comments-content .comment:first-child{padding-top:0}
.cabon-tab .content-tab{background-color:transparent;padding:0}
.cabon-tab-header{background:#010101;height:32px;margin-bottom:0px;position:relative}
.cabon-tab-header h3 {display:inline-block;margin:0;color:#E4E4E4;font-weight:700;text-transform:uppercase;font-size:13px;height:32px;line-height:32px;padding-left:10px}
.cabon-tab-header h3 h9{display:none}
.simplyTab .cabon-tab-header .wrapper-bon{float:right}
.cabon-tab-header .wrapper-bon a{height:auto;line-height:32px;padding:0px 10px;font-size:14px;display:inline-block} .cabon-tab-header .wrapper-bon li{float:left;width:auto}
.facebook-tab,.fb_iframe_widget_fluid span,.fb_iframe_widget iframe{width:100%!important}
.comments .item-control{position:static}
.comments .avatar-image-container{float:left}
.comments .avatar-image-container,.comments .avatar-image-container img{height:35px;max-height:35px;width:35px;max-width:35px;border-radius:2px}
.comments .comment-block{padding:10px;box-shadow:none;border:1px solid #eee;border-radius:2px}
.comments .comment-block,.comments .comments-content .comment-replies{margin-left:47px;margin-top:0}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-header{font-size:14px;border-bottom:1px solid #eee;padding:0 0 3px}
.comments .comments-content .user{font-style:normal;font-weight:400}
.comments .comments-content .icon.blog-author{font-weight:400}
.comments .comments-content .comment-content{text-align:justify;font-size:14px;line-height:1.4em}
.comments .comment .comment-actions a{margin-right:5px;padding:2px 5px;color:#010101;font-weight:400;background-color:#f0f0f0;font-size:10px;letter-spacing:1px}
.comments .comment .comment-actions a:hover{color:$(color.theme);text-decoration:none}
.comments .comments-content .datetime{margin-left:0;float:right;font-size:11px}
.comments .comments-content .comment-header a{color:inherit}
.comments .comments-content .comment-header a:hover{color:$(color.theme)}
.comments .comments-content .icon.blog-author:before{content:"\f007";font-size:12px;font-family:FontAwesome}
.comments .thread-toggle{margin-bottom:4px}
.comments .comments-content .comment-thread{margin:4px 0}
.comments .continue a{padding:0;padding-top:10px;padding-left:47px;font-weight:500}
.comments .comments-content .loadmore.loaded{margin:0;padding:0}
.comments .comment-replybox-thread{margin:0}
iframe.blogger-iframe-colorize,iframe.blogger-comment-from-post{height:243px!important}
.cabon-tab.simplyTab .content-tab{background-color:transparent;padding:0;margin-top:0}
.cabon-tab.simplyTab .wrapper-bon li a{text-transform:uppercase;color:#E4E4E4;font-weight:400;background-color:#171717;height:32px;font-size:10px;letter-spacing:1px}
.cabon-tab.simplyTab .wrapper-bon li a.activeTab{background-color:$(color.theme);color:#fff}
.posts-title h2 a:before{margin-right:10px}
.cabon-tab.simplyTab .wrapper-bon{float:right}
.cabon-tab.simplyTab .wrapper-bon li{padding:0;line-height: 0;margin-left:0}
.wrapper-bon{list-style:none}
.content-tab{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}
/* Responsive nya */
@media only screen and (max-width: 460px) {
.cabon-tab-header h3 h8,.comments .comments-content .datetime{display:none} .cabon-tab-header h3 h9{display:inline-block} .cabon-tab.simplyTab .wrapper-bon li a{letter-spacing:0px} .cabon-tab-header .wrapper-bon a{padding:0px 7px} }
@media only screen and (max-width: 350px) {
.cabon-tab-header{overflow:hidden} .cabon-tab.simplyTab .wrapper-bon{float:left;width:100%;overflow:hidden;} .cabon-tab-header .wrapper-bon li a{letter-spacing:0px;width:100%;box-sizing:border-box;padding:0} .cabon-tab-header .wrapper-bon li{float:left;text-align:center;display:inline-block;box-sizing:border-box;width:33.33%} }


Langkah-3 : Letakan kode HTML dibawah ini tepat sebelum kode tag penutup </b:section>

Contoh:

<b:section class='main' id='main' maxwidgets='2' name='Main Warapper' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='main' var='top'>......</b:includable>
dst dst....
......
.......
</b:widget>
Letakan kode disini.....
</b:section>

Lebih jelasnya perhatikan screen shot dibawah ini:

Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog
Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog

Kode HTMLnya:
<b:widget id='HTML007' locked='true' title='Comments system' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:content == &quot;[blogger]&quot;'>
<div class='cabon-tab'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == &quot;[facebook]&quot;'>
<div class='cabon-tab'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$('#comments').remove();
//]]>
</script>
</b:if>
<b:if cond='data:content == &quot;[disqus]&quot;'>
<div class='cabon-tab'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$('#comments').remove();
//]]>
</script>
</b:if>
<b:if cond='data:content == &quot;[blogger][facebook]&quot;'>
<div class='cabon-tab'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == &quot;[blogger][disqus]&quot;'>
<div class='cabon-tab'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div> </div>
</b:if>
<b:if cond='data:content == &quot;[facebook][blogger]&quot;'>
<div class='cabon-tab'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == &quot;[facebook][disqus]&quot;'>
<div class='cabon-tab'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<script type='text/javascript'>
//<![CDATA[
$('#comments').remove();
//]]>
</script>
</div>
</b:if>
<b:if cond='data:content == &quot;[disqus][blogger]&quot;'>
<div class='cabon-tab'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div> <div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == &quot;[disqus][facebook]&quot;'>
<div class='cabon-tab'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$('#comments').remove();
//]]>
</script>
</b:if>
<b:if cond='data:content == &quot;[blogger][facebook][disqus]&quot;'>
<div class='cabon-tab'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
</div>
</b:if>
<b:if cond='data:content == &quot;[blogger][disqus][facebook]&quot;'>
<div class='cabon-tab'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == &quot;[facebook][blogger][disqus]&quot;'>
<div class='cabon-tab'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
</div>
</b:if>
<b:if cond='data:content == &quot;[facebook][disqus][blogger]&quot;'>
<div class='cabon-tab'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == &quot;[disqus][blogger][facebook]&quot;'>
<div class='cabon-tab'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == &quot;[disqus][facebook][blogger]&quot;'>
<div class='cabon-tab'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<div id='fb-root'/>
<script>(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.0&quot;;fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>&lt;script&gt;$(&quot;.facebook-tab&quot;).append(&quot;&lt;div class=&#39;fb-comments&#39; data-href=&#39;<data:blog.canonicalUrl/>&#39; data-width=&#39;100%&#39; data-numposts=&#39;5&#39; data-colorscheme=&#39;light&#39;&gt;&lt;/div&gt;&quot;);&lt;/script&gt;
</b:if>
</b:includable>
</b:widget>
<b:widget id='HTML0071' locked='true' title='Disqus Shortname' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;script type=&#39;text/javascript&#39;&gt;
var disqus_shortname = &#39;<data:content/>&#39;;
(function() {
var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
})();
&lt;/script&gt;
</b:if>
</b:includable>
</b:widget>

Langkah-4 : Letakan Kode Script dibawah ini tepat sebelum kode </body>

Code Scripts:
<script type='text/javascript'>
//<![CDATA[
// Simple Tab JQuery Plugin by Taufik Nurrohman - https://plus.google.com/108949996304093815163/about
(function(a){a.fn.simplyTab=function(b){b=jQuery.extend({active:1,fx:null,showSpeed:400,hideSpeed:400,showEasing:null,hideEasing:null,show:function(){},hide:function(){},change:function(){}},b);return this.each(function(){var e=a(this),c=e.children("[data-tab]"),d=b.active-1;e.addClass("simplyTab").prepend('<ul class="wrapper-bon"></ul>');c.addClass("content-tab").each(function(){a(this).hide();e.find(".wrapper-bon").append('<li><a href="#">'+a(this).data("tab")+"</a></li>")}).eq(d).show();e.find(".wrapper-bon a").on("click",function(){var f=a(this).parent().index();a(this).closest(".wrapper-bon").find(".activeTab").removeClass("activeTab");a(this).addClass("activeTab");if(b.fx=="slide"){if(c.eq(f).is(":hidden")){c.slideUp(b.hideSpeed,b.hideEasing,function(){b.hide.call(e)}).eq(f).slideDown(b.showSpeed,b.showEasing,function(){b.show.call(e)})}}else{if(b.fx=="fade"){if(c.eq(f).is(":hidden")){c.hide().eq(f).fadeIn(b.showSpeed,b.showEasing,function(){b.show.call(e)})}}else{if(b.fx=="fancyslide"){if(c.eq(f).is(":hidden")){c.slideUp(b.hideSpeed,b.hideEasing,function(){b.hide.call(e)}).eq(f).delay(b.hideSpeed).slideDown(b.showSpeed,b.showEasing,function(){b.show.call(e)})}}else{if(c.eq(f).is(":hidden")){c.hide().eq(f).show()}}}}b.change.call(e);return false}).eq(d).addClass("activeTab")})}})(jQuery);
// Tabs Scripts
$(document).ready(function(){$(".cabon-tab").simplyTab({active:1,fx:"fade",showSpeed:400,hideSpeed:400});$('.blogger-tab').append($('#comments'));$(".cabon-tab.simplyTab .wrapper-bon").wrap("<div class='cabon-tab-header'/>");$('.cabon-tab-header').prepend('<h3><h8>Post </h8>Comment<h9>s</h9></h3>')});$(document).ready(function(e){e("abbr.timeago").timeago()});$(document).ready(function(){$("ul#sub-menu").parent("li").addClass("hasSub");(jQuery)});$(document).ready(function(){$('a[name="ads-post-in"]').before($('#ads-post10').html());$('#ads-post10').html('')});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=1760806057479925"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Langkah-5 : Simpan Template Sobat.

Masuk Ke Bagian Kedua

Langkah-6 : Kemudian masuk ke Tata Letak

Pada Kolom HTML Comments System klik Edit lalu masukan kode berikut, silahkan dipilih komentar apa yang ingin dipakai pilih salah satu atau bisa dipakai semuanya terserah sobat lalu simpan (save):
[blogger][disqus][facebook]

Lihat screenshot:

Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog
Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog

Langkah-7 : Pada Kolom HTML Disqus Shortname silahkan sobat masukan disqus shortname milik sobat lalu klik simpan.

Lihat Screen shot:

Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog
Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog

Langkah-8 : Selesai dan lihat hasilnya dan selamat mencoba semoga berhasil.

DEMO

Demikianlah Tutorial mengenai Cara Mudah Membuat Multi Tabs Kolom Komentar Cantik Di Blog, semoga ada manfaatnya ya, dan saya sangat senang jika sobat dapat berkomentar atau memberi masukan mengenai toturial diatas.

Jika ada sobat Blogger yang ingin berdiskusi seputar Postingan ini atau Postingan tentang Dunia Kebun Sawit, silahkan tinggalkan komentar sobat di kolom komentar blog ini. saya akan sangat senang meresponnya, terimakasih salam Antoncabon.

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

2 Comments Add Comment

banyak juga ya ohm step nya. untuk bloggernya sudah dilengkapi emoticon belum?

Balas

Untuk emo tidak include sis, namun jika template bawaan memang sdh ada emo nya maka secara otomatis akan tampil juga, saran dari saya biar tetap rapi css emotikon jgn dihapus, biarkan saja pada template yg lama dan jgn dihapus...

Balas
Add Comment

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×