Cara Membuat Tab di Postingan Blog

Tutorial Membuat Tab di Posting Blog

Untuk membuat tab di dalam postingan blog ikuti tutorial berikut ini:

1. Masuk ke menu Blogger, kemudian pilih thema.

2. Klik "Edit HTML"

3. Cari kode "]]></b:skin>" cari dengan ctrl+f.

4.Kemudian copy dan paste kode berikut tepat di atas 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. Selanjutnya cari kode "</head>" lalu copy dan paste kode ini di atasnya.

<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. Nah, sekarang untuk membuat tab di postingan post. Pilih create new post.
7. Klik mode "HTML" dan masukkan kode berikut:

<div class="xo-tabs">

   <ul class="xo-tab-links">
      <li class="current" data-tab="tab1">TAB ONE LABEL</li>
      <li data-tab="tab2">TAB TWO LABEL</li>
      <li data-tab="tab3">TAB THREE LABEL</li>
      <li data-tab="tab4">TAB FOUR LABEL</li>
   </ul>

   <div id="tab1" class="xo-tab-content current">
 YOUR CONTENT HERE
   </div>
   <div id="tab2" class="xo-tab-content">
 YOUR CONTENT HERE
   </div>
   <div id="tab3" class="xo-tab-content">
 YOUR CONTENT HERE
   </div>
   <div id="tab4" class="xo-tab-content">
 YOUR CONTENT HERE
   </div>

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

Keterangan kode: Tab One ganti dengan judul tab, Isi konten di Tab One di bagian "Your content here"

8. Sekarang cek tab di postingan blog kamu.