Blogger için “Uyarı – Bilgi – İndir” yazı stilleri

Blogger derslerimize ara vermeden devam ediyoruz. Bu dersimizde, blogger’da yazı yazar iken farklı yazı stillerini kullanmayı öğreneceğiz. Örnek olarak; yazınıza uyarı kısmı ekler iken, uyarı yazı stilinikullanacağız. Yazınıza bilgi bölümü ekler iken, bilgi yazı stilinikullanacağız ve yazınızda bir indirme bağlantısı verdiğiniz zaman da,indir yazı stilini kullanacağız. Dolayısı ile böylelikle yazılarınız dahailgi çekici bir hâl alacak. Hem görünüm bakımından güzel olan, hem de kullanım bakımından kolay olan bu uygulama gerçekten çok faydalı diye düşünüyorum. Karar sizin, yazılarınızın ilgi çekici olmasını istemez misiniz? Eğer yazılarınızın ilgi çekici olmasını istiyor iseniz, hemen uygulamamıza geçelim.

Öncelikle aşağıdaki kodları, temamızın CSS kısmına ekliyoruz;

.uyari {
background: #f9cccc url(http://f1212.hizliresim.com/14/r/h70l3.png) 15px center no-repeat;
text-align: left;
padding: 10px 20px 10px 65px;
border-top: 2px solid #d34b4b;
border-bottom: 2px solid #d34b4b;
margin:10px auto;
}
.bilgi {
background: #cce1f1 url(http://f1212.hizliresim.com/14/r/h70kb.png) 15px 50% no-repeat;
padding: 10px 20px 10px 65px;
border-top: 2px solid #529bdf;
border-bottom: 2px solid #529bdf;
margin:10px auto;
}
.indir {
background: #d1e8b7 url(http://f1212.hizliresim.com/14/r/h70kl.png) 15px 50% no-repeat;
padding: 10px 20px 10px 65px;
border-top: 2px solid #7dbe31;
border-bottom: 2px solid #7dbe31;
margin:10px auto;
}

Gelelim, bu uygulamayı yazılarımız için kullanmaya. Yazılarınızda bu uygulamayı kullanmak istediğiniz zaman, aşağıdaki kodları kullanmanız yeterli olacaktır. Ek olarak farklı bir ayarlamaya gerek yoktur.

Uyarı Yazı Stilinin Kullanımı

<div class="uyari">Bu bir uyarı yazısıdır...</div>

Bilgi Yazı Stilinin Kullanımı
<div class="bilgi">Bu bir bilgi yazısıdır...</div>

İndir Yazı Stilinin Kullanımı
<div class="indir">Bu bir indirme yazısıdır...</div>

Örnek Görüntü