Tutorial : Hidden Menu Tab

Assalamualaikum ya habibi dan selamat malam

Sebelum aku lelapkan mata nak juga aku tunaikan permintaan 2orang blogger yang menanyakan macam mana nak buat hidden tab macam aku. Sila Lihat contoh dibawah. 

BEFORE

AFTER

Jimat ruangkan? Aku buat macam ni untuk bagi blog nampak lagi kemas. Tapi takde laa kemas mana. Hahhahahaha okey lets start.

Dashboard -- Layout -- Add a Gadget -- Html/Javascript

Copy code dibawah dan pastekan di dalam HTML/JAVASCRIPT

<style>
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:70px;
border-radius: 15px;
padding:3px;
text-decoration:none;
color:#555;
display:inline-block;
text-align:center;
}
a.tablo:hover{
background:#000;
color:#fff;
}

</style>
<center><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML"  >Tajuk No1</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML"  >Tajuk No2</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML"  >Tajuk No3</a>
<br />
</center>
<center>
<div id="wnsb" style="margin-top:5px;width:250px;"></div>
<div id="1" style="display: none;"><br />
Code untuk Tajuk no 1. Kalau tajuk no 1 korang Cbox, letak code cbox disini
</div>
<div id="2" style="display: none;"><br />
Tajuk no 2. Blalallalal
</div>
<div id="3" style="display: none;"><br />
Tajuk no 3. Blalallalal</div>
<br /></center>

Merah: Warna background

Purple: Tajuk menu tab

Credit to wanaseoby. Thanks for the tutorial. Ouhh ye, kalau dah jadi boleh komen yayyy. Kalau tak menjadi atau tak faham ape yang aku meraban tadi jangan segan bertanya. In shaa Allah aku bantu. Genite ya habibi