Beautiful CSS Menus For Blogger And websites ~ Kuteb Khana

Home » css » widgets » Beautiful CSS Menus For Blogger And websites

Saturday, 6 April 2013

Beautiful CSS Menus For Blogger And websites

Add This To Delicious Tweet/ReTweet This Share on Facebook StumbleUpon This Share On Google+ Digg This

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.

CSS3 keyboard like text effect in blogger

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.

Live demo

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.

Join Me On: Facebook | Twitter | Google Plus

9 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
Shakeelasghar 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. :)
Shakeelasghar said... 7 May 2013 at 22:55 @ Taimoor thanks for your nice appreciation keep visiting for more gadgets and tutorials..
Unknown said... 13 January 2015 at 14:15 blog Wordpress themes nice template! it is great pleasure to visit your site. thanks!!
BB. said... 23 August 2018 at 18:26 Very interesting information I can find here. t's great that you share with us. Russian Dentist In Clapham
Make Money Online said... 21 October 2020 at 07:12 Internet Business Income From Home
RICHARD said... 7 November 2020 at 16:26 Let’s Talk Marketing Strategy
Anonymous said...
23 March 2022 at 11:55
Beautiful Css Menus For Blogger And Websites ~ Kuteb Khana >>>>> Download Now

>>>>> Download Full

Beautiful Css Menus For Blogger And Websites ~ Kuteb Khana >>>>> Download LINK

>>>>> Download Now

Beautiful Css Menus For Blogger And Websites ~ Kuteb Khana >>>>> Download Full

>>>>> Download LINK

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

Saturday, 6 April 2013