Categories: Tutorial Html

Cara Membuat Tabs Konten Menggunakan Html

Sobat source code jika anda sedang membuat website atau blog, dan memiliki sebuah halaman dengan tampilan teks yang panjang, mungkin tutorial berikut ini bisa menjadi solusi bagi anda agar tetap bisa membuat halaman yang user friendly dan lebih menarik. Yaitu membagi konten teks dalam beberapa tab, sehingga lebih memudahkan pembaca atau pengunjung dalam membaca konten, tidak perlu scroll terlalu panjang ke bawah.

Dalam membuat tab konten, selain menggunakan html, kita juga akan menggunakan css untuk mengatur tampilan tab nya.

Berikut ini adalah source code membuat tab konten dengan html :


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%09*%2C%20%23content%20%3Afirst-child%2C%20%23content%20%3Alast-child%20%7B%0A%09%09margin%3A%200%3B%0A%09%7D%0A%09body%20%7B%0A%09%09font%3A%20300%2015px%2F1.2%20%22Helvetica%20Neue%22%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%0A%09%09background%3A%20%23333%3B%0A%09%09margin%3A%2020px%3B%0A%09%7D%0A%09h1%20%7B%0A%09%09margin-bottom%3A%2020px%3B%0A%09%09color%3A%20%23fff%3B%0A%09%09text-transform%3A%20uppercase%3B%0A%09%09font-size%3A%2055px%3B%0A%09%09font-weight%3A%20100%3B%0A%09%09letter-spacing%3A%2030px%3B%0A%09%09text-shadow%3A%203px%203px%205px%20%23000%3B%0A%09%7D%0A%09nav%20ul%20%7B%0A%09%09list-style%3A%20none%3B%0A%09%09padding%3A%200%200%200%2010px%3B%0A%09%09min-width%3A%20460px%3B%0A%09%7D%0A%09nav%20li%20%7B%0A%09%09float%3A%20left%3B%0A%09%09position%3A%20relative%3B%0A%09%09height%3A%2030px%3B%0A%09%09border-radius%3A%2010px%2030px%200%200%3B%0A%09%09margin-left%3A%20-10px%3B%0A%09%09text-shadow%3A%201px%201px%200%20%23bbb%3B%0A%09%09box-shadow%3A%200px%200px%2010px%20rgba(0%2C0%2C0%2C.5)%3B%0A%09%09transition%3A%20.2s%3B%0A%09%7D%0A%09nav%20a%20%7B%0A%09%09display%3A%20block%3B%0A%09%09position%3A%20relative%3B%0A%09%09width%3A%2090px%3B%0A%09%09height%3A%2020px%3B%0A%09%09padding%3A%206px%2010px%2020px%200%3B%0A%09%09border-radius%3A%2010px%2030px%200%200%3B%0A%09%09background%3A%20%23999%3B%0A%09%09color%3A%20%23444%3B%0A%09%09text-align%3A%20center%3B%0A%09%09text-decoration%3A%20none%3B%0A%09%09transition%3A%20.2s%3B%0A%09%7D%0A%09nav%20li%3Ahover%20%7B%0A%09%09z-index%3A%201%3B%0A%09%7D%0A%09nav%20li%3Ahover%20a%20%7B%0A%09%09background%3A%20%23ccc%3B%0A%09%09color%3A%20%23000%3B%0A%09%7D%0A%09%23selected%20%7B%0A%09%09z-index%3A%202%3B%0A%09%7D%0A%09%23selected%20a%20%7B%0A%09%09z-index%3A%203%3B%0A%09%09background%3A%20%23fff%3B%0A%09%09color%3A%20%23000%3B%0A%09%09text-shadow%3A%20none%3B%0A%09%09font-weight%3A%20500%3B%0A%09%7D%0A%09%23content%20%7B%0A%09%09position%3A%20relative%3B%0A%09%09z-index%3A%201%3B%0A%09%09clear%3A%20both%3B%0A%09%09min-width%3A%20420px%3B%0A%09%09padding%3A%2020px%3B%0A%09%09border-radius%3A%2010px%3B%0A%09%09box-shadow%3A%200px%200px%2010px%20rgba(0%2C0%2C0%2C.5)%3B%0A%09%09background%3A%20%23fff%3B%0A%09%7D%0A%09%23content%20p%20%7B%0A%09%09margin%3A%2020px%200%3B%0A%09%7D%0A%09%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>
 
<header>
  
<nav>
   
<ul>
    
<li><a href="">tab1</a></li>


<li id="selected"><a href="">tab2</a></li>


<li><a href="">tab3</a></li>


<li><a href="">tab4</a></li>


<li><a href="">tab5</a></li>

   </ul>

  </nav>

 </header>


<section id="content">
  

html tabs content.

 </section>

 
</body>
</html>
<font face="Tahoma"><a target="_blank" href="http://www.sourcecodeaplikasi.info/"><span style="font-size: 8pt; text-decoration: none">Source Code Aplikasi</span></a></font>

Download Source code tab konten html

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code