Blogger Ribbon Yatay Menü Ekleme

Bloggerda ribbon menü yeni ve oldukça şık bir yatay menü blog sitelerini çoğunda kullanılan bu menü üzerine gelince renklendirme damgası vuruyor.Yazının en altında demosundada kontrol edebilirsiniz.Bu zamana kadar sizlere yatay ve dikey menüler paylaştım hep istediğiniz bir menü olsun istedim belki olmuştur veya olmamıştır ben bulduğum güzel menüleri sizlerle paylaşacağım daha önce sizlere paylaştığım bu menülerden bir kaçının linkini vereceğim sizlere tekrar bakabilir ve ilginizi çeken bir menü olabilir diye düşünüyorum.

Blogger Paneli >> Yerleşim >> Gatget Ekle >> HTML/JavaScript bulduktan sonra aşağıdaki kodları içersine yerleştirin.

<style>

.wg-ribmenu span {
    background:#A81B6A;
    display:inline-block;
    font-family:verdana;

    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;
}
.wg-ribmenu a:hover span {
    background:#FFD204; 
    margin-top:0;
   
}
.wg-ribmenu span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

.wg-ribmenu span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.wg-ribmenu a:link, .wg-ribmenu a:visited { 
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.wg-ribmenu:after, .wg-ribmenu:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #A81B6A;
}
.wg-ribmenu:after {
    border-right-color:transparent;
}

.wg-ribmenu:before {
    border-left-color:transparent;
}
</style>  

<div class='wg-ribmenu'>
    <a href='#'><span>Ana Sayfa</span></a>
    <a href='#'><span>Widget</span></a>
    <a href='#'><span>Blogger</span></a>
    <a href='#'><span>Arşiv</span></a>
    <a href='#'><span>Hakkımızda</span></a>
    <a href='#'><span>İletişim</span></a>
    
</div>