How To Add Background Image In Post

Now, I will share a trick about how to add background image in posts. Maybe this trick help us while we're bored with our post background that only white or black, or maybe we just want to try a small experiment. So, you can try to change post background with background image with following steps.

Use this code in your post

<div style="background:url(IMAGE URL) no-repeat;">
YOUR POST HERE
</div>

For example :

<div style="background:url(http://robots1996.fileave.com/besar.jpg) no-repeat;">
~
Blog is a type of website or part of a website. Blogs are usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Entries are commonly displayed in reverse-chronological order.
~
</div>

So the result will be like this :

~
Blog is a type of website or part of a website. Blogs are usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Entries are commonly displayed in reverse-chronological order.
~

Good luck! Hopefully useful! ^_^

Modify Blogger Comment Box Using IntenseDebate

This trick begins from Full Blog Tricks loyal reader, named AriE ONly. He said "your box comment is different from the original box comment by blogger, how to make it ??". From there, I think to share to you how to modify blogger comment box using IntenseDebate. By using IntenseDebate, our comment box has some features, such as comment voting, threading, etc. Besides that our blog will look profesional, because the comment box appear elegantly. Now, if you want it, you just follow the steps below.

Step 1.
Go to IntenseDebate. Then you must Sign Up first. Fill the form. Then, you'll need to verify your e-mail. Click on the link, and you're done.

Step 2.
Log in  to your blogger acount. then go to Design --> Edit HTML. After that, click Download Full Template, and save your template in a folder. Your template has been backuped.

Step 3.
Return to IntenseDebate. And on the top right area click log in, and log in to your account, after you are loged in your account, on the right side bar, you'll see the title, Manage blogs/sites,below it please click Install IntenseDebate. Then you 'll be taken for a page asking you to type your blog URL. Enter your blog URL and click next step.

Step 4.
Now, you'll go to page separated for 2 parts. On the left, there is a sidebar contain 2 questions.

  => How would you like to install IntenseDebate?
       - Widget
       - Template
please choose : Template
  => Which blog posts should have IntenseDebate comments enabled?
      - Only on new posts
      - On all blog posts
please choose : On all blog posts


Then scroll down untill you see a button titled Choose File. Click on it, and choose your blog template that you download in step 2, after that click Upload File.

Step 5.
IntenseDebate will modify and generate your template automatically, and in the next page you'll see your new template code. See the image below.

As you see in the above image, please click on the box, then copy the new generated template code. Then return to your blogger account, and go to Design --> Edit HTML. Now, select all the current template code, delete it. After that, paste your new template code (from IntenseDebate), and click Save Template. See the changes in your blog posts. You will receive alerts for replies and new comments in your e-mail.

How To Make Floating Widget

Hi, bloggers! Now, I will post about how to make floating widget. The main function of this trick is to save our blog space. Because this trick not needs space in the sidebar, but floating on our blog and always visible although we scroll. So, the visitors will always see the widget. If you already know and you want to make floating widget on your blog, you can follow the steps below.

1. Log in to your blogger account
2. Go to Deisgn --> Edit HTML
3. Find this code : ]]></b:skin> , then copy the code below and paste above ]]></b:skin>.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

=> You can change "bottom" with "top" , and "left" with "right" , up to where you want to put.

4. After that, find this code </body> , then copy the code below and paste above </body>

<div id="trik_pojok">
YOUR WIDGET / IMAGE / ADVERTISEMENT SCRIPT
</div>

=> You must change "YOUR WIDGET / IMAGE / ADVERTISEMENT SCRIPT" . For example I want to put a banner

<div id="trik_pojok">
<a href="http://full-tricks.blogspot.com/"><img border="0" src="http://robots1996.fileave.com/besar.jpg" ></a>
</div>

5. Save now!

How To Change Font In Blog

Actually, idea to change font in blog begins from our readers request. Therefore, in this post I will teach you about how to change font in blog. Maybe you have never thought to change the font in your blog. Now if you read this trick, maybe you want to change your font blog. So, if you want to use this trick, you can follow the steps below.

1. Go to Design --> Edit HTML
2. Thick in the Expand Widget Templates box.
3. Use the code below :

For post title, you can find

.post h3 a {

For blog title, you can find

.titlewrapper {

For font post, you can find under body { , for example (not same for every template)

background:#CFCCC2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicLbwTT9KYfHK3Aq53bfJ4nGLVw-Z8RUChii3nOv00-eBA45YPMMoOJh8lx30EfBnTSjON_yRAEZJ6g4_E1Bw1nkhFaHVKrKeZR_VPsDyqrn4Znu96wklTusnrH_j-rKVP4vsdHkQJE2s/
/headerbg-1.png) repeat-x scroll left top;
font-family:arial;
margin:0;
text-align:center;
}

Generally all fonts can find by this code

font-family

4. You can save your template, if you've finished.

Blogger Font Hacks By Using Google Font

The use of fonts in a blog must be appropriate. Because the style of the fonts must be adapted to available fonts in the visitors's computer. For example, your blog is using Dave Crossland font, sure not all computers can display the font type. So to conquer this problem, you can use Google Font. Google Font is free fonts directory to display a special fonts in a website or blog. Then, how to use it? You can go to Google Font Directory or follow the steps below.

1. Go to Google Font Directory
2. Then choose one of the fonts, for example I choose Slackey

3. Then click on "Use this font"

4. After that, you will see the code. Because I choosed Slackey, so I given this code

You can put it under <head> , before you put the code, you must add "/" before ">"

<link href='http://fonts.googleapis.com/css?family=Slackey' rel='stylesheet' type='text/css'/>

and then we also given the CSS code. We can put it above ]]></b:skin>

h1 { font-family: 'Slackey', arial, serif; }

You can change h1.

5. If you've finished, you can save now.

Get Free Backlinks From Link Exchange

Do you want to get free backlinks? Special for my loyal readers, I wil give you a backlink. You just follow the procedure below.

Place Full Blog Tricks banner into you  blog.


<a href="http://full-tricks.blogspot.com/" "onMouseover="window.location=this.href" title=”Blogger tricks, Blogger hacks, SEO tips, Free widget“ target="_blank"><img border="0" alt="Blogger tricks, Blogger hacks, SEO tips, Free widget" src="https://lh5.googleusercontent.com/-1CK_-ukuY94/TXB-YJp0ILI/AAAAAAAAAPE/VEluCq2V8Ss/s1600/besar.jpg" title="Blogger tricks, Blogger hacks, SEO tips, Free widget"></a>

Then, if you've put it on your blog. You can contact me by give a comment.

Banner list:




























japan animes


OZY-W



































Get free backlinks now, just put Full Blog Tricks banner into your blog!

50 Important Blogging Tips

As a human, we must have a principle. Because with the principle, our life will be discipline and focus. As well a blogger, we must have a principle to develop our blog. So in this case, I will share to you about some blogging tips. There are 50 Important Blogging Tips that I will tell to you.

1. Create a new blog
2. Write your favorite topic
3. Choose a topic wisely
4. Use a domain that consistent with your blog's topic
5. Try to make a memorable domain
6. If you want to serious, buy a domain
7. Make a good design (template)
8. Choose appropriate widgets with your blog
9. Don't put too many widgets on the sidebar
10. Use easy-to-read text
11. Write a post with effective title
12. Put at least one picture in a post
13. Give some jokes
14. Don't copy articles from other blogs
15. Read again your post before publish
16. Edit the post more than one
17. Set the category or the label
18. Write at least 5 posts a week
19. Ping to Pingomatic and Pingoat after post
20. Write for Technorati and Ezine Articles
21. Blogwalking
22. Interact with other bloggers
23. Participate in the other bloggers project
24. Leave a useful comment
25. Become the first commentator
26. Try to always answer comments
27. Learn basics SEO
28. Use Meta Tag
29. Submit your blog to  Google, Yahoo!, and Bing
30. Register to some Social Bookmarks
31. Register to some Directories
32. Use Google Webmaster Tools
33. Use Google Analytics
34. Use Google External Keyword Tool
35. Create a list of "The Most Popular Posts"
36. Create a list of " Recent Comments"
37. Give some useful tools
38. Give some useful links
39. Use RSS Feed
40. Provide an easy way to subscribe
41. Join in some forums
42. Put a link to our blog as a signature
43. Provide an easy way for visitors to contact us
44. Try to earn money with Google AdSense, AdBrite, or Chitika
45. Don't put too many advertisements
46. Set the advertisement wisely
47. Blogging consistenly
48. Be patient
49. Be yourself
50. Make a list of "50 Important Blogging Tips" 

I think if you can do all 50 Important Blogging Tips, you will be a "Real Blogger".

How To Make A Button In Blog

Finally, I found a trick about How To Make A Button In Blog. The way is very easy, because only need simple script. The purpose of this trick is to modify our articles, so our articles will look attractive and unique. Now,  I will tell you the steps. (Previously, I am sorry to you because this trick cannot active in my blog. I don't know why? So, I only give you the picture)




=>Normal button :

<button>Full Blog Tricks</button>

=>But if you want to put a link, you can use this script

<a href="http://full-tricks.blogspot.com" target="blank"><button>Full Blog Tricks</button></a>

Hopefully  useful...

How To Add Recent Comments Widget

Add Recent Comments Widget in our blog can provoke our visitors to participate in commenting on our blog. So our blog can become crowded by the comments of the visitors. To Add Recent Comments Widget into your blog you can follow the steps below.

1. Go to Design --> Page Elements --> Add Gadget
2. Choose HTML/Java Script
3. Then copy the code below, and paste in the place.

<script style="text/javascript" src="http://www.geocities.com/oom_directory//recentcomments.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://full-tricks.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

=> Change with your blog address
4. Now, you can save it

10 Secret Tips To Get High Traffic

When we've made a blog, usually we will complain about our blog, "Why my blog only has a low traffic?". In this case, you have to be patient first, because that's normal. Do you know, after one week I made this blog, my blog only visited by 4 person per day! Then, I pomote my blog to Facebook and submit my blog to some search engines. You can also advertise your blog in a free advertising website. Then, the result is my blog has a good traffic! If we has a good traffic, that's same as has a good rank in Alexa (Alexa Rank). Now, I will share to you about 10 Secret Tips To Get High Traffic.

1. Update your blog frequently

If you update your blog frequently, visitors will also visit your blog everyday. And search engine robots also visit your blog more often.

2. Make a good and unique post

The quality of post is the first! It's important to build traffic. When your visitors like your blog, maybe they will become your subscribers or loyal readers, and then they will tell your blog to their friends, so your blog become popular without spend your money to advertise.

3. Blogwalking and leave a comment in other blogs

Although it seems unimportant, blogwalking and leave some comments in other blog can give you good traffic. Because when you leave a good comment, other visitor or the webmaster maybe click your name, and go to your blog.

                                                      4. Submit your blog to Search Engine

By submitting your blog to some Search Engines, your blog will be indexed quickly. Search Engine that you should submit are Google, Yahoo!, and Bing. That are the greatest Search Engine, I think... 

5. Share your blog to Social Bookmarking

Because Social Bookmarking is a great community, I think you have to share your blog here. So, people know about your blog. There are many Social Bookmarking, but I recommend to share your blog to Facebook, Twitter, and Digg.

6. Join in a Forum

Why I command you to join in a forum? Because if we join in a forum and we will active there, we will get reputations. So people will believe with us, and we can tell about our blog. Beside that, in every post (in forum), we can add a link that go to our blog. I think you should join in Digital Point Forum. 

7. Write for Technorati and Ezine Articles

As we know, Technorati and Ezine Articles are the most often used by profesional webmaster. They write an article and add a link that go to their website. Proven, this way is very effective to get high traffic.

8. Make a good design for blog

Do you know? Besides make a good post, make a good blog design also important. Maybe, our visitors will comeback becuase they think our blog has a unique design. So they will remember your blog.

9. Be yourself!

This is very important things in building a blog. You must be yourself! Don't copy articles or another blog-style. Because by be yourself, your blog will has a characteristic. And your visitor will respect with your blog.

10. Be patient

Be patient! Need time to get high traffic. Impossible, if there is a new blog and visited by thousands of people. So you have to be patient, because there isn't "instant" in the world...

What is AlexaRank?

Usually, in some blog/website, we found a box that named with "Site Info". In that box, we will find "Rank: " and "Links in:". Do you know, what does it mean? "Rank" in the box means rank based on Alexa. While, "Links in:" means incoming links to your blog (inbound links)



By the way, do you know Alexa? Alexa/AlexaRank is how Alexa give a rank to your site based on your unique visitor number. The lower the AlexaRank of the site so it means that the site have more unique visitors. So if you able to drive more and more traffic to your site, than you will get lower AlexaRank.

So, how to add AlexaRank widget to our blog? Firstly, you can go to Alexa. Then you must register first. Now, if you've registered and clicked on the confirmation link (in your email), you can return to Alexa.

Before, we will add AlexaRank widget, we will claim our blog in Alexa. Now, click on the "Site Tools", and then click again on the "Claim Your Site". Firstly, you must fill with your blog address. Then, there are 2 options to claim your blog, you can use the second (by adding meta tag). If you choose this option, you must copy the code and paste under <head>.  Now, you can clik on the "Verify my meta tag".

Then, you can edit your site listing. But, we will add AlexaRank widget. So, you can pass this step. Now, you should return to "Site Tools", and click on the "Alexa Site Widgets". Then, you can choose the widget style. After that, copy the code and paste into your blog (Design --> Page Elements --> Add Gadget, choose HTML/Java Script). You can see your blog now, there is an AlexaRank widget.

How To Make Vertical Navigations Menu With CSS

 The purpose of made this menu is to facilitate the visitors to navigate our blog. Usually, some people fill it with "Home", "About Me", "Disclaimer", "Services", etc. But, if you want to make difference, it's OK. Well, before I give the steps, you must backup your template first, because we will make some changes!

1. Go to Design --> Edit HTML
2. For HTML code, you can paste under :
    => If you have right sidebar, you have to find this code : <div id='sidebar-wrapper'> or <div id='sidebar-wrapper-right'>
    => But, if you have left sidebar, you can find this code : <div id='sidebar-wrapper-left'>
3. For CSS code you can paste above ]]></b:skin>
4. After that, before I give the CSS code and HTML code, I will teach you how to edit the links and the titles.

<li><a href="Title 1" >Link 1</a></li>
<li><a href="Title 2" >Link 2</a></li>
<li><a href="Title 3" >Link 3</a></li>
<li><a href="Title 4" >Link 4</a></li>
<li><a href="Title 5" >Link 5</a></li>

=> Change with word that you want to display
=> Change with links that you want to open

example :

<li><a href="Full Blog Tricks" >http://full-tricks.blogspot.com/</a></li>

Now, I will give you 10 choice (CSS Style)

CSS Code:
#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0DbQPnby2kjDqHET8ZMpExwj8ewTI5l3xUZ8-Zm3Jgyl94iUfq6MTExpjeB4TqsB3_dTe_I06YkncjwqdNDphvyOmhb_eVyTovbft6PoC4GM-c1wdnT3087ZFL2z89cjWmd4jZByirc/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0DbQPnby2kjDqHET8ZMpExwj8ewTI5l3xUZ8-Zm3Jgyl94iUfq6MTExpjeB4TqsB3_dTe_I06YkncjwqdNDphvyOmhb_eVyTovbft6PoC4GM-c1wdnT3087ZFL2z89cjWmd4jZByirc/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML Code:
<div id="menu8"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii7VwZ5CyijjLz1SIuBXyjiJiBYtTbvC_7XwgalJAzrK-mIgdO1FOBOgAUaZy44LVdcuGEhe3OqAlKyozzJZlJ0j2n5Zxg5EpjxW3H0w6K-cr6wXWgsNJ7jgHrQH1zCo4M7ZUEB0xhmFE/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii7VwZ5CyijjLz1SIuBXyjiJiBYtTbvC_7XwgalJAzrK-mIgdO1FOBOgAUaZy44LVdcuGEhe3OqAlKyozzJZlJ0j2n5Zxg5EpjxW3H0w6K-cr6wXWgsNJ7jgHrQH1zCo4M7ZUEB0xhmFE/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu3"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj82fxx5Yr_ut5tmgsSmru_aN3qqiaEQKTjPkDkbXzoFL8DRwy7_dRuV52o4kEx1IXV4Z56hNJ1y4mrTtEuVQaxNIFc3Fytyq5F0C8eLZv5YoGOgVXiMsTe1WWo5sO96s1wLhoVOrods2k/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj82fxx5Yr_ut5tmgsSmru_aN3qqiaEQKTjPkDkbXzoFL8DRwy7_dRuV52o4kEx1IXV4Z56hNJ1y4mrTtEuVQaxNIFc3Fytyq5F0C8eLZv5YoGOgVXiMsTe1WWo5sO96s1wLhoVOrods2k/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu4"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6-CYJTZ25bSCpjrwCOfkcnjnKjqjfx0ux-awZerNtfZ3BNomv-kmUlSb4PQPNKUK1fBvPkqHxciw0SMZ71lxGyCZzBhv6_0jYVdwrT_VSB7PWT56tFakMkqYQbz0Q3ZEbiBFcOMfEIc/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6-CYJTZ25bSCpjrwCOfkcnjnKjqjfx0ux-awZerNtfZ3BNomv-kmUlSb4PQPNKUK1fBvPkqHxciw0SMZ71lxGyCZzBhv6_0jYVdwrT_VSB7PWT56tFakMkqYQbz0Q3ZEbiBFcOMfEIc/s800/menu14.gif); padding: 8px 0 0 10px; }
HTML Code:
<div id="menu14"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESm89BMwbTOEJzZsLr_kutgcDdKDpLZxYz42d3e5p11la5qEnOSQmpnPxpt3FXZTvzt08ZLTMRCP_8H38DqqGwqYtauQwuOxHhFT1h58PcH3bK3MJYkxCxDs6t61DOfX1hGkz9dEp2tQ/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESm89BMwbTOEJzZsLr_kutgcDdKDpLZxYz42d3e5p11la5qEnOSQmpnPxpt3FXZTvzt08ZLTMRCP_8H38DqqGwqYtauQwuOxHhFT1h58PcH3bK3MJYkxCxDs6t61DOfX1hGkz9dEp2tQ/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu6"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYoKeNz4Duro45R0fV8Qxq_D2EOfz26FVmi_HnAoGAB_-P7GdCQOgdHAklE_0hfr7yBF2_uXr7NOR1QkRshvzb1lnifDyVhXShyphenhyphenESKkPehgqZVcGdkGxpxxrzZ_1wwD_xGhijAe6xkwLI/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYoKeNz4Duro45R0fV8Qxq_D2EOfz26FVmi_HnAoGAB_-P7GdCQOgdHAklE_0hfr7yBF2_uXr7NOR1QkRshvzb1lnifDyVhXShyphenhyphenESKkPehgqZVcGdkGxpxxrzZ_1wwD_xGhijAe6xkwLI/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYoKeNz4Duro45R0fV8Qxq_D2EOfz26FVmi_HnAoGAB_-P7GdCQOgdHAklE_0hfr7yBF2_uXr7NOR1QkRshvzb1lnifDyVhXShyphenhyphenESKkPehgqZVcGdkGxpxxrzZ_1wwD_xGhijAe6xkwLI/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
HTMl Code:
<div id="menu9"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaoqq0n6GoR8OhrPMj56EICtffd4RaldMfGlWUOexNAlN2QAJQ5MRyEQcHCe7M5_E_9XQQFYNXL87JtdnyOB5ojMmyZr_7oTR3Cvo7M5kooAjLG4J0uxOAn8HtWcIi1bVE5jvI-xfpaTU/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaoqq0n6GoR8OhrPMj56EICtffd4RaldMfGlWUOexNAlN2QAJQ5MRyEQcHCe7M5_E_9XQQFYNXL87JtdnyOB5ojMmyZr_7oTR3Cvo7M5kooAjLG4J0uxOAn8HtWcIi1bVE5jvI-xfpaTU/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
HTML Code:
<div id="menu12"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN4oWg0K8yWEdBARVkUrIR_pWxSPfaJQNiQM_ebPbmQuQEnAB4hf1uZ0jYQl2GYMb2TSjzgi09xZHvxBmlc9m3IuA5kE2yBAjdeng-wzUuVDDAYezU1-uyXNtvNHbWA1QUEtDrdWxTJJM/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN4oWg0K8yWEdBARVkUrIR_pWxSPfaJQNiQM_ebPbmQuQEnAB4hf1uZ0jYQl2GYMb2TSjzgi09xZHvxBmlc9m3IuA5kE2yBAjdeng-wzUuVDDAYezU1-uyXNtvNHbWA1QUEtDrdWxTJJM/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu13"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPoVDaGG9zjU82GA-GOj7MM0mx7doXQhzyvw9a3gNGNqqWfCrjXyTrfs3hVurWGauICg-anFk27w_Ef1bBQTm_4V-w635kMg5J2eoyhSR4odp04m_UPuUICCVlMIDVJHR2b-lNhzgk9IE/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPoVDaGG9zjU82GA-GOj7MM0mx7doXQhzyvw9a3gNGNqqWfCrjXyTrfs3hVurWGauICg-anFk27w_Ef1bBQTm_4V-w635kMg5J2eoyhSR4odp04m_UPuUICCVlMIDVJHR2b-lNhzgk9IE/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPoVDaGG9zjU82GA-GOj7MM0mx7doXQhzyvw9a3gNGNqqWfCrjXyTrfs3hVurWGauICg-anFk27w_Ef1bBQTm_4V-w635kMg5J2eoyhSR4odp04m_UPuUICCVlMIDVJHR2b-lNhzgk9IE/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu4"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ29pE3fWJaS7j5Pa5rwRvGwo6vtjIpVMLI8i0uFzYVUDoBE2J1DGNucjk5H6MbCVNQae-tVQOIwE8W27cQD1ERFA6dLpcWkD1gD7IIDhlQSJkryMsL3DnCT2FV5qFLyZqkjiwH2RL9tg/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ29pE3fWJaS7j5Pa5rwRvGwo6vtjIpVMLI8i0uFzYVUDoBE2J1DGNucjk5H6MbCVNQae-tVQOIwE8W27cQD1ERFA6dLpcWkD1gD7IIDhlQSJkryMsL3DnCT2FV5qFLyZqkjiwH2RL9tg/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML Code:
<div id="menu6"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

5. Then, if you've finished, you can save now!