Притурки. Появяващ се прозорец в страницата на блога
.jpg)
понеделник
Здравейте. Днес имам за вас кратко описание на това как да направите един появяващ се прозорец в долната част на блога с важни за вас хипервръзки. Прозорецът ще се показва в долния ляв ъгъл на страницата при превъртането ѝ.
Като пример избрах да се показват хипервръзки към желани публикации, за които смятате, че представляват интерес за читателите и добавих хипервръзка към главната страница на блога.
➤Ако искате да оставите прозореца видим за постоянно, премахнете от кода участъка, маркиран в червено в неговото начало.
➤И съответно в HTML кода, въведете вашите връзки към необходимите страници и техните имена.
➤Можете да проверите вашият прозорец след корекциите на тази страница.
➤Кодът съдържа елемента target = "_ blank", за да се отвори хипервръзката в нов прозорец.
Ако искате, можете да изтриете и тези редове.
За всичко останало в кода смятам, че вече имате достатъчно познания и опит.
Успех и до нови срещи.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Като пример избрах да се показват хипервръзки към желани публикации, за които смятате, че представляват интерес за читателите и добавих хипервръзка към главната страница на блога.
Описание
Можете да направите два варианта на този прозорец. В първия вариант прозорецът ще се затвори след 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>
<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", за да се отвори хипервръзката в нов прозорец.
Ако искате, можете да изтриете и тези редове.
За всичко останало в кода смятам, че вече имате достатъчно познания и опит.
Успех и до нови срещи.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Благодарности за енти път от мен. :)