Tab di Postingan Blog

Untuk menambah unik konten di blog, kamu bisa menambahkan tab di dalam postingan blog. Tab sendiri itu fungsinya untuk berganti-ganti konten blog tanpa harus berpindah halaman. Cara membuat tab di postingan blog mudah lho. Yuk simak tutorialnya berikut ini.

 

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.

DEMO

sumber