Menu Bar Ribbon Effect Hover Untuk Blogger

Hari ini kita akan menjelaskan bagaimana menambahkan Menu Bar Ribbon Effect Hover Untuk Blogger. Ini adalah berbeda Menu Bar dengan gaya melayang-layang. Sebuah efek yang indah pita gaya dengan perubahan warna pada mouse. Harap Anda akan menyukainya. Kami menggunakan CSS3 dan HTML hanya mudah untuk memuat dan menghemat waktu pemuatan, Just check out demo.

 

Demo

1. Masuk ke akun blogger dan klik drop down.
2. Sekarang pilih "Template" .
3. Sekarang Anda dapat melihat langsung pada blog, klik EDIT HTML.
4. Cari tag ini ]]> </ b: skin> dengan menggunakan Ctrl + F
5. Paste kode di bawah Sebelum tag ]]> </ b: skin> 

.ribbon span {
    background:#A81B6A;
    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;
}
.ribbon a:link, .ribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #A81B6A;
}
.ribbon:after {
    border-right-color:transparent;
}

.ribbon:before {
    border-left-color:transparent;
} 

7. Pergi ke blogger dan klik Layout
8. Klik Tambah Gadget dan pilih ''HTML / Javascript'
9. Paste kode di bawah ini.

<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>Download</span></a>
    <a href='#'><span>Css3</span></a>
    <a href='#'><span>HTML</span></a>
    <a href='#'><span>MySQL</span></a>
    <a href='#'><span>Services</span></a>
    <a href='http://mas-basir.blogspot.com/'><span>Contact</span></a>
</div>

 Sekian dulu Postingan Artikel kali ini yang membahas tentang Menu Bar Ribbon Effect Hover Untuk Blogger. semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post