HTML ve CSS ile Duyuru Panosu

HTML ve CSS ile Duyuru Panosu

sola ok  Tasarım

11.05.2016

1027 Gösterim

TSK Mehmetçik Vakfı
TSK Mehmetçik Vakfı
TSK Mehmetçik Vakfı

HTML ve CSS ile Duyuru Panosu


Son zamanlarda birçok webmaster veya web site sahibi sitelerinde duyuru penceresi kullanmaya başlamıştır. İnternet üzerinde birçok duyuru panosu konusu mevcut. Fakat bunların çoğu fazla gereksiz süslenmiş ve geç açılan kodlardan oluşmaktadır. Siteye giren ziyaretçinin sadece duyuru panosunun açılmasını bile 1 saniyeden daha fazla beklemesi demek, o ziyaretçiyi potansiyel olarak kaybetmek anlamına gelmektedir. Bu yüzden sadeliği ön planda tutarak temel bir duyuru panosu hazırladım. HTML kodları içerisinde yalnızca 1 satırlık javascript kodu bulunmaktadır. O da duyuru panosunu kapatmak için gereklidir. Hazırlamış olduğum duyuru panosu kodlarında oynama veya eklemeler yapılarak geliştirilebilir. Ayrıca kodlarının sonrasında bulunan "HTML ve CSS ile Duyuru Panosu Önizleme" linkine tıklayıp, duyuru panosunun önizlemesini görebilirsiniz.


Ziyaretçiler duyuru panosunu günde 1 kere görsün


Duyuru Panosunun herkese günde sadece 1 kere görünmesi için birkaç satırlık PHP kodu serpiştirilmesi gerekiyor. Aşağıdaki php kodları arasında belirttiğim kısma HTML kodlarının yerleştirilmesi yeterli olacaktır.

<?php if(!isset($_COOKIE['Dashboard'])){ setcookie("Dashboard",time()+86400); ?>
BURAYA HTML KODLARI GELECEK
<?php } ?>


HTML Kodları


<div id="arka-karanlik"></div>
<div id="pano">
<div class="kapat" onclick="document.getElementById('pano').style.display = 'none';document.getElementById('arka-karanlik').style.display = 'none';">X</div>
<h1>MasivaTurk.com Duyuru Panosu</h1>
<p>Buraya istediğiniz herhangi bir bildiriyi yazabilirsiniz.</p>
</div>


CSS Kodları


#arka-karanlik{
 background-color:black;
 opacity:0.3;
 -moz-opacity:0.70;
 filter:alpha(opacity=70);
 z-index:20;
 height:100%;
 width:100%;
 background-repeat:repeat;
 position:fixed;
 top:0px;
 left:0px; }

#pano {
 z-index:50;
 position:absolute;
 background-color:#29a2d6;
 width:530px;
 height:230px;
 left: 50%;
 top: 50%;
 margin-top:-185px;
 margin-left:-275px;
 padding:20px;
 -moz-box-shadow:inset 0 0 200px #000;
 -webkit-box-shadow:inset 0 0 200px #000;
 box-shadow:inset 0 0 200px #000; }

#pano p a{
 color:#000;
 text-decoration:none; }

#pano p{
 text-align:left;
 font:14px trebuchet ms;
 color:#fff;text-align:center; }

#pano h1{
 font:22px trebuchet ms;
 margin-bottom:50px;
 text-align:center; }

#pano .kapat{
 right:0;
 top:0;
 font:17px "trebuchet ms";
 text-align:center;
 z-index:60;
 position:absolute;
 background-color:darkred;
 margin:-12px -12px 0 0;
 color:#fff;
 width:20px;
 height:20px;
 cursor:pointer; }

#pano .kapat:hover{
 background-color:#fff;
 color:darkred; }


Wordpress veya blogger kullananlar için


HTML kodlarını, duyuru panosunun görünmesini istediğiniz sayfanın kodlarına <body> etiketinden sonra ekleyin. CSS kodlarını da sitenizin stil (tahminen "style.css") dosyalarına ekleyin.

Wordpress kullanıcıları günde 1 kere göstermek için; PHP Code Widget linkinde bulunan eklentiyi indirin ve kurun. Kurulma işlemi gerçekleştikten sonra yönetici panelinden > Görünüm > Bileşenler kısmına gidin ve yukarı bulunan PHP kodunu Widget olarak herhangi bir yere eklemeniz yeterli olacaktır.

Not: Wordpress ile ilgili olan anlatım alıntıdır.


HTML ve CSS ile Duyuru Panosu Önizleme




11.05.2016

Konu hakkında soru sorabilir veya yorumda bulunabilirsiniz.

İsim
Web Site
E-Posta
Mesaj

Yorumlar (12)

  1. Emir

    Sitede gezinirken bu konu şans eseri karşıma çıktı. Tam da aradığım şey :)

  2. Melih

    Hocam valla uzun zamandır güzel bir duyuru panosu arıyordum. Siteyi fazla yormayacak bir duyuru panosu. İsteyenler bunu kullanabilirler. Teşekkür ederim.

  3. Ejder Yurdakul

    Hocam, panoyu kapatmak icin javascripte gerek yok. Surada css transition duration ve next sibling selectorleri kullanarak acilip kapanan bir onek yaptim: http://codepen.io/eyurdakul/pen/qNZdoj

    • Furkan Kandemir

      Eline sağlık güzel olmuş. Ama benim anlatmak istediğim daha çok ziyaretçi siteye girer girmez direk karşısına çıkması. Yani herkes gidip oraya tıklamaz. Senin bu yaptığın toggle yöntemi daha çok, açılır menü veya kısa bilgiler verilmek istendiği zaman ihtiyaç haline geliyor.

  4. Yav her şey iyi güzel de, şu sitende kullandığın yazı fontunun ismini söyle.. çok güzelmiş..

    • Furkan Kandemir

      Comfortaa-Regular

  5. Selahattin

    Bu kadar kodu yazmaya çalışan biri bu işi çok seviyordur paylaşımına teşekkür ederiz.

  6. Sefai Çağlayan

    Bayağı emek verilmiş, uğraşan arkadaş sağ olsun, bunu paylaşımlara açmış. İşine yarayan mutlaka olacaktır.

  7. Sude Köre

    Duyuru panosu bazı siteler için gerekli ama her sayfada açılmazsa, tek sefer açılırsa iyi. Bu yönden html ve css ile olmasıda bir ayrıcalık.

  8. Necmettin

    Bende bazı sitelerde görmüştüm duyuru panosunu. Aslında çok etkili bir yöntem ziyaretçinin ilk gördüğü bu oluyor çünkü.

  9. Zehra Güçlü

    Html işi keyifli diyorlar ama bir türlü fırsat bulup sürecin içine giremedik.

  10. Sabo

    Duyuru panosu güzel ancak bazı insanlar bundan rahatsız olabilir. Aslında rahatsızlık verecek bir yeri de yok ama html ile yapılması ve css olması güzel, site hızını yavaşlatmaz.

  11. Hocam bu kodlar wordpress için geçerli mi ? Örnek olarak bir tane koyabilir misiniz?

    • Furkan Kandemir

      Konuyu güncelledim.

  12. Halil Arslan

    Bir çok konuda sadelikten yanayım bende. Ayrıca hızlı olması da çok önemli.