HTML ve CSS ile Duyuru Panosu

HTML ve CSS ile Duyuru Panosu

sola ok  Kaldırılan İçerikler

11.05.2016

3,837 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
1,937 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ı.

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

Localhost .htaccess Ayarı
24.01.2016
1,807 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.

Amazing Slider Yazısını Kaldırma
21.11.2015
3,778 Gösterim

Amazing Slider Yazısını Kaldırma

3 boyutlu slider uygulaması Amazing Slider'ın ücretsiz versiyonunda, slider'ın üzerinde bulunan "Amazing Slider" yazısı kaldırılamıyor. Bu konuda yazının nasıl kaldırabileceğini öğrenebilirsiniz.

Php ile IMDB ve Sinemalar.com Botu Yapımı
27.01.2016
3,056 Gösterim

Php ile IMDB ve Sinemalar.com Botu Yapımı

Php ile başka siteden veri çekme yöntemini kullanarak, imdb ve sinemalar.com sitelerinden film bilgilerini çekebilen php scripti yapımı

X

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

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