CSS ile blogunuzu şenlendirin -4

Merhaba arkadaşlar CSS ‘de gaza geldim diyeblirim. :) Önceki yazımda arkaplan remimizi sabir bir hale getimiştik. Küçük ipuçlarıyla blogumuzu şenlendirmeye devam ediyoruz. Bugün sizlere blockquote ile alıntı yaptığımız yazıları birazdaha belirgin bir şekilde okuyucunun hoşuna gideceğini düşündüğüm bir biçime sokacağız.

Blogumdaki blockquote efektini görmüşsünüzdür.  Öncelikle blockquote efektimizin WordPress temamızda  Style.CSS dosyamızı açıyoruz.

Eğer ki  blockquote efektimiz yoksa yani  Stil dosyamızda bu tanımlanmamışsa… Style.css dosyamıza şu kodları ekleyerek güzel bir efekt oluşturabiliriz.

blockquote, pre {
background:#F1F5F6;
border:1px dashed #B0BEC7;
padding:8px 10px;
margin:5px 0;
}

css_margin_paddingBu kodlar içerisindeki      background:#F1F5F6; satırı  alıntı yaptığımız yazıların arka plan renk kodudur. Bu kodu istediğimiz gibi değiştirebiliriz. Farklı bir renk koyup standartların dışına çıkıp kendi temanızı özelleştirebilirsiniz.

Ayrıca hemen alt satırdaki  border:1px kısmı  alıntı yaptığımız yazının etrafındaki çizgi kalınlığı. Eğer bu değeri artırırsanız sizde göreceksiniz çizgi kalınlığıda artacaktır. Yine aynı satırda dashed değeri çizginin rengini belirtiyor.

Gelelim 4. satırımıza padding değeri burada 2 tane değer tanımlı. 8px alıntı yaptığımız yazının çizgi ile mesafesi sol taraftan. 10px değeri ise alıntı yazımızın çizgi ile arasındaki üst boşluk yine kendimize göre bu değerleri değiştirebiliriz. Margin değerimiz yani son satırımızdaki değerlerde ise tam tersi alıntı yazımızın çizgisi ile normal yazılarımız arasındaki sol, sağ ve üst, alt çizgilerin mesafeleridir.  Dilediğiniz gibi değiştirip özelleştirebilirsiniz.

Bu kadar basit.  Kodları CSS dosyanızın içerisine eklediğinizde yada  mevcut CSS dosyamızdaki blockquote değerimizi üstteki kodlarla değiştirdiğimizde Artık alıntı yaptığımız yazılarımız çok daha güzel ve dikkat çekici bir hal alacaktır.

Hadi kolay gelsin…

“CSS ile blogunuzu şenlendirin -4” üzerine 7 yorum

  1. Kafamda Padding ve Margin ile ilgili soru işaretleri vardı. Sayende daha iyi anladım.

    Emeğine sağlık.
    Teşekkürler dostum.

    Cevapla
  2. Bilgiyi ziyaretçilerinle paylaşmak ne kadar güzel bir şey.. Bu siteden öğreneceğimiz daha çok şeyler var.. Bu güzel emeğin için teşekkür ederiz..

    Hayırlı, sağlıklı ve ailenle güzel günler dilerim..

    Batuhan

    Cevapla
  3. Dostum blockquote divinin position değerini değiştir istersen. Google reklamları blockquote divinin üzerine çıkıyor.

    Cevapla
  4. @dontEnter
    Birşey değil dostum yardımcı olabildiğime sevindim.

    @Batuhan
    Teşekkür ederim…

    @Burak Özdemir
    Okuyucular için aslında dikkat çekici oluyor. Zeten Blockquote yapmamızın sebebi bu değil mi ?

    @hakan yamanoglu
    Dostum sanırım Google’nin Javasından üstünde duruyor aşağı aldım ama fark etmedi.

    Cevapla
  5. abi birşey sormak isityorum, nereye yazsam bilemedim kusura bakmayasın…
    benim sitenin hafiften üzerinde ince ayarlar yapmaya çalışıyordum, maksat egomu tatmin ediim :) istediim tarzda bişey olsun istedim…
    mesela küçük bir div açtık ve arka planına da resim ekledik…ama biz bu div’in istediğimiz yerlerinde url eklemesi yapmak istiyoruz..hani facebook’da var ya fotolarda sadece yüze veya kişinin bedeni kısmına tuttuğunda bilgilendirme penceresi çıkıor ya bende bunu belirli yerlerde url eklemek istiyorum…eklemek istediğim yer burası ben burada “anasayfa” yazısına link vercem….cevaplayabilirsen sevinirm…iyi geceler-sabahlar !!

    Cevapla
  6. Merhaba;
    Bende Worpdress kullanıyorum ve yazılarımın içerisinde bol miktarda tablo mevcut.

    Bu tablolar için ben özel bir css yazdım. Bunu temanın style dosyasına koyuyorum ancak tablolarda herhangi bir değişiklik olmuyor. Yazıların içerisine tabloyu ayrı bir css olarak gösterirsem çalışıyor.. ( html içerisnden css çağırıyorum )

    Mevcut tema dosyama nasıl entegre etmeliyim ki tablo gördüğünde otomatik olarak style.css dosyasından tablo özelliklerini görsün..

    Cevapla

Yorum yapın

teakolik hamza şamlıoğlu blog logo

Wordpress altyapısını kullandığımız bu sistem, Sunucu Çözümleri firmasında yüksek performans sağlayan özel sunucularda barındırılmaktadır. Görüntülemek için en iyi Chrome tarayıcı, 1920x1080 çözünürlük ve Full HD Android telefonlarda çalışır. Ayrıca Sitedeki içeriği istediğiniz gibi çarpabilirsiniz. :)