Tutorial 29 : Navigatable Box

June 24, 2016


Hai, hari ni macam rajin lebih sikit untuk buat tutorial Navigatable Box. Nanti tak serabut la blog korang dengan macam-macam benda kan. Save space. Coding ini khas untuk Simple Template, denim dan lain-lain template Designer.


1. Copy code dalam textarea dibawah ni.
<style>
.adv2 ul{background:url(http://www.easyfreepatterns.com/patterns/237/black-and-white-background-patterns-&171-free-patterns-237639.jpg);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555}
.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:#ffd700;
width:50px;
font:10px tt;
padding:3px;
text-decoration:none;
color:#555; 
display:inline-block;
text-align:center;
}
a.tablo:hover{background:#000000;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;">
<center>
<a class="tablo" onclick="document.getElementById('aly').innerHTML=document.getElementById('1').innerHTML" >About</a> 
<a class="tablo" onclick="document.getElementById('aly').innerHTML=document.getElementById('2').innerHTML" >Cbox</a> 
<a class="tablo" onclick="document.getElementById('aly').innerHTML=document.getElementById('3').innerHTML" >Tutorial</a> 
<a class="tablo" onclick="document.getElementById('aly').innerHTML=document.getElementById('4').innerHTML" >Contact</a>
</center>
<div id="aly" style="margin-top:5px;width:250px;">
Say Hi Or Anything Here</div>
<div id="1" style="display: none;">
Put Your Code Here 1
</div>
<div id="2" style="display: none;">
Put Your Code Here 2
</div>
<div id="3" style="display: none;">
Put Your Code Here 3
</div>
<div id="4" style="display: none;">
Put Your Code Here 4
</div>
</div> 
2. Paste dalam HTML/Gadget untuk Simple Template. Kalau guna denim, korang cari code sidebar dan paste.
3. 
code Merah : Tukar ke warna background korang nak di SINI
code Hijau : Tukar tittle yang korang nak
code Biru : Ganti ayat ataupun code korang nak
4. Lastly, korang boleh cuba tukar font size, width atau height mengikut kesesuaian blog korang.
5. Siap :)
Thank you guys!

You Might Also Like

1 comment

Terima kasih :)

728 x 90

Flickr Images

Like us on Facebook

INSTAGRAM