Tabs Table Box

Hai, pada hari ini saya akan menunjukkan kepada Anda Cara Menambahkan Tabel Tab Responsive di Blog Post. Saya akan menunjukkan kepada Anda cara termudah untuk dimengerti tentang cara membuat Tabel Tab di Blog Post.

---

Tutorial Blog: Cara Membuat Tab Table Box

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

/* Table Box */
#utb{position: relative;font: normal 12px Arial, Sans-Serif}
#udltb{list-style:none;height: 30px;margin: 0 !important;padding: 0 !important}
#udltb li{list-style:none;margin: 0 0 0 2px;float: left;font-weight: 700}
#udltb li a{display: block;padding: 0 6px;line-height: 30px;text-decoration: none;color: #398BCE;background-color: #ccc}
#udltb li.active a{background-color: #f3f3f3}
#udlctn > div{background-color: #f3f3f3;color: #000;padding: 10px 15px;border-bottom: 4px solid #398BCE}
#udlctn a{color: #398dcc;text-decoration: none;outline: none;transition: all 0.25s}
#udlctn a:hover{color: #222;text-decoration: none}
#tab2, #tab3{display:none;}

Tambahkan kode jQuery berikut ini sebelum kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>

Jika sudah ada bisa diabaikan

Kemudian tambahkan kode Javascript berikut ini sebelum kode </body>

<script type='text/javascript'>
jQuery(document).ready(function($){$(&#39;#udltb li:first&#39;).addClass(&#39;active&#39;);$(&#39;#udlctn &gt; div&#39;).hide();$(&#39;#udlctn &gt; div:first&#39;).show();$(&#39;#udltb a&#39;).click(function(){$(&#39;#udltb li&#39;).removeClass(&#39;active&#39;);$(this).parent().addClass(&#39;active&#39;);var activeTab=$(this).attr(&#39;href&#39;);$(&#39;#udlctn &gt; div:visible&#39;).hide();$(activeTab).show();return false;});});
</script>

Simpan tema

Untuk menampilkan hasilnya, tambahkan kode HTML berikut ini pada postingan bagian Compose HTML

<div id="utb">
<ul id="udltb">
<li><a href="#tab1">Sinopsis</a></li>
<li><a href="#tab2">Daftar Episode</a></li>
<li><a href="#tab3">Batch</a></li>
</ul>
<div id="udlctn">
<div id="tab1">
<!--- Sinopsis Start ---> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <!--- Sinopsis End --->
</div>
<div id="tab2">
<!--- Daftar Episode Start --->
Episode 01
<a href="#url" target="_blank" rel="nofollow"> Server 1 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 2 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 3 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 4 </a>

Episode 02
<a href="#url" target="_blank" rel="nofollow"> Server 1 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 2 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 3 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 4 </a>

Episode 03
<a href="#url" target="_blank" rel="nofollow"> Server 1 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 2 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 3 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 4 </a>

Episode 04
<a href="#url" target="_blank" rel="nofollow"> Server 1 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 2 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 3 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 4 </a>

<!--- Daftar Episode End --->
</div>
<div id="tab3">
<!--- Batch Start --->
Google Drive
<a href="#url" target="_blank" rel="nofollow"> Server 1 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 2 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 3 </a> | <a href="#url" target="_blank" rel="nofollow"> Server 4 </a>
<!--- Batch End --->
</div>
</div>
</div>

#url Link tautan


   DEMO