Menu

ANA SAYFA » Blogger Menü Kodları » Blogger Ribbon Hover Efekli Menü

Blogger Ribbon Hover Efekli Menü

Blogger sitenizde kullanabileceğiniz animasyonlu menü sitenizde rahatlıkla kullanabilirsiniz.

Bugüne kadar bazı yatay menü kodları paylaşsam da şıklığa ve tasarıma özen gösteren bloggerlar benden ribbon menü paylaşmamı istemişlerdi. Ben de blog kayıtlarının üst tarafına ekleyebileceğiniz, şık ve hover efekti sayesinde üzerine gelindiğine hareket eden harika bir ribbon menü.

Blogger sitenize eklemek için;

Yerleşim Gadget Ekle yöntemi ekleyerek blog sitenizde görünmesini istediğiniz bölüme sürükleyerek bırakın.

<style> 
/* Bilgi Cafem Animasyonlu Ribbon Menü */ 
.bhribbon span { 
    background:#F1921A; 
    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; 
} 
.bhribbon a span { 
color:#000;}
.bhribbon a:hover span { 
    background:#669900; 
    margin-top:0;} 
.bhribbon span:before { 
    content: ""; 
    position:absolute; 
    top:3em; 
    left:0; 
    border-right:0.5em solid #F1921A; 
    border-bottom:0.5em solid #fff;}
.bhribbon span:after { 
    content: ""; 
    position:absolute; 
    top:3em; 
    right:0; 
    border-left:0.5em solid #F1921A; 
    border-bottom:0.5em solid #fff;}
.bhribbon a:link, .bhribbon a:visited { 
    color:#000; 
    text-decoration:none; 
    float:left; 
    height:3.5em; 
    overflow:hidden; 
} 
.bhribbon:after, .bhribbon:before { 
    margin-top:0.5em; 
    content: ""; 
    float:left; 
   border: 1.5em solid #F1921A;}
.bhribbon:after { 
    border-right-color:transparent;}
.bhribbon:before { 
    border-left-color:transparent;} 
</style> <br />
<div class='bhribbon'>
    <a href='#'><span>Ana Sayfa</span></a> <br />
<a href='#'><span>Hakkımda</span></a> <br />
<a href='#'><span>Blogger</span></a> <br />
<a href='#'><span>Destek Ol</span></a> <br />
<a href='#'><span>Takip Et</span></a> <br />
<a href='#'><span>Eklentiler</span></a> <br />
<a href='#'><span>Arşiv</span></a> <br />
<a href='#'><span>Demolar</span></a> <br />
<a href='#'><span>İletişim</span></a> <br />
</div>

Kod içerisinde bulunan # işaretleri yerine menü başlıklarını ait bağlantı linklerinizi eklemeyi unutmayın...

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
© by bilgicafem61
Aşağıdan Yorum ve Sorularınızı Bırakın...

Yorum Gönder Blogger Facebook

Kaydol: Kayıt Yorumları (Atom)

Top