Ale ja pokażę Ci jak zrobić go w 10 minut, a z moimi gotowymi materiałami w minut: 3
No i nie będzie to zwykły popup, a inteligentna warstwa, której zadanie będzie zapis internauty na Twoją listę adresową.
Popup pokazuje się na każdej podstronie bloga, gdyż jest zapisany w głównym szablonie.
Posiada przycisk zamknięcia, który powoduje zniknięcie popupa na dobę. Czyli jeśli ktoś nie chce się dziś zapisać, to zamyka i się nie zapisze, ale jeśli wróci jutro, pojutrze, za miesiąc, to znów poprosimy go o zapis.
Informacja zapisuje się w cookie, poprzez JavaScript
Formularz zawiera walidację - standardową JS, jaką udostępnia Freebot.pl, bo właśnie tego systemu używam. Innymi słowy nie przepuścimy pustego pola, ani niepoprawnego adresu email, czy też braku akceptacji polityki prywatności.
W momencie kliknięcia na przycisk 'Zapisz mnie', kiedy wprowadzone dane są poprawne, w nowej karcie przenoszeni jesteśmy na stronę freebota, gdzie mamy informację o powodzeniu (lub nie powodzeniu) zapisu na listę. Wracając na bloga, popupa nie zobaczymy przez najbliższe 3 lata - przynajmniej na tej przeglądarce, a dokładniej do czasu gdy będzie ona pamiętała cookie:)
Skrypt formularza składa się z 3 prostych części: kodu html, styli CSS, oraz skryptu JavScript - ja te dwa ostatnie umieściłem na zewnętrznym serwerze i załączyłem jako pliki.
Zaczynamy umieszczanie
Przechodzimy do ustawień bloga. Wybieramy szablon, edycje kodu i dochodzimy do momentu, gdzie widzimy czysty kod szablonu:
Niemal na samej górze, zaraz za znacznikiem <head> umieszczamy pliki css i js, albo osadzamy tam te skrypty.
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function checkCookie()
{
var popup=getCookie("blog_popup");
if (popup!=null && popup==1)
{
// alert("nie pokazujemy popupa");
}
else
{
//document.getElementbyId("id_" + si).style.display='none';
document.getElementById("popup").style.display="block";
}
//alert('check');
}
function hidepopup()
{
setCookie("blog_popup", 1, 1);
document.getElementById("popup").style.display="none";
}
function SprawdzFormularz(f)
{
if (f.email.value=='')
{
alert('Nie podałeś/aś adresu e-mail.'); return false;
}
if ( ((f.email.value.indexOf('@',1))==-1)||(f.email.value.indexOf('.',1))==-1 )
{
alert('Podałeś/aś błędny adres e-mail');
return false;
}
if (f.imie.value=='')
{
alert('Nie podałeś/aś swojego imienia');
return false;
}
if (f.pp.checked == false )
{
alert('Musisz zgodzić się z Polityką Prywatności.');
return false;
} else
{
setCookie("blog_popup", 1, 1000);
hidepopup();
return true;
}
}
Funkcje skryptu pochodzą z freebota oraz W3C School - funkcje do obsługi cookie.
Poniższy kod CSS pisałem sam, poza formatowaniem formularza, który zapożyczyłem z freebota.
#popup {
width: 60%;
min-width: 620px;
height: 300px;
margin: 5% auto 0px 18%;
padding: 15px;
box-shadow: 0px 0px 195px #333;
background: #232323;
display: none;
font-family: arial;
color: #eee;
border-radius: 2px;
border: 1px solid #888;
position: absolute;
position: fixed;
z-index: 10000000000000;
}
#popup #pclose {
width: 14px;
height: 14px;
padding: 3px;
margin: -22px -22px 0px 0px;
background: #444;
color: #aaa;
text-align: center;
float: right;
font-size: 14px;
cursor: pointer;
border-radius: 10px;
}
#popup .title {
font-size: 18px;
displa: block;
font-weight: bold;
}
#popup .fform {
width: 310px;
margin-top: 25px;
padding: 15px;
background: #eee;
box-shadow: 0px 0px 5px #fff;
border-radius: 2px;
color: #333;
float: left;
}
#popup .fform input[type=text] {
width:180px;
display:block;
float:left;
}
#popup .fform input[type=submit] {
background: #cd0000;
color: #fff;
font-size: 14px;
font-weight: bold;
cursor: pointer;
padding: 10px 15px 10px 15px;
border-radius: 2px;
border: 0px;
float: right;
box-shadow: 0px 0px 3px #aaa;
}
#popup .fform label {
width:100px;
display:block;
float:left;
margin-right:15px;
}
#popup .fform .rrow {
height: 30px;
margin: 15px 0px 15px 0px;
clear:both;
display: block;
}
#popup .strz {
width: 260px;
margin-top: 70px;
float: right;
}
Korzystałem z praktycznie gotowych rozwiązań, poza jakimś w miarę przejrzystym wyglądem formularza, który Ty oczywiście możesz sobie zmienić.
Pozostał jeszcze sam kod html, który w większości to formularz skopiowany z freebota. Cały kod musisz wstawić zaraz za znacznikiem <body> w kodzie szablonu strony.
<div id="popup" style="display: none;">
<span id="pclose" onclick="javascript:hidepopup();">X</span>
<span class="title">Zapisz się, na moją listę adresową</span>
<img src="http://queenefekt.pl/strz.png" class="strz" />
<div class="fform">
<form target="_blank" action="http://www.implebot.pl/post.php" name="impleBOT.pl" method="post" onsubmit="return SprawdzFormularz(this)">
<input name="uid" type="hidden" value="32912" />
<input name="zrodlo" type="hidden" value="blog" />
<div class="rrow">
<label for="email">Twój E-mail:</label>
<input name="email" type="text" />
</div>
<div class="rrow">
<label for="imie">Twoje Imię:</label>
<input name="imie" type="text" />
</div>
<div class="rrow">
<input type="checkbox" name="pp" value="1" style="border:0px;" /> Zgadzam się z <a href="http://lukasdominikowski.blogspot.com/p/polityka-prywatnosci.html">Polityką Prywatności</a>
</div>
<input type="submit" value="Zapisz mnie" />
<div style="clear: both;"></div>
</form>
</div>
</div> Cały kod żywcem skopiowałem ze swojego bloga, musisz podmienić tutaj wartość znacznika <input> o nazwie uid - wpisując tam swój numer użytkownika freebot.
Również musisz zmienić link do polityki prywatności. Możesz korzystać z moich skromnych zasad, ale musisz umieścić je u siebie.
Również grafika strzałki jest na moim serwerze i nie jest do dla Ciebie pewne źródło, jeśli chodzi o przechowywanie plików, tym bardziej, że strzałka jest tymczasowo - docelowo będzie gratis, który chciałbym dawać wzamian za zapis na listę.
Zapisz teraz szablon i wejdź na swojego bloga. Co widzisz? Jest popup?
Brak komentarzy:
Prześlij komentarz