CSS Açılır Menü Nasıl Yapılır.
Bu menüyü özel yapan özelliklerden bahsetmek gerekirse; basit menü öğelerinin yanı sıra tek sütunlu ve 2 sütunlu açılır öğeler ekleyebiliyorsunuz.
Güzel tarafı ise tüm bunları Jquery veya Java Script’e ihtiyaç duymadan sadece CSS ile yapabilmemiz.Daha iyi anlamak için oluşturduğum videoyu izleyebilirsiniz.
Şimdi gelelim bu menüyü blogunuza nasıl ekleyeceğinize.Öncelikle Blogger kumanda panelinize giriş yaptıktan sonra Şablon > HTML’yi Düzenle > Devam Et yolunu izleyerek Ctrl+F tuş kombinasyonunu kullanarak <head> kodunu bulun.Bu kodun hemen altına aşağıdaki kodu ekleyin.
<link href='https://googledrive.com/host/0BxxMpDce-fNUSS1wdGF6NnpDeG8' rel='stylesheet'/>
Sırada HML kodlarını eklemek var.Eklemeniz gereken HTML kodları şunlar:
__________________________________________________________________________
<ul class='menu'>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/'>Ana Sayfa</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/hakkmda.html'>Hakkımda</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/iletisim.html'>İletişim</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/arsiv.html'>Arşiv</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/takip-et.html'>Takip Et</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/destek-ol.html'>Destek Ol</a></li>
<li><a class='drop' href='#'>Kategoriler</a>
<div class='dropdown_1column'>
<div class='col_1'>
<ul>
<li><a href='http://kalpsizyazar.blogspot.com.tr//search/label/Blog%20Ara%C3%A7lar%C4%B1'>Blog Araçları</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blog%20Makaleleri'>Blog Makaleleri</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blog%20Temelleri'>Blog Temelleri</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blog%20%C4%B0pu%C3%A7lar%C4%B1'>Blog İpuçları</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blogger%20Eklentileri'>Blogger Eklentileri</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blogger%20%C4%B0pu%C3%A7lar%C4%B1'>Blogger İpuçları</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blogger%20%C5%9Eablonlar%C4%B1'>Blogger Şablonları</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Misafir%20Yaz%C4%B1lar'>Miasfir Yazılar</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/SEO'>SEO</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Sosyal%20Medya'>Sosyal Medya</a></li>
</ul>
</div></div></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/'>Ana Sayfa</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/hakkmda.html'>Hakkımda</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/iletisim.html'>İletişim</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/arsiv.html'>Arşiv</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/takip-et.html'>Takip Et</a></li>
<li class='no_drop'><a href='http://kalpsizyazar.blogspot.com.tr/p/destek-ol.html'>Destek Ol</a></li>
<li><a class='drop' href='#'>Kategoriler</a>
<div class='dropdown_1column'>
<div class='col_1'>
<ul>
<li><a href='http://kalpsizyazar.blogspot.com.tr//search/label/Blog%20Ara%C3%A7lar%C4%B1'>Blog Araçları</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blog%20Makaleleri'>Blog Makaleleri</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blog%20Temelleri'>Blog Temelleri</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blog%20%C4%B0pu%C3%A7lar%C4%B1'>Blog İpuçları</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blogger%20Eklentileri'>Blogger Eklentileri</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blogger%20%C4%B0pu%C3%A7lar%C4%B1'>Blogger İpuçları</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Blogger%20%C5%9Eablonlar%C4%B1'>Blogger Şablonları</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Misafir%20Yaz%C4%B1lar'>Miasfir Yazılar</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/SEO'>SEO</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/search/label/Sosyal%20Medya'>Sosyal Medya</a></li>
</ul>
</div></div></li>
<li><a class='drop' href='#'>Araçlar</a>
<div class='dropdown_2columns'>
<div class='dropdown_2columns'>
<div class='col_1'>
<h3>Google Araçları</h3>
<ul>
<li><a href='http://www.google.com/reader'>Google Reader</a></li>
<li><a href='http://www.google.com/analytics/'>Google Analytics</a></li>
<li><a href='http://www.google.com/intl/tr/webmasters/'>Google Webmasters</a></li>
</ul>
</div>
<h3>Google Araçları</h3>
<ul>
<li><a href='http://www.google.com/reader'>Google Reader</a></li>
<li><a href='http://www.google.com/analytics/'>Google Analytics</a></li>
<li><a href='http://www.google.com/intl/tr/webmasters/'>Google Webmasters</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Çeşitli</h3>
<ul>
<li><a href='http://kalpsizyazar.blogspot.com.tr/'>Sementit</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html'>Misafir Blogculuk</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/2012/08/size-kazancl-bir-teklifim-var.html'>İkili Kazanç </a></li></ul>
</div>
<h3>Çeşitli</h3>
<ul>
<li><a href='http://kalpsizyazar.blogspot.com.tr/'>Sementit</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html'>Misafir Blogculuk</a></li>
<li><a href='http://kalpsizyazar.blogspot.com.tr/2012/08/size-kazancl-bir-teklifim-var.html'>İkili Kazanç </a></li></ul>
</div>
<div class='col_1'>
<h3>Sosyal Medya</h3>
<ul>
<li><a href='http://www.facebook.com/kalpsizyazar'>Facebook</a></li>
<li><a href='https://twitter.com/kalpsizyazar'>Twitter</a></li>
<li><a href='https://plus.google.com/kalpsizyazar'>Google+</a></li>
</ul>
</div>
<h3>Sosyal Medya</h3>
<ul>
<li><a href='http://www.facebook.com/kalpsizyazar'>Facebook</a></li>
<li><a href='https://twitter.com/kalpsizyazar'>Twitter</a></li>
<li><a href='https://plus.google.com/kalpsizyazar'>Google+</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Linkler</h3>
<ul>
<li><a href='http://ush.re/8za7'>Hürlist</a></li>
<li><a href='http://ush.re/7uz2'>Yazar Kafe</a></li>
<li><a href='http://ush.re/wzcr'>Hürriyet</a></li>
</ul>
</div></div></li></ul>
<h3>Linkler</h3>
<ul>
<li><a href='http://ush.re/8za7'>Hürlist</a></li>
<li><a href='http://ush.re/7uz2'>Yazar Kafe</a></li>
<li><a href='http://ush.re/wzcr'>Hürriyet</a></li>
</ul>
</div></div></li></ul>
________________________________________________________________________
Asıl önemli nokta bu HTML kodlarını nereye ekleyeceğiniz.Blogger’ın kendi temalarından
birini kullananlarla özel bir tema kullananlar için faralı iki seçenek mevcut.
1. Blogger’ın kendi temalarından birini kullanıyorsaız HTML kodlarını <div class='tabs-outer'> kodnun hemen üstüne ekleyin.
2. Özel bir Blogger teması kullanıyorsanız HTML kodlarını <div id='content-wrapper'> kodunun hemen altına ekleyin.
Menüyü nasıl düzenleyeceğinizle ilgili detaya girmiyorum.Kodlardaki isimleri ve linkleri
kendi linklerinizle değiştirin yeter.Takıldığınız yerleri yorum bölümünden sorabilirsiniz
kendi linklerinizle değiştirin yeter.Takıldığınız yerleri yorum bölümünden sorabilirsiniz
0 yorum:
Yorum Gönder