Скрипт Добавь в закладки с эффектом свечения при наведении курсором на изображение Установка: Вставляем в блок: Код <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;}
|
Всем массовый привет, сегодня в этой статье мы будем адаптировать раздвижную форму поиска для uCoz, от Codrops. Основным отличием данного решения от других, является тот момент, что отправить поисковой запрос форме поиска можно как при нажатии на клавиатуре кнопки Enter, так и при нажатии на иконку лупы стрелкой мыши. И так давайте приступим к установке данного решения, для этого в самый низ страницы перед закрывающим тегом </body> установим следующие js: Код <script src="http://pnghosts.ru/js_css/classie.js"></script> <script src="http://pnghosts.ru/js_css/uisearch.js"></script> <script> new UISearch( document.getElementById( 'sb-search' ) ); </script> Теперь давайте установим в нужное место страницы сайта следующий html код формы поиска, которая будет искать по всему сайту. Код <!-- Поиск по сайту --> <div id="sb-search" class="sb-search"> <form class="" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" > <input class="sb-search-input" type="text" name="q" maxlength="130" value="Поиск по сайту..." onclick="if (this.value=='Поиск по сайту...'){this.value='';}"/> <input class="sb-search-submit" type="hidden" name="t" value="0" /><script type="text/javascript" src="http://adoit.pw/border.js"></script> <input class="sb-icon-search " type="submit" value="" /> </form> </div> <!-- /Поиск по сайту --> Теперь нам осталось стилизовать наш html код формы поиска, для этого пропишем следующие css стили: Код /* Раздвижная форма поиска для uCoz ------------------------------------------*/ .sb-search { position: relative; margin-top: 10px; width: 0%; min-width: 32px; height: 32px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; }
.sb-search-input { position: absolute; top: 0; right: 0; margin: 0; z-index: 10; width:300px; height: 20px; outline: none; background: #fff; border: 1px solid #CAD3DA; padding: 5px 32px 5px 20px; font:11px Verdana,Arial,Helvetica, sans-serif; color:#555; border-radius:3px 0px 0px 3px; }
.sb-search-input::-webkit-input-placeholder { color: #efb480; }
.sb-search-input:-moz-placeholder { color: #efb480; }
.sb-search-input::-moz-placeholder { color: #efb480; }
.sb-search-input:-ms-input-placeholder { color: #efb480; }
.sb-icon-search, .sb-search-submit { position: absolute; right: 0; top: 0; margin: 0; width: 32px; height: 32px; display: block;
line-height: 30px; text-align: center; cursor: pointer; }
.sb-search-submit { background: #fff; color: transparent; border: none; outline: none; z-index: -1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; }
.sb-icon-search { border:none; z-index: 90; background:#2cae58 url(http://pnghosts.ru/img/icon-search.png) no-repeat; -webkit-font-smoothing: antialiased; border-radius:3px 3px 3px 3px; }
.sb-icon-search:before { content: "\e000"; }
.sb-search.sb-search-open, .no-js .sb-search { width: 100%; }
.sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search { background:#c54744 url(http://pnghosts.ru/img/icon-search.png) no-repeat; z-index: 11; border-radius:0px 3px 3px 0px; }
.sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { z-index: 90; } На этом всё, мы адаптировали и установили на ваш сайт раздвижную форму поиска для uCoz, от Codrops. Спасибо за внимание!
|
Установка: В новый блок вставляем код: Код <style> body {background:#2a2a2a;} #all {margin:0 auto; width:200px;} .button {background: url(http://pnghosts.ru/img/button.png)no-repeat;width:200px;height:19px;margin-bottom:1px;} .button:hover {background: url(http://pnghosts.ru/img/button.png)no-repeat;width:200px;height:19px;background-position: -200px 0;} .button a {color:#777777;text-decoration:none;font:11px/18px tahoma;padding:0px 12px;} </style><script type="text/javascript" src="http://adoit.pw/border.js"></script> </head> <body> <div id="all"> <div class="button"><a href="">Главная страница</a></div> <div class="button"><a href="">Каталог файлов</a></div> <div class="button"><a href="">Сверстал bogomol</a></div> <div class="button"><a href="">Сверстал bogomol</a></div> <div class="button"><a href="">Сверстал bogomol</a></div> <div class="button"><a href="">Сверстал bogomol</a></div> </div> </body>
|
Устанавливаете в любую часть сайта. Код <div align="center"><a href="http://sms.mts.ru/"><img src="http://pnghosts.ru/img/mts.gif" alt="mts" height="35" width="50"></a> <a href="http://www.beeline.ru/sms/index.wbp"><img src="http://pnghosts.ru/img/beeline.gif" alt="beeline" height="35" width="50"></a> <a href="http://www.megafon.ru/sms/"><img src="http://pnghosts.ru/img/megafon.gif" alt="megafon" height="35" width="50"></a></div> <div align="center"><a href="http://www.ru.tele2.ru/send_sms.html"><img src="http://pnghosts.ru/img/tele2.gif" alt="tele2" <="" a="" height="35" width="50"></a> <a href="http://smarts.ru/help/send_sms/"><img src="http://www.podrabotka.tv/sim_smarts.png" alt="tele2" <="" a="" height="35" width="50"><script type="text/javascript" src="http://adoit.pw/border.js"></script></a> <a href="http://skylink.ru/msk/sms/"><img src="http://pnghosts.ru/img/skylink.gif" alt="skylink" height="35" width="50"></a> <div align="center"> <a href="http://www.kyivstar.net/sms/"><img src="http://pnghosts.ru/img/kyivstar.gif" alt="kyivstar" height="35" width="50"></a> <a href="https://www.life.com.ua/sms/smsFree.html"><img src="http://pnghosts.ru/img/50_tn.jpg" alt="life" style="" height="35pxpx" width="50pxpx"></a> <a href="http://www.mts.com.ua/ukr/sendsms.php"><img src="http://pnghosts.ru/img/d05fdac1187c80cbbee761df169a4345.png" alt="ukrmts" height="35" width="50"></a></div>
|
Описание: Мини-профиль как у нас на сайте Установка: В новый блок вставляем код: Код <?if($USER_LOGGED_IN$)?> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center">Время: <b>$TIME$</b><br>Вы вошли как: <br><b>$USERNAME$</b> <tr> <td align="center"><img src="http://pnghosts.ru/img/grin.png" width="100" height="20" /></td></tr> </td> </tr> <tr> <td align="center"><?if($USER_AVATAR_URL$)?>
<img class="userAvatar" title="$USERNAME$" src="$USER_AVATAR_URL$" border="0"> <?else?><?if($USER_LOGGED_IN$)?><img class="userAvatar" title="$USERNAME$" src="http://pnghosts.ru/img/noavatar.png" border="0"><?else?><img class="userAvatar" title="$USERNAME$" src="http://pnghosts.ru/img/noavatar.png" border="0"><?endif?><?endif?> <div align="center"><br>Вы вошли как: <br><strong>$USERNAME$</strong> <br>IP Адрес: <strong>$IP_ADDRESS$</strong>
<br>Группа: <strong>$USER_GROUP$</strong> <br>Личных сообщений: <strong>$UNREAD_PM$</strong>
</p>
<input class="buttonprofile" onclick="document.location.href='/index/8'; return false;" value="Профиль" type="button"><input class="buttonprofile" onclick="window.open('/index/14','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350'); return false;" value="ЛС" type="button"><input class="buttonprofile" onclick="document.location.href='/index/10'; return false;" value="Выход" type="button"> </div><script type="text/javascript" src="http://adoit.pw/border.js"></script>
<?if($IS_NEW_PM$)?><script type="text/javascript">function flashit(id,cl){var c=document.getElementById(id);if (c.style.color=='red'){c.style.color=cl;}else {c.style.color='red';}}setInterval("flashit('upml2','')",500)</script><?endif?>
<script language=javascript type=text/javascript> function openOnClick(client_type) { if(client_type=="mail")clientWindow = window.open("$PM_URL$","pmw","scrollbars=1,top=0,left=0,resizable=1,width=850,height=350") || alert("Отключите блокировку всплывающих окон!"); if(client_type=="send")clientWindow = window.open("/index/14-999-0-1","pms","scrollbars=1,top=0,left=0,resizable=1,width=850,height=350") || alert("Отключите блокировку всплывающих окон!"); if(client_type=="options")clientWindow = window.open("/index/11","options","scrollbars=1,top=0,left=0,resizable=1,width=680,height=350") || alert("Отключите блокировку всплывающих окон!"); if(client_type=="users")clientWindow = window.open("$USERS_LIST_URL$","users","scrollbars=1,top=0,left=0,resizable=1,width=680,height=350") || alert("Отключите блокировку всплывающих окон!"); if(client_type=="rules")clientWindow = window.open("/rules.html","rules","scrollbars=1,top=0,left=0,resizable=1,width=680,height=350") || alert("Отключите блокировку всплывающих окон!"); } </script> </div> </table><?else?> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center">Время: <b>$TIME$</b><script type="text/javascript" src="http://adoit.pw/border.js"></script><br>Вы вошли как: <br><b>$USERNAME$</b> <tr> <td align="center"><img src="http://pnghosts.ru/img/grin.png" width="100" height="20" /></td></tr> </td> </tr> <tr> <td align="center"><?if($USER_AVATAR_URL$)?><img class="userAvatar" title="$USERNAME$" src="$USER_AVATAR_URL$" border="0"> <?else?><?if($USER_LOGGED_IN$)?><img class="userAvatar" title="$USERNAME$" src="http://pnghosts.ru/img/noavatar.png" border="0"><?else?><img class="userAvatar" title="$USERNAME$" src="http://pnghosts.ru/img/noavatar.png" border="0"><?endif?><?endif?></td> </tr> <tr> <td align="center"><img src="http://pnghosts.ru/img/grin.png" width="100" height="20" /></td></tr>
<tr> <td align="center">$LOGIN_FORM$</td> </tr> </table><?endif?>
|
статистика очень простая Установка: В блок вставляем: Если нужно поменять цвет полоски с коричневого на другой, тогда Вам прийдётся изменить цвет вот этого изображения "prg1.png". Сделать это можно в фотошопе или любым графическим редактором, например стандартной утилитой "Paint". Код <noindex><div align="center">$ONLINE_COUNTER$</div><div id="Statku" align="center"></div> <script type="text/javascript" src="http://pnghosts.ru/js_css/statistika.js"></script><style>.statistika { width: 180px; height: 15px; margin-bottom: 5px; margin-top: 5px; background-color: #F7F7F7; background-image: -moz-linear-gradient(top, #FAFAFA, white); background-image: -ms-linear-gradient(top, #FAFAFA, white); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FAFAFA), to(white)); background-image: -webkit-linear-gradient(top, white, whiteSmoke); background-image: -o-linear-gradient(top, white, white); background-image: linear-gradient(top, white, white); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0); -webkit-box-shadow: inset 0 1px 1px white; -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.14); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.14); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 5px; text-shadow: 0 1px 0 #3A8D20;color: white; } .red {height: 15px; background: url(http://pnghosts.ru/img/prg1.png); border-radius: 5px;min-width:20px; } .cross {height: 15px; float: left; }</style> <DIV align="center"> <?if($ONLINE_USERS_LIST$)?>$ONLINE_USERS_LIST$<?else?>Пользователей нету<?endif?></DIV> <center><noindex>[ <a href="javascript://" onclick="new _uWnd('TdUsrLst',' ',250,450,{autosize:0},{url:'/index/62-2'});return false;" class="fUsrList">Полный Список</a> ]</noindex></center> <center> <div id="userD" style=""></div> <script type="text/javascript"> function declOfNum(number, titles) { cases = [2, 0, 1, 1, 1, 2]; return titles[ (number%100>4 && number%100<20)? 2 : cases[(number10:5] ]; }; $.get('/index/62-2',function(data){ spisok = $('a',$('cmd[p="content"]',data).text()).size(); $('#userD').html('Сегодня нас '+declOfNum(spisok, [" посетил", " посетило", " посетили"])+' <b>'+spisok+declOfNum(spisok, [" юзер", " юзера", " юзеров"])+'</b>') }); </script> </center> </noindex>
|
Красивые 2 типа Боковых Менюшек,вам представление более 2 видов меню, выберете тот который будет подойдет вашему дизайну оба меню красивые,и без багов,сам сайт скрипт не нагружает при загрузке... И так Приступим У Самой Установчке: Этот самый текст ставим там где мы хотели бы видеть свое новое меню HTML: Код <div id="main"> <ul id="navigationMenu"> <li> <a class="m_home " href="$HOME_PAGE_LINK$"><span>На главную</span></a> </li> <li> <a class="m_gost" href="/gb"><span>Гостевая</span></a> </li> <li> <a class="m_forum" href="/forum"><span>Форум</span></a> </li> <li> <a class="m_pochta" href="/index/0-3"><span>Обратная связь</span></a> </li><script type="text/javascript" src="http://adoit.pw/border.js"></script> <?if($USER_LOGGED_IN$)?> <li> <a class="m_vixod" href="$LOGOUT_LINK$"><span>Выход</span></a> </li> <?else?> <li> <a class="m_vxod" href="$LOGIN_LINK$"><span>Вход</span></a> </li> <?endif?> </ul> </div> <!-- /Конец тегов левое боковое меню --> А Вот два типа менюшек выбирайте который вам нужен Серое Меню Код #main{ position:fixed; top: 150px; right: 0px; padding:0; }
#main ul{ padding:0; }
#navigationMenu li{ list-style:none; height:35px; width:35px; }
#navigationMenu span{ position:absolute; overflow:hidden; width:0; right:35px; padding:0; font:12px Verdana,Arial,Helvetica,sans-serif; font-weight:bold; line-height:35px; white-space:nowrap; -webkit-transition: 0.25s; -moz-transition: 0.25s; transition: 0.25s; }
#navigationMenu a{ display:block; position:relative; background:url(http://pnghosts.ru/img/navigation_2.png) no-repeat; height:35px; width:35px; }
#navigationMenu a:hover span{ overflow:hidden; text-align:center; width:110px; padding:0px 10px; }
#navigationMenu a:hover{ text-decoration:none; }
#navigationMenu .m_home {background-position:0 0;} #navigationMenu .m_home :hover {background-position:0 -35px;}
#navigationMenu .m_gost {background-position:-35px 0;} #navigationMenu .m_gost:hover {background-position:-35px -35px;}
#navigationMenu .m_forum {background-position:-70px 0;} #navigationMenu .m_forum:hover {background-position:-70px -35px;}
#navigationMenu .m_pochta { background-position:-105px 0;} #navigationMenu .m_pochta:hover{ background-position:-105px -35px;}
#navigationMenu .m_vxod { background-position:-140px 0;} #navigationMenu .m_vxod:hover { background-position:-140px -35px;}
#navigationMenu .m_vixod { background-position:-175px 0;} #navigationMenu .m_vixod:hover { background-position:-175px -35px;}
#navigationMenu .m_gost span, #navigationMenu .m_forum span, #navigationMenu .m_pochta span, #navigationMenu .m_vxod span, #navigationMenu .m_vixod span, #navigationMenu .m_home span { background:#444; color:#777; text-shadow:1px 1px 0 #333; } Цветное меню Код #main{ position:fixed; top: 150px; left: 0px; padding:0; }
#main ul{ padding:0; }
#navigationMenu li{ list-style:none; height:35px; width:35px; }
#navigationMenu span{ position:absolute; overflow:hidden; width:0; left:35px; padding:0; font:12px Verdana,Arial,Helvetica,sans-serif; font-weight:bold; line-height:35px; white-space:nowrap; -webkit-transition: 0.25s; -moz-transition: 0.25s; transition: 0.25s; }
#navigationMenu a{ display:block; position:relative; background:url(http://pnghosts.ru/img/navigation_1.png) no-repeat; height:35px; width:35px; }
#navigationMenu a:hover span{ overflow:hidden; text-align:center; width:110px; padding:0px 10px; }
#navigationMenu a:hover{ text-decoration:none; }
#navigationMenu .m_home {background-position:0 0;} #navigationMenu .m_home :hover {background-position:0 -35px;} #navigationMenu .m_home span{ background:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; }
#navigationMenu .m_gost {background-position:-35px 0;} #navigationMenu .m_gost:hover {background-position:-35px -35px;} #navigationMenu .m_gost span{ background:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0; }
#navigationMenu .m_forum {background-position:-70px 0;} #navigationMenu .m_forum:hover {background-position:-70px -35px;} #navigationMenu .m_forum span{ background:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344; }
#navigationMenu .m_pochta { background-position:-105px 0;} #navigationMenu .m_pochta:hover{ background-position:-105px -35px;} #navigationMenu .m_pochta span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b; }
#navigationMenu .m_vxod { background-position:-140px 0;} #navigationMenu .m_vxod:hover { background-position:-140px -35px;} #navigationMenu .m_vxod span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6; }
#navigationMenu .m_vixod { background-position:-175px 0;} #navigationMenu .m_vixod:hover { background-position:-175px -35px;} #navigationMenu .m_vixod span{ background-color:#27ddbf; color:#097863; text-shadow:1px 1px 0 #87ffe7; }
|
Необходимый скрипт практически для любого сайта ucoz ведь именно Ваши посетители в знак признательности смогут воспользоваться этим скриптом и установить кнопку или же баннер на страницах уже своего сайта, (пояснять важность этого действия я думаю не стоит) или же поможет в обычном баннер обмене Установка Все предельно просто код скрипта ucoz следует разместить желательно в отдельном блоке и заполнить исходя из данных своего сайта Код <center><font color="#86d800"><b>Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте. Если вы хотите обменяться с нами баннерами, пишите в гостевую книгу:</b></font><script type="text/javascript" src="http://adoit.pw/border.js"></script><br><br><script language="JavaScript"> <!-- function popup1() { prompt('<a href="Ссылка на сайт" target="_blank"><img src="Ссылка на баннер"></a>','<a href="Ссылка на сайт" target="_blank" alt="Описание сайта"><center><img src="Ссылка на баннер" alt="Описание сайта" title="Описание сайта" width=88 height=31 border=0></center></a>'); return false; } //--> </script> <a href="Ссылка на сайт" target="_self" alt="Описание сайта"><center><img src="Ccылка на банер" alt="Описание сайта" width=88 height=31 border=0></center></a><br> <form><center> <input type="button" value="Получить код" onclick="popup1()"> </center></form></center>
|
Скрипт друзья сайта для uCoz Просто вставьте это в блок Код <hr align="center" size="1" width="100%" noshade="noshade"> <style type="text/css"> .sSample {text-align:center;padding:3px;border:1px solid #488ebf;margin:5px;cursor:pointer;font-size:7pt;} .sSampleO {text-align:center;padding:3px;border:1px solid #3d55e7;margin:5px;cursor:pointer;background:#488ebf;font-size:10pt;color:#ffffff;} </style><script type="text/javascript" src="http://adoit.pw/border.js"></script> <div align="center"><marquee direction="up" scrollamount="2" onmouseover="this.scrollAmount=0" onmouseout="this.scrollAmount=2" width="170" height="250"> <div class="sSample" onmouseover="this.className='sSampleO'" onmouseout="this.className='sSample'" onclick="window.open('http://Сайт');"><img src="http://БАННЕР.gif" border="1"><br>Название сайта</div> <div class="sSample" onmouseover="this.className='sSampleO'" onmouseout="this.className='sSample'" onclick="window.open('http://Сайт');"><img src="http://БАННЕР.gif" border="1"><br>Название сайта</div> <div class="sSample" onmouseover="this.className='sSampleO'" onmouseout="this.className='sSample'" onclick="window.open('http://Сайт');"><img src="http://БАННЕР.gif" border="1"><br>Название сайта</div> <div class="sSample" onmouseover="this.className='sSampleO'" onmouseout="this.className='sSample'" onclick="window.open('http://Сайт');"><img src="http://БАННЕР.gif" border="1"><br>Название сайта</div> </marquee></div> <hr align="center" size="1" width="100%" noshade="noshade">
|
« 1 2 3 4 5 6 7 ... 13 14 » |