Скрипты uCoz - Скрипты сайтов, скачать бесплатно. Teroni.su - шаблоны Dle, Wordpress, Joomla, uCoz https://teroni.ru/ ru Скрипты uCoz - Скрипты сайтов, скачать бесплатно. Teroni.su - шаблоны Dle, Wordpress, Joomla, uCoz DataLife Engine Скрипты для uCoz: Буквы аватарки для списка пользователей сайта https://teroni.ru/ucoz/skripty-ucoz/568-skripty-dlja-ucoz-bukvy-avatarki-dlja-spiska-polzovatelej-sajta.html https://teroni.ru/ucoz/skripty-ucoz/568-skripty-dlja-ucoz-bukvy-avatarki-dlja-spiska-polzovatelej-sajta.html
Отличная замена изображение на буквы аватарки, будет один знак, это первая буква логина пользователя, плюс в том, что создано на скрипте. Вам теперь не нужно загружать архив с материалом кнопок, а только разместить стили и выставить код по месту.]]>
Отличная замена изображение на буквы аватарки, будет один знак, это первая буква логина пользователя, плюс в том, что создано на скрипте. Вам теперь не нужно загружать архив с материалом кнопок, а только разместить стили и выставить код по месту, где вы хотели бы видеть эту функцию, а точнее выводили знаки. Это может быть как комментарий и другие места. Этот материал полностью доработал пользователь waak, что теперь эта версия стала более совершенная и безусловно качественная, но и как было упомянуто, что не используются снимки со знаками. 

Также будет идти разнообразие цветовой гаммы, где отлично выводит как Русский и также латинским алфавитом, где еще прикреплены цифры. Некоторые пользователи вместо ника, ставят разные символы, что здесь все предусмотрено. И просто будет показывать квадрат в темной гамме. Этот вариант написан под оператором USERNAME, что теперь будет точно выводить то значение под первую букву логина, что указано при регистрациях на сайте. Также вы можете посмотреть как реально все будет выглядеть, после того как вы выставите на ресурс, ниже будет предоставлено для просмотра Demo на некоторые знаки. 

Приступаем к установке


Первое, что делаем, это ставим код по месту, где будет выводится буквы: 

<div class="name-box">  
  <span><? substr($USERNAME$,0,1) ?></span>  
</div>

Переходим в CSS и подключаем стиль: 


/* Делаем noava как на Mail.ru */  
.name-box {  
  margin: 3px;  
}  
.name-box span,  
.noava {  
  display: inline-block;  
  vertical-align: middle;  
}  
.noava {  
  width: 45px;  
  height: 45px;  
  margin-right: 5px;  
  background: #333;  
  border-radius: 3px;  
}  
.noava > text {  
  width: 45px;  
  height: 45px;  
  font-size: 23px;  
  text-transform: uppercase;  
  font-family: Arial;  
  fill: rgba(255,255,255,.9);  
  text-shadow: 0px 0px 3px rgba(255,255,255,.3);  
}  
.noava-0,  
.noava-7,  
.noava-а,  
.noava-А,  
.noava-с,  
.noava-С,  
.noava-н,  
.noava-Н,  
.noava-я,  
.noava-Я,  
.noava-ю,  
.noava-Ю,  
.noava-ё,  
.noava-Ё,  
.noava-e,  
.noava-E,  
.noava-l,  
.noava-L,  
.noava-s,  
.noava-S,  
.noava-z,  
.noava-Z {  
  background: #e74c3c;  
}  

.noava-1,  
.noava-8,  
.noava-б,  
.noava-Б,  
.noava-О,  
.noava-о,  
.noava-з,  
.noava-З,  
.noava-к,  
.noava-К,  
.noava-ы,  
.noava-Ы,  
.noava-f,  
.noava-F,  
.noava-m,  
.noava-M,  
.noava-t,  
.noava-T {  
  background: #e67e22;  
}  

.noava-2,  
.noava-9,  
.noava-Х,  
.noava-х,  
.noava-ч,  
.noava-Ч,  
.noava-ю,  
.noava-Ю,  
.noava-е,  
.noava-Е,  
.noava-щ,  
.noava-Щ,  
.noava-g,  
.noava-G,  
.noava-n,  
.noava-N,  
.noava-u,  
.noava-U {  
  background: #f1c40f;  
}  

.noava-3,  
.noava-В,  
.noava-в,  
.noava-п,  
.noava-П,  
.noava-Л,  
.noava-л,  
.noava-Й,  
.noava-й,  
.noava-a,  
.noava-A,  
.noava-h,  
.noava-H,  
.noava-o,  
.noava-O,  
.noava-v,  
.noava-V {  
  background: #2ecc71;  
}  

.noava-4,  
.noava-э,  
.noava-Э,  
.noava-т,  
.noava-Т,  
.noava-Д,  
.noava-д,  
.noava-и,  
.noava-И,  
.noava-У,  
.noava-у,  
.noava-b,  
.noava-B,  
.noava-i,  
.noava-I,  
.noava-p,  
.noava-P,  
.noava-w,  
.noava-W {  
  background: #3498db;  
}  

.noava-5,  
.noava-г,  
.noava-Г,  
.noava-М,  
.noava-м,  
.noava-Ф,  
.noava-ф,  
.noava-Ж,  
.noava-ж,  
.noava-ц,  
.noava-Ц,  
.noava-c  
.noava-C,  
.noava-j,  
.noava-J,  
.noava-q,  
.noava-Q,  
.noava-x,  
.noava-X {  
  background: #34495e;  
}  

.noava-6,  
.noava-Х,  
.noava-х,  
.noava-ч,  
.noava-Ч,  
.noava-ю,  
.noava-Ю,  
.noava-р,  
.noava-Р,  
.noava-ш,  
.noava-Ш,  
.noava-d,  
.noava-D,  
.noava-k,  
.noava-K,  
.noava-r,  
.noava-R,  
.noava-y,  
.noava-Y {  
  background: #8e44ad;  
}

И завершаем скриптом, что ставим перед закрывающим тегом /body на сайте: 

<script> $('.name-box').each(  
  function(){  
  var name = $(this).children('span').text(),  
  str = name.replace(/[^0-9-A-Za-zА-Яа-яЁё]/g, ''),  
  i = str.substr(0,1);  
  $(this).html('<svg class="noava noava-' + i + '"><text x="15.5" y="31">' + i + '</text></svg>');  
  }  
  );</script>

PS - после как все сохранили, возможно нужно будет почистить историй на браузере, что все корректно показывало. ]]> TeRoNi-707 Mon, 03 Dec 2018 15:39:53 +0300 Скрипты для uCoz: Прекрасные всплывающие подсказки CSS https://teroni.ru/ucoz/skripty-ucoz/567-skripty-dlja-ucoz-prekrasnye-vsplyvajuschie-podskazki-css.html https://teroni.ru/ucoz/skripty-ucoz/567-skripty-dlja-ucoz-prekrasnye-vsplyvajuschie-podskazki-css.html
Вашему вниманию конфигурация всплывающей подсказки GetTip, что создана простом плагине jQuery, что отлично смотрится при наведение клика. Сам плагин прост в управление, где веб мастер может изначально задать направление.]]>
Вашему вниманию конфигурация всплывающей подсказки GetTip, что создана простом плагине jQuery, что отлично смотрится при наведение клика. Сам плагин прост в управление, где веб мастер может изначально задать направление, где покажется подсказка, с какой стороны. Вид ее составляет светло темную палитру, и на ней расположены заданные знаки. Всплывающие подсказки - это элегантный способ предоставления большей контекстуальной информации и деталей для точек данных на визуальном уровне. 

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

Основные особенности: 

1. Будет производиться отображение, когда наведете клик, что аналогично будет нажатии на элемент кнопки. 
2. Здесь автоматически вы можете задать параметры на атрибут data-tooltip. 
3. Будет срабатывать автоматом отключение после тайм-аута. 

Установка


В админ панели идем в низ сайта и там нужно прописать ссылки на скрипт также CSS и скрипт на показатель.

<script src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/gettip.js"></script>  
<link rel="stylesheet" href="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/gettip.css"/>  
<script>  
$(document).ready(function() {  
$('[data-tooltip]').getTip({  
  offset : 8, // Отступ (в пикс.)  
  pos : 'top', // Позиция ("left", "top", "right", "bottom")  
  on : 'hover', // Событие ("hover", "click", "focus")  
  delay : 0, // Задержка (в мс.)  
  duration : 200, // Плавность (в мс.)  
});  
});  
</script>

Создайте всплывающую подсказку по умолчанию из title атрибута вашего элемента. 

<a href="http://zornet.ru/" data-tooltip="" title="Это надпись появится">Здесь надпись под ссылку</a>

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

<a href="#" data-tooltip="{offset: 20,pos: 'bottom',on: 'click',delay: 228,duration: 30}" title="Оригинальная подсказка">Ссылка</a>

PS - также у вас появилась возможность в самом скрипте, задавать общие настройки, что отвечает за вызов подсказка. ]]> TeRoNi-707 Mon, 03 Dec 2018 15:33:42 +0300 Скрипт статистики онлайн в цветном виде для uCoz https://teroni.ru/ucoz/skripty-ucoz/566-skript-statistiki-onlajn-v-cvetnom-vide-dlja-ucoz.html https://teroni.ru/ucoz/skripty-ucoz/566-skript-statistiki-onlajn-v-cvetnom-vide-dlja-ucoz.html
Отлично созданный скрипт статистики для сайта uCoz в режиме онлайн, где идет три блока и у каждого своя цветовая гамма цвета, которая меняется. Изменить гамму можно в стилистике CSS, что сделал, так как по умолчанию она шла в синем оттенке.]]>
Отлично созданный скрипт статистики для сайта uCoz в режиме онлайн, где идет три блока и у каждого своя цветовая гамма цвета, которая меняется. Изменить гамму можно в стилистике CSS, что сделал, так как по умолчанию она шла в синем оттенке. Также добавил стилей на закругление углов, чтоб корректно вывести и смотрелось красиво. Она по своим свойствам проста, как в установке, так и в настройках. 

Здесь так сделано, что на темном фоне и на светлом смотрится отлично, но изначально под светлый все выставлено. Также ее можно поставить в блок-контейнера, но в низ сайта, если по ширине позволяет. На каждый элемент прописаны стили, что если в дизайн сайта не подходит, то вообще можно сделать так. Это выставить одну гамму и потом выставить в полу прозрачном формате. Вообще если решили убрать стандартный вид, то этот скрипт будет хорошей заменой. 

Это с тестовой площадке, под светлый интернет ресурс. 

Скрипт статистики онлайн в цветном виде для uCoz
Также хотелось увидет на темном, так смотрится, разве только цифрф в стилях светлее нужно поставить. 

Скрипт статистики онлайн в цветном виде для uCoz

Установка


По месту, где хотите наблюдать: 

HTML 

<Center><b>  
<div class="zornet_ru_stigan">  

<div class="block">  
<div id="tugsanim"></div>  
<span>Всего</span>  
</div>  

<div class="block">  
<div id="sazredkim"></div>  
<span>Гости</span>  
</div>  

<div class="block">  
<div id="dukimlsa"></div>  
<span>User</span>  
</div>  

</div>  

<div style="display: none;">$ONLINE_COUNTER$</div>  

<script type="text/jаvascript">  
$('#tugsanim').text($('#onl1 b').text());  
$('#sazredkim').text($('#onl2 b').text());  
$('#dukimlsa').text($('#onl3 b').text());  
</script></center>

CSS 

.zornet_ru_stigan {margin: 15px 0 18px; text-align: center;}  
.zornet_ru_stigan .block {display: inline-block; margin: 0 5px; position: relative;}  
.zornet_ru_stigan .block div {border: 2.1px solid;border-radius: 5px 5px 0px 0px;width: 49.9px;height: 49.5px;line-height: 47px;font-size: 18px;}  
.zornet_ru_stigan span {display: block;border-radius: 2px;width: 54px;height: 20px;line-height: 20px;font-size: 10px;color: #f3efef;text-transform: uppercase;position: absolute;right: 0px;top: 47px;text-shadow: 0 1px 0 #191717;}  
.zornet_ru_stigan .block:nth-of-type(1) div {border-color: #3765c5;color: #1;}  
.zornet_ru_stigan .block:nth-of-type(1) span {background: #1d69ff;}  
.zornet_ru_stigan .block:nth-of-type(2) div {border-color: #e64a1f; color: #1;}  
.zornet_ru_stigan .block:nth-of-type(2) span {background: #de6a18;}  
.zornet_ru_stigan .block:nth-of-type(3) div {border-color: #76ad16; color: #1;}  
.zornet_ru_stigan .block:nth-of-type(3) span {background: #2bb31b;}
]]> TeRoNi-707 Mon, 03 Dec 2018 15:28:00 +0300 Адаптивный вид материалов Metro 2 колонки для uCoz https://teroni.ru/ucoz/skripty-ucoz/565-adaptivnyj-vid-materialov-metro-2-kolonki-dlja-ucoz.html https://teroni.ru/ucoz/skripty-ucoz/565-adaptivnyj-vid-materialov-metro-2-kolonki-dlja-ucoz.html
Это новый вид материалов, что сделан в 2 колонки и полностью подходит под мобильные устройства, где адаптирован под него для сайтов. Больше по своему дизайн идет на игровые площадки, так как изначально только показано изображение и заголовок.]]>
Это новый вид материалов, что сделан в 2 колонки и полностью подходит под мобильные устройства, где адаптирован под него для сайтов. Больше по своему дизайн идет на игровые площадки, так как изначально только показано изображение и заголовок, что находится в самом низу. Но только стоит навести на его курсор, так как сразу появится светло-синий оттенок, который полностью закроет функциональность и откроет другую. В которую входит, это краткое описание и кнопки, где каждой привязана функция. Что можно перейти на основу, также посмотреть сколько под этим файлом оставили комментарий. 

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

Так будет по умолчанию и при наведение курсора. 

Адаптивный вид материалов Metro 2 колонки для uCoz

Установка


HTML 

<div class="zornersag_kusamitrug full"> 
<a class="dnutsa_cdgumlam" href="$ENTRY_URL$" title=""><span class="metro-date"><i class="fa fa-clock-o"></i> $DATE$</span> 
<img src="$IMG_URL1$" alt=""> 
</a> 
<div class="zornet_ru_lasryn vusamrsal_pusegan"> 
<div class="metro-icon aboutus-icon deactive"> 
</div> 
<div class="metro-info"> 
<span class="metro-coment"><?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$"><i class="fa fa-comments-o"></i> $COMMENTS_NUM$<?if($COMMENTS_NUM$%10=1&&$COMMENTS_NUM$%100!=11)?><?else?><?if($COMMENTS_NUM$%10>=2&&$COMMENTS_NUM$%10<=4&&($COMMENTS_NUM$%100<10||$COMMENTS_NUM$%100>=20))?><?else?><?endif?><?endif?> </a><?endif?></span> 
<span class="metro-rating"><i class="fa fa-star-o"></i> $RATING$</span> 
<span class="metro-next"><a href="$ENTRY_URL$">Подробнее <i class="fa fa-chevron-right"></i></a></span> 
</div> 
<div class="metro-misc">  
<a class="metro-title" href="$ENTRY_URL$" title="">$TITLE$</a> 
<div class="metro-text"> 
<div class="srunika_lingtunbsa">  
$MESSAGE$ 
</div>  
</div> 
</div></div></div>

CSS 

@media screen and (min-width: 1024px){  
.full {width: 48%;}  
}  

@media screen and (max-width: 1024px){  
.full {width: 98%;}  
} 
@media screen and (min-width: 1024px){  
.zornersag_kusamitrug {width: 48%;}  
}  

@media screen and (max-width: 1024px){  
.zornersag_kusamitrug {width: 98%;}  
} 
.full { 
  width: ; 
  margin: 5px;  
} 
.zornersag_kusamitrug { 
  float: left; 
  position: relative; 
  z-index: 1; 
  margin-bottom: 25px; 
  overflow: hidden; 
  height: 200px; 
} 
.zornersag_kusamitrug:hover { 
  box-shadow: -1px 11px 20px -8px #000000; 
   
} 
.dnutsa_cdgumlam { 
  display:block; 
  float:left; 
  width:100%; 
  height:200px; 
  position:absolute; 
  top:0; 
  left:0; 
  z-index:2; 
  overflow:hidden; 
} 
.dnutsa_cdgumlam img { 
  object-fit: cover; 
  width: 100%; 
  max-width: 100%; 
  height:200px; 
} 
.zornet_ru_lasryn { 
  border-top: #fff 1px solid; 
  position:absolute; 
  width:100%; 
  height:200px; 
  top:150px; 
  left:0; 
  z-index:3; 
  -webkit-transition:all cubic-bezier(0.42, 0, 0.39, 0.96) 0.3s; 
  -moz-transition:all cubic-bezier(0.42, 0, 0.48, 0.91) 0.3s; 
  -ms-transition:all cubic-bezier(0.42, 0, 0.51, 0.94) 0.3s; 
  -o-transition:all cubic-bezier(0.42, 0, 0.57, 0.88) 0.3s; 
  transition:all cubic-bezier(0.42, 0, 0.55, 0.93) 0.3s; 
} 
.zornet_ru_lasryn.hidden { 
  top:100%; 
} 
.metro-icon { 
  float:left; 
  width:50px; 
  height:50px; 
  margin-right:10px; 
  background-position:center center; 
} 
.metro-misc { 
  position: absolute; 
  padding-left:54px; 
} 
.metro-info { 
  position:absolute; 
  bottom:3px; 
  width:100%; 
  text-align: center; 
  color: #fdf5f5; 
  padding:5px; 
} 

.metro-coment a { 
  margin-right:3px; 
  color:#ffffff; 
  padding:5px 15px; 
  background: rgba(42, 167, 127, 0.47); 
  border-radius: 3px; 
  border: 1px solid #83858a; 
} 
.metro-coment a:hover { 
  color:#1f75b9; 
  background: #eef1f0; 
  box-shadow: 0px 0px 14px 0px #f1eded; 
  border-radius: 3px; 
  border: 1px solid #707277; 
} 
.metro-rating { 
  padding:5px 15px; 
  background: rgba(31, 154, 115, 0.47); 
  border-radius: 3px; 
  border: 1px solid #83858a; 
} 
.metro-next a { 
  right:0px; 
  margin-right:3px; 
  color: #ece8e8; 
  padding:5px 15px; 
  border-radius: 3px; 
  border: 1px solid #707277; 
  background: rgba(26, 150, 111, 0.47); 
} 
.metro-next a:hover { 
  color: #124a75; 
  background:#fff; 
  box-shadow: 0px 0px 14px 0px #fdfafa; 
} 
.metro-date { 
  position:absolute; 
  padding:5px 15px; 
  color: #fdf9f9; 
  background:#167949; 
} 
.metro-title { 
  color: #fbf7f7; 
  float:left; 
  height:50px; 
  font-size:15px; 
  text-decoration:none; 
  padding: 12px; 
} 
.metro-title:hover { 
  color:#ffffff; 
} 
.metro-text { 
  float:left; 
  width: 78%; 
  font-size:12px; 
  line-height:14px; 
  color: #f7f2f2; 
  margin-top:2px; 
  padding:8px; 
  border-top: 1px #ece4e4 solid; 
} 
.zornersag_kusamitrug:hover>.dnutsa_cdgumlam>img { 
   
} 
.zornersag_kusamitrug:hover .zornet_ru_lasryn { 
  top: 0; 
} 
.vusamrsal_pusegan { 
  background-color:#4b5569 !important; 
} 
.vusamrsal_pusegan:hover { 
  background-color:rgba(20, 57, 86, 0.89) !important; 
} 
.aboutus-icon { 
  background-image: url(http://zornet.ru/ZORNET-RU/ZR/Alinuversa/aboutus.png); 
  background-repeat: no-repeat; 
} 
.deactive { 
  background-color: rgba(16, 18, 21, 0.31); 
} 
.metro-icon { 
  float: left; 
  width: 50px; 
  height: 50px; 
  margin-right: 10px; 
  background-position: center center; 
} 

.srunika_lingtunbsa { 
  opacity: 0.99; 
  margin-bottom: 15px; 
  padding: 0 12px; 
  height: 71px; 
  overflow: hidden; 
  text-align: justify; 
  text-shadow: 0 1px 0 #2b2828; 
}

Чтоб все кнопки появились, здесь присутствуют шрифтовые иконки, что нужно обязательно подключить.]]> TeRoNi-707 Mon, 03 Dec 2018 15:19:33 +0300 Полоса загрузки (Progress Bar) для сайта uCoz https://teroni.ru/ucoz/skripty-ucoz/564-polosa-zagruzki-progress-bar-dlja-sajta-ucoz.html https://teroni.ru/ucoz/skripty-ucoz/564-polosa-zagruzki-progress-bar-dlja-sajta-ucoz.html
Это полоса загрузки, что будет появляться по вверх окна браузера, при открытие новой странице на сайте, что при загрузки исчезать. обновлением дизайна на видео хостинге YouTube, в самом верху страницы появилась полоса загрузки которая. ]]>
Это полоса загрузки, что будет появляться по вверх окна браузера, при открытие новой странице на сайте, что при загрузки исчезать. обновлением дизайна на видео хостинге YouTube, в самом верху страницы появилась полоса загрузки которая. теперь и вы можете установить на свой сайт такую же. Для этого вам необходимо: 

В страницы сайта установить 

<script src="/nprogress.js"></script>  
  <link rel="stylesheet" type="text/css" href="/nprogress.css" />

В head и /head 

<script>  
  $('body').show();  
  $('.version').text(NProgress.version);  
  NProgress.start();  
  setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);  
  </script>

Теперь осталось залить файлы на свой сайт и наслаждаться новой загрузкой. 
ps Цвет полосы настраивается в css файле.

Скачать скрипт.


]]> TeRoNi-707 Mon, 03 Dec 2018 15:11:32 +0300 Анимированная страница 404 с помощью CSS3 для uCoz https://teroni.ru/ucoz/skripty-ucoz/563-animirovannaja-stranica-404-s-pomoschju-css3-dlja-ucoz.html https://teroni.ru/ucoz/skripty-ucoz/563-animirovannaja-stranica-404-s-pomoschju-css3-dlja-ucoz.html
Вашему вниманию представлена анимированная страница 404, которая обязательно должна быть на любом тематическом сайте. Где обязательно должны присутствовать функций на переход на основную страницу, это как главная или на любой модуль.]]>
Вашему вниманию представлена анимированная страница 404, которая обязательно должна быть на любом тематическом сайте. Где обязательно должны присутствовать функций на переход на основную страницу, это как главная или на любой модуль. Если вы начинаете блог или сайт, то не забывайте, что все важные становится страницы 404, это стандартный код ответа в HTTP, указывающий пользователю, что они нажали на неработающую ссылку. 

Это традиционно было огромным источником разочарования. Но в последние годы, веб мастера взяли на себя задачу разработки заказных 404 страниц, которые используют юмор или красивый дизайн, чтобы хотя бы подсластить пилюлю, узнав, что вы не в том месте. 

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

Установка страницы простая, качаем архив распаковываем. Файл 404.htm заливаем в корень сайта, готово.

Скачать исходники.


]]> TeRoNi-707 Mon, 03 Dec 2018 14:54:44 +0300 Анимированная страница 404 в стиле дикий запад для uCoz https://teroni.ru/ucoz/skripty-ucoz/562-animirovannaja-stranica-404-v-stile-dikij-zapad-dlja-ucoz.html https://teroni.ru/ucoz/skripty-ucoz/562-animirovannaja-stranica-404-v-stile-dikij-zapad-dlja-ucoz.html
Вашему вниманию представлена анимированная страница 404, которая обязательно должна быть на любом тематическом сайте. Где обязательно должны присутствовать функций на переход на основную страницу, это как главная или на любой модуль.]]>
Вашему вниманию представлена анимированная страница 404, которая обязательно должна быть на любом тематическом сайте. Где обязательно должны присутствовать функций на переход на основную страницу, это как главная или на любой модуль. Если вы начинаете блог или сайт, то не забывайте, что все важные становится страницы 404, это стандартный код ответа в HTTP, указывающий пользователю, что они нажали на неработающую ссылку. 

Это традиционно было огромным источником разочарования. Но в последние годы, веб мастера взяли на себя задачу разработки заказных 404 страниц, которые используют юмор или красивый дизайн, чтобы хотя бы подсластить пилюлю, узнав, что вы не в том месте. 

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

Установка страницы простая, качаем архив распаковываем. Файл 404.htm заливаем в корень сайта, готово.

Скачать исходники.


]]> TeRoNi-707 Mon, 03 Dec 2018 14:47:54 +0300 Страница 404 для сайта с фоновой картинкой для uCoz https://teroni.ru/ucoz/skripty-ucoz/561-stranica-404-dlja-sajta-s-fonovoj-kartinkoj-dlja-ucoz.html https://teroni.ru/ucoz/skripty-ucoz/561-stranica-404-dlja-sajta-s-fonovoj-kartinkoj-dlja-ucoz.html
Простая страница 404, которая может подойти под любую тематику, так как фон можно выставить самостоятельно, плюс идет функций на главную страницу. Эти страницы называются 404 страницами ошибок. Ошибка 404 - это когда страница.]]>
Простая страница 404, которая может подойти под любую тематику, так как фон можно выставить самостоятельно, плюс идет функций на главную страницу. Эти страницы называются 404 страницами ошибок. Ошибка 404 - это когда страница, которую вы пытаетесь открыть на сайте, не найдена. Многие интернет пользователи не знают, что такое ошибка 404 или что с ней делать. Когда пользователь или гость попадает на ее, то он может выйти на интернет ресурс, а не просто покинуть. Так как по центру установлена кнопка, что отвечает за вывод по ссылки, которую установите. 

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

Установка всё так же проста, качаем архив, распаковываем. Файл 404.htm загружаем в корень сайта, готово.

Скачать исходники.




]]> TeRoNi-707 Mon, 03 Dec 2018 14:44:07 +0300 Скрипт на закладки пользователя для uCoz https://teroni.ru/ucoz/skripty-ucoz/560-skript-na-zakladki-polzovatelja-dlja-ucoz.html https://teroni.ru/ucoz/skripty-ucoz/560-skript-na-zakladki-polzovatelja-dlja-ucoz.html
После установки скрипта, у пользователя сайта появится функция, это создавать закладки на материал на интернет сайте, что весьма полезно. Так как в любое время он может зайти на портал и открыть лист закладок и уже с него по прямой ссылки.]]>
После установки скрипта, у пользователя сайта появится функция, это создавать закладки на материал на интернет сайте, что весьма полезно. Так как в любое время он может зайти на портал и открыть лист закладок и уже с него по прямой ссылки перейти на материал, который он изначально занес в закладки. Что теперь не нужно пользоваться браузером, все создается на одной площадке, где установлен этот функционал. 

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

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

закладки пользователя для uCoz
Особенности: 

1. Здесь не нужно использовать модули. 
2. Понятный и классический вид. 
3. Удобное функционал на добавление и удаление. 

Установка скрипта


Админ панель > Страница материала и комментариев к нему (Нужный каталог) и добавляем html:

<div class="Bookmark" data-id="$ID$" data-img="$SCREEN_URL$" data-title="$ENTRY_TITLE$"></div>

Здесь в стилистике, вы можете изменить палитру цвета, к примеру, если у вас сайт в темном дизайн. 

Скачать скрипт на закладки пользователя для uCoz бесплатно.


]]> TeRoNi-707 Mon, 03 Dec 2018 14:40:03 +0300 Скрипт для uCoz: Вид материалов c красивым эффектом https://teroni.ru/ucoz/skripty-ucoz/559-skript-dlja-ucoz-vid-materialov-v-krasivym-jeffektom.html https://teroni.ru/ucoz/skripty-ucoz/559-skript-dlja-ucoz-vid-materialov-v-krasivym-jeffektom.html
Еще один вид материалов для файлов или для блога, на котором установлен красивый эффект изображение, что также идет под адаптивной версткой. Что после установки пользователи и и гости сайта будут смотреть на сайте различные материалы.]]>
Еще один вид материалов для файлов или для блога, на котором установлен красивый эффект изображение, что также идет под адаптивной версткой. Что после установки пользователи и и гости сайта будут смотреть на сайте различные материалы, как новостного характера, так и под файлы, но главное все идет в корректном виде. Здесь на любом мобильном носители будет свой выстроенный конструктор, что безусловно имеет весь функционал. Это как перейти на основу, где и будет находится кнопка скачать, если это качается файлов. Но по умолчанию у почти все идут функций под шрифтовыми иконками, что находятся по вверх заголовка или в самом низу. 

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

Проверяя на тестовом сайте на адаптивность, представлено несколько изображений. 

1. Это по умолчанию: 

1. Это по умолчанию:
2. Примерно, точно не сказать, ближе к планшету: 

2. Примерно, точно не сказать, ближе к планшету:
3. Здесь идет смартфон или телефон: 

3. Здесь идет смартфон или телефон:

Установка скрипта


HTML 

<article class="news-box">  
<div class="image-news">  
  <div class="link-more-wrap">  
  <div class="link-more"><a href="$ENTRY_URL$"></a></div>  
  </div>  
<div class="category-informer" style="z-index:15;"><i class="fas fa-gamepad"></i> $CATEGORY_NAME$</div>  
  <div class="overlay-image"></div>  
  <ul class="detail-news">  
  <li><span class="view"><i class="fa fa-eye"></i> $READS$</span></li>  
  <li><span class="data"><i class="fas fa-calendar-alt"></i> $DATE$</span></li>  
  <li><span class="data"><i class="fa fa-comments"></i> $COMMENTS_NUM$</span></li>  
  </ul>  
  <div class="preload"><a class=""><img src="$IMG_URL1$" alt=""></a></div>  
</div>  
  <div class="description-news">  
  <div class="title-news"><a href="$ENTRY_URL$"><h4>$TITLE$</h4></a></div>  
  <div class="description-news2"><div class="bemerka-text">$MESSAGE$</div></div>  
  </div>  
</article>

CSS 


.news-box,  
.full-news-box {border-bottom: 1px solid #b8dbed;margin-bottom: 10px;background: #f4f4f4;}  
.news-box::after, .full-news-box::after,  
.news-box::before, .full-news-box::before {content:''; height:1px;width:20px;}  
.news-box::after, .full-news-box::after { right:-20px; }  
.news-box::before, .full-news-box::before { left:-20px; }  
.news-box .image-news, .comixs-box .image-news {display:inline-block;height: 150px;width:300px;margin-right:20px;overflow:hidden;position:relative;}  
@media only screen and (max-width: 768px) { .news-box .image-news, .comixs-box .image-news {display:inline-block; height:169px;width:100%; margin-right:20px; overflow:hidden; position:relative; }} 
.news-box .image-news .preloader { height:169px;width:300px; overflow:hidden; }  
.news-box .link-more-wrap, .comixs-box .link-more-wrap,  
.photo .link-more-wrap, .full-image-box .link-more-wrap,  
.video .link-more-wrap {box-shadow:none;transition: all 0.6s ease-in-out; transform: scale(0);}  
.news-box .image-news:hover > .link-more-wrap, .comixs-box .image-news:hover > .link-more-wrap,  
.photo:hover > .link-more-wrap, .full-image-box:hover > .link-more-wrap,  
.video:hover > .link-more-wrap {box-shadow:0 0 0 20px rgba(255,255,255,0.2);transform: scale(1);}  
.news-box .link-more-wrap, .comixs-box .link-more-wrap,  
.news-box .link-more, .comixs-box .link-more,  
.photo .link-more-wrap, .full-image-box .link-more-wrap,  
.photo .link-more, .full-image-box .link-more,  
.video .link-more-wrap,  
.video .link-more {border-radius:50%;height:70px;width:70px;margin:auto;position: absolute;left:0; right:0; top:0; bottom:0;z-index:2;}  
.news-box .image-news img {width: 100%;height: 150px;object-fit: cover;}  
.news-box .image-news:hover img,  
.comixs-box .image-news:hover img,  
.photo:hover img,  
.video:hover img {filter: grayscale(80%);-webkit-filter: grayscale(80%);object-fit: cover;}  
.news-box .description-news {display:inline-block; height:172px; width: 450px; overflow:hidden; text-align: left; vertical-align:top; font-size: 14px;}  
@media only screen and (max-width: 768px) { .news-box .description-news {display:inline-block;height:172px; width: 100%; overflow:hidden; text-align: left; vertical-align:top; font-size: 14px;}} 
.news-box .description-news .title-news {font-family: 'Exo 2', sans-serif; }  
@media only screen and (max-width: 768px) {.news-box .description-news .title-news {font-family: 'Exo 2', sans-serif;text-align:center;}} 
.news-box .description-news .title-news a { text-decoration:none; font-size: 16px; }  
.news-box .description-news .title-news a:hover { color:#ff6286;}  
.news-box .description-news img,  
.entryReadAll {display:none;}  
.news-box .detail-news,  
.comixs-box .detail-news,  
.photo .detail-photo,  
.video .detail-video {background:rgba(32,33,51,0.6);color:#fff;font-size:12px;height: 30px;width: 100%;position:absolute;bottom: -12px;transition:all 0.3s ease-in-out;text-align: center;padding: 0 10px 10px 0;}  
@media only screen and (max-width: 768px) { .news-box .detail-news,  
.comixs-box .detail-news,  
.photo .detail-photo,  
.video .detail-video {display:none;}} 
.news-box .image-news:hover > .detail-news,  
.comixs-box .image-news:hover > .detail-news,  
.photo:hover > .detail-photo,  
.video:hover > .detail-video {display:none;} 
.news-box .detail-news li,  
.comixs-box .detail-news li,  
.photo .detail-photo li,  
.video .detail-video li {display:inline-block; height:30px; line-height:2.5; padding:0 10px 0 15px; }  
.news-box .detail-news li:first-child,  
.comixs-box .detail-news li:first-child,  
.video .detail-video li:first-child {background-image:none;}  
.news-box .detail-news li:first-child,  
.photo .detail-photo li:first-child,  
.video .detail-video li:first-child {background-image:none;}  
.news-box .detail-news li span,  
.photo .detail-photo li span,  
.video .detail-video li span {display:inline-block; height:30px; padding-left:25px;}  
span[class^="entRating"], span[class^="entRated"] {background-image:none;padding-left:0;}  
.news-box .detail-news .data,  
.video .detail-video .data {background-position:0 -30px;}  
.news-box .detail-news .comments {background-position:0 -60px; }  
.news-box .detail-news .download-num {background-position:0 -90px; }  
.news-box .image-news .overlay-image,  
.comixs-box .image-news .overlay-image,  
.photo .overlay-image,  
.video .overlay-image {height:100%;width:100%;position:absolute;top:0;transition:all 0.5s ease-in-out;z-index:1;} 
.news-box .image-news:hover > .overlay-image,  
.comixs-box .image-news:hover > .overlay-image,  
.photo:hover > .overlay-image,  
.video:hover > .overlay-image {background:rgba(85,92,108,0.5);}  
.news-box .link-more > a,  
.comixs-box .link-more > a,  
.photo .link-more > a, .full-image-box .link-more > a,  
.video .link-more > a,  
.flexslider .link-more > a {background:rgba(255,255,255,0.5) url(http://zornet.ru/ABVUN/ico-more-link.png) center center no-repeat; border-radius:50%; display:block; height:100%;width:100%; opacity:0; position: absolute; pointer-events:none; transform:scale(1.5); transition:all 0.4s ease-in-out 0.2s; }  
.photo .link-more > a, .full-image-box .link-more > a,  
.news-box .image-news:hover a,  
.comixs-box .image-news:hover a,  
.photo:hover a, .full-image-box:hover a,  
.video:hover a,  
.flexslider:hover a {opacity:1; pointer-events:auto; transform:scale(1);} 
.moder-panel {position:absolute;right:0;} 
.description-news2 {max-width: 100%;display: inline-block;padding-top: 15px;color: #3a3a3a;background: #f4f4f4;} 
@media only screen and (max-width: 768px) { .description-news2 {width: 100%;display: inline-block;padding-top: 15px;color: #3a3a3a;text-align: justify;}} 

.category-informer{position: absolute;background-color: #3498db;padding: 5px 7px 6px 7px;color: white;font-size: 13px;display: inline-block;float: left;margin: 5px;} 

.bemerka-text { 
  opacity: 0.8; 
  margin-bottom: 5px; 
  padding: 0 0px; 
  height: 85px; 
  overflow: hidden; 
  text-align: justify; 
}

Здесь тематика не важна, разве, что поменять сами значки, что больше тему определяют.]]> TeRoNi-707 Mon, 03 Dec 2018 14:28:29 +0300