Download Source Code Aplikasi

Cara Membuat Tabs Konten Menggunakan Html

Monday, January 9th, 2017 - Tutorial 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

(Telah didownload 78 kali, 1 kali dibaca hari ini)
Download Source Code Aplikasi
Cara Membuat Tabs Konten Menggunakan Html | admin | 4.5


Leave a Reply
You might also likeclose
error: Content is protected !!