Ladadidam.

Sliding Navigations Button

Tuesday, June 5, 2012 @ 10:39 PM 0 stares

Preview

First:

Hover:

Photo source: here.

How how? Are you intrested to made the navigation like that too? This is the tuthorialz:

P/s: for blogskins only! If you're using template 2006 / designer,sorry,i dont know how!

Copy the code below and paste above </style> code.

a.link1 {background:#CC956E;padding:4px;padding-left:6px;padding-right:6px;font:8px trebuchet ms;text-transform:uppercase;color:white;-webkit-transition:1s;-moz-transition:1s;}
a.link2 {background:#BF5A4B;padding:4px;padding-left:6px;padding-right:6px;font:8px trebuchet ms;text-transform:uppercase;color:white;-webkit-transition:1s;-moz-transition:1s;}
a.link3 {background:#786049;padding:4px;padding-left:6px;padding-right:6px;font:8px trebuchet ms;text-transform:uppercase;color:white;-webkit-transition:1s;-moz-transition:1s;}
a.link4 {background:#758549;padding:4px;padding-left:6px;padding-right:6px;font:8px trebuchet ms;text-transform:uppercase;color:white;-webkit-transition:1s;-moz-transition:1s;}
.link1 a, .link2 a, .link3 a, .link4 a {color:white;}
a.link1:hover {-webkit-transition:0.5s;-moz-transition:0.5s;text-align:center;}
a.link2:hover {padding-left:69px;margin-left:-69px;-webkit-transition:1s;-moz-transition:1s;text-align:center;}
a.link3:hover {padding-left:125px;margin-left:-125px;-webkit-transition:1s;-moz-transition:1s;text-align:center;}
a.link4:hover {padding-left:175px;margin-left:-175px;-webkit-transition:1s;-moz-transition:1s;text-align:center;}

Lets Study

-Red change with your color. (if you dont want to change,its okay.)

-Blue change with your favorite font size. (if you dont want to change,its okay.)

Is this ready?

NOOOOO!!!

Then,CTRL + F to the place you want to put the gadget.

Copy this code and paste in the place that you want.

<a class="link1" href="YOUR URL">TEXT TO DISPLAY<a> <a class="link2" href="YOUR URL">TEXT TO DISPLAY<a> <a class="link3" href="YOUR URL">TEXT TO DISPLAY<a> <a class="link4" href="YOUR URL">TEXT TO DISPLAY<a>

Lets Study:
-Red change with your own url.
-Fuchsia change with text you want to display.

Then,save and you're done!!:D
Any problem? Just comment this post or send me a letter on cbox,maybe I'll reply :D
Cya!
P/s: sorry for broken english. I dont USING google translate. Haha :)

Labels: tutorial

⇐ oldernewer ⇒