1. copy this stuff (13 lines of code). ctrl+c to copy \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ START below here
a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #5d5d54;
text-decoration: none;
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #5d5d54;
text-decoration: none;
STOP above here /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
note: highlight the text by placing mouse cursor just before the first letter of the first line you would like to copy and stay. Then press and hold the left mouse button, then drag mouse, while holding the button, to the last letter of the last line you would like to copy.
2. Here is how to Paste copied stuff to blogs html (add css)
a. now go to your blog click design in the top right of the screen; to the right of your name.
b. click the words(button in top left of screen) Template Designer New
c. click the advanced option in the list in the top left.
d. click the add css option in the next box over. almost done
e. now, in the box on the right (titled add custom css), paste(ctrl+v) the stuff you copied. CLICK APPLY TO BLOG then click back to blogger (top right) almost done
3. Now lets make a gadget of html, on your blog, for your customizable nav bar! a. copy this stuff \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ START below here
<a class="navigation" href="http://your-link-url.blogspot.com">Your link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a>
STOP above here /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
b. now you should be back on the design page of blogger. Click an add a gadget box
c. Click the HTML/ Java script gadget from the list on the right.
d. now a widow will pop up,with two boxes, asking you for a tiltle and content. leave the title box blank but in the content box paste the stuff you just copied.
e. click SAVE now you should have the a working navigation bar, but you still have to customize it with your own info. SAVE SAVE SAVE
4. final step is to customize your navbar (here's how) a. go back to the design page of your blog and click the edit option on the gadget you just created.
here you will see the stuff(code) you just pasted there. If you read the code you will see that there is a url (starting with "http) for each button and a title(your link) that will be displayed as the title of the button. replace "http://your-link-url.blogspot.com" with the URL of the post or page (or link) you would like the button to link to, and replace the link text (eg: Your Link) with the text you would like to display.
a. now go to your blog click design in the top right of the screen; to the right of your name.
b. click the words(button in top left of screen) Template Designer New
c. click the advanced option in the list in the top left.
d. click the add css option in the next box over. almost done
e. now, in the box on the right (titled add custom css), paste(ctrl+v) the stuff you copied. CLICK APPLY TO BLOG then click back to blogger (top right) almost done
3. Now lets make a gadget of html, on your blog, for your customizable nav bar! a. copy this stuff \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ START below here
<a class="navigation" href="http://your-link-url.blogspot.com">Your link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a>
STOP above here /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
b. now you should be back on the design page of blogger. Click an add a gadget box
c. Click the HTML/ Java script gadget from the list on the right.
d. now a widow will pop up,with two boxes, asking you for a tiltle and content. leave the title box blank but in the content box paste the stuff you just copied.
e. click SAVE now you should have the a working navigation bar, but you still have to customize it with your own info. SAVE SAVE SAVE
4. final step is to customize your navbar (here's how) a. go back to the design page of your blog and click the edit option on the gadget you just created.
![]() |
Once you have created your links (you can add as few or as many as you like), save your HTML/Javascript widget, and take a look at the effect in your blog.





No comments:
Post a Comment