Притурки. Появяващ се прозорец в страницата на блога

Притурки.
Здравейте. Днес имам за вас кратко описание на това как да направите един появяващ се прозорец в долната част на блога с важни за вас хипервръзки. Прозорецът ще се показва в долния ляв ъгъл на страницата при превъртането ѝ.



    Като пример избрах да се показват хипервръзки към желани публикации, за които смятате, че представляват интерес за читателите и добавих хипервръзка към главната страница на блога.

    Описание

    Можете да направите два варианта на този прозорец. В първия вариант прозорецът ще се затвори след 10 секунди. Така появяването му за посетителя няма да е особено досадно. Във втория можете да го оставите така, както е без да го променяте. В този случай е добре да промените фона му (отбелязан в синьо в кода) с цвят, който е подходящ за вашия блог.

    Код


    <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;right: 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="font-size:14px;color:#FFF"><b>Предлагам да прочетете</b></span>
    <div style="margin:5px"><br /><a href="адрес страница 1 " target="_blank">Название страница 1</a><br /><a href="адрес страница 2 "target="_blank">Название страница 2</a><br /><a href="адрес страница 3 " target="_blank">Название страница 3</a><br </div>
    <span style=" font-weight: bold;font-size:14px;color:#888"><a href="####"target="_blank">Главна страница</a></span>
    </div>



    Уточнения

    ➤Ако искате прозорецът да се затвори след 10 секунди, копирайте кода така както е и го инсталирайте в притурката HTML / JavaScript на което и да е място в оформлението на блога.

    ➤Ако искате да оставите прозореца видим за постоянно, премахнете от кода участъка, маркиран в червено в неговото начало.

    ➤И съответно в HTML кода, въведете вашите връзки към необходимите страници и техните имена.

    ➤Можете да проверите вашият прозорец след корекциите на тази страница.

    ➤Кодът съдържа елемента target = "_ blank", за да се отвори хипервръзката в нов прозорец.
     Ако искате, можете да изтриете и тези редове.


    За всичко останало в кода смятам, че вече имате достатъчно познания и опит.

    Успех и до нови срещи.

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

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

    BGtop


    OpenCloseComments

    4 Komentar

    • peSho 2 април 2018 г. в 12:45
      Направо ми четете мислите. Точно такъв прозорец ми хареса в един сайт, макар че там беше с изображение и се появяваше след превъртане на страницата до долу, а при мен тук се появява веднага. Остана малко да наглася цветовете и да му се радвам! :)
      Благодарности за енти път от мен. :)
    Cancel