Sitenize duyuru penceresi ekleyin!

Sitenize Duyuru Penceresi Ekleyin

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.

ÖRNEĞİ GÖRÜNTÜLE

Tanım

Okumakta olduğunuz yazının devamında klasik duyuru pencerelerinden daha kullanışlı ve basit bir örnek hazırlayacağız.

  1. Daha hızlı
  2. %99 CSS
  3. 0 görsel 

İçerisinde bir satırlık java kodu var. O da pencereyi kapatmamıza yarayan işlemi yapmakta.

Örneklendirme

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 :

<div id="perde"></div>
<div id="duyuru">
<div class="kapat" onclick="document.getElementById('duyuru').style.display = 'none';document.getElementById('perde').style.display = 'none';">X</div>
<h6>AdobeWordPress.com Duyuru Penceresi</h6>
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 <span style="text-decoration: underline;">hızlı</span> ve <span style="text-decoration: underline;">geliştirilebilirdir</span>.

<img class="awlogo" src="http://www.adobewordpress.com/wp-content/themes/themolio/images/logo.png" alt="" />

<a href="www.adobewordpress.com">www.adobewordpress.com</a>
Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.</div>

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.

<!--?php /*If döngüsüne başlayalım */  if(!isset($_COOKIE&#91;'Dashboard'&#93;)){  setcookie("Dashboard",time()+86400);?-->
BURAYA
 <!--?php /*Döngü burada biter */}?-->

WordPress kullanıcısıyım? Ben nasıl günlük gösterim yapacağım?

Bu da ilginizi çekebilir  Photoshop ile Mavi Parçacıklar Efekti

Gayet kolay. Size PHP Widget gerekiyor. Buradaki adrese gidip eklentiyi indirin ve kurun. 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.

1 gün tarihlendirmesi değiştirilebilir mi?

Tabi. Ben üstteki kodda 86400 yazdım, yani 24x60x60. Saat/Dakika/Saniye çarpımı. Böylece 1 güne eriştim. Yarım saat için 30×60=1800, 1 saat için 60×60=3600,  12 saat için 12x60x60=43200 yazılabilir.

Uygulama

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…



  • Sabah Kemal Cansu

    Wordprpess Olarak Bunu Nereye ekleyeceğiz?

    • her sayfada görünsün istersen header.php ekleyebilirsin ana sayfada görünsün istersen index.php ekleye bilirsin yani diyeceğim şu ki istediğin yere eklersin html kodlarını diğer kodları css kendi css dosyanın uygun bir yerine ekleyebilirsin… Dip Not: Html kodlarını eklerken var olan bir kod bütününün içine eklememeye dikkat etmelisin…

  • CSS kodlarını temanızın .css uzantılı dosyasına eklemelisiniz. Geriye kalan HTML kodlarını ise gözükmesini istediğiniz sayfaya eklemelisiniz.

    Örneğin yeni yazı yazacaksınız ve bu yazının olduğu sayfaya girildiğinde duyuru penceresi çıksın istiyorsunuz.

    Bunu yapmak için; WordPress ile yazı eklerken HTML tabını tıklayıp üstteki HTML kodlarını o alana yapıştırın.

  • Sabah Kemal Cansu

    Ben bunu anasayfaya eklemek istiyorum bunun için nereye ekleyeceğim peki?

  • Çerez olayı için de Javascript kullanabilsek iyi olurdu. Ben bunu Blogger tabanlı bir sitemde kullanmayı düşünüyorum çünkü. Bu mümkün mü?

    • Dersin çıkış noktası performans olduğu için ben bir açıdan JS’den kaçtım. Fakat JavaScript ile mümkün tabi dediğiniz.

  • Fatih

    Hocam çok teşekkürler çalıştı. Tek sorunum duyuru alanı biraz şeffaf yazılar tam okunmuyor onu nasıl şeffaflıktan çıkartabiliriz ?

    • Sanırım duyuru penceresindeki yazı renginden bahsediyorsunuz. #duyuru p alanındaki color alanını değiştirin. Örneğin color:white; olarak bir deneyin. Rica ederim.

      • Fatih

        Hocam 2. bir soru daha ben bunu bir butona tıklandığında yada bir linke tıklandığında çıkarmak istiyorum bir script ile fonksiyona document.write(“”); içine bu kodları koydum satırda hata alıyorum ” ve ‘ lar hakkında olması lazım sorun bir türlü düzeltemedim. bir yere tıklandığında bunu çıkartma için konuna onla alakalı da bir örnek yapabilir misiniz.

  • Hocam makaleden bişey anlayamadım keşke kodları html ve css olarak 2 parça şeklinde koysaydın çok kafa karıştırıyor? bilmeyen birisi için biraz eziyetli oluyor hatta yapamıyor?

    • Sizin için makalenin en altına uygulama ekledim.

  • UFUK

    günde 1 kere çıkması için php değilde javascript kodunu yazabilir misiniz

  • Mükemmel oldu… Çok teşekkürler…