Menü



9.05.2014

Blog Tasarımı | Sidebar (Gadget) Düzenleme



Selamlar Canlar,
Beni takip edenler bilir blog tasarımlarına ve düzenlerine takmış durumdayım bu nedenle kendi tasarımımı kendim yapıyor ve temam bana özgün oluyor. 

Bu postta sizlere benim en çok dikkat ettiğim noktalardan biri olan sidebar tasarımını nasıl yaptığımdan bahsedeceğim.





----
-----
---

Yukarıda gördüğünüz resimleri eğer sizde sidebar tasarımınızda kullanmak isterseniz yapmanız gereken çok basit.


Blogger'a giriyorsunuz oradan Şablon -> HTML'yi düzenle diyorsunuz karşınıza içerisinde blogunuz html kodunun yazılı bir kutucuk karşınıza çıkıyor.




Şimdi CTRL+F diyorsunuz ve .sidebar h2 bu kodu buldukdan sonra aşağıdaki şekilde değiştiryorsunuz. Eğer sizde bu .sidebar h2 yoksa ]]></b:skin>
bu text'i aratıp bunun üzerine aşağıdaki kodu yapıştırıyorsunuz.


.sidebar h2 {
    background:url(RESİM ADRESİ);
    background-repeat: no-repeat;
    background-position:center;
    height:50px;
    margin:0;
    padding:20px 0px 0 0px;
    text-align: center;
    text-transform:uppercase;
}

Resim adresi yazdığım yere eklemek istediğiniz resmin url'ini yapıştırmanız gerekiyor. Bu arada ben resimleri http://postimage.org/ adresine yüklüyorum bu site bana yüklediğim resmin url'ini veriyor.

Sonuçta aşağıdaki gibi bir tasarım ortaya çıkıyor.

Bu post blog tasarımı konusunu anlattığım ilk postum yanlışlarım, hatalarım varsa affola eğer aklınıza takılan bişi olursa mutlaka bana yazın :)

Bu arada yukarıdaki tasarımlardan kullanmak istediğiniz varsa kullanabilirsiniz ^_^

Öpüldünüz.

14 yorum:

  1. Yanıtlar
    1. İşinize yaramasına çok sevindim :)

      Sil
  2. güzel anlatım olmuş klavyenize sağık ;) devamını bekliyoruz takipteyim :))

    YanıtlaSil
    Yanıtlar
    1. Beğenmenize çok sevindim en kısa zamanda devamı gelecek :)

      Sil
  3. Merhabalar. Bende size iadeyi ziyarete geldim:) Faydalı bir yayın olmuş takibe aldım ;)

    YanıtlaSil
    Yanıtlar
    1. Gelmenize çok sevindim teşekkür ederim :)

      Sil
  4. Çok güzel anlatmışsınnn :) Teşekkür ederimmmm :) Ellerine sağlıkkk :)

    YanıtlaSil
    Yanıtlar
    1. Beğenmene çok sevindim canımmm :) Teşekkür ederim :)

      Sil
  5. merhaba bnde ne yazıkkı olmuyor hata verıyor :(

    YanıtlaSil
    Yanıtlar
    1. Aaa ne hatası verdi canım öyle yardımcı olabilirim belki

      Sil
  6. Merhaba.. Kod hata vermedi ama hiç bir değişiklikte olmadı..

    YanıtlaSil
    Yanıtlar
    1. Hanig siteye eklediniz eğer link verirseniz inceleyebilirim.

      Sil
    2. http://bulutlublog.blogspot.com.tr/ buraya eklemiştim

      Sil
    3. oldu çok teşekkür ederim :)))))

      Sil