Blogger İçin CSS3 Açılır Multi Level Menü

1. Blogger hesabınıza giriş yapın.
2. Kumanda Paneli> Yerleşim> Gadget ekle yolunu izleyin.
3. Açmış olduğunuz gadgetin içine aşağıdaki kodları ekleyin.
4. Alttaki resimde ki gibi Blogger site adınızın altındaki gadget'i seçin.
5. Bu özelliği kullanabilmeniz için blogger'in klasik veya basit temalarından birini kullanmanız gerekir.

<style>
# Nav {
    margin: 0;
    padding: 7PX 6px 0;
    background: # 7d7d7d url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7OgU3GNYQWPxq-QFeCsjUDIoWb2X9kXnXKh7hkt_JAAuEPGfUwrLvr42Z2ybtfpYJ2c1ZF_LUhqMmhU_cL8EPi_DfNPlVGIsNgWqe5-G7LBU7ZyLY9Av6Nhg5TXMBAXSVJVMYWIssKkc/s1600/hb-gradient.png) repeat-x 0-110px;
    line-height: 100%;
    border-radius: 2em;
    -Webkit-border-radius: 2em;
    -Moz-border-radius: 2em;
    -Webkit-box-shadow: 0 1px 3px rgba (0,0,0, .4);
    -Moz-box-shadow: 0 1px 3px rgba (0,0,0, .4);
    width: 100%
}

# Nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    font-family: Calibri;
}


/ * Ana düzey bağlantısı * /
# {A nav
    font-weight: bold;
    color: # e7e5e5;
    text-decoration: none;
    display: block;
    padding: 20px 8px;
    margin: 0;
    -Webkit-border-radius: 1.6em;
    -Moz-border-radius: 1.6em;
    text-shadow: 1px 1px 0 rgba (0,0,0, .3);
}

# Nav a: hover {
    background: # 000;
    color: # fff;
}

/ * Ana düzey bağlantı hover * /
. # Nav akım, # nav li: hover> a {
    background: # 666 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7OgU3GNYQWPxq-QFeCsjUDIoWb2X9kXnXKh7hkt_JAAuEPGfUwrLvr42Z2ybtfpYJ2c1ZF_LUhqMmhU_cL8EPi_DfNPlVGIsNgWqe5-G7LBU7ZyLY9Av6Nhg5TXMBAXSVJVMYWIssKkc/s1600/hb-gradient.png) repeat-x 0-40px;
    color: # 444;
    border-top: 1px solid # f8f8f8;
    -Webkit-box-shadow: 1px 1px 0 rgba (0,0,0, .2);
    -Moz-box-shadow: 1px 1px 0 rgba (0,0,0, .2);
    box-shadow: 1px 1px 0 rgba (0,0,0, .2);
    text-shadow: 1px 0 0 rgba (255,255,255, 1);
}

/ * Alt seviyeleri * / hover bağlantı
# Nav ul li: hover li a {: a, # nav li hover
    background: none;
    border: none;
    color: # 666;
    -Webkit-box-shadow: none;
    -Moz-box-shadow: none;
}

# Nav ul a: hover {
    background: # 0078ff url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7OgU3GNYQWPxq-QFeCsjUDIoWb2X9kXnXKh7hkt_JAAuEPGfUwrLvr42Z2ybtfpYJ2c1ZF_LUhqMmhU_cL8EPi_DfNPlVGIsNgWqe5-G7LBU7ZyLY9Av6Nhg5TXMBAXSVJVMYWIssKkc/s1600/hb-gradient.png) repeat-x 0-100px önemlidir;
    color: # fff önemlidir;
    -Webkit-border-radius: 0;
    -Moz-border-radius: 0;
    text-shadow: 1px 1px 0 rgba (0,0,0, .1);
}

/ * Açılan * /
# Nav li: hover> ul {
    display: block;
}

/ * 2. seviye listesi * /
# Nav ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    Sol: 0;
    background: # ddd url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7OgU3GNYQWPxq-QFeCsjUDIoWb2X9kXnXKh7hkt_JAAuEPGfUwrLvr42Z2ybtfpYJ2c1ZF_LUhqMmhU_cL8EPi_DfNPlVGIsNgWqe5-G7LBU7ZyLY9Av6Nhg5TXMBAXSVJVMYWIssKkc/s1600/hb-gradient.png) tekrar-x 0 0;
    border: 1px solid # b4b4b4;
    -Webkit-border-radius: 10px;
    -Moz-border-radius: 10px;
    border-radius: 10px;
    -Webkit-box-shadow: 0 1px 3px rgba (0,0,0, .3);
    -Moz-box-shadow: 0 1px 3px rgba (0,0,0, .3);
    box-shadow: 0 1px 3px rgba (0,0,0, .3);
}

# Nav ul li {
    şamandıra: none;
    margin: 0;
    padding: 0;
}

# Nav ul a {
    font-weight: normal;
    text-shadow: 1px 0 0 # fff;
}

/ * Seviye 3 + listesi * /
# Nav ul ul {
    Sol: 181px;
    top:-3px;
}

İlk ve son bağlantının / * yuvarlatılmış köşeler * /
# Nav ul li: first-child> a {
    -Webkit-border-top-left-radius: 9px;
    -Moz-border-radius-topleft: 9px;
    -Webkit-border-top-right-radius: 9px;
    -Moz-border-radius-TopRight: 9px;
}

# Nav ul li: last-child> a {
    -Webkit-border-bottom-left-radius: 9px;
    -Moz-border-radius-bottomleft: 9px;
    -Webkit-border-bottom-right-radius: 9px;
    -Moz-border-radius-bottomright: 9px;
}

/ * Clearfix * /
# Nav: {sonra
    içerik: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

# Nav {
    display: inline-block;
}

html [xmlns] # nav {
    display: block;
}

* Html # nav {
    height: 1%;
}
</ Style>
<ul id="nav">
  <li>
            <A href = " http://etralibela-61.blogspot.com/"> Ana Sayfa </ a>
        </ Li>
        <li>
            <a href="#"> Klasör 0 </ a>
            <ul>
                <li>
                    <a href="#"> Sub Item 1.1 </ a>
                </ Li>
                <li>
                    <a href="#"> Sub Item 1.2 </ a>
                </ Li>
            </ Ul>
        </ Li>
        <li>
            <a href="#"> Klasör 1 </ a>
            <ul>
                <li>
                    <a href="#"> Sub Item 1.1 </ a>
                </ Li>
                <li>
                    <a href="#"> Sub Item 1.2 </ a>
                </ Li>
            </ Ul>
        </ Li>
        <li>
            <a href="#"> Ürün 3 </ a>
        </ Li>
        <li>
            <a href="#"> Klasör 2 </ a>
            <ul>
                <li>
                    <a href="#"> Sub Item 2.1 </ a>
                </ Li>
            </ Ul>
        </ Li>
        <li>
            <A href = " http://etralibela-61.blogspot.com/"> Bu oluşturun </ a>
        </ Li>
    </ Ul>

• Mavi link yerine kendi blogger sitenizin linkini ekleyin.
• Yeşil yazılı metin yerine ekliyecek olduğunuz başlık kısımlarıdır.
• Turuncu yazılı olan yerler başlık kısımlarıdır.
• Kırmızı (#) olan yerlere buton başlık linkleri ekliyecek olan kısımdır.

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