tornado

замена ссылок для скачивания на изображения

VOVA_N — Mon, 01 Feb 2021 19:15:10 GMT

Скрипт для uCoz: замена ссылок для скачивания на изображения NEW

скрипт для uCoz: замена ссылок для скачивания на изображения соответствующие файлобменникам.
Скрипт автоматически меняет ссылки для скачивания файлов, которые на Вашем сайте добавляют журналисты и меняет их на кнопки в формате *.png с именами файлообменников.

Теперь скрипт работает и с ссылками сокращенными в системе u.to. В скрипт добавлена возможность идентификации заменяемой ссылки по тегу title,если в заменяемой ссылке пописан тег title с исходной ссылкой скачивания с файлобменника, то эта ссылка также будет заменена.

Добавлено 17 новых файлобменников (с кнопками), теперь скрипт поддерживает 31 файлобменник:

Depositfiles.com Letitbit.net Vip-file.com Turbobit.net Unibytes.com FileSonic.com
GigaPeta.com Upload.com.ua Shareflare.net UploadBox.com Hitfile.net RapidShare.com
Hotfile.com Kilofile.com Upload24.net Uploading.com Bitoman.ru LetitFile.com FileServe.com
Oron.com FilesMonster.com MegaUpload.com ExtaBit.com FileShare.in.ua
Sms4file.com FileFactory.com BitShare.com File-bit.net SendItGlobal.com
Fly Upload Badongo.com YouFireLink.com

Установка:

1. Скачиваем архив

2. Распаковываем и содержимое, в том виде как оно там находится (в папке "otherlink") заливаем на сайт, т.е. у вас в корне сайта должна быть папка "otherlink" ,а в ней 31 изображение и файл скрипта.

3. Ставим на страницу материала и комментариев к ниму перед <./body.> (каталог файлов, новости, блог, статьи или что там у вас) код скрипта:

Код

А этот код в CSS:

Код

/* Автозамена ссылок */
.otherlink{
border:0;
margin:3px 0 3px 0;
}
/* Конец Автозамена ссылок */

Скачать Скрипт для uCoz: Замена ссылок для скачивания на изображения

Скачать с depositfiles

Аккордеон изображений для сайта на CSS3

VOVA_N — Mon, 24 Nov 2014 23:06:07 GMT

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

Шаг 1. HTML

Разметка будет очень простой, нам необходимо вывести пять классов, каждый из которых отвечает за свое изображение и его позиционирование в
пространстве:

Код

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

Шаг 2. CSS

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

Код

.wrapper {display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
.item {
display: flex;
flex-grow: 1;
transition: all .5s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
&:hover {
flex-grow: 4;
box-shadow: inset 0 0 20px #000;
}
&:after {
content: "";
width: 200%;
height: 43.33%;
background-color: rgba(#000, 0.75);
left: -50%;
bottom: -10%;
position: absolute;
transform: rotate(-15deg);
color: #fff;
text-align: center;
padding-top: 20px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Raleway';
font-weight: 100;
}
&.ryze {
background-image: url($ryze);
background-position: 70% center;
&:after {
content: "Ryze";
}
}
&.irelia {
background-image: url($irelia);
background-position: 45% center;
&:after {
content: "Irelia";
}
}
&.jinx {
background-image: url($jinx);
background-position: 70% center;
&:after {
content: "Jinx";
}
}
&.katarina {
background-image: url($katarina);
background-position: 70% center;
&:after {
content: "Katarina";
}
}
&.ziggs {
background-image: url($ziggs);
background-position: 75% center;
&:after {
content: "Ziggs";
}
}
}
}

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

Вот и все. Готово!

Эффект вращающегося куба

VOVA_N — Fri, 30 May 2014 00:27:56 GMT

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

Техника, которую будем использовать для создания куба, такая же, как и в этой статье .
Имеется два элемента: верхняя и лицевая сторона. Вращение происходит в этот раз снизу вверх.

Разметка HTMLВ каждом случае у нас имеется две оболочки: wrapper и item, а также элемент span содержащий описание

Код

PCVECTOR.NET Скрипты для ваших сайтов.

CSS
Каждый wrapper имеет параметры inline-block и значение переспективы 4000px. Item имеет значение preserve-3d у параметра transform-style, чтобы его потомки, также могли изменять 3D положение и имеет свойство transition для анимации перехода:

Код

[size=10].wrapper {
            display: inline-block;
            width: 310px;
            height: 100px;
            vertical-align: top;
            margin: 1em 1.5em 2em 0;
            cursor: pointer;
            position: relative;
            font-family: Tahoma, Arial;
            perspective: 4000px;
          }

          .item {
            height: 100px;
            transform-style: preserve-3d;
            transition: transform .6s;
          }

Изображение и описание будут использовать transition (переход) и будут изменять значения border-radius и box-shadow при наведении курсора.

Код

.item img {        display: block;        position: absolute;        top: 0;        border-radius: 3px;        box-shadow: 0px 3px 8px rgba(0,0,0,0.3);        transform: translateZ(50px);        transition: all .6s;
          }
          .item .information {        display: block;        position: absolute;        top: 0;        height: 80px;        width: 290px;        text-align: left;        border-radius: 15px;        padding: 10px;        font-size: 12px;        text-shadow: 1px 1px 1px rgba(255,255,255,0.5);        box-shadow: none;        background: linear-gradient(top,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);        transform: rotateX(-90deg) translateZ(50px);        transition: all .6s;
          }

И при наведении курсора, item будет вращаться, изображение и блок информации будут изменять тени и радиусы:

Код

.item:hover {        transform: translateZ(-50px) rotateX(95deg);      }
            .item:hover img {          box-shadow: none;          border-radius: 15px;        }
            .item:hover .information {          box-shadow: 0px 3px 8px rgba(0,0,0,0.3);          border-radius: 3px;        }

Код в CSS:

Код

.wrapper {
         display: inline-block;
         width: 310px;
         height: 100px;
         vertical-align: top;
         margin: 1em 1.5em 2em 0;
         cursor: pointer;
         position: relative;
         font-family: Tahoma, Arial;
         perspective: 4000px;
       }

       .item {
         height: 100px;
         transform-style: preserve-3d;
         transition: transform .6s;
       }
   .wrapper {
        display: inline-block;
        width: 310px;
        height: 100px;
        vertical-align: top;
        margin: 1em 1.5em 2em 0;
        cursor: pointer;
        position: relative;
        font-family: Tahoma, Arial;
        perspective: 4000px;
      }

      .item {
        height: 100px;
        transform-style: preserve-3d;
        transition: transform .6s;
      }
.item:hover {
        transform: translateZ(-50px) rotateX(95deg);
      }

        .item:hover img {
          box-shadow: none;
          border-radius: 15px;
        }

        .item:hover .information {
          box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
          border-radius: 3px;
        }

Неплохая менюшка для сайта

VOVA_N — Thu, 29 May 2014 21:11:48 GMT

Простое одноуровневое меню

Код менюшки

Код

CSS

Код

/* Менюшка*/

nav.ph-lift ul li {
float: left;
height: 90px;
line-height: 90px;
background: white;
overflow: hidden;
transition: all.6s ease; }
nav.ph-lift ul li:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
background: teal; }

nav.ph-lift ul li a {
display: block;
text-decoration: none;
color: #007e7e;
padding: 0 45px;
margin-top: 0;
transition: all.6s ease; }
nav.ph-lift ul li:hover a {
margin-top: -90px;
color: white;
text-shadow: 0 1px 2px black; }
nav.ph-lift ul li a:after {
content: attr(data-title);
display: block; }

/*Конец менюшки*/

Все внешние ссылки открываются в новом окне

VOVA_N — Thu, 08 May 2014 11:16:01 GMT

С целью удержать пользователей на сайте для ссылок,
ведущих на внешние сайты используют атрибут target и значения blank. То есть получается, что нажав на ссылку, которая ведет на сторонний ресурс,
пользователь открывает еще одно новое окно, сохраняя на виду
первоначальный сайт.

Чтобы раз и навсегда перестать беспокоиться о том что ссылки будут открываться в текущем окне, между: и
вставляем код:

Код

[color=#88756a]

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

Адаптированная DLE кнопка "Скачать" для uCoz

VOVA_N — Wed, 07 May 2014 20:21:31 GMT

У кнопки есть интересная анимация, красиво сделана, считывает количество
загрузок и показывает вес сайта. А так же при заливании на сайт,
показывает как на движке DLE. Это видно на скриншоте.

Установка:

Шаг 1. Заходим на наш сайт в ПУ (Панель Управления) и переходим в таблицу стилей.
Шаг 2. Вставляем код в самый низ стилей.

Код

[color=#88756a]/* Кнопочка "Скачать с сайта" */
    .mknop {
    display: inline-block;
    margin: 10px 0px;
    height: 30px;
    border: 1px solid #419DB8;
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #7ACBE3, 0px 1px 0px 0px #fff, 0px 2px 4px 0px #90C9D8;
    background: #58bedc;
    background: -moz-linear-gradient(top, #58bedc 11%, #3097b5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#58bedc), color-stop(100%,#3097b5));
    background: -webkit-linear-gradient(top, #58bedc 11%,#3097b5 100%);
    background: -o-linear-gradient(top, #58bedc 11%,#3097b5 100%);
    background: -ms-linear-gradient(top, #58bedc 11%,#3097b5 100%);
    background: linear-gradient(to bottom, #58bedc 11%,#3097b5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bedc', endColorstr='#3097b5',GradientType=0 );
    }

    .mknop:hover {
    display: inline-block;
    margin: 10px 0px;
    height: 30px;
    border: 1px solid #419DB8;
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #7ACBE3, 0px 1px 0px 0px #fff, 0px 2px 4px 0px #2186A2;
    background: #58bedc;
    background: -moz-linear-gradient(top, #58bedc 11%, #21819D 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#58bedc), color-stop(100%,#21819D));
    background: -webkit-linear-gradient(top, #58bedc 11%,#21819D 100%);
    background: -o-linear-gradient(top, #58bedc 11%,#21819D 100%);
    background: -ms-linear-gradient(top, #58bedc 11%,#21819D 100%);
    background: linear-gradient(to bottom, #58bedc 11%,#21819D 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bedc', endColorstr='#21819D',GradientType=0 );
    }

    .mknoplink {
    padding: 2px 8px;
    display: inline-block;
    background: #efefef;
    background: -moz-linear-gradient(top, #efefef 0%, #dbdbdb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#dbdbdb));
    background: -webkit-linear-gradient(top, #efefef 0%,#dbdbdb 100%);
    background: -o-linear-gradient(top, #efefef 0%,#dbdbdb 100%);
    background: -ms-linear-gradient(top, #efefef 0%,#dbdbdb 100%);
    background: linear-gradient(to bottom, #efefef 0%,#dbdbdb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#dbdbdb',GradientType=0 );
    box-shadow: inset 0px 1px 0px #fff,0px 1px 0px #E5E5E5;
    border-radius: 3px;

    text-shadow: 0px 1px 0px #fff;
    margin: 4px 10px 0px 5px;
    color: #15586A;
    font: 14px Arial;
    }

    .mknopsize {
    margin: 0px 10px 0px 7px;
    display: inline-block;
    padding: 2px 5px;
    background: #1A6479;
    box-shadow: inset 0px 1px 2px #0A4352, 0px 1px 0px #48C1E3;
    border-radius: 3px;
    color: #C9F5FF;
    text-shadow: 0px -1px 0px #0D3E4B;

    }

    .mknopdownload {
    display: inline-block;
    color: #D6F7FF;
    text-shadow: 0px -1px 0px #1A6479;
    }

    .mknopcifr {
    margin: 0px 5px 0px 5px;
    display: inline-block;
    padding: 2px 5px;
    background: #1A6479;
    box-shadow: inset 0px 1px 2px #0A4352, 0px 1px 0px #48C1E3;
    border-radius: 3px;
    color: #C9F5FF;
    text-shadow: 0px -1px 0px #0D3E4B;
    }
    .mknorazt {
    display: inline-block;
    color: #D6F7FF;
    text-shadow: 0px -1px 0px #1A6479;
    }
    /*Конец [color=#88756a][color=#88756a]кнопочки "Скачать с сайта" */

Шаг 3. Заходим в модуль "Каталог файлов" в Страницу материала и комментария
к нему и вставляем данный код, где хотим видеть кнопку.

Код

Установка готова.

Новый вид спойлера для ucoz

VOVA_N — Wed, 07 May 2014 18:26:39 GMT

Этот код вставляем в CSS

Код

[color=#88756a]/*Spoiler */
    .uSpoilerButton, #uSpoilerFvcDtt {width: 100%; text-align:
left;padding:5px;font-size:11px;font-weight:bold;background:url('http://tarnada.ucoz.ru/Dizain_Site/Spoiler_Fon_Title.png')
   #FFCA32;text-shadow:0px 1px 0px #FFE73F;border:1px
    solid #E89512;box-shadow:0px 1px 0px rgba(255,255,255,0.4)
inset;-moz-box-shadow:0px 1px 0px rgba(255,255,255,0.4)
inset;-webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.4)
inset}.scriptcode{color:#B02C20;text-align:left;max-height:300px;overflow:auto;font-family:"Courier
   New"}.title_spoiler{font-weight:bold;font-size:11px;text-shadow:0px 1px
   0px #fff}.title_spoiler a, .title_spoiler a:hover{color:#000}

    .uSpoilerText {padding:5px;font-size:11px;background:#F9F8F5;border:1px
    solid #F1EEE8}
    /*--------------------------------*/

ColorPicker

VOVA_N — Sat, 19 Apr 2014 07:14:44 GMT

1. Устанавливаем ColorPicker:
1.1. Скачиваем прикрепленный архив и распаковываем его.
1.2. Заливаем его содержимое на сайт.
1.3. Подключаем ColorPicker: В head

Код

и после jQuery (u.js)

Код

2. В конец Формы добавления сообщения вставляем:

Код

Скачать ColorPicker

BB-коды в Ajax-окне

VOVA_N — Sat, 19 Apr 2014 06:47:55 GMT

1. Скачиваем архив.
Скачать
2. Распаковываем его в http://вашсайт/bbcodes/
3. Вставляем

Код

в шаблоны:

Пользователи>Личные сообщения (ЛС) - после $BODY$
Комментарии>Форма добавления комментариев - в конец
Новости сайта>Страница архив материалов - после $BODY$
Форум>Форма добавления сообщения - в конец
Фотоальбомы>Страница добавления фотографии - после $BODY$
Каталог статей>Страница добавления/редактирования материала - после $BODY$
Каталог файлов>Страница добавления/редактирования материала - после $BODY$
Каталог сайтов>Страница добавления/редактирования материала - после $BODY$
Доска объявлений>Страница добавления/редактирования материала - после $BODY$

4. Любуемся результатом

Запрет на внешнию ссылку

VOVA_N — Sat, 19 Apr 2014 05:26:15 GMT

Скрипт, слизанный с Вконтакте! При переходе по внешним ссылкам будет вылазить Ajax-окно с оповещением!
Вот этот код ставить до

Код