Membuat Multi Tabs Responsive Plus Font Awesome

Postingan pertama saya adalah cara membuat multi tabs responsive plus material font awesome. Ini adalah postingan pertama saya di blog ID Dzgn, karna saya adalah staf dari admin blog ini yaitu Bulshitman. Terimakasih kepada beliau karna saya sudah di berikan kepercayaan yang lebih.

Kembali lagi pada inti dari tutorial yang saya buat kali ini, multi tabs berguna untuk memudahkan pengunjung untuk melihat widget yang dirasa terlalu jauh kebawah. Multi tabs juga berguna untuk menghindari spamnya widget yang dirasa tidak terlalu penting seperti label, archive, dan lain-lain, ya ga? pastinya iya, untuk tutorial yang saya berikan ini manfaatnya kurang lebih yang saya jelaskan di atas.

Langsung saya ke tutorial pembuatannya, langkah-langkah nya tidak sesulit mencari pacar ☺, yakni dengan beberapa tahapan saja sudah dapat menerapkan multi tabs ini.

DEMO SHOW

Membuat Multi Tabs Responsive

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Dan silakan Anda masukkan CSS di bawah ini di atas kode ]]></b:skin> atau </style>, Untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

/* Multi Tab Widget Sidebar */
.multitab-section{width:100%;padding-top:0}
.multitab-widget{list-style:none;margin: -5px -5px 0px;padding:0;width: auto;}
.multitab-widget a::before{content: '\f006';font-family: Fontawesome;}
.multitab-tab{border:0;width:33.3%;text-align:center;width: 100%;}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a{margin:-2px;font-size:13px;font-weight:400;text-transform:uppercase;line-height:40px;width:32.3%;list-style:none;text-align:center;display:inline-block;padding:5px 0;background:#07ACEC;color:#fff;cursor:pointer;position:relative;transition:all .3s;overflow: hidden;}
.multitab-widget li a:hover{color:#fff;background:#0694CC}
.multitab-widget li a.multitab-widget-current{background: #fc0;}
.multitab-widget .multitab-tab a:before{font-family:Fontawesome;text-align:center;margin-right:5px;}
.multitab-widget .multitab-tab a:nth-child(1):before {content:'\f09e' !important;}
.multitab-widget .multitab-tab a:nth-child(2):before {content:'\f09e' !important;}
.multitab-widget .multitab-tab a:nth-child(3):before {content:'\f0e6' !important;}

Langkah kedua :

Selanjutnya adalah silakan Anda taruh kode di bawah ini di bawah kode id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'

<div class='multitab-section'>

  <ul class='multitab-widget multitab-widget-content-tabs-id'>

    <li class='multitab-tab'>

      <a class='multitab-widget-current' href='#multitab-column-id1' title='Popular'><span>Popular</span></a>

      <a href='#multitab-column-id2' title='Labels'><span>Tags</span></a>

      <a href='#multitab-column-id3' title='Comment'><span>Comment</span></a>

    </li>

  </ul>

  <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id1'>

    <b:section class='sidebar' id='multitab-sidebar1' preferred='yes'>

    </b:section>

  </div>

  <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id2'>

    <b:section class='sidebar' id='multitab-sidebar2' preferred='yes'>

    </b:section>

  </div>

  <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id3'>

    <b:section class='sidebar' id='multitab-sidebar3' preferred='yes'>

    </b:section>

  </div>

</div>

Langkah ketiga :

Silakan Anda taruh kode Javascript dibawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[

// Multi tab widget Sidebar
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });

//]]>
</script>

Selanjutnya adalah Save template Anda, maka multi tabs sudah muncul di blog Anda.

Demikian postingan pertama yang bisa saya berikan, semoga bermanfaat. Jangan lupa untuk mengunjungi blog saya yaitu Mister Design. Terimakasih.