Cara Memasang Widget Tab Navigation Keren Pada Blogspot

Pada postingan kali ini, saya akan memberikan kalian trik cara memasang widget tab navigation yang keren. Tab navigation pada umumnya digunakan untuk menempatkan deskripsi pada 2 atau lebih tab. Jika kalian ingin menambahkan social media atau apapun dapat kalian pasang pada tab navigation.

1. Login Blogger, dan klik "Template"
2. Klik Edit HTML
3. Cari kode berikut dengan menggunakan Ctrl+F ]]></b:skin>
4. Paste kode berikut sebelum kode ]]></b:skin> tadi

background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
-pie-background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(84%,#474344), color-stop(100%,#2F2D2E));
-moz-box-shadow: 0 0 12px 1px #000000 inset;
-webkit-box-shadow: 0 0 12px 1px #000000 inset;
box-shadow: 0 0 12px 1px #000000 inset;
z-index: -2;
top: 50px;
padding: 20px;
border:solid 6px #4C4648;
outline: 2px dashed #CFA840;
outline-offset: -8px;
min-height:250px;
position:absolute;
}
.btab-container > div:not(:target) > div {
position: absolute;
}

.btab-container > div:target > div {
position: absolute;
z-index: 3 !important;
}
div.tab-content{
padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
}
.btab-content img{
margin:0 auto;
display:block;
padding-bottom: 20px;
    padding-top: 10px;
}

5. Jika telah selesai klik Save/Simpan. Setelah itu, kembali ke blogger dan klik "Layout"

6. Klik "Add Gadget" dan pilih "HTML/Javascript"

7. Paste kode berikut

<div id="btabcontainer">
<div class="tab-container">

<div id="c1">
<a href="#c1" title="First">First</a>
   <div class="tab-content">
            <h3>This is the first tab</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus.Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus ipsum nunc.</p>
    </div>
</div>

<div id="c2">
<a href="#c2" title="Second">Second</a>
   <div class="tab-content">
            <h3>Add as many tabs as you like</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>

            </div>
</div>

<div id="c3">
<a href="#c3" title="Third">Third</a>
   <div class="tab-content">
            <h3>5 Preset Styles & Color Themes</h3>
            <p>Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
            </div>
</div>
</div>
</div>

Nb : Kau dapat mengubah deskripsi sesuai keinginanmu

8. Jika sudah, Simpan/Save

Sekian dulu tutorial kali ini, semoga bermanfaat

Selamat Mencoba!

(Sumber : http://www.bloggertrix.com/)

Cara Memasang Widget Tab Navigation Keren Pada Blogspot

1 Comment: