.:abandoneddungeon:.: Tutorial: Tabber Widget (untuk Jimatkan Ruang Sidebar)

Assalamualaikum

LIVE PREVIEW (Credit to Wanaseoby)

<style>

a.mid{
background:#A2C898;
width:55px;
display:inline-block;
text-align:center;
color:#fff;
margin-bottom:1px;
font:11px arial;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:1px;
border:1px solid #A2C898;
cursor:pointer;
}

a.mid:hover{
background:#FFffff;
border:1px solid #A2C898;
color:#A2C898;
}

</style>
<div style="width:250px;">

<center>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >Tab 1</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >Tab 2</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >Tab 4</a>
</center>
<div id="wnsb" style="margin-top:5px;width:230px; padding:10px; border:1px dashed #ddd;">
Navigate around. Replace this with anything/your own words.</div>
<div id="1" style="display: none;">
This is navigation no.1 
</div>
<div id="2" style="display: none;">
Navigation 2
</div>
<div id="3" style="display: none;">
navigation no.3
</div>
<div id="4" style="display: none;">
navigation no.4
</div>
</div>

LIVE PREVIEW

.adv2 p{padding:5px;text-align:left;width:250px;color:#555;}

a.tablo{-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#fff;
width:20px;
text-decoration:none; 
border:1px dashed #BBBBBB; 
border-radius:33px;
color:#555; 
display:inline-block;
text-align:center;
}

a.tablo:hover{background:#ccc;color:#fff;}

</style>
<div id="adv2" class="adv2">
<center>
<style>
.babo{background:url(http://i.imgur.com/idEbA.png);padding:5px;border:3px solid #F2F4F2;text-align:center;width:250px;color:#555}

a.tablo{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#F2F4F2;
width:20px;
text-decoration:none; 
border:3px solid #fff; 
color:#fff;
box-shadow:1px 1px 3px #eee;
border-radius:33px;
display:inline-block;
text-align:center;
font:16px calibri;
}

a.tablo:hover{background:#F7E8DE;color:#fff;}

#wnsb img{max-width:245px;}
 </style>
<div class="babo">
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </div>
<div id="wnsb" style="width:250px;color:#ccc; padding:5px;border:3px solid #F2F4F2;border-top:none;font:11px arial; letter-spacing:1px;">
Navigate around. Replace this with anything/your own words.
</div>
<div id="1" style="display: none;">
This navigation no.1 , remove this and replace with anything you want to be here. 
</div>
<div id="2" style="display: none;">
You can also put cbox codes here. Just anything without messing the codes.
</div>
<div id="3" style="display: none;">
The third page
</div>
<div id="4" style="display: none;">
This forth page

</div>
</center>

LIVE PREVIEW (credit to Wanaseoby)

.adv2 p{padding:5px;text-align:left;width:250px;color:#555;}

a.tablo{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;
background:#FFDDDD;
width:50px;
font:8px tt;
padding:3px;
text-decoration:none;
color:#555; 
display:inline-block;
text-align:center;
}
a.tablo:hover{background:#FF7171;color:#fff;}

::-webkit-scrollbar {
background:#eee;
width: 6px;
height: 7px;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #FFD7D7;
}

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
 </style>
<div style="width:250px;">
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf45ffq1bnp60NUG6ofyKIxqZzOw9k3ZU_Ov2mbYqrCbQ3lCRDPcgOp1JAasEBDAaeQdDW8E6BqT3hQIkjshETEsrdODhqsyWbhnE1QqmylTPRW-2Ry2_PATEXO26RbG3qNvyO4dYK7ASM/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:250px;padding:2px;  ">
</div>
<center>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >Tab 1</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >Tab 2</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >Tab 4</a>
</center>
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf45ffq1bnp60NUG6ofyKIxqZzOw9k3ZU_Ov2mbYqrCbQ3lCRDPcgOp1JAasEBDAaeQdDW8E6BqT3hQIkjshETEsrdODhqsyWbhnE1QqmylTPRW-2Ry2_PATEXO26RbG3qNvyO4dYK7ASM/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:250px;padding:2px; margin-top:5px; ">
</div>
<div id="wnsb" style="margin-top:5px;width:250px;">
Navigate around. Replace this with anything/your own words.</div>
<div id="1" style="display: none;">
This navigation no.1 , remove this and replace with anything you want to be here.
</div>
<div id="2" style="display: none;">
You can also put cbox codes here. Just anything without messing the codes.
</div>
<div id="3" style="display: none;">
This navigation no.3 
</div>
<div id="4" style="display: none;">
This navigation no.4 
</div>
</div>

Edit anything necessary. Like the tabs name, the content, the color codes and the border. (Learn about it here)
Paste the edited codes in Blogger --> Layout --> Add A Gadget --> HTML/Javascript
Make sure don't click Rich Text. Then, SAVE!

p/s: For Blogskin, just paste those codes whereever you want.

Credit: Kak Wana

20140805

Tutorial: Tabber Widget (untuk Jimatkan Ruang Sidebar)

No comments

Post a Comment