Blog'da CSS3 ve HTML5 Tasarımlı Bildirim Uyarı Kutusu Oluşturma

CSS3 ve HTML5 tasarımlı bildirim uyarı kutusu oluşturma - Blog yöneticilerinin, belirli bir tarihten önce ziyaretçilere duyuru, not veya bazı özel günler için bir şeyler iletmesi gerekir.

Duyurular veya notlar, dikkat çekecek olan bir duyuru kutusu veya panosuyla, örneğin bir arka plan rengi veya bir renk şeridi kullanarak görüntülenmeli ve böylece ziyaretçiler duyuruları kaçırmayacaktır.


Bildirim uyarı kutusunun, ziyaretçileri rahatsız edici bir şekilde eklenmemesi ve kapatılmak istenmesi durumunda bir kapatma butonu ile kolayca kapatılabilecek olması gerekir.

Bu bildirim uyarı kutusuna ihtiyaç duyduğunuzda blog sitenin herhangi bir yerinde kullanabilirsiniz. Blog başlığının altında, yayın içerisinde veya blogun herhengi bir yerinde.

Ön İzleme

Bildirim kutusunu blog sitenize eklemek istiyorsanız, aşağıdaki adımları takip edin.

Blogger Sitesine Bildirim Uyarı Kutusu Nasıl Eklenir?

Bildirim uyarı kutusu CSS kodu, AMP HTML ve HTML blog siteleri için kullanılabilir. Fakat bildirim uyarı kutusu HTML kodu hem AMP HTML hem de HTML blog sitelerinde kullanılmamakta. Bu nedenle, AMP HTML ve HTML bloglar için ayrı ayrı bildirim uyarı kutusu HTML kodu paylaştım.

Birinci adım: Blogger hesabınızda oturum açın ve blog sitenizin kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın. Aşağıdaki CSS kodlarını CSS stil dosyanızın içerisine ekleyin.

Bildirim (Notification) CSS Kodu

.notification_box {margin:0;padding:2px;background:#ffeeb6;font-size:16px;font-weight:400;position:relative;color:#000;border:2px solid #f57b54}
.notification_box p{margin:0;padding:8px 30px 8px 10px;line-height:1.5;font-size:16px;font-weight:400}
.notification_box b,.notification_box a{font-weight:500}
.close_notification{position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;color:black;opacity:0.3;cursor:pointer}
.close_notification:hover{opacity:1}
.close_notification:focus,.close_notification:active{outline:0}

Belirtilmiş olan CSS kodlarında değişiklik yapma: Bildirim uyarı kutusu ve diğer öğeler arasındaki mesafeyi margin CSS kodu ile ayarlayın. Arka plan ve şerit rengini değiştirmek için, background ve border CSS kodlarını düzenleyerek yapabilirsiniz.

İkinci adım: Bildirim kutusunu görüntülemek istediğiniz yere aşağıdaki HTML kodu ekleyin. Blogunuzun başlığının altında, sayfa veya yayın içerisinde kullanabilirsiniz. Bildirim HTML kodunu tema kodları arasına, sayfa ve yayın editör sayfasının HTML kısmına veya yerleşim sayfasında bulunan bir HTML/JavaScript widget'ı içerisine ekleyebilirsiniz.

Bildirim (Notification) HTML Kodu

<div class='notification_box'>
<p>Bildirim metnini buraya ekleyin.</p>
<div aria-label='Close' class='close_notification' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
</div>

Bildirim metnini HTML kod içerisinde belirtilen yere ekleyin ve kaydedin.

AMP HTML için: Bildirim uyarı kutusunu AMP HTML blog sitelerine eklemek için aşağıdaki HTML kodunu kullanın.

AMP Bildirim (Notification) HTML Kodu

<div class='notification_box' id='notification_box'>
<p>Bildirim metnini buraya ekleyin.</p>
<div aria-label='Close' class='close_notification' on='tap:notification_box.hide' role='button' tabindex='0'>&times;</div>
</div> 

CSS3 ve HTML5 tasarım bildirim uyarı kutusu için javascrip kullanmaya gerek yoktur. Blog sitenizde kullanmanız durumunda blog sitenizde herhangi bir yüklenme sorunu veya olumsuz bir etki oluşturmaz. Bu eklentide bulunan kapatma butonunu ileri daha farklı tasarımlarda da kullanmaya devam edeceğiz.