Всплывающее окно в нижней части страницы Blogger

Всем, доброго времени суток. Сегодня у меня шпаргалка как сделать появляющееся окно в нижней части блога с нужными ссылками. Окно будет появляться при прокрутке страницы в правом нижнем углу. В качестве примера я взяла ссылки на последние сообщения
и добавила ссылку на главную страницу.

Можно сделать 2 варианта такого окна.  В первом случае окно будет закрываться через 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>Название страницы 1</b></span>
<div style="margin:5px"><br /><a href="адрес страницы 1 " target="_blank">Название страницы 2</a><br /><a href="адрес страницы 2 "target="_blank">Название страницы 3</a><br /><a href="адрес страницы 3 " target="_blank">Название страницы 3</a><br /></div>
<span style=" font-weight: bold;font-size:14px;color:#888"><a href="http://www.shpargalochki.ru"target="_blank">Название страницы 1</a></span>
</div>

Если нужно, чтобы окно закрывалось через 10 секунд, копируйте код полностью и устанавливайте в гаджет HTML/JavaScript в любое место макета блога. Чтобы окно было видно постоянно, уберите участок кода который отмечен красным цветом. И соответственно в коде HTML впишите свои ссылки на нужные страницы и их названия. Можно проверить на этой странице.

В коде присутствует target="_blank" для того, чтобы ссылка открывалась в новом окне. При желании эти строки можно удалить.

Всем удачи и до новых встреч.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email