Още за изплаващите прозорци в Blogger

Добър ден на всички приятели, гости и постоянни читатели на моя блог. По ваша молба ще ви запозная с още начини за инсталиране на изплаващи прозорци в блог на платформата Blogger. Те внасят изменение в дизайна на блога, но самата аз не ги харесвам. Струва ми се, че са много притеснителни и досадни за посетителите ни. Въпреки това, все пак те съществуват и носят в себе си определена функционалност.

За изплаващите прозорци в Blogger

Техниката за създаване на popup прозорци е много разнообразна. В нея се използват както jQuery и javascript, така и СSS. Ще предложа 2 варианта на абсолютно прости модални прозорци. В Blogger те се инсталират чрез притурка HTML / JavaScript. Можете да добавите абсолютно всякаква информация в тях. Било то банер, текст или код. Всичко, което душата ви поиска.

Първи вариант

Този popup прозорец може да се срещне на много блогове и сайтове. Прозорецът не се показва веднага, а с известно закъснение. След определено време, което вие сте задали. И за да се открои на общия фон на страницата, външния фон се приглушава, притъмнява. Вижте пример в този блог. Задръжте за няколко секунди.

Веднага давам кода.

<div id="parent_popup">
<div id="popup">
 Във връзка с изпълнението и прилагането на Общ регламент относно защитата на данните (Регламент (ЕС) 2016/679), с който се хармонизират правилата за защита на личните данни в държавите-членки на ЕС, може да се запознаете с новата политика на “Blogzablogove” за Политика на конфиденциалност и защита.

Моля запознайте се с нея, за да продължите да използвате този блог.

  <a class="close"title="Разбрах" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div>
</div>
<script type="text/javascript">var delay_popup = 6000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>

<style>
#parent_popup{
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#popup{
    background: #fff;
    width: 500px;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border: 5px solid #2288bb ;
    position: relative;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
     border-radius: 15px;
}
.close{
    background-color: #2288bb ;
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    top: -24px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
     box-shadow: 1px 1px 3px #000;
}
.close:hover{
    background-color: #809FFE;
}
</style>

Пояснения

➤Числото 6000 (6 секунди) е времето, след което прозорецът се показва;

➤Блокът #parent_popup е отговорен за затъмнението на общия фон на страницата;

➤Положение fixed е зададено, за да стои отворен прозорецът при превъртане на страницата;

➤Може да се зададе разположението на самия прозорец:

top: 0;
right: 0;
bottom: 0;
left: 0;

➤Цветовите решения също така изберете сами, като променяте свойството - background-color;

Предлагам готови кодове за още разновидности на този прозорец. Разгледайте ги, за да проверите коя от тях ще ви допадне:

Тази разновидност можете да видите тук.

Кодът е:

<script type='text/javascript'>

$(window).bind("load", function() {

$('#kotak').animate({top:"200px"}, 1000);

$('a.close').click(function() {

$(this).parent().fadeOut();

return false;

});

});

</script>

<style>#kotak {

position:fixed !important;

position:absolute; /* IE6 */

top:-1000px;

left:50%;

width:300px;

margin:0 0 0 -182px;

height:auto;

padding:16px;

background-color:#f5f5f5 ;

border:4px solid #2288bb;

font:normal normal 1em/normal Roboto Condensed,Serif;

font-size: 14px; color:#111;

-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);

-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);

box-shadow:0 1px 3px rgba(0,0,0,.4);

}

#kotak a.close {

position:absolute;

top:-10px;

right:-10px;

background-color:#809FFE ;

font:normal bold 16px Roboto Condensed, Sans-Serif;

text-decoration:none;

line-height:22px;

width:22px;

text-align:center;

color:white;

border:2px solid white;

-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);

-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);

box-shadow:0 1px 2px rgba(0,0,0,.4);

-webkit-border-radius:22px;

-moz-border-radius:22px;

border-radius:22px;

cursor:pointer;

}</style>

<div id='kotak'><span style="font-weight:bold;"><center> Във връзка с изпълнението и прилагането на Общ регламент относно защитата на данните (Регламент (ЕС) 2016/679), с който се хармонизират правилата за защита на личните данни в държавите-членки на ЕС, може да се запознаете с новата политика на “Blogzablogove” за конфиденциалност и защита. Моля запознайте се с <span style="font-weight:bold;"><a href="https://www.thelibrary-bg.com/p/terms-of-use-of-blog.html">Политика на конфиденциалност и защита</a></span>, за да продължите да използвате този блог.

</center></span><br /><br /><center><a href=" https://www.blogzablogove.com/p/www.html" /></a>

</center>

<a class='close' href='#'>&times;</a>

</div>

А тази погледнете тук.

Нейният код е:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

<script type="text/javascript">

setTimeout(function(){$('.box').fadeOut('fast')},10000); //30000 = 30 секунди

</script>

<style>.box a:link {color:#F4FF74;text-decoration:none}

.box a:hover {text-decoration:underline;}

.box {position: fixed;bottom: 0px;left: 15px;padding: 10px;color: #fff;font-family: tahoma;font-size: 11px;font-family: tahoma;font-size: 11px;text-align: left;margin-bottom: 17px;width: 300px;background: #2B3039;padding: 7px;color: #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 3px;text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);-moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);}</style>

<div class="box">

<span style="Roboto Condensed,font-size:14px;color:#FFF">Във връзка с изпълнението и прилагането на Общ регламент относно защитата на данните (Регламент (ЕС) 2016/679), с който се хармонизират правилата за защита на личните данни в държавите-членки на ЕС, може да се запознаете с новата политика на “Blogzablogove” за Политика на конфиденциалност и защита. Моля запознайте се с тях, за да продължите да използвате този блог.</span>

<div style="margin:5px"><br /><a href="https://www.blogzablogove.com/p/www.html" target="_blank"></a>

<span style=" font-weight: bold;font-size:14px;color:#888"><a href="https://www.blogzablogove.com/p/www.html"target="_blank">Политика на конфиденциалност и защита</a></span>

</div></div>

Втори вариант

Прост модален прозорец, който се появява веднага, когато потребителят влезе в блога или сайта. Като пример за това, погледнете тестовия блог.

Като начало създаваме следния код:

<div id='kotak'><span style="font-weight:bold;"><center>Тук е заглавието</center></span><br /><br /><center>Тук е текстът, код на банер, изображение или друго
</center>
   <a class='close' href='#'>&times;</a>
</div>

Включваме Javascript:

<script type='text/javascript'>
$(window).bind("load", function() {
    $('#kotak').animate({top:"50px"}, 1000);

    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });
});
</script>

И задаваме стиловете на popup прозореца:

<style>#kotak {
  position:fixed !important;
  position:absolute;
  top:-1000px;
  left:50%;
  width:300px;
  margin:0 0 0 -182px;
  height:auto;
  padding:16px;
  background-color:#A78E8E ;
  border:2px solid white;
  font:normal normal 1em/normal Georgia,Serif;
  color:#111;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

#kotak a.close {
  position:absolute;
  top:-10px;
  right:-10px;
  background-color:#A78E8E ;
  font:normal bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:22px;
  width:22px;
  text-align:center;
  color:white;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:22px;
  -moz-border-radius:22px;
  border-radius:22px;
  cursor:pointer;
}</style>

А ето и целия код:

<script type='text/javascript'>
$(window).bind("load", function() {

    $('#kotak').animate({top:"50px"}, 1000);

    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });

});
</script>
<style>#kotak {
  position:fixed !important;
  position:absolute; /* IE6 */
  top:-1000px;
  left:50%;
  width:300px;
  margin:0 0 0 -182px;
  height:auto;
  padding:16px;
  background-color:#A78E8E ;
  border:2px solid white;
  font:normal normal 1em/normal Georgia,Serif;
  color:#111;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

#kotak a.close {
  position:absolute;
  top:-10px;
  right:-10px;
  background-color:#A78E8E ;
  font:normal bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:22px;
  width:22px;
  text-align:center;
  color:white;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:22px;
  -moz-border-radius:22px;
  border-radius:22px;
  cursor:pointer;
}</style>
<div id='kotak'><span style="font-weight:bold;"><center>Добре дошли в моя блог</center></span><br /><br /><center><a href=" https://www.blogzablogove.com/" target=_blank><img src=" https://c.radikal.ru/c28/1810/31/b16a951fecc4.jpg" title="Блог за блогове" /></a>
</center>
   <a class='close' href='#'>&times;</a>
</div>

Маркираното в синьо заменете със своя вариант.

Успех в разнообразяването на вашия дизайн!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: