2

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

изплаващите  прозорци в 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>


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

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

    2 коментара :

    1. Чудесен урок за пореден път благодарности!

      +1!

      ОтговорИзтриване
      Отговори
      1. Благодаря ви, старая се да обяснявам с повече подробности за тези, които проявяват интерес. И се радвам, че вие сте сред тях.

        Изтриване


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита