21 Ocak 2013 Pazartesi

Klasik Yazı Başlıklarından Sıkıldınız Mı?

40 yorum

2012 yılında yaptığım tema değişikliğinden bir süre tasarımda bazı güncellemeler yapmaya başladım.Bunlardan biri de yazı başlıklarına verdiğim stildi. Nasıl yaptığımı soran birkaç arkadaşla paylaşmıştım ama düşündüm ki klasik yazı başlıklardan sıkılan başka blogcular da olabilir. Onlar için hem kendi kullandığım yazı başlığını stilini, hem de alternatif 3 stili paylaşmak istiyorum.

 

Aşağıda her bir stile ait örnek görüntü ve kodlar göreceksiniz. İstediğiniz stile ait kodları Blogger kumanda panelinize girip  Şablon > HTML’yi Düzenle dedikten sonra Ctrl+F tuş kombinasyonu yardımıyla kolayca bulabileceğiniz ]]></b:skin> kodunun üstüne ekleyeceksiniz.

 

Yazı Başlığı Stil 1

Yazı başlığı stil 1

.post-title  {
font-size: 24px;
padding: 5px;
color: #fff;
text-shadow: 1px 1px 1px #333;
background: #E3BC50;
border-left: 20px solid #B9942D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height: 1;
}

 

 

Yazı Başlığı Stil 2

 

Yazı başlığı stil 2

.post-title  {
background: url("http://3.bp.blogspot.com/-gLnHp4LoL-Q/T-hYlORTm3I/AAAAAAAAA0s/IN1bvxW-hwg/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}

 

 

Yazı Başlığı Stil 3

Yazı başlığı stil 3

.post-title  {
font-size:24px; text-shadow: 0 -1px #00468C,
1px 0 #00468C,
0 1px #00468C,
-1px 0 #00468C; color:#ff0000;font-family:verdana;
}

 

 

Blog Hocam’da Kullandığım Stil

Blog Hocam Yazı başlığı stili

.post-title  {
font-size:26px;
  line-height:1.2em
  margin:0 0 10px 0;
text-shadow: 0.02em 0.02em 0.17em #4f5458;
margin-bottom:8px;
color:#000;
}

 

 

Tüm kodlardaki renkleri ve yazı boyutlarını değiştirerek kendi stilinizi de yaratabilirsiniz. Faydalı olması dileğiyle.

 

İyi bloglamalar…

40 yorum:

  1. çok teşekkürler ilk stil tamda blogumun temasına uygun oldu...

    YanıtlaSil
  2. harikasınız.Tamda aradığım bir özellikti.Çok teşekkürler

    YanıtlaSil
  3. Hocam çok teşekkür ediyorum çok yararlı bi konu

    YanıtlaSil
  4. Hocam peki yazı fontunu nasıl değiştirebiliriz bunun hakkında kısa bi bilgi verebilirmisiniz ?

    YanıtlaSil
  5. @By.GeNeBeN
    Parantezi kapatmadan önce font-famil:fontismi kodunu ekleyerek yazı tipini değiştirebilirsiniz.

    YanıtlaSil
  6. Değiştirdim ancak üstüne gelmezsem siyah duruyor bir bakar mısınız neyi yanlış yaptım 3. stilde?

    YanıtlaSil
  7. @oylesine biri
    Şablonda .post h3 şeklinde bir başlık tanımı olabilir. Onun içerisindeki renk kodunu kaldırıp deneyin.

    YanıtlaSil
  8. Teşekkürler Serdar abi sağolasın (:

    YanıtlaSil
  9. Color 00000 kısmını sildim ama yine aynı?

    YanıtlaSil
  10. sementit temanızda olmuyor sanırım bu hocam

    YanıtlaSil
  11. teşekkürle.kullanmayı becerebilirsem süper olacak:))

    YanıtlaSil
  12. @oylesine biri
    .pos h3 ve .post h3 a:hover gibi kodlar da olabilir. Onlardaki renkleri de kaldırın.

    @Alaattin Selen
    Tüm temalarda olur.

    @Alanay yıldırım
    Takıldığınız yerde yardımcı olmaya çalışırım.

    YanıtlaSil
  13. Serdar abi peki herhangi bir yazının içerisinde başlık olarak kullanabilir miyiz ? ve bunu nasıl yapabiliriz ? Yani konu yazdım maddeler halinde başlıklar yazıyorum içerisine ve bu başlıklar stil3 de ki gibi olsun istiyorum mesela ?

    YanıtlaSil
  14. teşekkürler serdar bey

    YanıtlaSil
  15. Aradığım bir yazı stiliydi.sağol kardeş.

    YanıtlaSil
  16. @Gürkan Bilgisu
    KOdu şablona .post-title olarak değilde h4 olarak ekledikten sonra yazının HTML bölümüne şu şekilde yaz:

    <h4>Yazı başlığı</h4>

    YanıtlaSil
  17. çok güzel faydalı bir konu olmuş teşekkürler.

    YanıtlaSil
  18. Teşekkürler Serdar abi çok şık durdu.

    YanıtlaSil
  19. onu da sildim bu sefer üstüne gelince de pembe olmuyor simsiyah oldu:(

    YanıtlaSil
  20. Hocam peki bişey sorucam bunları widget başlıklarındada kullanmak mümkün mü örnek vermek gerekirse kelimelerbenim.com sitesindeki widget başlıkları resim ile oluşturulmuş ve çok hoş bir görünüm sağlanmış blogumun tasarımında en çok yapmak istediğim değişikliklerin başında geliyor bu.

    YanıtlaSil
  21. merhaba
    Şablonu bloguma ekledim ancak Türkçe karakter sorununu nasıl çözebilirim.?

    teşekkürler .. iyi yayınlar

    YanıtlaSil
  22. @oylesine biri
    Siz en iyisi .post h3 classlarının içine burada beğindiğiniz classın içerisindeki kodları ekleyin. Olmazsa iletişimden yazın, oradan yardımcı olayım.

    @Gürkan Barış Zencirci
    .sidebar h2 yada h3 şeklindeki sınıfın içerisinde bu stillerden brini ekleyebilirsin.

    @şevket koray
    Bu kodlar fontlarda türkçe karakter sorunu oluşturmaz.

    YanıtlaSil
  23. allah razı olsun çok güzel emeğinize nasıl karşılık verilir bilinmez gerçekten harika bir görüntü oldu çok değiştirdi görselliği yaptığım başlıklar

    YanıtlaSil
  24. uzun zamandır buraya bakmıyordum ama yine işime çok yarayan bir konu buldum, teşekkür ederim :)

    YanıtlaSil
  25. herşey tamamda küçük harf kodları hangileri büyük harf şekilsiz oldu

    YanıtlaSil
  26. sorduğum sordum beklemeden cvbı buldum paylaşayım sizde zahmet çekmeyin :)

    text-transform: capitalize;

    Aşağıdaki değerleri alarak metnin gösterilme biçimini belirler.
    none : Metin değiştirilmez. (Varsayılan değer)
    capitalize : Metindeki her kelimenin ilk harfi büyük gösterilir.
    uppercase : Metindeki tüm harfler büyük gösterilir.
    lowercase : Metindeki tüm harfler küçük gösterilir.

    herşey için tşk
    kolay gelsin

    YanıtlaSil
  27. anasayfadaki postların yazı boyutlarını nasıl ayarlıyorduk kodu bulamadım.

    YanıtlaSil
  28. @korbakor
    body {font-size:16px;}

    YanıtlaSil
  29. hocam @font-face in blogger da kullanımınıda anlatsanız süper olur.

    YanıtlaSil
  30. Sitenizdeki yazıları çerçeve içine alma ile bu kod çalışmıyor hocam.Bu iki koda ihtiyacım var. Yapılacak birşey var mıdır ?

    YanıtlaSil
  31. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  32. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  33. önce oldu sonra yine olmadı. ama Bloggera girince Şablona tıklayınca "özelleştir" üstünde çıkan görüntüde görünüyor ama blogta görünmüyor *-*

    YanıtlaSil
  34. hocam başlıığı ekledim fakat yayın başlığı tik png varya onun üzerine taştı yazıyı sağa kaydrmak istedim olmadı bende png yi en sağa aldım bi bakarmısınız blogda baya sıkıntım var :) http://deltadpro.blogspot.com.tr/

    YanıtlaSil
  35. http://hizliresim.com/3DEDMj hocam herkese yardım ettiniz birde bana yardım edin lütfen ilk ok ile gösterdiğim yerde başlıkla üst üste gelmiş ben başlığı birazcık sağa almak istiyorum 2. resimleri kenara değilde az daha buyuk ve ortalamak istiyorum birde yayın alanının arkaplan rengini değiştirmek istiyorum teşekkürler http://deltadpro.blogspot.com.tr/

    YanıtlaSil
  36. başlık yazısını sağa nasıl yaslıyoruz bir türlü yapamadım cavapta vermediniz yazdığım yoruma

    YanıtlaSil
  37. @Hüseyin Yılmaz
    padding-left komutu ile kaydırabilirsiniz.

    YanıtlaSil
  38. TEŞEKKÜRLER HOCAM BİRAZ UĞRAŞINCA YAPTIM ALLAH RAZI OLSUN

    YanıtlaSil

Picardes

LİNKLER