Как да направим one time popup за Blogger блог?

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

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

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

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, потърси за този низ   ]]>  и ПРЕДИ него добави следното:

#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;

fo
nt-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.
Кодът трябва да влезе преди  tag.

x

PopUp Заглавие

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

Get This

Замени " 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, за да рефрешнеш страницата.

The following two tabs change content below.
Казвам се Панайотис Кондоянис и се занимавам с изработка на уеб сайтове и SEO оптимизация за класиране на първа страница в google.bg и google.gr. Поддържам този личен блог на Български както и problogger.gr на Гръцки. Можете да ме намерите в: Google+, Twitter, Facebook, Pinterest, Linkedin или на email.