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