seo dersleri

Javascript ile Sonradan Açılan Popup Pencere Yapma

Javascript ile Sonradan Açılan Popup Pencere Yapma

Web sitenizde ürün tanıtımı yapmak istiyorsanız yada son zamanların modası olan sosyal medya hesaplarınızda takipçi edinmek için bir süre sonra kendiliğinden açılan küçük bir pencere ile ziyaretçilerinizin dikkatini çekebilirsiniz. İnternet sitenizde belirli bir süre sonra otomatik olarak bir popup açılsın istiyorsanız bunu aşağıdaki kodlari sayfanıza ekleyerek kolayca yapabilirsiniz kodlardaki gecikme süresini popup sayfanızın ebatını ve renk kodlarını istediğiniz gibi ayarlayabilirsiniz. Eğer sitenizi kendiniz kodlamadıysanız yani hazır script kullanıyorsanız aşağıdaki kodları düzenlemeyi unutmayınız.

Popup Kodları

<html>
<head>
<title>Javascript -İstenen zamanda açılan pencere</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function GG(alan) {
var alanx;
alanx = document.getElementById(alan).style;
if (alanx.display == "none") {
alanx.display = "";
}
else {
alanx.display = "none";
                             };
};
setTimeout("GG('pencere')", 2000); // 2 saniye sonra açılır
</script>
<div id="pencere" style="display: none; border:1px solid #0000ff; position: absolute; left: 250px; top:100px; background-color: #00ff96;">
<table border="0" cellpadding="1" cellspacing="10">
<tr><td align="right">
<b><div onclick="javascript: GG('pencere');" style="cursor: pointer; color: #0084ff;">Kapat</div></b></td></tr>
<tr><td><marquee direction="up" scrollamount="1" width="400" height="300">
<table border="0" cellpadding="1" cellspacing="10">
<tr><td>Buraya Mesajınızı Yazınız yada Görünmesini istediğiniz resimleri ekleyiniz</td></tr></table></marquee></td></tr></table>
</div>
</body>
</html>

Popup Kodlarını Düzenleme

Kodlar arasında yer alan
width= “400” (Genişlik)
height=”300″ (Yükseklik)
değerlerini değiştirerek popup pencerenizin ebatlarını değiştirebilirsiniz.

Arkaplan rengi için
background-color: #00ff96;
buradaki kodları değiştirmeniz gerekiyor.

İlgili mesajınızı yada eklemek istediğiniz resimleri eklemeniz gereken bölüm kod içerisinde gösterilmiştir.

Konu İle İlgili Görüşlerinizi Buradan Paylaşabilirsiniz.

facebook twitter youtube google+ feedburner feedburner