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 :
[php]
<!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="<style>" title="<style>" />
</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>
[/php]
Download Source code tab konten html
Terima kasih telah membaca tentang Cara Membuat Tabs Konten Menggunakan Html
Aneka Source Code Aplikasi - Cara Membuat Tabs Konten Menggunakan Html, Semoga bisa membantu anda dalam belajar pemrograman atau mungkin dapat juga menjadi ide atau inspirasi untuk membuat karya baru yang lebih baik lagi.
0 Response to "Cara Membuat Tabs Konten Menggunakan Html"
Posting Komentar