Blogger Açılır Menü (Dropdown Menu) Oluşturma

Bugün birlikte sade ve kullanışlı bir menü hazırlalayacağız. İlk olarak menünün daha sonra üzerinde çalışacağımız kısmını oluşturacağız.  ...

Bugün birlikte sade ve kullanışlı bir menü hazırlalayacağız. İlk olarak menünün daha sonra üzerinde çalışacağımız kısmını oluşturacağız. 

Blogger Kontrol Paneli >> Yerleşim yolunu izleyerek yeni bir Gadget oluşturacağız. Gadget seçeneklerinden HTML/JavaScript seçeneğini seçeceğiz. 




Açılan pencereye aşağıdaki kodu yapıştıracağız.

<div id='DCSnavbar'> 
 <ul id='DCSnav'> 
 <li> 
 <a href='#'>Anasayfa</a> 
 </li> 
 <li> 
 <a href='#'>Hakkında</a> 
 </li> 
 <li> 
 <a href='#'>İletişim</a> 
 </li> 
 <li> 
 <a href='#'>Site Haritası</a>
 <ul> 
 <li><a href='#'>menu #1</a></li> 
 <li><a href='#'>menu #2</a></li> 
 <li><a href='#'>menu #3</a></li> 
 </ul> 
 </li>
 </ul> 
 </div>

Daha sonra Blogger Kontrol Paneli >> Tema >> HTML'yi düzenle yolunu izliyoruz. Açılan pencerede aşağıdaki kodu arıyoruz.


]]></b:skin> 

Daha sonra bu kodun hemen üstüne aşağıdaki kodu ekliyoruz.


/*----- 2N1K NAVIGATION MENU ----*/
#DCSnavbar { 
 background: #ffffff; 
 width: 960px; 
 color: #000; 
 margin: 0px; 
 padding: 0; 
 position: relative; 
 border-top:0px solid #fff; 
 height:35px;
}

#DCSnav { 
 margin: 0; 
 padding: 0; 
} 
#DCSnav ul { 
 float: left; 
 list-style: none; 
 margin: 0; 
 padding: 0; 
} 
#DCSnav li { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 border-left:0px solid #333; 
 border-right:0px solid #333; 
 height:35px; 
} 
#DCSnav li a, #DCSnav li a:link, #DCSnav li a:visited { 
 color: #000; 
 display: block; 
 font:bold 12px Arisl, sans-serif; margin: 0; 
 padding: 9px 12px 10px 12px; 
 text-decoration: none; 
 
} 
#DCSnav li a:hover, #DCSnav li a:active { 
 background: #BF0100; 
 color: #FFF; 
 display: block; 
 text-decoration: none; 
 margin: 0; 
 padding: 9px 12px 10px 12px; 
 
 
 
}
#DCSnav li { 
 float: left; 
 padding: 0; 
} 
#DCSnav li ul { 
 z-index: 9999; 
 position: absolute; 
 left: -999em; 
 height: auto; 
 width: 160px; 
 margin: 0; 
 padding: 0; 
} 
#DCSnav li ul a { 
 width: 140px; 
} 
#DCSnav li ul ul { 
 margin: -25px 0 0 161px; 
} 
#DCSnav li:hover ul ul, #DCSnav li:hover ul ul ul, #DCSnav li.sfhover ul ul, #DCSnav li.sfhover ul ul ul { 
 left: -999em; 
} 
#DCSnav li:hover ul, #DCSnav li li:hover ul, #DCSnav li li li:hover ul, #DCSnav li.sfhover ul, #DCSnav li li.sfhover ul, #DCSnav li li li.sfhover ul { 
 left: auto; 
} 
#DCSnav li:hover, #DCSnav li.sfhover { 
 position: static; 
}
#DCSnav li li a, #DCSnav li li a:link, #DCSnav li li a:visited { 
 background: #fff; 
 width: 120px; 
 color: #000; 
 display: block; 
 font:bold 12px Arial, sans-serif; 
 margin: 0; 
 padding: 9px 12px 10px 12px; 
 text-decoration: none; 
z-index:9999; 
border-bottom:1px dotted #333;
 
} 
#DCSnav li li a:hover, #DCSnavli li a:active { 
 background: #BF0100; 
 color: #FFF; 
 display: block; margin: 0; 
 padding: 9px 12px 10px 12px; 
 text-decoration: none; 
}


Menümüz hazır. Linkleri oluşturduğumuz gadget üzerinden, renkleri ise temel blog kodlarına eklediğimiz kodlar üzerinden güncelleyebilirsiniz. 
Ad

Advanced Excel,6,Blogger Eklentileri,7,Blogger JS,2,Blogger SEO,1,CSS,1,Excel,10,Grafik,1,HDCP,1,istatistik,10,Lifehack,3,Photoshop,1,Rehber,2,Teknik Servis,1,Tools,10,Veri Analizi,10,web,15,
ltr
item
rakamlar.net: Blogger Açılır Menü (Dropdown Menu) Oluşturma
Blogger Açılır Menü (Dropdown Menu) Oluşturma
https://2.bp.blogspot.com/-6pwLjsuspZo/WrbuYuaa4JI/AAAAAAAADpM/K6N0D9wPGlQ1eJbkagvO8kKlf248vuz8ACLcBGAs/s320/Ekran%2BResmi%2B2018-03-25%2B03.33.11.png
https://2.bp.blogspot.com/-6pwLjsuspZo/WrbuYuaa4JI/AAAAAAAADpM/K6N0D9wPGlQ1eJbkagvO8kKlf248vuz8ACLcBGAs/s72-c/Ekran%2BResmi%2B2018-03-25%2B03.33.11.png
rakamlar.net
https://www.rakamlar.net/2018/03/blogger-acilir-menu-dropdown-menu.html
https://www.rakamlar.net/
https://www.rakamlar.net/
https://www.rakamlar.net/2018/03/blogger-acilir-menu-dropdown-menu.html
true
2335151254058832000
UTF-8
Loaded All Posts Bulunmadı Hepsini Gör Devamını Oku Reply Cancel reply Delete By Ana Sayfa Sayfalar POSTS View All RECOMMENDED FOR YOU KONU Arşiv ARA ALL POSTS Bu konuda daha önce yazmadık. Ana Sayfa Pazar Pazartesi Salı Çarşamba Perşembe Cuma Cumartesi Paz Pzts Salı Çar Per Cum Cmrts Ocak Şubat Mart Nisan Mayıs Haziran Temmuz Ağustos Eylül Ekim Kasım Aralık Oca Şub Mar Nis Mayıs Haz Tem Ağu Eyl Eki Kas Ara şimdi 1 dakika önce $$1$$ dakika önce 1 saat önce $$1$$ saat önce Dün $$1$$ gün önce $$1$$ hafta önce 5 haftadan daha önce Takipçiler Takip Et THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy