[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Всплывающий мини-чат в углу сайта
Sherzod_230688Дата: Chorshanba, 16.04.2014, 22:53 | Сообщение # 1
Майор
Группа: Sayt Prezidenti ( SP)
Сообщений: 4702
Статус: Оффлайн


Цитата
Простой но в ту же минуту полезный скрипт для вызова мини чата.

Симпатичная кнопочка распологаеться в нижнем правом углу сайта, при необходимости можно легким кликом вызвать мини-чат и так же его закрыть.

Нужный скрипт для экономии места на сайте.

В нижнею часть сайта, после футера добавляем:

Код
<style>   
.chat_box {display:none;position:fixed;bottom:15px;right:15px;border:1px solid #dddddd;background:#fbfbfb;padding:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:2px 2px 3px #9b9b9b;-webkit-box-shadow:2px 2px 3px #9b9b9b;box-shadow:2px 2px 3px #9b9b9b;}   
.chat_box div.close {display:block;position:absolute;right:0;top:0;background:url('http://ucozmafia.ru/polzv/c9/46619a1a2028.png') no-repeat;width:16px;height:16px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}   
.chat_box div.close:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}   

div.chat_button {display:block;width:75px;height:75px;background:url('http://ucozmafia.ru/polzv/c9/be5db128dc47.png') no-repeat;position:fixed;bottom:15px;right:15px;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}   
div.chat_button:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}   
</style><script src="http://ucozmafia.ru/polzv/imgc/higer.js" type="text/javascript"></script>   
<div class="chat_button" onclick="$('.chat_button').fadeOut('fast');$('.chat_box').slideToggle('slow');"></div>   
<div class="chat_box"><div class="close" onclick="$('.chat_box').slideToggle('fast');$('.chat_button').fadeIn('slow');"></div>   
<div id="chatBox">$CHAT_BOX$</div>   
<script type="text/javascript">   
function reloadTimeC() {   
$('#chatBox').load('/ #chatBox',function(data){   
$('#reloadSec').html('<span style="color:green;padding-top:4px;">Обновлено</span>');   
setTimeout("$('#reloadSec').html('')",1000);   
});   
};   
setInterval(reloadTimeC,30000);   
</script>   
</div>


Настройка мини-чата:

Если хотите подправить кнопку вызова мини-чата под свой дизайн сайта в право или в лево то ищем в коде такую строчку. »»»»»



Меняем вот эти цифры до нужного предела (подгоняем под свой дизайн).



Все готово красивая кнопка у вас на сайте.

P.S.» Если при установке скрипта не отряжается кнопка вызова мини чата, то качаем архив и вставляем скрипт из документа.


SEV.UZ
 
  • Страница 1 из 1
  • 1
Поиск: