Как да направим one time popup за Blogger блог? ~ SEO Блог на Пано Кондоянис

Днес търсих начин да направя на един мой сайт изкачащ прозорец на главната страница. Сайта се задвижва с blogspot. Ровейки по нета, попаднах на тази статия където е описано много добре кои са стъпките за да направете изкачащ прозорец за блог в Blogger и искам да го споделя.

Изкачащия прозорец съдържа съобщение, снимка, facebook like box, или какво си пожелаете, като се показва само един път на първата страница, веднага след зареждането и, без да става досаден като продължите да разглеждате в сайта.

Ето и кода :
Инсталирай java script
1. Логни се в Blogger акаунта си. Иди в Template tab, и запази действащата ти кожа на компютъра. Ако нещо се провали винаги ще можеш да си възвърнеш работещия ти блог от този бекъп.
2. Клик на Edit HTML и потърси за този таг (Ctrl+F). После добави следния код ПРЕДИ този таг.

//loading popup with jQuery magic!

function loadPopup(){

centerPopup();

//loads popup only if it is disabled

if(popupStatus==0){

$("#backgroundPopup").css({

"opacity": "0.7"

});

$("#backgroundPopup").fadeIn("slow");

$("#popupContact").fadeIn("slow");

popupStatus = 1;

}

}

//disabling popup with jQuery magic!

function disablePopup(){

//disables popup only if it is enabled

if(popupStatus==1){

$("#backgroundPopup").fadeOut("slow");

$("#popupContact").fadeOut("slow");

popupStatus = 0;

}

}

//centering popup

function centerPopup(){

//request data for centering

var windowWidth = document.documentElement.clientWidth;

var windowHeight = document.documentElement.clientHeight;

var windowscrolltop = document.documentElement.scrollTop;

var windowscrollleft = document.documentElement.scrollLeft;

var popupHeight = $("#popupContact").height();

var popupWidth = $("#popupContact").width();

var toppos = windowHeight/2-popupHeight/2+windowscrolltop;

var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;

//centering

$("#popupContact").css({

"position": "absolute",

"top": toppos,

"left": leftpos

});

//only need force for IE6

$("#backgroundPopup").css({

"height": windowHeight

});

}

//CONTROLLING EVENTS IN jQuery

$(document).ready(function(){

if ($.cookie("anewsletter") != 1) {

//load popup

setTimeout("loadPopup()",5000);
}

//CLOSING POPUP

//Click the x event!

$("#popupContactClose").click(function(){

disablePopup();

$.cookie("anewsletter", "1", { expires: 7 });

});

//Click out event!

$("#backgroundPopup").click(function(){

disablePopup();

$.cookie("anewsletter", "1", { expires: 7 });

});

//Press Escape event!

$(document).keypress(function(e){

if(e.keyCode==27 && popupStatus==1){

disablePopup();

$.cookie("anewsletter", "1", { expires: 7 });
}
});
});
</script>

If you are familiar with Java Scripts, The comments marked with Red color is for you.

Credits: Java script бепе взет от тук simplex blog.

CSS Code След като добавиш кода Java script, потърси за този низ ]]></b:skin> и ПРЕДИ него добави следното:

#popupContactClose{

cursor: pointer;

text-decoration:none;
}
#backgroundPopup{

display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:100%;

width:100%;

top:0;

left:0;

background:#000000;

border:1px solid #cecece;

z-index:1;

}

#popupContact{

        border-top:5px solid #53A9FE;

        border-left:5px solid #53A9FE;

        border-bottom:5px solid #53A9FE;

       border-right:5px solid #53A9FE;

border-radius:30px;

       -moz-border-radius:30px;

       -webkit-border-radius:30px;



display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:384px;

width:408px;

background:#FFFFFF;

z-index:2;

padding:12px;

font-size:13px;

}

#popupContact h1{

text-align:center;

color:#6FA5FD;

font-size:22px;

font-weight:700;

border-bottom:1px dotted #D3D3D3;

padding-bottom:2px;

margin-bottom:20px;

}

#popupContactClose{

font-size:14px;

line-height:14px;

right:6px;

top:4px;

position:absolute;

color#A30101;

font-weight:700;

display:block;

}

За да се покаже изкачщия прозорец

Можеш да добавиш каквото пожелаеш в popup box.
Кодът трябва да влезе преди </body> tag.

<div id='popupContact'>

<a id='popupContactClose'>

<img alt='x' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQ6fj9OWcnYpztb84eBb5y1h3bGu-2zSgCbDgwvxnE4cwgj898A7puRUoISB5oi-HpBzt7VTgONRZMuPj0wa7_YXV7dv6FAW-j9TZOruXetfVuqn40NTLIunf0xIJEXPql_U1z3Fpo5eP/s800/Button-Close-icon.png' width='20'/>

</a>

<h1>PopUp Заглавие</h1>

ТУК пишеш това което искаш да се покаже в изкачащия прозорец.

<br/>

<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.blogtrickstream.com/2011/12/one-time-popup-for-blogger-like-box.html">Get This</a></p>

<p id='contactArea'/>

</div>

<div id='backgroundPopup'/>

Замени " PopUp Заглавие "с твоя избор. Също така замени " ТУК пишеш това което искаш да се покаже в изкачащия прозорец." със HTML кода, който искаш.

Това е.!!

Note 1: Трябва и 3 кода (HTML, Java Script and CSS) да се пейстнат в кожата на блога ти.
Note 2: Можеш да намалиш или увеличиш секундите на появата на изкачащия прозорец като коригираш този низ

//load popup

setTimeout("loadPopup()",5000);

също така можеш да промениш и размера на popup-а коригирайки този низ display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;

За да можеш да видиш ефекта, изтрий browser cookies, и клик на F5, за да рефрешнеш страницата.

SEO Блог на Пано Кондоянис

5.04.2012 г.