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

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

1. Описание
2. Код
3. Уточнения

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

Описание

Можете да направите два варианта на този прозорец. В първия вариант прозорецът ще се затвори след 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", за да се отвори хипервръзката в нов прозорец.
 Ако искате, можете да изтриете и тези редове.


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

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

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

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