Окно,в которое Вы можете поместить любую информацию,окно исчезнет через 10 секунд (по умолчанию ).Применить его для информирования о новых материалах на сайте,но можно использовать для любых целей.Скрипт полностью настроен для работы на сайте юКоз,можно использовать добавив весь код прямо в материал.В каждом материале могут быть окна с различным содержимым.При добавлении в материал используйте "Панель html кодов" ( там где "Панель bb кодов" ).Для более детальной настройки используйте регулировки выделенные в коде комментариями.На сайте есть все применяемые свойства и теги,для детального ознакомления введите название в поиске сайта.В этом материале применяется окно для демонстрации.
Code
<style>
#dsinfobox {
/* -- Окно зафиксировано -- */
position:fixed;
/* -- Ширина окна -- */
width: 220px;
/* -- Положение от левой части страницы -- */
left:5px;
/* -- Положение от нижней части страницы -- */
bottom:5px;
/* -- Бордюра нет -- */
border: 0;
/* -- Цвет фона внутри окна -- */
background-color: #fff;
/* -- Отступ внутри окна -- */
padding: 4px;
/* -- Окно над всем контентом -- */
z-index: 100;
/* -- Видимость окна -- */
visibility:hidden;
}
#dsinfolinkborder {
margin:7px 5px;
padding:3px;
border:1px solid rgba(0,0,0,0.2);
border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
}
#dsinfobox {
/* -- Тени окна -- */
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
/* -- Закругление углов окна -- */
border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
/* -- Тени окна,медленное появление -- */
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
#dsinfobox:hover {
/* -- Тени окна при наведении -- */
-o-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
}
#dsnew1 {/* -- Заголовок в окне --*/
/* -- Отступ заголовка --*/
padding:5px;
/* -- Размер и и тип шрифта заголовка --*/
font: 18px 'Georgia';
/* -- Жирный шрифт заголовка --*/
font-weight:bold;
/* -- Цвет в заголовке -- */
color:#222;
}
.dsinfolink a:link {
/* -- Цвет ссылок в окне -- */
color:blue;
/* -- Размер и и тип шрифта ссылок --*/
font: 17px 'Georgia';
/* -- Убираем подчёркивание у ссылок --*/
text-decoration:none;
/* -- Отступы у ссылок у ссылок --*/
padding:5px 7px;
}
.dsinfolink a:hover {
/* -- Цвет ссылок в окне при наведении мышки -- */
color:green;
/* -- Размер и и тип шрифта ссылок --*/
font: 17px 'Georgia';
}
#dsifobox-off {
position:absolute;
top:1px;
right:5px;
font: 19px 'Georgia';
font-weight:bold;
}
#dsifobox-off a:link {
color:red;
text-decoration:none;
}
</style>
<script type="text/javascript" src="http://kgb.ucoz.de/js/dsinfobox.js">
</script>
<div id="dsinfobox">
<strong id="dsnew1">Новые материалы</strong>
<div id="dsinfolinkborder">
<div class="dsinfolink">
<a href="#">Это Ваша ссылка</a><br>
<a href="#">Это Ваша ссылка</a><br>
<a href="#">Это Ваша ссылка</a><br>
<a href="#">Это Ваша ссылка</a><br>
<a href="#">Это Ваша ссылка</a><br>
<a href="#">Это Ваша ссылка</a><br>
<a href="#">Это Ваша ссылка</a><br>
<a href="http://artnov.ucoz.com/" target="_blank"><img
src="http://artnov.ucoz.com/logo/LOGOGN.png" border="0" alt="Галерея картин"></a><br>
</div>
</div>
<div id="dsifobox-off">
<a href="#" onClick="hidefadebox();return false">X</a>
</div>
</div>
