Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

Blogger: Css işle hazırlanmış kullanışlı mesaj kutuları

 10 Mesajlar 1.620 Okunma
acebozum
tr.link

#1
contentwriter contentwriter Kendi halimdeyim Kullanıcı
  • Üyelik 22.10.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Kendi halimdeyim
  • Konum Diğer
  • Ad Soyad İ** Y**
  • Mesajlar 4129
  • Beğeniler 1136 / 1842
  • Ticaret 21, (%100)



Css ile hazırlanmış bu mini kutucuklar yazılarınızda belirgin olarak gösterilmesini istediğiniz onay, uyarı, hata, ve bilgi mesajlarınızı öne çıkarmanıza yarar.İhtiyaç duydukça bende bu css kodlarından yararlanıyorum. Özellikle bazı yazılarımı izinsiz olarak alan kullanıcıları uyarmak amaçlı.
Benim gibi css işinin esasını öğrenmeye çalışanlar için gerçekten faydalı kodlar.
Kullanım alanlarından birisi de "İlgili Aramalar Eklentisi". Bu sayede eklentiyi düzenleyerek blog temanızla uyumlu hale getirebiliyorsunuz.
Bu konuda size 4 farklı stilde css kutucuğu göstereceğim siz dilerseniz farklı resimler ve kodları ile kutucukları değiştirebilirsiniz.

Html-css kodları ve demolar aşağıda, güle güle kullanın :)

Css kodları;



.tamamdir, .olmadi, .bilgi, .uyari {
background-repeat: no-repeat;
background-position: 10px center;
height: 25px;
text-transform: uppercase;
font-size: 11px;
line-height: 22px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;,
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}

.tamamdir {
background-color: #EBF8D6;
border: 1px solid #A6DD88;
color: #555555;
background-image: url(http://4.bp.blogspot.com/-biFKm3cEbog/T2t-NmBILXI/AAAAAAAADKM/9Se6RGJXwTE/s1600/tamam.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}

.olmadi {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #555555;
background-image: url(http://1.bp.blogspot.com/-qqVi6UlRvag/T2t-MYLzTBI/AAAAAAAADKE/7ry8ttmJcw8/s1600/olmadi.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}

.bilgi {
background-color: #D3EEF1;
border: 1px solid #81CDD8;
color: #555555;
background-image: url(http://4.bp.blogspot.com/-Qxtxt1oiOnY/T2t-Lyf6-8I/AAAAAAAADJ8/Qx-RbCyWbVU/s1600/bilgi.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}

.uyari {
background-color: #FFFBCC;
border: 1px solid #FFF35E;
color: #555555;
background-image: url(http://2.bp.blogspot.com/-hPx3l7bOuSA/T2t-OzqfIOI/AAAAAAAADKQ/Wh2QwnbOHek/s1600/uyari.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}



Html Kodları;



Bu bir uyarı kutusudur.

Bu bir hata bildiri kutusudur.

Bu bir bilgi kutusudur.

Bu bir ne yazacağımı bilemedim kutusudur.



Güle güle kullanıın :)


Demolar + kaynak: Blogger: Css ile hazırlanmış mesaj kutuları
ByPowerfuL Cry

kişi bu mesajı beğendi.

elektronikssl
webimgo

#2
ByPowerfuL ByPowerfuL E-Commerce Manager Kullanıcı
  • Üyelik 22.05.2011
  • Yaş/Cinsiyet 32 / E
  • Meslek E-Ticaret Uzmanı - A+++ SEO
  • Konum Konya
  • Ad Soyad M** Ö**
  • Mesajlar 1575
  • Beğeniler 533 / 460
  • Ticaret 18, (%100)
Harikasın dostum :)
 

 

N11'de Ürünlerinizi İlk Sıraya Taşıyorum. Detaylar İçin P.m Atınız.

#3
contentwriter contentwriter Kendi halimdeyim Kullanıcı
  • Üyelik 22.10.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Kendi halimdeyim
  • Konum Diğer
  • Ad Soyad İ** Y**
  • Mesajlar 4129
  • Beğeniler 1136 / 1842
  • Ticaret 21, (%100)

ByPowerfuL adlı üyeden alıntı

Harikasın dostum :)


Teşekkürler : )
 

 

#4
Cry Cry http://www.kolbozuk.net Kullanıcı
  • Üyelik 07.02.2012
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 870
  • Beğeniler 58 / 170
  • Ticaret 5, (%100)
Süper olmuş hocam hemen kullanıyorum :)
Bu arada bunları head etiketinden sonra mı kullanıyoruz. Yoksa css dosyası mı bağlıyoruz ?
 

 

wmaraci
wmaraci

#5
contentwriter contentwriter Kendi halimdeyim Kullanıcı
  • Üyelik 22.10.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Kendi halimdeyim
  • Konum Diğer
  • Ad Soyad İ** Y**
  • Mesajlar 4129
  • Beğeniler 1136 / 1842
  • Ticaret 21, (%100)

Cry adlı üyeden alıntı

Süper olmuş hocam hemen kullanıyorum :)
Bu arada bunları head etiketinden sonra mı kullanıyoruz. Yoksa css dosyası mı bağlıyoruz ?


]]>

kodundan önce css kodlarını (1.kod) ekliyoruz. Zaten tüm css kodları ]]>
kodunun önüne eklenir.

Onun dışında kutuları yazıda kullanmak istersen Html kodlarını (2. kod) yazının html'yi düzenle kısmına ekleyebilirsin veya kullanmak istediğin herhangi bir yere..
Cry

kişi bu mesajı beğendi.

#6
Cry Cry http://www.kolbozuk.net Kullanıcı
  • Üyelik 07.02.2012
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 870
  • Beğeniler 58 / 170
  • Ticaret 5, (%100)
Peki sağolun hocam :)
 

 

#7
ErenKeskin ErenKeskin Girişimci, Front-end Developer Kullanıcı
  • Üyelik 11.09.2011
  • Yaş/Cinsiyet 29 / E
  • Meslek Elektrik-Elektronik Mühendisi
  • Konum Eskişehir
  • Ad Soyad E** K**
  • Mesajlar 1223
  • Beğeniler 243 / 336
  • Ticaret 2, (%100)



.kapat {background: url("kapat.png")no-repeat; width: 20px; height: 20px; position: absolute; top: 0; right: 0;}



$(function(){
$(".kapat").click(function(){
$(".tamamdir").slideUp();
});
});


İle de sağ üst köşeye bir çarpı butonu koyarak tıklandığında kapanmasını sağlayabiliriz.
 

 

herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.

#8
contentwriter contentwriter Kendi halimdeyim Kullanıcı
  • Üyelik 22.10.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Kendi halimdeyim
  • Konum Diğer
  • Ad Soyad İ** Y**
  • Mesajlar 4129
  • Beğeniler 1136 / 1842
  • Ticaret 21, (%100)

ErenKeskin adlı üyeden alıntı


.kapat {background: url("kapat.png")no-repeat; width: 20px; height: 20px; position: absolute; top: 0; right: 0;}



$(function(){
$(".kapat").click(function(){
$(".tamamdir").slideUp();
});
});


İle de sağ üst köşeye bir çarpı butonu koyarak tıklandığında kapanmasını sağlayabiliriz.


Kullanacak arkadaşlar yapabilirler tabi pek karışık kodlar değil zaten. Sağol :)
 

 

#9
ozerx ozerx Öğrenci Kullanıcı
  • Üyelik 10.11.2011
  • Yaş/Cinsiyet 28 / E
  • Meslek Webmaster
  • Konum Hatay
  • Ad Soyad Ö** C**
  • Mesajlar 524
  • Beğeniler 23 / 78
  • Ticaret 7, (%100)
Süpersin kardeşim eline sağlık :)
 

 

#10
contentwriter contentwriter Kendi halimdeyim Kullanıcı
  • Üyelik 22.10.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Kendi halimdeyim
  • Konum Diğer
  • Ad Soyad İ** Y**
  • Mesajlar 4129
  • Beğeniler 1136 / 1842
  • Ticaret 21, (%100)

ozerx adlı üyeden alıntı

Süpersin kardeşim eline sağlık :)


Önemli değil beğenmene sevindim ozerx : )
ozerx

kişi bu mesajı beğendi.

Photo Gallery Blogger Teması
Blogger: Rastgele Yazılar Eklentisi
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al