Kaldırılan İçerikler
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 } ?>
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>
<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; }
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
Güzel paylaşım teşekkürler
Sitede gezinirken bu konu şans eseri karşıma çıktı. Tam da aradığım şey :)
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.
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
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.
Yav her şey iyi güzel de, şu sitende kullandığın yazı fontunun ismini söyle.. çok güzelmiş..
Comfortaa-Regular
Bu kadar kodu yazmaya çalışan biri bu işi çok seviyordur paylaşımına teşekkür ederiz.
Bayağı emek verilmiş, uğraşan arkadaş sağ olsun, bunu paylaşımlara açmış. İşine yarayan mutlaka olacaktır.
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.
Bende bazı sitelerde görmüştüm duyuru panosunu. Aslında çok etkili bir yöntem ziyaretçinin ilk gördüğü bu oluyor çünkü.
Html işi keyifli diyorlar ama bir türlü fırsat bulup sürecin içine giremedik.
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.
Hocam bu kodlar wordpress için geçerli mi ? Örnek olarak bir tane koyabilir misiniz?
Konuyu güncelledim.
Bir çok konuda sadelikten yanayım bende. Ayrıca hızlı olması da çok önemli.