Blogger İçin Klasik Drop Down CSS3 Açılır Menü Eklentisi

1. Blogger hesabınıza giriş yapın.
2. Kumanda Paneli>Yerleşim>Gadget Ekle yolunu izliyoruz.
3. Altta ki resimdeki gibi Blog başlık isminizin altındaki Gadget ekle butonuna tıklayın.
4. Açmış olduğunuz gadgetin içine aşağıdaki kodları ekleyin.
5. Bu CSS3 açılır menüyü kullanabilmeniz için blogger klasik veya basit temalarından birini kullanmak zorundasınız.

<style> / * Başlat Css Menu * /
. Menüsü {
    border: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: verdana, geneva, arial, helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: 8e8e8e;
}

. Menü ul {
    background: top tekrar-x bıraktı;
    height: 43px;
    list-style: none;
    margin: 0;
    padding: 0;
}

. Menüsü li {
    float: left;
    padding: 0px 0px 8px 8px;
}

. Menü li a {
    color: # 666666;
    display: block;
    font-weight: bold;
    line-height: 43px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
}

. Menüsü li a: hover {
    color: # 000000;
    text-decoration: none;
}

. Menüsü li ul {
    background: # e0e0e0;
    border-left: 2px solid # a80329;
    border-right: 2px solid # a80329;
    border-bottom: 2px solid # a80329;
    display: none;
    height: auto;
    Filtre: alpha (opacity = 95);
    opacity: 0.95;
    position: absolute;
    width: 225px;
    z-index: 200;
/ * Top: 1em;
/ * Sol: 0; * /
}

. Menüsü li: hover ul {
    display: block;
}

. Menüsü li li {
    display: block;
    şamandıra: none;
    padding: 0px;
    width: 225px;
}

. Menüsünde li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 0px 10px 15px;
    text-align: left;
}

. Hover {: menu li a ul
    background: # 949494;
    color: # 000000;
    opacity: 1.0;
    Filtre: alpha (opacity = 100);
}

. Menüsünde p {
    clear: left;
}

. Menüsü # geçerli {
    background: top tekrar-x bıraktı;
    color: # ffffff;
}

/ * Den Sona Css Menu http://etralibela-61.blogspot.com/ * /
</ Style>  


<div class="menu">
 <ul>
  <li> <a href="#" id="current"> Ana Sayfa </ a> </ li>
  <li> <a href="#"> Ürünler </ a>
  <ul>
   <li> <a href="#"> Açılır CSS Menüler </ a> </ li>
   <li> <a href="#"> Yatay CSS Menüler </ a> </ li>
   <li> <a href="#"> Dikey CSS Menüler </ a> </ li>
   <li> <a href="#"> Dreamweaver Menüler </ a> </ li>
  </ Ul>
  </ Li>
  <li> <a href="#"> Yardım </ a>
  <ul>
   <li> <a href="#"> Açılır CSS Menüler </ a> </ li>
   <li> <a href="#"> Yatay CSS Menüler </ a> </ li>
   <li> <a href="#"> Dikey CSS Menüler </ a> </ li>
   <li> <a href="#"> Dreamweaver Menüler </ a> </ li>
  </ Ul>
  </ Li>
  <li> <a href="#"> İletişim </ a> </ li>
  <li> <a href = " http://etralibela-61.blogspot.com/ "> Bilgi Cafem 61 </ a> </ li>
 </ Ul>
</ Div>

• Mavi link yerine blogger adresinizin linkini ekleyin,
• Yeşil yazılı olan metin başlıkları yerine sizin istediğiniz başlıkları ekleyin.
• Kırmızı renkdeki yerlere başlık linkleri ekleyecek olduğunuz bölümlerdir.

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