Subscribe for FREE Updates.

Saturday, 6 April 2013

Widgets

Beautiful CSS Menus For Blogger And websites

Beautiful CSS Menus For Blogger And websites
As earlier I published many of CSS tutorials for websites and blogger BlogSpot but now today I am shearing with you beautiful CSS menu with cursor hover effect in two styles hope you like it this beautiful CSS horizontal menu. As you know in world of web designing we discover further work with CSS and CSS3. CSS3 is the latest version of CSS. These beautiful menus contain rounded body with two different border effects and also have cursor hover effect. Solid border CSS menu as seen like capsule shell type. These menus are awesome and can be included in both websites and blogger blogs. Below is the list of menus along with CSS and HTML codes. Just love them and enjoy happy blogging.

How to Add CSS menus to blog?

  •  Click on blog title in which you want to add This.
  •  Go to layout and then click on Add a Gadget.
  • Select "HTML/JavaScript" Widget.
  •  Copy the below code and paste in it then Hit save. 
Solid border style

<style>

    .kk-menu span {
        background:#9933ff;
        display:inline-block;
        font-family:verdana;
        border-right: 10px solid #000000;
        border-left: 10px solid #000000;
        -moz-border-radius:10px;
        -webkit-border-radius:05px;
         border-radius:10px;
        line-height:3em;
        padding:0 1em;
        margin-top:0.5em;
        position:relative;
          -webkit-transition: background-color 0.2s, margin-top 0.2s;
        -moz-transition: background-color 0.2s, margin-top 0.2s;
        -ms-transition: background-color 0.2s, margin-top 0.2s; 
        -o-transition: background-color 0.2s, margin-top 0.2s;  
        transition: background-color 0.2s, margin-top 0.2s;
    }
    .kk-menu a:hover span {
        background:#0099ff;
        margin-top:0;
    
    }
    .kk-menu a:link, .kk-menu a:visited {
        color:#000;
        text-decoration:none;
        float:left;
        height:3.5em;
        overflow:hidden;
    }
   
    </style>

    <div class='kk-menu'>
        <a href='#'><span>Home</span></a>
        <a href='#'><span>Widget</span></a>
        <a href='#'><span>Tricks</span></a>
        <a href='#'><span>Sitemap</span></a>
        <a href='#'><span>CSS</span></a>
        <a href='#'><span>Contact</span></a>
        <a href='#'><span>Tools</span></a>
    </div>


Doted border style

     <style>

    .kkh-menu span {
        background:#9933ff;
        display:inline-block;
        font-family:verdana;
        border-right: 05px dotted #000000;
        border-left: 05px dotted #000000;
        -moz-border-radius:10px;
        -webkit-border-radius:05px;
         border-radius:10px;
        line-height:3em;
        padding:0 1em;
        margin-top:0.5em;
        position:relative;
          -webkit-transition: background-color 0.2s, margin-top 0.2s;
        -moz-transition: background-color 0.2s, margin-top 0.2s;
        -ms-transition: background-color 0.2s, margin-top 0.2s;
        -o-transition: background-color 0.2s, margin-top 0.2s;
        transition: background-color 0.2s, margin-top 0.2s;
    }
    .kkh-menu a:hover span {
        background:#0099ff;
        margin-top:0;
    
    }
    .kkh-menu a:link, .kkh-menu a:visited {
        color:#000;
        text-decoration:none;
        float:left;
        height:3.5em;
        overflow:hidden;
    }
   
    </style>

    <div class='kkh-menu'>
        <a href='#'><span>Home</span></a>
        <a href='#'><span>Widget</span></a>
        <a href='#'><span>Tricks</span></a>
        <a href='#'><span>Sitemap</span></a>
        <a href='#'><span>CSS</span></a>
        <a href='#'><span>Contact</span></a>
        <a href='#'><span>Tools</span></a>
    </div>

Customization!




  • When you paste the code in Html/JavaScript widgets in blogger blog see the example in below screen shot.



  • If you want two replace your link and anchor text with the default one simply find lines like below one in the above code.

<a href='#'><span>Widget</span></a>


  • Replace the # sign with your link and the default text like “Widget, tricks, sitemap” with your anchor text.



Note:

If you have questions and facing some problems and difficulties while adding them to your blog feel free to ask me in comment section…..

Add Google+ Followers Box In Blogger
Add A New Widget Container Below Header

Shakeel Asghar ADMIN
Posted By: Shakeel Asghar

Shakeel Asghar is the owner and founder of kutebkhana.blogspot.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share tips with you.

Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

5 Responses to “Beautiful CSS Menus For Blogger And websites”

sadman said...
29 April 2013 at 11:08

Nice post.

you can also Download free css menu bars from

freebietemplate.com


shakeel asghar said...
30 April 2013 at 22:10

@ sadman
thanks for your beautiful comment keep visiting for more beautiful widgets


Taimoor said...
7 May 2013 at 14:55

Thank you for this helpful post bro! Indeed it's very interesting. :)


shakeel asghar said...
7 May 2013 at 22:55

@ Taimoor
thanks for your nice appreciation keep visiting for more gadgets and tutorials..


Stevensen Liu said...
13 January 2015 at 14:15

blog Wordpress themes nice template! it is great pleasure to visit your site. thanks!!


Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. If you have a problem check first the comments, maybe you will find the solution there.


Regards,
Shakeel Asghar

Are you Awesome? Legend has it that Awesome people can and will share this post!
Beautiful CSS Menus For Blogger And websites