?¿

pika, 21 (KUL,MY) { }
Tutorial: How to make navis like mine ;
Saturday, April 7, 2012 ,3:30 PM (+ 1)

Hi-yeom :3

Today I'm gonna teach you how to make navigators like mine. Look at the picture below.




This is the navi before and after hovering ^^

There's a person who asked me about this so, I've decided to make a tutorial for her. So first, copy this code.
a.navigate {
position: fixed;
top: 90px;
left: 160px;
}
And paste it in your template code. You can adjust the top and left code to where you want it to be. Second, copy this code.

.desc {
opacity: 0.0;
-webkit-transition: 0.5s;
color: black;
background: #fff;
width: 100px;
height: 100px;
position: fixed;
top: 90px;
left: 160px;
overflow: hidden;
position: fixed;
text-align: center;
font: 10px trebuchet ms;
text-transform: uppercase;
letter-spacing: 5px;
z-index: 99;
}
.desc:hover {
padding: 0px;
opacity: 0.65;
-webkit-transition: 0.5s;
}
After pasting both codes in your template code, copy this code.
<div class="navigate"><a class="desc" onClick="document.getElementById('entry').innerHTML=document.getElementById('
YOURPAGEIDNAME').innerHTML"><br><br><br>YOUR NAVIGATION NAME</a></div> 
Paste this code after your </style> code. Change the red colored code to your page id and the orange code will be your navigation name. Then, you have to copy this code too.
<a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('
YOURPAGEIDNAME').innerHTML"><img src="YOURPICTUREURL"></a>
Paste this code, after the 3rd code I had just gave you. The red code will be the same code as your red colored code before. The blue code will be the URL of your navigation picture ^^ And that's it. You're done ! :D Any problems or questions ? Ask me at cbox or PM me at my facebook / twitter / blogskins / tumblr.

Bye-yeom :3
PS: Sorry I am bad at speaking English :/
Wrote on,
7 April 2012,3.30PM by Pikevin 


« »