Cara MUDAH Membuat Tab Pada Postingan Blog

Banyak cara untuk membuat unik sebuah artikel diblog, salah satunya menambahkan tab - tab pada artikel atau postingan. Banyak pula kegunaan tab pada halaman postingan sebuah blog. Selain menambah unik, tentu untuk mempermudah menganti konten tanpa pindah halaman, lalu postingan akan seolah - seolah lebih ringkas, dan pembaca akan mudah memahami bagian - bagian postingan.

Caranya membuat tab pada postingan blog terbilang cukup mudah jika sudah terbiasa mengotak-atik template blog.

Nah,  tabs yang akan dibuat didalam postingan blog tampilannya seperti ini....

->>>  DEMO <<<-

Oke langsung saja....

1. Masuk ke menu blogger, pilih tema

2. Lalu "Edit template"

3. Cari kode "]]></b:skin>" , untuk mempermudah pencarian, tekan "ctrl + f"

4. Lalu Copy dan Paste kode dibawah ini, copy dan pastekan tepat diatas kode "]]></b:skin>"

/*----- XOMISSE Multi-Tabbed Content -----*/
ul.xo-tab-links {
 margin: 0 auto;
 padding: 0;
 list-style: none;
}

ul.xo-tab-links li {
 background: none;
 color: #222;
 display: inline-block;
 padding: 10px 20px;
 cursor: pointer;
 transition:all linear 0.15s;
}

ul.xo-tab-links li.current {
 background: #f8f8f8;
 color: #333;
}

.xo-tab-content {
 display: none;
 background: #f8f8f8;
 padding: 20px;
}

.xo-tab-content.current {
 display: inherit;
}

5. Seperti sebelumnya, cari kode "</head>" lalu copy dan paste kode dibawah ini tepat diatas kode "</head>"

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
(function($) {
  $(document).ready(function(){
      $(&#39;ul.xo-tab-links li&#39;).click(function(){
          var tab_id = $(this).attr(&#39;data-tab&#39;);

          // Make the old tab inactive.
          $(&#39;ul.xo-tab-links li&#39;).removeClass(&#39;current&#39;);
          $(&#39;.xo-tab-content&#39;).removeClass(&#39;current&#39;);
       
          // Make the clicked tab active.
          $(this).addClass(&#39;current&#39;);
          $(&quot;#&quot;+tab_id).addClass(&#39;current&#39;);
      })
  })
    })(jQuery);
</script>

6. Klik Save Template
.

7. Lalu buatlah entry baru seperti biasa, klik tab "HTML"

8. Copy dan Pastekan pada halaman "HTML"

<div class="xo-tabs">

   <ul class="xo-tab-links">
      <li class="current" data-tab="tab1">JUDUL TAB 1</li>
      <li data-tab="tab2">JUDUL TAB 2</li>
      <li data-tab="tab3">JUDUL TAB 3</li>
      <li data-tab="tab4">JUDUL TAB 4</li>
   </ul>

   <div id="tab1" class="xo-tab-content current">
 Keterangan Tab 1
   </div>
   <div id="tab2" class="xo-tab-content">
Keterangan Tab 2
   </div>
   <div id="tab3" class="xo-tab-content">
 Keterangan Tab 3
   </div>
   <div id="tab4" class="xo-tab-content">
Keterangan Tab 4
   </div>

</div><!-- xo-tabs -->

9. Edit " Judul Tabnya sesuai keinginan"

10.Isi "Keterangan tabnya".

Catatan :
Anda bisa menambah tab sebanyak-banyaknya dengan cara copy ataupun ketik langsung code
<li data-tab="tab5">JUDUL TAB 5</li> ,
<li data-tab="tab6">JUDUL TAB 6 </li>

dan seterusnya dibawah

<li data-tab="tab4">JUDUL TAB 4</li>

Lalu, copy ataupun ketik langsung code

<div id="tab5" class="xo-tab-content">
Keterangan Tab 5

</div>
<div id="tab5" class="xo-tab-content">
Keterangan Tab 5
   </div>

Dan seterusnya , di bawah kode

<div id="tab4" class="xo-tab-content">
Keterangan Tab 4
   </div>

Oke, cukup mudahkan? Itulah cara membuat Tabs dalam Postingan Blog Menggunakan HTML.

Semoga bermanfaat dan bisa kamu terapkan di blog kamu. Terima kasih. 

Share this post