Блог - Веб-студия IPC : Одесса : Создание и продвижение сайтов

Облако тегов облегченный

Поступило много вопросов по установке облако тегов
для этого мы переделали и решили облегчить веб мастеру
создание подобного 3D флэш облака.

Создаем вначале Информер "Теги"
в него вставляем этот код и все:

Код

Категория: Скрипты | Просмотров: 480 | Добавил: master | Дата: 11.09.2014 | Комментарии (0)

Раздвижное меню для ucoz

Раздвижное меню для ucoz

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

Установка:

1. Копируем код и вставляем в CSS:

Код

a:focus, a:hover {
color : #7dbc00;
}

a {
color : #fff;
text-decoration : none;
}

#navigation {
margin-bottom : 5px;
}

.subnav {
color : #d1d1d1;
text-align:center;
}

.navhead, .navhead_blank {
width:100%;
text-align:center;
height:21px;
padding-top:3px;
background:url('http://wallaby.ucoz.ru/menu/greenrep.png') 0 0 repeat-x;
border:1px solid #7dbc00;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-bottom:5px;
}

.selected {
  background:url('http://wallaby.ucoz.ru/menu/whiterep.png') 0 0 repeat-x;
border:1px solid #e8e8e8;

font-weight:bold;
}

.selected span {
color:#000!important;
}

.navhead {
cursor : pointer;
}

.submenu {

width:100%;
margin : 0;
padding : 0;
list-style : none;
margin-bottom:20px;
}

.submenu li {
margin:0 auto;
width : 95%;

}

.submenu li a {
width:100%;
display : block;
color : #ccc;
padding-top : 3px;
height : 20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#111;
margin-bottom:3px;
border:1px solid #222;
}

.submenu li a:hover {
color : #fff;
background:#222;
border:1px solid #333;
}

2. Вставляем в любой блок на сайте(туда, где хотим видеть раздвижное меню для ucoz):

Код

<div id="navigation">
  <div class="sidenav">
  <div class="navhead_blank"><span><a href="#" title="">Главная страница</a></span></div>
  <div class="navhead selected"><span>Меню 1</span></div>
  <div style="display: block;" class="subnav">

  <ul class="submenu">
  <li><a href="#" title="">Ссылка 1</a></li>
  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="#" title="">Ссылка 3</a></li>
  <li><a href="#" title="">Ссылка 4</a></li>
  </ul>
  </div>

  <div class="navhead"><span>Меню 2</span></div>
  <div style="display: none;" class="subnav">
  <ul class="submenu">
  <li><a href="#" title="">Ссылка 1</a></li>
  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="#" title="">Ссылка 3</a></li>
  </ul>

  </div>
  <div class="navhead"><span>Меню 3</span></div>
  <div style="display: none;" class="subnav">
  <ul class="submenu">
  <li><a href="#" title="">Ссылка 1</a></li>
  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="#" title="">Ссылка 3</a></li>

  <li><a href="#" title="">Ссылка 4</a></li>
  </ul>
  </div>
  <div class="navhead"><span>Меню 4</span></div>
  <div style="display: none;" class="subnav">
  <ul class="submenu">
  <li><a href="#" title="">Ссылка 1</a></li>

  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="#" title="">Ссылка 3</a></li>
  </ul>
  </div>
  <div class="navhead"><span>Меню 5</span></div>
  <div style="display: none;" class="subnav">
  <ul class="submenu">

  <li><a href="#" title="">Ссылка 1</a></li>
  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="http://tpl.if.ua" title="">Ссылка 3</a></li>
  </ul>
  </div>
  </div>
  </div>

3. Перед </head> на каждой странице:

Код

Категория: Меню | Просмотров: 479 | Добавил: master | Дата: 11.09.2014 | Комментарии (0)

Раздвижное меню для ucoz

Раздвижное меню для ucoz

Шикарное раздвижное меню для ucoz в тёмных тонах. Данное вертикальное меню для ucoz просто находка, мне очень понравилась его простота и элегантность, не всегда эти качества сочитаються. Меню ucoz полностью рабочие(проверял 14.02.11), картинки качать ненужно.
Меню для ucoz
Установка скрипта для ucoz меню очень просто, забрасывайте код "меню для ucoz" в ваш блок на сайте, все)

Код

<link rel="stylesheet" type="text/css" href="http://wallaby.ucoz.ru/css_templates/menus.css" />
  <script type="text/javascript" src="http://wallaby.ucoz.ru/js_template/menus.js">
  </script>
  <script type="text/javascript">
  // <![CDATA[
  var myMenu;
  window.onload = function() {
  myMenu = new SDMenu("my_menu");
  myMenu.init();
  };
  // ]]>
  </script>
  <div id="my_menu" class="sdmenu">
  <div class="collapsed">
  <span>Главное меню</span>
  <a href="/">Главная страница</a>
  <a href="/forum">Форум</a>
  <a href="/search/">Поиск по сайту</a>
  <a href="/load/114">Фильмы</a>
  <a href="/dir">ТОП сайтов</a>
  <a href="/forum/40-2159-1">Раздача 7-знаков</a>
  <a href="/forum/102">GOLD ключи для файлоомеников</a>
  <a href="/forum/44-2396-1">FAQ по uCoz</a>
  </div>
  <div class="collapsed">
  <span>Nokia 5530 XM</span>
  <a href="/board">Главная страница</a>
  <a href="/board/1">Игры</a>
  <a href="/board/3">Темы</a>
  <a href="/board/7">Фильмы</a>
  <a href="/board/2">Программы</a>
  <a href="/board/4">Обои</a>
  <a href="/board/8">Разное</a>
  <a href="/forum/34-2203-1">Обзор и обсуждения Nokia 5530 XpressMusic</a>
  <a href="/forum/34-2204-1">Ответы на вопросы</a>
  </div>
  <div class="collapsed">
  <span>Программы</span>
  <a href="/load/2">Безопасность</a>
  <a href="/load/3">Мультимедия</a>
  <a href="/load/5">Интернет</a>
  <a href="/load/40">Книги/Журналы</a>
  <a href="/load/41">OC</a>
  <a href="/load/45">Софт</a>
  <a href="/load/80">Система</a>
  <a href="/load/81">Офис</a>
  <a href="/load/82">Графика</a>
  <a href="/load/104">Portable Soft </a>
  <a href="/load/105">Русификаторы</a>
  <a href="/load/106">CD/DVD</a>
  <a href="/forum/53">Програмное обеспечение</a>
  </div>
  <div class="collapsed">
  <span>CS:S</span>
  <a href="/load/154">Карты</a>
  <a href="/load/155">Моды</a>
  <a href="/load/156">Патчи</a>
  <a href="/load/157">Модели оружия</a>
  <a href="/load/158">Взрывы/Выстрелы</a>
  <a href="/load/159">Модели игроков</a>
  <a href="/load/160">Читы</a>
  </div>
  <div class="collapsed">
  <span>Онлайн фильмы</span>
  <a href="/publ">Главная страница</a>
  <a href="/publ/1">Комедии</a>
  <a href="/publ/2">Боевики</a>
  <a href="/publ/3">Фэнтези</a>
  <a href="/publ/4">Ужасы</a>
  <a href="/publ/5">Драма</a>
  <a href="/publ/6">Мультики</a>
  <a href="/publ/7">Юмор,приколы</a>
  <a href="/publ/8">Приключения</a>
  <a href="/publ/9">Детективы</a>
  <a href="/publ/10">Документальные</a>
  <a href="/publ/11">Трейлеры</a>
  <a href="/publ/12">Онлайн ТВ</a>
  <a href="/publ/131">Клипы онлайн</a>
  </div>
  <div class="collapsed">
  <span>CS-1.6</span>
  <a href="/load/62">Скачать CS 1.6</a>
  <a href="/load/63">Готовые сервера</a>
  <a href="/load/64">Карты</a>
  <a href="/load/65">Модели оружия</a>
  <a href="/load/66">Модели игроков</a>
  <a href="/load/67">Патчи</a>
  <a href="/load/68">Боты</a>
  <a href="/load/69">Моды</a>
  <a href="/load/70">Читы</a>
  <a href="/load/71">Спрайты</a>
  <a href="/load/72">Руссификация cs</a>
  <a href="/load/73">Античиты</a>
  <a href="/load/119">Плагины</a>
  <a href="/load/147">Софт</a>
  <a href="/load/74">Разное</a>
  <a href="/forum/61">Форум о Counter Strike</a>

  </div>
  <div class="collapsed">
  <span>Все для uCoz</span>
  <a href="/load/18">Шаблоны для сайтов</a>
  <a href="/load/19">Шаблоны для форумов</a>
  <a href="/load/20">Иконки групп</a>
  <a href="/load/21">Ранги</a>
  <a href="/load/23">Кнопки для форумов</a>
  <a href="/load/115">Статьи вебмастер</a>
  <a href="/load/116">Макеты </a>
  <a href="/forum/69">Скрипты для uCoz& ... Читать дальше »

Категория: Меню | Просмотров: 560 | Добавил: master | Дата: 11.09.2014 | Комментарии (0)

Меню для ucoz горизонтальное

Меню для ucoz горизонтальное

Меню для ucoz в тёмных тонах(серое). Отлично будет гармонировать с любой шапкой сайта. Горизонтальное меню для ucoz легко и просто устанавливается - скопируя код в нужное место на сайте.

Установка "Горизонтальное меню для ucoz":

Копируем код в Глобальные блоки - Верхняя часть сайта.

Код

<div align="center"><div style="display:none;"><a href="http://wallaby.ucoz.ru/">Шаблоны для ucoz</a></div><span class="UhideBlock"><link rel="stylesheet" type="text/css" href="http://wallaby.ucoz.ru/menu/menu_wallaby3.css" />

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td class="menu_left" align="left"></td>
  <td class="menu_center" align="left">
  <ul class="topmenu">
  <li><a href="/" title="Главная">Главная</a></li>
  <li><a href="/forum" title="Форум Веб-майстрів">Форум</a></li>
  <li><a href="/load/prog/3" title="Програм/Soft">Програмы</a></li>
  <li><a href="/load/films/29" title="Скачать безплатно">Фильмы</a></li>
  <li><a href="/load/webm/19" title="Все для Веб-мастера">Все для Веб</a></li>
  <li><a target="_blank" title="Будь в курсе" href="/">RSS</a></li>
  <li><a title="" href="#" class="last_item"></a></li>
  </ul>
  </td>
  <td class="menu_right" align="left">
  <div class="searchbg">
<form action='/search'>
<input type="hidden" name="do" value="search" />
<input type="hidden" name="t" value="0">
<input type="hidden" name="m" value="dir" />
<input type="hidden" name="m" value="forum" />
<input type="hidden" name="m" value="load" />
<input type="hidden" name="m" value="news" />
<input type="hidden" name="m" value="load" />
<input type="hidden" name="m" value="publ" />
<input type="hidden" name="m" value="board" />
<input name="q" value="найти по сайту wallaby.ucoz.ru..." onBlur="if(this.value=='') this.value='найти по сайту wallaby.ucoz.ru...';" onFocus="if(this.value=='найти по сайту wallaby.ucoz.ru...') this.value='';" type="text" class="search_input" />
<input class="search_but" alt="Искать" type="image" src="http://wallaby.ucoz.ru/menu/spacer.gif" />
</form>
</div>
</td>
</tr>
</table>

Категория: Меню | Просмотров: 451 | Добавил: master | Дата: 11.09.2014 | Комментарии (0)

Поиск для сайта ucoz

Поиск для сайта ucoz

Новый вид поиска для сайта на uCoz. Компактный поиск для сайта ucoz, придаст компакности, цвет кнопки можна подобрать под свой дизаин. Красивый скрипт поиска для ucoz!

Установка "Скрипт поиска для ucoz":

1)В css вставляем:

Код

#searchsubmitborder {
border: 1px solid #3358A5;
display:inline-block;
}
input[type="search"]{
border:1px solid #C0CAD5;
font-family:tahoma,tahoma,verdana,arial,sans-serif,Lucida Sans;
font-size:11px;
padding:3px;
color: rgb(119, 119, 119);
}
.searchSbmFl {
background:none repeat scroll 0 0 #6386D0;
border-bottom:1px solid #ABBBDE;
border-top:1px solid #ABBBDE;
cursor:pointer;
height:19px;
color:#FFFFFF;
text-shadow: 1px 1px 0px #3358A5;
font-size:10px;
display:inline-block;
font-weight:bold;
padding:2px;
}

2) Там где будет поиск:

Код

Категория: Скрипты | Просмотров: 465 | Добавил: master | Дата: 11.09.2014 | Комментарии (0)

Слайдер Flux с эффектом листающих страниц

Слайдер с перелистывающим эффектом

Слайдер с эффектом перелистывания страниц, работает на jQuery с применением плагина Flux и эффектом Turn.Всё настроено для работы на сайте uCoz, он будет показывать только на динамических страницах, для работы в материале (как здесь) слайдер нужно поместь в фрейм.В местах регулировок сделаны комментарии выделенные зелёным цветом, можно включить или отключить автовоспроизведение и добавить кнопки управления сменой изображений.Имейте в виду, картинки или фотографии должны быть одного размера, сделать слайдер с автомасштабированием не получится.

Код

Категория: Слайдеры | Просмотров: 793 | Добавил: RedStar | Дата: 17.08.2014 | Комментарии (0)

Контрастная прозрачность для картинок и текста

Делаем контрастность прозрачности картинкам и тексту

Изначально рассеяная контрастность прозрачности после наведения мышкой на элемент будет восстановлена до реального состояния.Подобный эффект может быть применён к любым элементам, картинкам и тексту в частности.Скрипт работает при наличии подключенной библиотеки jQuery, на сайтах системы uCoz она подключена по умолчанию.Установка предельно проста, нужно добавить скрипт в зону HTML где он будет проявлять свой эффект и добавить элементу класс class="dscontrast" как это показано в примере для установки.Вам останется определить что будет задействовано для изменения прозрачности.

Скрипт для установки эффекта
Сам скрипт будет работать при добавлении в любую зону сайта поддерживающую HTML режим.Показана работа одновременно 2 разных тегов с подключенным классом контрастности.

Код

Категория: Скрипты | Просмотров: 451 | Добавил: RedStar | Дата: 17.08.2014 | Комментарии (0)

Галерея Zoom Lite с плавной сменой изображений

Галерея для сайта с плавной сменой изображений

Галерея чередует установленные изображения в виде картинок или фотографий предавая им эффект плавной смены.Настройки предельно просты,компановка так же не обременена километровыми значениями.Добавлены эффекты теней и округления краёв галереи, если Вам не нужны подобные эффекты можете их удалить.В местах настроек сделаны выделенные комментарии, это позволит без определённого навыка настроить галерею как нужно.

Код

Категория: Слайдеры | Просмотров: 705 | Добавил: RedStar | Дата: 17.08.2014 | Комментарии (0)

Красивое горизонтальное меню

Вставляем этот код в CSS,
Код

/***

  * Autor makeup: z1MO_ok
  * Demo URL: http://4gmob.ru/menu/
  * Autor URL: http://4gmob.ru/
  * Skype: artmen_ok

***/

#menu_bg {background:url(/img/bg_menu.png) no-repeat;width:940px;height:51px;overflow:hidden;margin:0 auto;position:relative;padding:6px;}
#menu {list-style:none;margin:0;padding:0;background:url(/img/bg_menu.png) no-repeat 0 -63px;width:938px;height:48px;overflow:hidden;border-radius:10px;}
#menu li {float:left;color:#fff;font:bold 11px Tahoma;text-shadow:0 2px 0 #01263c;padding:0 45px;height:48px;line-height:48px;}
#menu li:hover {background:url(/img/menu_li_hover.png) repeat-x 0 0;text-shadow:0 2px 0 #02486b;padding:0;}
#menu li a {color:#fff;font:bold 11px Tahoma;text-shadow:0 2px 0 #01263c;text-decoration:none;}
#menu li:hover span {background:url(/img/menu_li_hover.png) no-repeat center bottom;height:48px;display:block;line-height:48px;padding:0 45px;}
.divider {background:url(/img/divider.png) no-repeat right;width:2px;height:48px;display:block;float:left;}

Этот код ставим в нашу страницу сайта.
Код

<div id="menu_bg">
<ul id="menu">

<li><a href="#"><span>Home</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>About Us</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Services</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Products</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Clients</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Blog</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Contact</span></a></li>

</ul>
</div>

Скачать архив с исходниками меню.

Категория: Меню | Просмотров: 504 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

Маленький слайдер для автоматической смены картинок

Компактный слайдер работающий автоматически

Слайдер хоть и маленький но может прокручивать любое количество изображений.У слайдера нет кнопок управления,он работает автоматически.Работать он будет только на динамических страницах (типа главной),в материалах модулей он будет работать не на всех сайтах.На меняющиеся в нём картинки можно прикрепить ссылки и использовать в качестве своеобразного меню.Картинки желательно применять с размерами 320Х240,для изменения разрешения изображений можете воспользоваться специальной программой предназначеной для уменьшения размеров.Программа не сложная,на сайте есть виде по работе с ней. Кстати можно изменить и фоновую картинку слайдера и его размеры на нужные,в нижней части есть редактор для экспериментов с кодами примеров - не забудьте воспользоваться.Если что то не понятно или существуют какие либо предложения,используйте формы комментариев.

Код

Категория: Слайдеры | Просмотров: 576 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

1-10 11-20 ... 31-40 41-50 51-60 61-70 71-80 ... 321-330 331-332