Кнопка сайта с раскрывающимся кодом
Скрипты
Кнопка сайта с раскрывающимся кодом
Кнопка на сайте - это способ повысить свою цитируемость. На многих сайтах, на которых я бывал, кнопка сайта отображена лишь как изображение (вроде как, желающий сам код придумает), на некоторых код виден на всех страницах сайта в боковой панели (вариант удобный, но это портит дизайн), а некоторые размещают кнопку на отдельной странице (не каждый гость пожелает полезть на следующую страницу, только чтобы код получить). Опишу способ, где кнопка, в стандарте, видна как изображение, а кто захочет, сможет, не переходя по страницам, получить код.
Этот способ обладает следующими преимуществами:
- Кнопка не портит дизайн сайта;
- Метод кроссбраузерный;
- Код кнопки виден только по желанию пользователя;
- Если у пользователя отключен запуск JavaScript, то на странице будет видна и кнопка и ее код;
- Код валидный для стандарта W3C.
Для реализации воспользуемся поддержкой браузером DHTML, стилей и JavaScript.
Сам код:
<a href="Путь_к_вашему_сайту"><img src="Путь_к_вашей_кнопке" width="88" height="31" alt="Подпись_к_вашей_кнопке" border="0"></a><br>
<noscript><div>Код кнопки размером 88x31 для вставки на Ваш сайт:</div></noscript>
<div id="idGetButtonMess" style="display:none;cursor:hand;" onclick="if(document.getElementById('idGetButton').style.display=='none') document.getElementById('idGetButton').style.display='block'; else document.getElementById('idGetButton').style.display='none';">Получить код кнопки</div>
<div id="idGetButton" style="display:block;">
<textarea onclick="this.focus(); this.select();" rows="8" cols="20" readonly>
<a href="Путь_к_вашему_сайту"> <img src="Путь_к_вашей_кнопке" width="88" height="31" alt="Подпись_к_вашей_кнопке" border="0"> </a>
</textarea>
</div>
<script type="text/javascript"><!--
document.getElementById('idGetButton').style.display='none';
document.getElementById('idGetButtonMess').style.display='block';
--></script>
</div>
Остается чуть поменять код и установить его на сайт. Меняем то, что выделено в коде цветом:
- Путь_к_вашему_сайту - скажем, http://szenprogs.ru/;
- Путь_к_вашей_кнопке - тут путь к Вашей кнопке;
- Подпись_к_вашей_кнопке - подпись к кнопке, в стандарте, краткое описание ресурса.
Код можно изменить на Ваш вкус и цвет. Цветовых схем в коде не использовано, поэтому код можно использовать в чистом виде.
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Кнопка сайта с раскрывающимся кодом
Скрипты
Скрипты, инструкции, справочники
| Категория: | Скрипты |
| Просмотрено: | 14358 |
| Рейтинг: | 4.6/33 |
| Дата добавления: | 2009-05-20 12:49, Среда |
| Добавил: | Szen |
| Теги: | кнопка, DHTML, кнопка сайта, javascript |
Рекомендуем
Дополнительно к Кнопка сайта с раскрывающимся кодом
Мини-форум
| № 0 | 2009-05-20 12:49 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Кнопка сайта с раскрывающимся кодом". |
| Гость |
| № 1 | 2009-05-21 04:11 |
Mishgan |  |
| Михаил Батурин |
| № 2 | 2009-06-22 23:40 |
andre-money | Спасибо! Один вопрос как поставить свою картинку на кнопку |
| андрей пасечник |
| № 3 | 2009-06-25 11:41 |
Szen | andre-money, заливаете на свой сайт свою картинку. Меняете в коде текст "Путь_к_вашей_кнопке" на адрес кнопки, которую Вы залили на сайт. |
| Szen · WWW |
| № 4 | 2010-01-29 18:54 |
| Allamar | Ребята помогите пожалуйста. Я не программист и даже не любитель постройки сайтов. Но так получилось что у меня есть форум на котором нужно поставить кнопочку. Я её поставила - но она у меня двоится. Висит и в правой и в левой колонке. а Нужно чтобы только в одной (любой). вот ссылка http://night-empire.forum2x2.ru Заранее спасибо за помощь |
| Аламар |
| № 5 | 2010-01-30 18:10 |
| Szen | Allamar, я, почему-то, не нашел 2-х кнопок. У вас только одна, справа. |
| Szen · WWW |
| № 6 | 2010-02-01 10:47 |
| Allamar | Спасибо за внимание. И слева сверху есть ещё одна. Там кстати ещё фон в поле с кодом белый - его можно как-то изменить? |
| Аламар |
