CSS Mesaj Kutusu

Merhaba Sayın Okuyucularım Bu Gün Sizlere Muhteşem Kutular Yayınlıyacağım Oldukça Hoş Görünümlü Ve Kullanışlı.Bu Kutular İle Okuyucuların Gözüne girebilcek ve gözlerine hoş bir görünüm kazandırcaksınız.Konularınızda bu Kutuların Yardımı çok Olacakdır.Karışıklığı Ve Düzensizliği Önleyecekdir.Blogger Ve Benzeri Sistemlerde Kullanabileceğiniz Bu Kutuları şimdi Sizlere Kullanmayı Öğreteceğim.

1 ) Blogger Panel'inizin sol menüsünden "Şablon" yazan kategoriye tıklayınız. (Sol Tarafta Gösterilen Resimdeki Kategori)

     

 2 ) Daha sonra karşınıza çıkan sayfadan "Şu Anda Blog'da" yazının altında bulunan "HTML'yi Düzenle" butonuna tıklayınız. (Sol Tarafta Gösterilen Resimdeki Buton)

3) Sonrasında klavyenizin "Ctrl+F" tuşuna basarak sayfa içi kelime arama kutusunu açın. Arama kutusuna "]]></b:skin>" yazısını yazarak yazıyı sayfada aratın. Kelime bulucu sol tarafta gördüğünüz resimdeki gibi size karşınıza yazdığınız kodu gösterecek. O bulduğunuz kodun hemen üstüne;

.olumlu, .hata, .bilgi, .uyari, .indir {
padding-right: 10px;
padding-bottom: 10px;
font-size: 13px;
line-height: 20px;
margin-bottom: 20px;
padding-top: 10px;
background-repeat: no-repeat;
background-position: 7px center;
text-transform: uppercase;
padding-left: 50px;,
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}
 
.olumlu {
color: green;
background-color: #EBF8D6;
border: 1px dotted green;
color: #555555;
background-image: url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-dialog-ok-icon.png);
}
 
.hata {
background-color: #FFECE6;
border: 1px dotted red;
color: #555555;
background-image: url(http://icons.iconarchive.com/icons/dryicons/aesthetica-2/32/warning-icon.png);
}
 
.bilgi {
background-color: #D3EEF1;
border: 1px dotted blue;
color: #555555;
background-image: url(http://icons.iconarchive.com/icons/deleket/rounded-square/32/Button-Info-icon.png);
}
 
.uyari {
background-color: #FFFBCC;
border: 1px dotted orange;
color: #555555;
background-image: url(http://icons.iconarchive.com/icons/creative-freedom/shimmer/32/Warning-icon.png);
}

.indir {
color: green;
background-color: #EBF8D6;
border: 1px dotted green;
color: #00cc00;
background-image: url(http://icons.iconarchive.com/icons/vargas21/aquave-metal/32/Download-alt-2-icon.png);
}

Kodunu ekleyin Ve ardından Önizleme Tuşuna Basın.Eğer Temanızda kayma V.B Şeyler Olduysa Hemen Yedeğinizi Geri Yükleyin Veya Sekmenizi Kaydetmeden Kapatın

Kullanım ;

<div class="syv-bildirim bildirim-uyari">Uyarı Kutusu</div>
<div class="bilgi">Bilgi Kutusu</div>
<div class="hata">Hata Kutusu</div>
<div class="olumlu">Olumlu Kutusu</div>
<div class="indir">İndir Kutusu</div>

LÜTFEN YORUM ATMAYI UNUTMAYINIZ

Bu Yazıyı Beğendinizmi?