BLENGOK: Beautiful CSS Menus For Blogger And websites

Friday, November 11, 2016

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.

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

Go to link download

download
alternative link download