Değerli Allaturka Forum üyeleri ve ziyaretçileri;
Bugün sizlerle web sitelerinizin etkileşimini artıracak, ziyaretçilerinize önemli duyuruları veya kampanyaları profesyonel bir şekilde sunabileceğiniz
Akıllı Popup (Açılır Pencere) sistemini paylaşıyorum. Görsel odaklı, modern ve kullanıcıyı yormayan bu yapı tamamen ücretsizdir!
Bu Popup Sisteminin Öne Çıkan Özellikleri
- Akıllı Hafıza (LocalStorage): Kullanıcı popup'ı bir kez kapattığında, sistem bunu hatırlar ve belirlediğiniz süre boyunca (örneğin 24 saat) aynı kullanıcıya tekrar göstermez.
- Resim Odaklı Tasarım: Üst kısımda yer alan görsel alanı sayesinde duyurularınız çok daha dikkat çekici durur. Resimler kırpılmadan tam boyut sığacak şekilde optimize edilmiştir.
- İpeksi Geçiş Efektleri: Pencere açılırken ve kapanırken süzülerek hareket eder, bu da sitenize premium bir hava katar.
- Kapatma Butonu (Hover): Sağ üstteki kapatma butonu üzerine gelindiğinde renk değiştirir ve hafifçe dönerek etkileşim sağlar.
- Mobil Uyumlu: Genişliği ve yapısı sayesinde farklı ekranlarda sorunsuz çalışır.
Özelleştirme Rehberi: Nereyi Nasıl Değiştiririm?
- Resmi Değiştirme: Kod içerisindeki <img src="..."> alanına kendi görsel linkinizi yapıştırmanız yeterlidir.
- Zaman Ayarı (Kaç Saatte Bir Gözüksün?): Script kısmındaki 24 * 60 * 60 * 1000 değeri 24 saati temsil eder. Bunu değiştirerek popup'ın ne kadar sıklıkla görüneceğini belirleyebilirsiniz.
- Renkler: CSS kısmındaki .popup-baslik (Mavi tonları) ve .popup-buton (Hadi başlayalım butonu) alanlarından renkleri sitenize göre güncelleyebilirsiniz.
- Metin Düzeni: Talimatlarımız doğrultusunda metinler iki parça halinde tasarlanmıştır. Ortadaki <p class="bolum-ayrac"></p> etiketi sayesinde yazılar birbirine girmez, okunaklı kalır.
Popup Boyutlarını Ayarlama (Genişletme & Daraltma)
Popup penceresinin boyutlarını sitenizin tasarımına veya içeriğinizin uzunluğuna göre çok kolay bir şekilde değiştirebilirsiniz:
- Genişlik Ayarı: CSS kodları içerisindeki #popup-box sınıfında bulunan width: 600px; değerini değiştirerek pencereyi yatayda genişletebilir veya daraltabilirsiniz. (Örneğin: Daha dar bir görünüm için 400px, daha geniş bir alan için 800px yapabilirsiniz.)
- Yükseklik Kontrolü: Sistem "otomatik yükseklik" (height: auto) üzerine kuruludur. Yani siz içine ne kadar çok yazı eklerseniz, pencere aşağıya doğru o kadar uzar.
- Resim Boyutu: Eğer resmin daha büyük veya küçük görünmesini isterseniz, .popup-resim sınıfındaki max-height: 280px; değerini artırıp azaltmanız yeterlidir.
Entegrasyon ve Kodlar
Aşağıdaki kodu tek bir .html dosyası olarak kaydedip deneyebilir veya mevcut sitenizin <body> etiketleri arasına ekleyebilirsiniz.
"Bilgi paylaştıkça çoğalır. Kendi projelerinize değer katacak küçük dokunuşları ihmal etmeyin. Keyifli kodlamalar!"
Flatcast Yardım »
Bütün Flatcast Kullanicilarin Dikkatine !
(16.01.2008, 19:57)
