Social Icons

Wednesday, 22 May 2013

Awesome Circle Style Navigation Menu for Blogger

This is a  Circle Style  navigation bar. Im gonna explain
how  to  add  it  to  blogger. This  menu  work  fine  with
every modern  internet  browsers.You can link with your
main  pages by  using  wire frame   navigation. Im  using 
Css3 and HTML, Just check  out demo. Its easy to add to
blogger get .


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.



Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here cool33bloggertrix.com */


.circlemenu{
width: 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b30707;
margin: 0;
margin-right:5px;
width:100px;
height:100px;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #ff1774;
}


6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.



<div class="circlemenu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="h#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="http://www.cool33bloggertrix.blogspot.com/"><span>Contact Us</span></a></li>
</ul>
</div>

Replace # with your links.

9. Now save your HTML/Javascript'.

    You are done...

No comments:

Post a Comment

Releated Post

  • Best HTML Colour Code Generator
    Best HTML Colour Code Generator
    27/05/2013 - 0 Comments

    How to use?  Scroll up and down the slider on the left to select your main colour. Now select your…

  •  Making Money with your New Blog - Monetizing Basics
    Making Money with your New Blog - Monetizing Basics
    23/05/2013 - 0 Comments

    Most bloggers will start off their venture in the hopes of earning big from their blogs. And not without…

  • Why Design Your Site For Mobile At All
    Why Design Your Site For Mobile At All
    29/05/2013 - 0 Comments

    Designing a site for mobile  platforms should never be an afterthought,   with   mobile…

  • How to add Floating Facebook like box to Blogger?
    How to add Floating Facebook like box to Blogger?
    24/05/2013 - 0 Comments

    Everyone know that Facebook is largest social media site and Over 1 Billion people use…

  • Why You Should Comment On Other Blogs
    Why You Should Comment On Other Blogs
    22/05/2013 - 0 Comments

    As far as we all understand, blogging  is  not a simple thing at  all. If you  manage a…

  •  Add Follow Button Subscribe Widget to Blogger
    Add Follow Button Subscribe Widget to Blogger
    21/05/2013 - 0 Comments

    Today i gonna explain  how  to add  follow button subscribe  …

If you Like Post Share it with Your Friends.

Dont Miss And Other Chance Stay With Us

Get Free Updates in your Inbox
Follow us on:
facebook twitter gplus pinterest rss

Follow us on facebook

 

Sample text

Sample Text

Sample Text