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

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

.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

 

.post-title  {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQqlftynBTQBWjCgKFU27UKP_wiDkgP7DSgaoma0yAjQR3XNOnrc6-L7C3vOdTXAo8Le6I3wVsROGci63-DVcwf6d49Oo8qSR1jqsuakFqr0lVSi49cIRiBAPNbXcHjCwNw11m4alVMKU/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

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

 

 

Portakal Kabuğu’da Kullandığım Stil

.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…

Paylaş

teknoloji

Melisa