En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Bu konumuzda Blogger vb. gibi web sitesi olan herkes bu özelliği kullanarak, sayfalarında istediği mesaj kutusunu koyarak ziyaretçilerinize güzel bir mesaj gönderebilir ve sayfalarınızda güzel bir görünüm yaratabilirsiniz.
Bu özelliği şu an WebteGez Blog sitesinde halen kullanmaktayız. Çünkü gerçekten ziyaretçileri bilgilendirmede işe yarıyor.
Kutuların İçerikleri Şu Şekildedir:
- Uyarı Kutusu
- Bilgi Kutusu
- Hata Kutusu
- Olumlu Kutusu
- İndir Kutusu
Kurulum:
1)
Blogger Panel'inizin sol menüsünden "Şablon" yazan kategoriye tıklayınız. (Sol Tarafta Gösterilen Resimdeki Kategori)
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)
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) 
Karşınıza POPUP Pencere tarzı bir pencere açılacaktır. Kodları yapıştırmaya başlamadan önce pencerenin sol üst tafından bulunan "Widget Şablonlarını Genişlet" yazısının başındaki boş CheckBox kutusunu işaretleyin.
Karşınıza POPUP Pencere tarzı bir pencere açılacaktır. Kodları yapıştırmaya başlamadan önce pencerenin sol üst tafından bulunan "Widget Şablonlarını Genişlet" yazısının başındaki boş CheckBox kutusunu işaretleyin.
4) 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;.webtegezolumlu, .webtegezhata, .webtegezbilgi, .webtegezuyari, .webtegezindir {
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
}
.webtegezolumlu {
color: green;
background-color: #EBF8D6;
border: 1px dotted green;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/olumlu.png);
}
.webtegezhata {
background-color: #FFECE6;
border: 1px dotted red;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/hata.png);
}
.webtegezbilgi {
background-color: #D3EEF1;
border: 1px dotted blue;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/bilgi.png);
}
.webtegezuyari {
background-color: #FFFBCC;
border: 1px dotted orange;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/uyari.png);
}
.webtegezindir {
color: green;
background-color: #EBF8D6;
border: 1px dotted green;
color: #00cc00;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/indir.png);
}
Kodu ekledikten sonra "Şablonu Kaydet" butonuna tıklayın ve şablonun kaydedilmesini bekleyin..
Evet arkadaşlar kodlarımız kullanılmaya hazırdır. Şimdi gelelim bu kodların kullanılışına:
Bu kodları aşağıdaki şekildeki gibi kullanabiliriz.
Bu kodları aşağıdaki şekildeki gibi kullanabiliriz.
<div class="webtegezuyari">WebteGez Uyarı Kutusu</div>
<div class="webtegezbilgi">WebteGez Bilgi Kutusu</div>
<div class="webtegezhata">WebteGez Hata Kutusu</div>
<div class="webtegezolumlu">WebteGez Olumlu Kutusu</div>
<div class="webtegezindir">WebteGez İndir Kutusu</div>
Örnek Demo Görünümleri Aşağıda Görüntülenmektedir Arkadaşlar..
WebteGez Uyarı Kutusu
WebteGez Bilgi Kutusu
WebteGez Hata Kutusu
WebteGez Olumlu Kutusu
WebteGez İndir Kutusu
İşte bu kadar kolay arkadaşlar.
Hepinize kolay gelsin.
Anlatım Tamamen Bize Aittir..!
