27.8.13

Blog Öğreticileri#2: Bloga Sınır Ekleme

Benim tasarım blogumda olduğu gibi bazı blogspot'un da bize sağlamış olduğu tasarımlarda bir sınır çizgisi mevcuttur ama ne hikmetse bu özelliği beğendiğimiz herhangi bir tasarımda bulamayız. Peki bu durumda ne yapabiliriz? -Tabi kide kodlara sarılırız.

İşte size bu hususta yardım edebilecek blog sınırlarını blogumuza nasıl ekleyebileceğimizi öğreteceğim.

İlk önce sırasıyla şu adımları izliyoruz:

Kumanda Paneli > Şablon > Html Düzenle diyoruz ve ardından çıkan kodların içine bir kere tıklayıp "Ctrl" ve "f" (Ctrl+f) tuşlarına aynı anda basıyoruz.

Kodların sağ üst köşesinde aşılan küçük kutuya " .content-outer { " yazarak kodumuzu aratıyoruz ve kodu bulduktan sonra hemen altına vereceğim kodu ekliyoruz.


Görünüm olarak pembe renkli istiyorsanız bu kodu ekleyin.

border-top: 4px double #FFDEEB;
border-left: 4px double #FFDEEB;
border-right: 4px double 
#FFDEEB;
border-bottom: 4px double #FFDEEB;
background: #FFFFFF;
border-radius:10

Görünüm olarak mavi renkli istiyorsanız bu kodu ekleyin.
border-top: 4px double #DEEEFF;
border-left: 4px double 
#DEEEFF;
border-right: 4px double 
#DEEEFF;
border-bottom: 4px double 
#DEEEFF;
background: #FFFFFF;
border-radius:10


Dikkat: Eğer kalınlığını ayarlamak isterseniz kod içerisindeki "4px" yazan yeri artırırken kenarlık şeklini değiştirmek isterseniz kod içerisindeki "double" yazan yere aşağıdaki kodlardan uygun gördüğünüzü yazabilirsiniz.

Düz Çizgi:  Solid
Kesik-Kesik Çizgi: Dashed
Noktalı Çizgi: Dotted
Çift Çizgi: Double

Dikkat 2: Kenarlık rengini değiştirmek için kod içerisinde renklendirmiş olduğum yerleri şu sitedeki beğendiğiniz rengin kodu ile değiştirebilirsiniz.

Evet, ikinci dersimizde bu kadar. Yeni bir derste buluşmak dileğiyle. Lütfen Yorum Bırakmayı Unutmayın...

12 yorum:

  1. Çok teşekkür ederim paylaşım için, çok faydalı oldu benim için..
    Ben bir konu da danışmak istiyordum size.
    Blog gövdesini resmin yanında yazılar gelecek şekilde nasıl değiştirebiliriz acaba?
    Çok teşekkür ediyorum..
    İyi çalışmalar.

    YanıtlaSil
    Yanıtlar
    1. Resmin yanına yazı eklemek derken neyi kastediyorsunuz acaba? Bana herhangi bir siteden veya resimden örnek verirseniz size yapabileceğim bir şeyse yardımcı olmaya çalışırım.

      Sil
  2. Cevap yazmanıza çok sevindim..
    Buradaki blog görüntüsü gibi olmasını istiyorum ama nasıl yapılacağını bilmiyorum.
    Bu blog

    YanıtlaSil
    Yanıtlar
    1. Aslında burada arkadaş ekstra bir kod kullanmamış. Sadece otomatik olarak devamını ekle özelliği eklediği için bloguna böyle bir durum ortaya çıkmış. Sizde otamatik olarak devamını oku eklerseniz blogunuza ve yazı boyutunu düşürürseniz biraz böyle bir durum çıkacaktır ortaya.

      Sil
    2. Ben de devamını ekle özelliğini kullanıyorum ama bu şekilde olmuyor malesef :(

      Sil
    3. Eğer şu andaki yorum yazdığınız blogu kastediyorsanız benim söylediğim şekilde kullanmıyorsunuz. Devamını Oku özelliğini otamatik hale getirdiğinizde yazılarınız sadece bir resim ve belirlediğiniz kelime sayısınca yayınlanıyor. Ama devamını okuya tıkladığınızda tamamı gözüküyor. Yani siz sadece bir kod ekliyorsunuz ve ondan sonra devamını oku butonuna tıklamadan o kod sizin yerinize devamını oku özelliğini ekliyor ve sonuç olarak istediğiniz gibi görünüyor.

      Sil
    4. Çok güzel anlattınız, çok teşekkür ederim, peki son bir rica bu özelliği nasıl aktif edebilirim?

      Sil
    5. Bu site size yardımcı olacaktır sanırsam. http://bloghocam.blogspot.com/2011/05/blogger-resimli-otomatik-devamn-oku.html

      Sil
    6. Çok ama çok teşekkür ederim yardımlarınız için..

      Sil
    7. Rica ederim. Aklınıza takılan herhangi bir konuda danışabilirsiniz. Eğer bilgim dahilindeyse yardımcı olmaya çalışırım.

      Sil
    8. Çok çok teşekkür ederim, biraz zor oldu ama başardım sayenizde..

      Sil
    9. Ne demek. Ben teşekkür ederim. Yardımcı olabildiysem ne mutlu bana. İyi günlerde kullanın.

      Sil