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="<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>
Download Source code tab konten html