Blogger

Blogger CSS Açılır (Dropdown) Menü Nasıl Oluşturulur ?

Şık ve sade olan bir Blogger CSS açılır dropdown menü nasıl yapılır ? Resimde gördüğünüz gibi sade, şık ve oldukça güzel duran bir açılır menü nasıl oluşturup Blogger’a eklenir adım adım gösteriyoruz.

Böyle bir menüyü ne yazık ki Blogger içerinde bize sunulan ücretsiz temalar ya da ayarlarla oluşturamıyoruz. Ancak kodlanmış bir menüyü sitemize entegre ederek kendimize özel tasarımlar oluşturmak mümkün.

Neden Blogger Kullanmalıyız ?

Blogger başlangıç düzeyindeki kişiler için hem ücretsiz hem de kolay arayüzü ile cazip geliyor. Fakat bazı noktalarda temelde bize sunduğu özellikler yetersiz kalıyor elbette. Teknik kod bilginiz var ise tabiki tasarımsal değişiklikler yapabilirsiniz. Bunun yanı sıra Blogger için kodlar, temalar, ve özel isteklerinize göre ücretli çalışma yapanlar var. Blogger bu konularda yetersiz kalıyorsa ve artık daha profesyonel bir aşamaya geçmek istiyorsanız WordPress geçmenizin vakti gelmiştir. Bu ücretli ve yanı sıra bilmiyorsanız da uğraştırıcı bir iştir. WordPress web site kurmak için gerekli olan ürünler biraz tuzlu gelebilir, daha iyi bir görünüm ve memnun ziyaretçilere sahip olmak gerekbilir. Blogger için bu tarz şeylere aslında para harcamanıza gerek yok çünkü internetde oldukça fazla ücretsiz kaynak oldukça çok. Biz de bugün Blogger CSS açılır (dropdown) menü nasıl oluşturulur bunu ücretsiz ve detaylı olarak size anlatacağız.

Blogger CSS Açılır (Dropdown) Menü Nasıl Eklenir ?

İlk olarak kontrol panelimizden “Düzen” sekmesine geliyoruz.

Daha sonra temanızın header bölümünü etkileyecek şekilde bir yere “Gadget Ekle” diyoruz. Gadget olarak HTML/JavaScript seçeneğini seçerek aşağıdaki kodu İçerik alanına ekliyoruz.

<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='#'>Kategoriler</a>
 <ul> 
 <li><a href='#'>Kategori 1</a></li> 
 <li><a href='#'>Kategori 2</a></li> 
 <li><a href='#'>Kategori 3</a></li> 
 </ul> 
 </li>
 </ul> 
 </div>

Yukarıdaki kodları ekledikten sonra düzen sekmesinde işimiz bitiyor. Sonraki adımda “Tema” sekmesinden “HTML’yi Düzenle” seçeneğine tıklıyoruz. Karşımıza temamızın tüm kodları gelecektir.

Bu sayfadayken CTRL+F ile arama barı çağırıyoruz. Bu sayede bir sonraki kodu eklememiz gereken yeri daha kolay bulabileceğiz.

Arama ile aşağıdaki kodu aratıp buluyoruz:

 ]]></b:skin> 

Bu bulduğumuz kodun bir satır yukarısına aşağıdaki CSS kodlarını eklyoruz.

/*----- 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;
}

Nasıl Özelleştireceğiz ?

Blogger CSS açılır (Dropdown) menümüz hazır. Sitenizi ziyaret ederek kontrol edebilirsiniz. Menüdeki linkleri, yazıları ve açılır sekmeleri Gadget ile eklediğimiz kodları düzenleyerek değiştirebilirsiniz. Menünün tasarımını ve renklerini ise temanın temel kod bölümüne eklediğimiz CSS kodlarını düzenleyerek değiştirebilirsiniz. Takıldığınız yerleri, sorularınızı ve geri bildirimlerinizi yorum ekleyerek yapabilirsiniz.

Web Blogu

Web Blogu - Web içerik paylaşım blogu. Yönetici, Editör.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu