• Home
  • Daftar Isi
    • Artikel
    • Manga
    • Video
    • My Dokumen/ Download
  • Kritik dan Saran
Tutorial Weebly
Follow :

Cara membuat Tab Horizontal

12/3/2018

0 Comments

 
Picture
Hai sobat herrys weebly, apa kabar pasti dalam keadaan baik kan. kali ini saya memposting tentang cara membuat Tab Horizontal. Ada yang tau nggak apa itu Tab Horizontal. Kalo belum tau bisa dilihat contohnya
Contoh Tab Horizontal
Nah kalo sudah lihat kita langsung ke cara buatnya.
1. Masuk ke akun Weebly Sobat
2. Silahkan pilih lokasi yang mau di buat Tab Horizontal
3. Drag Embed Code yang ada pada menu
4. Copy kode berikut ke dalam Embed Code yang di drag tadi :
<style>
.tabs {
position: relative;
width: 100%;
}

.tabs input {
position: absolute;
z-index: 1000;
width: 160px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
}

.tabs input#tab-2{
left: 160px;
}

.tabs input#tab-3{
left: 320px;
}

.tabs input#tab-4{
left: 480px;
}

.tabs label {
background: green;
font-size: 16px;
line-height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
color: #333333;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs label:after {
content: '';
background: #fff;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}

.tabs input:hover + label {
background: #f1f1f1;
}

.tabs label:first-of-type {
z-index: 4;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
z-index: 3;
}

.tab-label-3 {
z-index: 2;
}

.tab-label-4 {
z-index: 1;
}

.tabs input:checked + label {
background: #f8f8f8;
z-index: 6;
}

.clear-shadow {
clear: both;
}

.content {
background: rgba(96, 125, 139, 0.16);
position: relative;
width: 100%;
height: 300px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}

.content div {
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;
-o-transition: opacity linear 0.1s;
-ms-transition: opacity linear 0.1s;
transition: opacity linear 0.1s;
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;
-moz-transition: opacity ease-out 0.2s 0.1s;
-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;
transition: opacity ease-out 0.2s 0.1s;
}

.content div h2,
.content div h3{
color: lightslategrey;
padding: 20px;
}

.content div p {
font-size: 20px;
line-height: 28px;
font-style: italic;
text-align: left;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(63,148,148, 0.1);
}

</style>

<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">This is Tab 1</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">This is Tab 2</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">This is Tab 3</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">This is Tab 4</label>
<div class="clear-shadow"></div>
<div class="content">

<!-- This is a content for Tab 1 -->
<div class="content-1">
<h2>Heading 1</h2>
<p>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.</p>
<h3>Sub-Heading 1</h3>
<p>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.</p>
</div>

<!-- This is a content for Tab 2 -->
<div class="content-2">
<h2>Heading 2</h2>
<p>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.</p>
<h3>Sub-Heading 2</h3>
<p>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.</p>
</div>

<!-- This is a content for Tab 3 -->
<div class="content-3">
<h2>Heading 3</h2>
<p>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.</p>
<h3>Sub-Heading 3</h3>
<p>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.</p>
</div>

<!-- This is a content for Tab 4 -->
<div class="content-4">
<h2>Heading 4</h2>
<p>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.</p>
<h3>Sub-Heading 4</h3>
<p>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.</p>
</div>
</div>
</section>
5. Tara..Selesai deh.
Catatan :
​Untuk Selantutnya silahkan di Edit Kata yang bercetak tebal sesuai Keinginan.
0 Comments



Leave a Reply.

    Tutorial Weebly 2019

    Dasar
    Cara Mendaftar Weebly​
    Cara Membuat Blog weebly
    Cara Masuk Ke Akun Weebly
    Cara Memposting Artikel Blog
    Tingkat Lanjut
    Cara Membuat Drop Caps
    Cara Membuat Tab Horizontal
    Cara Membuat Light Box
    Cara Mengganti Tulisan Read More
    ​
    Cara Membuat Teks Berjalan
    Cara Memasukan Javascript
    Picture
    Author
    Herry JUliasnyah
    Aq hanyalah manusia biasa yang ingin terus berusaha untuk belajar, menggapai impian.
    Learn More

    Arsip

    January 2019
    December 2018
    March 2018
    November 2012


    Katagori

    All
    Artikel
    Blog
    Dasar
    Tutorial


    Copyright 2012-2019
    herju.community@gmail.com
    130785herjucommunity
Powered by Create your own unique website with customizable templates.