Home / tutorial / Cara Membuat Tab Dalam Postingan Blogspot

Cara Membuat Tab Dalam Postingan Blogspot

Cara Membuat Tab Dalam Postingan Blogspot – Untuk memperindah tampilan artikel yang kita posting, banyak sekali cara yang bisa kita lakukan, antara lain memasang “tab”, seperti yang ada di wordpress, melalui plugin yang memang sudah tersedia, biasanya sih kalau membuat tab di wordpress saya pakai plugin elementor,agar tampilan wordpress lebih rapi. Nah, kalau untuk blogspot berbeda dengan wordpress, untuk di blogspot, kalian harus berani “mengoprek dalaman” blogspot, untuk memasang tab. Cara ini juga akan menambah penilaian juri saat kalian mengikuti kontes SEO.

Cara Membuat Tab Dalam Postingan Blogspot

Cara Membuat Tab Dalam Postingan Blogspot

Berikut langkah-langkah, yang harus kalian ikuti, untuk membuat tab di dalam postingan blogspot.

Cara Membuat Tab Dalam Postingan Blogspot pertama

  • Masuk ke Dashboard blogger
  • Masuk ke Tema
  • Cari kode ]]></b:skin> cari dengan tekan Ctrl+F
  • Jika sudah ketemu copy dan paste kode berikut ini tepat diatas ]]></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;
}
  • Setelah itu cari kode </head> lalu copy paste kode berikut ini tepat diatas </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>
  • Selanjutnya silahkan save template

Cara Membuat Tab Dalam Postingan Blogspot kedua

  • Untuk membuat tab di dalam postingan silahkan ke menu posting dan buat postingan baru
  • Pilih mode HTML dan copy paste kode berikut ini
<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 -->
  • Isi konten sesuai keinginan kalian

Silahkan berkreasi sesuai keinginan kalian, dan dengan memasang tab di dalam postingan blogspot, akan menambah nilai plus untuk artikel kalian tentunya.

About purji

Check Also

Cara Optimasi SEO OnPage di Blog

Cara Optimasi SEO OnPage di Blog, DAGELAN.WEB.ID – Kenapa SEO OnPage sangat penting dalam sebuah …

Leave a Reply

Your email address will not be published. Required fields are marked *