Blog’unuz için sabit yan menü yapın

2010-02-07_090747_thumb[4]Navigasyon bir blog için çok önemlidir ziyaretçileriniz blog’unuzda kolaylıkla gezinebilmek için oluşturduğunuz menülerden yaralanırlar.

Blog’unuza yerleştireceğiniz sürekli görünen ve sayfanızla birlikte hareket eden Sabit bir yan menü yardımı ile sayfayı kolayca yukarı kaydırmak ana sayfaya dönmek için oluşturabileceğiniz bir bağlantının yanında  başka çeşitli bağlantılar oluşturmak için kullanabilirsiniz.

 

 I.Adım

 

     HTMLyi-Düzenle

 

Blog’unuzun Kumanda paneliYerleşimHTML’yi düzenle kısmına giderek aşağıdaki ↓ kodu bulun.

 

]]></b:skin> 

 

[Klavyedeki Ctrl +F tuşuna basarak açılan arama formunda Kodu aratarak daha hızlı bir şekilde bulabilirsiniz]  Her hangi bir aksiliğe karşı bu işlemlere başlamadan önce şablonunuzu yedeklemeyi de unutmayın.

 

Aşağıda bulunan kodları ↓ kopyalayarak üstteki kodun ↑ hemen üstüne gelecek şekilde yapıştırın.

 

CSS Kodu.

 

#sidemenu{ position:fixed; text-align:left; /*If the menu location is not ok, modify the next values */ margin-top:100px; margin-left:-28px; } * html #sidemenu{ /*for IE*/ position:absolute; } #sidemenu a img{ opacity:1; -moz-opacity:1; filter:alpha(Opacity=100); } #sidemenu a:hover img{ opacity:0.8; -moz-opacity:0.8; filter:alpha(Opacity=80); position:relative;top:0px;left:2px; } * html #sidemenu a img{ filter:alpha(Opacity=100); } #sidemenu img{ margin-bottom: -5px; } * html .sidemenu{ margin-bottom: -3px; }

 

….bu işlemler bittiğinde böyle  görünecek.

 yan-menü-css

 

 

II.Adım

 

Şimdide blog’unuzun HTML kodları arasında bu kodu bulun

 

<div id='content-wrapper'>

 

 

Aşağıda bulunan kodları ↓ kopyalayarak üstteki kodun ↑ hemen altına gelecek şekilde yapıştırın.

 

HTML Kodu.

 

<div id='sidemenu'>
<span> <a href=' http://Blogadresiniz.blogspot.com/ ' style='border:0;' title='Beggining'><img alt='Beggining' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya1AI/AAAAAAAABoI/6EXVwJ-0xxc/s1600/menu-lateral-inicio.png'/></a>
<br/><a href='Facebook ' style='border:0;' title='File'><img alt='File' src='http://bp2.blogger.com/_Zuzii37VUO4/RlpT2Jya08I/AAAAAAAABno/fEetH56Ftgw/s1600/menu-lateral-archivo.png'/></a>
<br/><a href='Twitter' style='border:0;' title='Contact'><img alt='Contact' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0-I/AAAAAAAABn4/F5Ax7A_8rLA/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://BLOGADRESİNİZ.blogspot.com/feeds/posts/default' style='border:0;' title='Subscribe our Feed'><img alt='Subscribe our Feed' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0_I/AAAAAAAABoA/HgSHFryV6kc/s1600/menu-lateral-feed.png'/></a>
<br/><a href='#' style='border:0;' title='Yukarı'><img alt='Yukarı' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya09I/AAAAAAAABnw/38HqImjH21E/s1600/menu-lateral-arriba.png'/></a> </span>
</div>

 

 

….bu işlemler bittiğinde böyle  görünecek.

 

 

side-menu-html-kodu

 

 

Son olarak kırmızı ile belirtilen alanlara kendi bilgilerinizi girmeniz gerekiyor.

Paylaş !

8 yorum:

  1. bende 2. kod bulunamıyor ne yapmalıyım?

    YanıtlaSil
  2. HTMLyi düzenle sayfasında Widget Şablonlarını Genişlet yazan seçeneği işaretleyip [ Klavyedeki Ctrl +F tuşuna aynı anda basarak açılan arama formunda Kodu aratarak daha hızlı bir şekilde bulabilirsin ]

    Farzedelim ki bu işlemleri uyguladığın halde kodu bulamıyorsun o zaman 2. Adımda bulunan kodları HTML/Javascrip Gadget olarak eklemeyi deneyebilirsin sanırım bu şekildede işe yarıyacaktır..

    YanıtlaSil
  3. Tayfun, ne yazıkki bütün codlara tek tek bakmama rağmen sölediğin 2. codu bulamadım. Bu arada Mac kullanıcıyım ve söylediğin kısa yolu kullandığım zamanda herhangi birşey olmuyor. Gadget olarak ekledim ama sayfanın sağında çok saçma görsel olarak hoş durmayan biryerde duruyor. Çözüm olarak ne diyorsun. Birde görüntü yukardaki gibi Facbook ve Twiter butonlarını içermiyor.

    YanıtlaSil
  4. Sanırım bunun senin işletim sisteminle ilgisi olduğunu sanmıyorum bir kaç gün beklersen daha iyi bir kaç örneği kod arama gerek kalmadan ekleyebimeni sağlayacak yeni uygulmaları tanıtacağız.

    YanıtlaSil
  5. bunu çok güxel yaptım ve gayet memnumum saolasın fakat birde sitenin sağ tarafına yapmak istiyorum yardımcı olursan sevinirim

    YanıtlaSil
  6. işte bu bolumun ıkıncı adımını yapamadım olmuyor..

    YanıtlaSil
  7. @makbule gülçin aydın bunu gadget olarak eklemiyeceksiniz Blog’unuzun Kumanda paneli → Yerleşim → HTML’yi düzenle kısmına giderek <div id='content-wrapper'> yazan kodun hemen altına gelecek şekilde ekleyin.


    kodu bulamıyorsanız veya hata mesajı veriyorsa biraz beklerseniz blogunuza ekleyebileceğiniz bir gadget haline getirebilirim.

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz