Blog sitenizde ziyaretçilerinize önemli bir duyuru yapmak, e-posta bülteninize abone kazandırmak veya kritik bir uyarı göstermek istiyorsanız, açılır pencereler (popup) en etkili yöntemlerden biridir. Bu rehberde, herhangi bir eklentiye ihtiyaç duymadan, hem şık hem de modern bir açılır pencere uyarısını blogunuza nasıl entegre edeceğinizi adım adım göreceğiz.
Adım Adım Kurulum Rehberi
Aşağıdaki adımları takip ederek saf HTML, CSS ve JavaScript kullanarak oluşturulmuş, kullanıcı dostu ve responsive (mobil uyumlu) açılır pencereyi blogunuza ekleyebilirsiniz.
1. HTML Yapısını Ekleme
Öncelikle pencerenin içeriğini ve kapatma butonunu barındıran temel iskeleti oluşturmamız gerekiyor. Bu kodu blog şablonunuzun (veya ilgili sayfanın) <body> etiketinden hemen sonrasına ekleyin:
<div id="customAlertPopup" class="popup-overlay">
<div class="popup-content">
<span class="popup-close-btn" id="closePopupBtn">✖</span>
<h2>Önemli Duyuru!</h2>
<p>Blogumuza hoş geldiniz! En güncel içeriklerden ve özel paylaşımlardan haberdar olmak için bildirimlerimizi açmayı unutmayın.</p>
</div>
</div>
2. CSS ile Tasarımı Şekillendirme
Açılır pencerenin arka planını yarı saydam yapmak, içeriği ekranın tam ortasına konumlandırmak ve modern bir görünüm kazandırmak için aşağıdaki CSS kodlarını şablonunuzun <style> etiketleri arasına yerleştirin:
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.popup-overlay.active {
opacity: 1;
pointer-events: auto;
}
.popup-content {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
max-width: 450px;
width: 90%;
text-align: center;
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.popup-close-btn {
position: absolute;
top: 15px;
right: 15px;
font-size: 18px;
cursor: pointer;
color: #333333;
}
.popup-content h2 {
margin-top: 0;
color: #ff3366;
}
.popup-content p {
color: #666666;
line-height: 1.6;
}
3. JavaScript ile Çalışma Mantığını Kurma
Son olarak, sayfa yüklendiğinde uyarının otomatik olarak açılmasını ve kullanıcı kapatma butonuna bastığında pencerenin kapanmasını sağlayan JavaScript kodunu eklemeliyiz. Bu kodu </body> etiketinin hemen üzerine ekleyebilirsiniz:
<script>
window.addEventListener('DOMContentLoaded', function() {
var popup = document.getElementById('customAlertPopup');
var closeBtn = document.getElementById('closePopupBtn');
// Sayfa yüklendikten 1 saniye sonra popup'ı göster
setTimeout(function() {
popup.classList.add('active');
}, 1000);
// Kapatma butonuna basınca popup'ı gizle
closeBtn.addEventListener('click', function() {
popup.classList.remove('active');
});
// Dış alana tıklandığında da kapanmasını isterseniz:
popup.addEventListener('click', function(e) {
if (e.target === popup) {
popup.classList.remove('active');
}
});
});
</script>
blog açılır pencere yapımı,
blog popup uyarısı ekleme,
açılır pencere kodu