Cara Menciptakan Tab Di Postingan Blog

MamankDzgn - Untuk menambah unik konten di blog, kau dapat menambahkan tab di dalam postingan blog. Tab sendiri itu fungsinya untuk berganti-ganti konten blog tanpa harus berpindah halaman. Cara menciptakan tab di postingan blog gampang lho. Yuk simak tutorialnya berikut ini.

Baca juga:

Cara Membuat Efek Zoom In dan Out Gambar di Blogger 2018

Cara Membuat dan Memasang Live Chat di Blog Terbaru 2018

Tutorial Membuat Tab di Posting Blog

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

1. Masuk ke sajian Blogger, kemudian pilih thema.

2. Klik "Edit HTML"

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

4.Kemudian copy dan paste isyarat berikut sempurna di atas isyarat "]]></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 isyarat "</head>" kemudian copy dan paste isyarat 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, kini untuk menciptakan tab di postingan post. Pilih create new post.
7. Klik mode "HTML" dan masukkan isyarat 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 -->