HTML ve CSS ile Duyuru Panosu

HTML ve CSS ile Duyuru Panosu

sola ok  Kaldırılan İçerikler

11.05.2016

3,331 Gösterim

Bu içeriği 2 dakikada okuyabilirsiniz.

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








Bu içeriği MasivaTurk.com sitesini kaynak göstererek kullanabilirsiniz. İçeriklerin; MasivaTurk.com sitesi kaynak gösterilmeden herhangi bir web sayfasında, sosyal medyada ve görsel basında yayınlanması yasaktır. Ayrıntılı bilgi için Kullanım Koşulları sayfasını okuyabilirsiniz.

11.05.2016

İçerik 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.


Bu İçerikler de İlginizi Çekebilir...

Localhost .htaccess Ayarı
24.01.2016
1,527 Gösterim

Localhost .htaccess Ayarı

Php ile kodlama yaparken herkesin kullandığı .htaccess dosyası localhostta aktif değildir. Kodlama esnasında birçok sorunu önlemek için .htaccess dosyasını localhostta aktif etmek gerekmektedir.

Tarihte Bugün Scripti Yapımı
06.06.2016
1,602 Gösterim

Tarihte Bugün Scripti Yapımı

Tarihte bugün scripti, asp, php gibi programlama dilleriyle, farklı şekillerde kodlanabilir. En basit haliyle php ile tarihte bugün kodları, scripti

Php ile Şifreli Sayfa Yapımı
28.01.2016
1,856 Gösterim

Php ile Şifreli Sayfa Yapımı

Php ile sahibi olunan bir web sitesinin herhangi bir sayfasına, basit bir şekilde şifre koymak mümkündür. Sayfaya giriş yapma izni bulunan, birden fazla kullanıcı adı ve kullanıcı şifresi tanımlanabilir.

Web Sitesine Kısayol Tuşları Ekleme
27.12.2015
1,433 Gösterim

Web Sitesine Kısayol Tuşları Ekleme

Sahibi olduğunuz web sitesine gelen ziyaretçilerin daha hızlı gezinebilmesi için kısayol tuşları ekleyebilirsiniz.

Görsellere Büyüteç ile Bakma
27.12.2015
1,645 Gösterim

Görsellere Büyüteç ile Bakma

Web sitenizde bulunan görsellerin üzerine gelindiğinde büyüteç efekti ile görseli görüntülemek için gereken HTML/CSS kodları.

X

MasivaTurk.com içeriklerini
YouTube'dan takip edebilirsiniz.

YOUTUBE KANALIMA ÜCRETSİZ
ABONE OLMAK İÇİN TIKLA