Günümüzde birçok web geliştiricisi duyuru pencerelerini kullanmakta. İnternette de onlarca duyuru penceresi konulu makale var.
Duyuru penceresi dediğimiz şey sayfanın ilk izlenimidir. Hızlı açılmalıdır, kullanıcının kafasını karıştırmamalıdır. Fakat günümüzde birçok web sayfasında sayfa genelinden sonra anca yüklenip açılan duyuru pencereleri görmekteyiz.
Okumakta olduğunuz yazının devamında klasik duyuru pencerelerinden daha kullanışlı ve basit bir örnek hazırlayacağız.
- Daha hızlı
- %99 CSS
- 0 görsel
İçerisinde bir satırlık java kodu var. O da pencereyi kapatmamıza yarayan işlemi yapmakta.
Pencerenin dikkat çekmesi için oluşturulan perde bütün browserlara uyum sağlayacak nitelikte.
#perde {
background-color:black;
opacity: 0.7;
-moz-opacity:0.70;
filter: alpha(opacity=70);
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}
Stil detaylarına bakacak olursak kırmızı renklerdeki penceremizde bir tık koyu renkte dahili gölge (inner shadow) bulunmakta.
#duyuru {
z-index: 50;
position:absolute;
background-color:#bb5046;
width:530px;
height:230px;
left: 50%;
top: 50%;
margin-top: -185px;
margin-left: -275px;
border-radius:20px;
padding:20px;
-moz-box-shadow:inset 0 0 80px #822820;
-webkit-box-shadow: inset 0 0 80px #822820;
box-shadow: inset 0 0 80px #822820;
}
Yine arka plan renkleriyle uyumlu bir yazı ve başlık tipi kullandım.
#duyuru p{
text-align:left;
font:14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#fcd1cd;
text-shadow: #822820 2px 1px;
}
#duyuru h1{
font:20px Georgia, 'Times New Roman';
color:white;
letter-spacing: -1px;
margin-bottom: 10px;
text-align:center;
text-shadow: #822820 2px 1px;
}
Kapat buttonunu ise yine görsel kullanmadan hazırladım. Oval bir kutucuğun içine X koyarak görsel açıdan güzel bir sonuç elde ettim.
#duyuru .kapat{right:0;
top:0;
padding:1px;
font:10px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-align:center;
border-radius:3px;
z-index: 60;
position:absolute;
background-color:white;
border:1px #858585 solid;
margin:-12px -12px 0 0;
border-radius:10px;
color:#111;
width:15px;
height:15px;
cursor:pointer;
}
#duyuru .kapat:hover{
background-color:#CCC;
color:white;
}
Ayrıca sola yaslı olarak AdobeWordPress logosunu da eklemeyi unutmadım. Logonun sağ kısmına noktalardan oluşan bir çerçeve oluşturarak açıklama metni için alan yarattım.
#duyuru p .awlogo{
margin:15px;
border-right:1px #822820 dotted;
float:left;
}
İşin HTML kısmına ise aşağıdaki satırları ekledim :
X
AdobeWordPress.com Duyuru Penceresi
Bu duyuru penceresi okumakta olduğunuz makale sonucunda oluşmuştur. Bir satırlık javascript koduyla çalışan bu pencere diğerlerine kıyasla hızlı ve geliştirilebilirdir.
www.adobewordpress.com
Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.
Ziyaretçiler günde bir kere görsün
Burada devreye PHP giriyor. Çerezleri kullanarak bu işi rahatlıkla halledebiliriz. 24 saatlik bir cookie tanımlaması ve basit bir if döngüsü sorunu çözecektir. Yukarıda verdiğim HTML kodunu aşağıda belirttiğim aralığa yazacağız.
if(!isset($_COOKIE['Dashboard'])){
setcookie("Dashboard",time()+86400);?>
BURAYA
WordPress kullanıcısıyım? Ben nasıl günlük gösterim yapacağım?
Gayet kolay. Size PHP Widget gerekiyor. Buradaki adrese gidip eklentiyi indirin. Sonra yönetici panelinizden Görünüm>Bileşenler alanına gidin ve yukarıda tarif ettiğim PHP kodunu Widget olarak herhangi bir yere ekleyin. Merak sidebarda gözükmeyecek.
Not : Bu pencereler site-içi duyuru amaçlı kullanılmalı. Reklam yayını için kullanılmamalıdır.
Umarım işinize yaramıştır. AdobeWordPress’i ve beni takip etmeye devam edin.
Görüşmek üzere…
Kaynak : http://www.adobewordpress.com/sitenize-duyuru-penceresi-ekleyin/
