» »

Выдвижной мини чат STVUG для ucoz


Выдвижной мини чат STVUG для ucoz

Вам представляю выдвижной мини чат, под светлый и темный сайт uCoz сайта. Кнопка и на ее клик и он появится и стоять будет вверху с левой стороны. Для начало делалось под черный оттенок сайта, но потом попробовал поставить код сайта zornet.ru и прекрасно получился светлый. И также форма добавление была взята, хоть там темные кнопки, но так отлично смотрятся, что сами видите. Но теперь вам даже можно светлый установить на любую гамму вашего сайта.

Так будет смотреться когда он закрыт.

Выдвижной мини чат STVUG для ucoz

Установка:

В низ сайта и на самый вверх.

Код
<div class="slide-out-div">  
  <a class="handle" style="border:1px solid #;border-right:0" href="Мини-чат">Мини-чат</a>  
  $CHAT_BOX$  
  </div>  
  <style type="text/css" media="screen">  
  .slide-out-div {padding:10px;width:250px;background:#1c1c1c;border:#4A4A4A 1px solid;}  
  </style>  
  <script src="/mini-chat/jquery.tabSlideOut.v1.2.js"></script>  
  <script>  
  $(function(){  
  $('.slide-out-div').tabSlideOut({  
  tabHandle: '.handle',  
  pathToTabImage: '/mini-chat/m-chat_.png',  
  imageHeight: '127px',  
  imageWidth: '45px',  
  tabLocation: 'left',  
  speed: 300,  
  action: 'click',  
  topPos: '30px',  
  fixedPosition: true  
  });  
  });  

  </script>


Вид материала в админ панели в разделе мини чат.

Код
<div class="msg">  
  <div class="chat-name"><a href="$PROFILE_URL$"  
  rel="nofollow" rel="nofollow"><img alt="" src="http://zornet.ru/Ajaxoskrip/Frank/Office-Customer-Male-Light-icon.png" width="15" border="0" style="vertical-align:-2px"/></a>  
  <b><a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='$NAME$, ';return false;"><font color="red">$NAME$</font>$NAME$</a></b></div><div class="chat-time" title="$DATE$"><font color="#4C6C75">$TIME$</font></div>  
  <div class="chat-text">  
<font color="#5c5c5c">$MESSAGE$</font>  
  </div>  
  </div>
<style>
.msg {width:99%;margin-bottom:6px;background:url('http://zornet.ru/Ajaxoskrip/Frank/chat-msg.jpg') 100% 0 no-repeat #E1E1E1;  
  border:1px solid #BBB6B6;border-radius:2px;text-shadow:0 1px 0 #fff;  
  -moz-box-shadow:0 0 0 1px #fff;  
  -webkit-box-shadow:0 0 0 1px #fff;  
  -o-box-shadow:0 0 0 1px #fff;  
  box-shadow:0 0 0 1px #fff;  
  }  
  .chat-name {float:left;border-bottom:1px solid #C7C7C7;width:120px;padding:5px 7px;}  
  .chat-name a {text-shadow:0 1px 0 #fff;}  
  .chat-time {float:right;border-bottom:1px solid #C7C7C7;width:34px;text-align:right;padding:5px 3px;}  
  .chat-text {clear:both;border-top:1px solid #f2f2f2;padding:7px;}  
.op_fon {background:#f7f7f7;border:1px solid #DBDBDB;border-right:1px dotted #ccc;width:40px;height:40px;}  
  .gost {background:#fff;border:1px solid #DBDBDB;padding:5px;border-left:none;text-align:left;margin-left:-3px;padding-bottom:2px;margin-top:-5px;height:40px;font:10px Tahoma;}  
  .op_fon img {padding-left:5px; filter:progid:DXImageTransform.Microsoft.alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
</style>


Также меняем форму добавление.

Код
<div align="center"><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a>Доступ запрещен</div>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<td width="70%" align="right">
<center><a href="$RELOAD_URI$" title="Обновить"><img alt="" border="0" align="absmiddle" src="http://i.imgur.com/jhIZqgd.png" style="padding-right: 1px;" width="34" height="17"></a>  
<a href="$SMILES_URI$" title="Вставить смайл"><img alt="" border="0" align="absmiddle" src="http://i.imgur.com/4kyD8Zt.png" style="padding: 0 1px 0 3px;" width="34" height="17"></a>  
<a href="$BBCODES_URI$" title="BB-Коды"><img alt="" border="0" align="absmiddle" src="http://i.imgur.com/faolkYc.png" style="padding-right: 1px;" width="34" height="17"></a>  
<a href="$MSGCTRL_URI$" title="Управление сообщениями"><img alt="" border="0" align="absmiddle" src="http://i.imgur.com/m2bspN7.png" style="padding-right: 1px;" width="34" height="17"></a></center>
</td></tr></table>

<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td colspan="2">$FLD_NAME$</td></tr>
<tr><td width="50%">$FLD_EMAIL$</td><td>$FLD_URL$</td></tr>
</table>



<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="50%">$FLD_CUSTOM1$</td><td>$FLD_CUSTOM2$</td></tr>
</table>



<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="50%">$FLD_SECURE$</td><td align="right">$IMG_SECURE$</td></tr>
</table>


<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="95%" rowspan="2">$FLD_MESSAGE$</td>
<td align="center" valign="top"><div style="font-size:10px;">$LENGTH_COUNTER$</div></td>
</tr><tr><td align="center" valign="bottom">$SUBMIT$</td></tr></table>


Теперь переходим на темный.


Выдвижной мини красивый для ucoz

Здесь только нужно поменять вид материала в самом сайте админ панели, что делали для первого.

Код
<div style="display:none"></a></div>  
<div class="cBlock$PARITY$" style="background:url(http://thecod.3dn.ru/diz/fon.gif);padding:0 4px 5px 2px;margin-bottom:3px;">  
<div style="float:right;font-size:8px;" title="$DATE$">$TIME$</div>  
<div style="text-align:left;">  
<a href="$PROFILE_URL$" title="$USERNAME$" rel="nofollow"><img alt="" src="http://s106.ucoz.net/img/icon/profile.png" width="13" border="0" style="vertical-align:-2px"/></a>   
<a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='$NAME$, ';return false;"><b>$NAME$</b></a>  
<a href="$EMAIL_JS$" title="$STR_EMAIL$">e-mail</a>  
<a rel="nofollow" href="$SITE$" target="_blank" title="$STR_URL$">www</a>  
</div>  
<div class="cMessage" style="text-align:left;">$MESSAGE$</div>  
<br>$STR_CUSTOM1$: $CUSTOM1$  
<br>$STR_CUSTOM2$: $CUSTOM2$  
</div>


Больше похоже на стандартный, возможно он и есть и смотрится очень великолепно.
03.01.2016 Просмотров: 601 Комментарий: (15)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
workman
workman 03.01.2016 15:301
0
Все очень просто. Тупо поставить вот так на тех страницах где должен выскакивать мини-чат и он будет появляться автоматически через 10 сек
Код
<script type="text/javascript">  setTimeout(function(){$('.web').fadeIn('fast')},10000) </script>
<div class="web" style="display: none;position:fixed;bottom:5px;right:10px;z-index: 999;">ЗДЕСЬ КОД МИНИ ЧАТА</div>
Kosten
Kosten 03.01.2016 16:442
0
Но 10 секунд для чата, это что то многовато, можно уйти уже успеть сайта.
workman
workman 03.01.2016 18:363
0
Так можно тут прописать .fadeIn('fast')},10000 именно - 100 (1 сек)
nikolla76
nikolla76 05.01.2016 00:134
0
Вот не пойму, это у всез или только на этой CMC такое, что один к сотне.
Kosten
Kosten 05.01.2016 00:505
0
Это у всех, uCoz не основа программирование и не чего с него не взято а давно уже все придумано и обкатано.
avatar