Blogger CSS İle Şık Bildirimler

Blogger web sayfanız için özel bildiri kutucukları hazırladınız mı ? Cevabınız hayır ise dogru yerdesiniz. 

Bugün 4 klasik uyarı için bildirim kutucuğu tasarlayacağız. Hata, uyarı, bilgi ve başarı bildirimleriniz artık daha şık ve kontrol edilebilir olacaklar.

Ekleyeceğimiz online JavaScript kodları da bu kutucukların kapatılabilir olmasını sağlayacak. Tasarımı daha ilgi çekici hela getirmek için de CSS-transition kullanacağız.

Örneği Görüntüle

Nasıl Yapılır?

Uyarı pencerelerini blockquote elemanı üzerinden tasarlayacağız. İlk olarak genel tanımlarımızı yapalım. Biz font tercihimizi "Open Sans"'dan yana kullandık. O yüzden ilk olarak bu fontu Google Web Fonts'da sayfamıza çekelim.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Şimdi genel CSS tanımlarımızı ekleyelim.

blockquote{
-webkit-transition: all 500ms ease-out ;
-moz-transition: all 500ms ease-out ;
-o-transition: all 500ms ease-out ;
transition: all 500ms ease-out ;
font:16px 'Open Sans';
padding:15px;
}

Ayrıca bildirim başlıklarımızı ve kapatma düğmesini de ekleyelim.

blockquote span{font-weight:600;}
blockquote #close{float:right; color:inherit; text-decoration:none;}

Taslaklarımız hazır. Şimdi biraz daha detaylandıralım.

Bildiri 1: Dikkat

CSS kodları

blockquote#danger{
background-color:tomato;
border-left:7px #dc3d21 solid;
color:white;
}

HTML Kodları

<blockquote id="danger">
<a id="close" title="Close"  href="#" onClick="document.getElementById('danger').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Dikkat!</span> Bu bir hata mesajıdır.
</blockquote>

Bidiri 2: Uyarı

CSS Kodları

blockquote#warning{
background-color:#ecdfb0;
border-left:7px #e5c693 solid;
color:#6b6d31;
}

HTML Kodları

<blockquote id="warning">
<a id="close" title="Close"  href="#" onClick="document.getElementById('warning').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Uyarı!</span> Bu bir uyarı mesajıdır.
</blockquote>

Bidiri 3: Bilgi

CSS Kodları

blockquote#info{
background-color:#bde9f7;
border-left:7px #8bdaf4 solid;
color:#3c7e94;
}

HTML Kodları

<blockquote id="info">
<a id="close" title="Close"  href="#" onClick="document.getElementById('info').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Bilgi!</span> Bu bir bilgi mesajıdır.
</blockquote>

Bildiri 4: Başarı

CSS Kodları

blockquote#success{
background-color:#cee0cf;
border-left:7px #8eb589 solid;
color:#296829;
}

HTML Kodları

<blockquote id="success">
<a id="close" title="Close"  href="#" onClick="document.getElementById('success').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Tebrikler!</span> Bu bir onay mesajıdır.
</blockquote>

Buraya kadar kodların tek tek CSS ve HTML kodlarını yazdık peki blogger için topluca bu bildirim kutu kodları eklemek isterseniz biraz farklı bir yol izlemek gerekmektedir.
Bunun için izlemez gereken yol şu şekilde olmalıdır.

İlk olarak CSS kodlarını ekleyerek başlayalım Blogger Kontrol panelinize girdikden sonra Tema - HTML'yi Düzenle diyin ve sonrasında CTRL+F kombinasyonu ile arama kutucuğunu açıp içerisine ]]></b:skin> yazıp aratın ve bu kodun hemen üstüne aşağıdaki verdiğim kodları ekleyin

blockquote{
-webkit-transition: all 500ms ease-out ;
-moz-transition: all 500ms ease-out ;
-o-transition: all 500ms ease-out ;
transition: all 500ms ease-out ;
font:16px 'Open Sans';
padding:15px;
}

blockquote span{font-weight:600;}
blockquote #close{float:right; color:inherit; text-decoration:none;}

blockquote#danger{
background-color:tomato;
border-left:7px #dc3d21 solid;
color:white;
}

blockquote#warning{
background-color:#ecdfb0;
border-left:7px #e5c693 solid;
color:#6b6d31;
}

blockquote#info{
background-color:#bde9f7;
border-left:7px #8bdaf4 solid;
color:#3c7e94;
}

blockquote#success{
background-color:#cee0cf;
border-left:7px #8eb589 solid;
color:#296829;
}

CSS Kodlarını ekledik'den sonra aşağıda verdiğim HTML kodlarını da sayfanızın içerisinde kullanacaksınız.

<blockquote id="danger">
<a id="close" title="Close"  href="#" onClick="document.getElementById('danger').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Dikkat!</span> Bu bir hata mesajıdır.
</blockquote>

<blockquote id="warning">
<a id="close" title="Close"  href="#" onClick="document.getElementById('warning').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Uyarı!</span> Bu bir uyarı mesajıdır.
</blockquote>

<blockquote id="info">
<a id="close" title="Close"  href="#" onClick="document.getElementById('info').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Bilgi!</span> Bu bir bilgi mesajıdır.
</blockquote>

<blockquote id="success">
<a id="close" title="Close"  href="#" onClick="document.getElementById('success').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Tebrikler!</span> Bu bir onay mesajıdır.
</blockquote>