Konu Başlıklarını Renklendirin ( Css İle Hazırlanmış Renkli Uyarı - Konu Başlıkları )

12:32 | 0 yorum


Toplamda 5 çeşit hepsi birbirinden farklı ve renkli css ile hazırlanmış bir kod. İsterseniz konu başlıklarını konu içerisinde renkli hale getirebilir daha dikkat çekmek isteyebilirsiniz. 
Yukarıdaki resimde görüldüğü gibi 5 farklı çeşit dilerseniz hepsini bir arada ya da sadece birini kullanabilirsiniz.
Daha önce Css ile hazırlanmış Uyarı kodu ve kullanımını anlatmıştım. Şimdi ise konu başlıklarını farklı hale getirecek okuyucularınızın ilgisini çekebilecek bir kod paylaşacağım...


  • Aşağıdaki herhangi bir başlık kodunu seçin
  • İlgili başlığın kodunu kopyalayın
  • Kumanda Paneli > Şablon > HTML'yi Düzenle > Widget Genişlet

CTRL + F yardımı ile aşağıdaki kodu bulun
]]></b:skin>
Yukarıdaki kodun hemen önüne gelecek şekilde kopyaladığınız kodu yapıştırın ve şablonu kaydedin...

Başlık 1:

.bz1{
color: #6600FF;
font-size: 20px;
background: #BCF5A9;
margin: 0px 0px 5px;
padding: 3px 0 6px 10px;
border-left:4px solid #FF0000;
}
.bz1:hover {
background:#f2f2f2;
)
Başlık 2:

.bz2{
color: #000;
font-size: 20px;
font-family:Verdana;
background: #fff;
margin: 0px 0px 5px;
padding: 3px 0 3px 10px;
border-left:4px solid #FF0000;
}
.bz2:hover {
background:#F6CECE;
}
Başlık 3:

.bz3{
background:#FFFFFF;
font-weight: bold;
font-family:consolas;
font-size:19px;
color:#FA5858;
text:1px 1px 1px #AAA;
border-bottom:4px solid #Ff0000;
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
-moz-box-shadow:1px 1px 22px #AAA;
-webkit-box-shadow:1px 1px 2px #AAA;
box-shadow:1px 1px 24px #AAA;
text-transform:capitalize;
display:block;
width:96%;line-height:1;
margin:6px 3px;
padding:4px 10px}
.bz3:hover {
background:#E0E0F8;
}
Başlık 4:
.bz4 {
font-size:20px;
font-family:verdana;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.bz4:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
}
Başlık 5:
.bz5{
color:#444;
font-size:15px;
font-weight:bold;
font-style:italic;
font-family:georgia;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
background:#E0F2F7;
}
.bz5:hover{
background:#ffffff;
}

Şimdi gelelim kodların kullanımına;

  • Yazı Editörü'nüze gidin.
  • HTML düzenleme için sekmeye geçin.
  • Aşağıdaki kodu yapıştırın

<div class="bz1">BAŞLIK DENEME 1</div>
Yukarıda değiştirmeniz gereken alanı kırmızı ile işaretledim.
Mesela orayı: bz1 yerine bz2, bz3, bz4, bz5 ile değiştirebilirsiniz..
Kodun demosuna buradan bakabilirsiniz

Kategori: , , , , , ,

0 yorum