Menu Ribbon with CSS

1. Login Acount blogger anda.

2. Masuk pada Pengaturan.

3. Pilih Tata letak.

4. Edit html.

5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin >

.ribbon:after, .ribbon:before {
        margin-top:0.5em;
        content: "";
        float:left;
        border:1.5em solid #fff;
    }

    .ribbon:after {
        border-right-color:transparent;
    }

    .ribbon:before {
        border-left-color:transparent;
    }
    .ribbon a:link, .ribbon a:visited {
        color:#000;
        text-decoration:none;
        float:left;
        height:3.5em;
        overflow:hidden;
    }
    .ribbon span {
        background:#fff;
        display:inline-block;
        line-height:3em;
        padding:0 1em;
        margin-top:0.5em;
        position:relative;

        -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
        -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
        -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
        -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
        transition: background-color 0.2s, margin-top 0.2s;
    }

    .ribbon a:hover span {
        background:#FFD204;
        margin-top:0;
    }

    .ribbon span:before {
        content: "";
        position:absolute;
        top:3em;
        left:0;
        border-right:0.5em solid #9B8651;
        border-bottom:0.5em solid #fff;
    }

    .ribbon span:after {
        content: "";
        position:absolute;
        top:3em;
        right:0;
        border-left:0.5em solid #9B8651;
        border-bottom:0.5em solid #fff;
    }

letakkan HTML di bawah ini di atas </header> atau anda bisa menaruh di layout blog anda....

<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>About</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Contact</span></a>
</div>

 Demo

Check out this Pen!

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM