HTML ve CSS ile Duyuru Panosu

HTML ve CSS ile Duyuru Panosu

sola ok  Kaldırılan İçerikler

11.05.2016

4,049 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...

Görsellere Büyüteç ile Bakma
27.12.2015
2,090 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ı.

Php ile Şifreli Sayfa Yapımı
28.01.2016
2,812 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.

HTML ve CSS ile Duyuru Panosu
11.05.2016
4,049 Gösterim

HTML ve CSS ile Duyuru Panosu

Sahibi olduğunuz web sitesine html ve css ile duyuru panosu ekleyin. HTML duyuru panosu kodları.

Tarihte Bugün Scripti Yapımı
06.06.2016
1,871 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

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme
24.04.2016
1,794 Gösterim

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme

Kaynak belirtilmeden kopyalanan yazılara otomatik kaynak adresi eklemek için küçük bir javascript kod blogunun siteye eklenmesi yeterli olacaktır.

X

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

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