Кнопка сайта с раскрывающимся кодом

Скрипты

Рисунок Кнопка сайта с раскрывающимся кодом
Кнопка сайта с раскрывающимся кодом Кнопка сайта с раскрывающимся кодом
оценка: 4.6 из 5
оценок: 33, отзывов: 6
Программы, скрипты, инструкции

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

Этот способ обладает следующими преимуществами:

  • Кнопка не портит дизайн сайта;
  • Метод кроссбраузерный;
  • Код кнопки виден только по желанию пользователя;
  • Если у пользователя отключен запуск JavaScript, то на странице будет видна и кнопка и ее код;
  • Код валидный для стандарта W3C.

Для реализации воспользуемся поддержкой браузером DHTML, стилей и JavaScript.

Сам код:

Code
<div style="text-align:center;">
  <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>
      &lt;a href="Путь_к_вашему_сайту"> &lt;img src="Путь_к_вашей_кнопке" width="88" height="31" alt="Подпись_к_вашей_кнопке" border="0"> &lt;/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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Кнопка сайта с раскрывающимся кодом
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:12423
Рейтинг:4.6/33
Дата добавления:2009-05-20 12:49, Среда
Добавил:Szen
Теги:кнопка, DHTML, кнопка сайта, JavaScript

Мини-форум

№ 02009-05-20 12:49
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Кнопка сайта с раскрывающимся кодом".
Гость
№ 2
2009-06-22 23:40
andre-money
Аватар участника andre-money
Спасибо!
Один вопрос как поставить свою картинку на кнопку
андрей пасечник
№ 3
2009-06-25 11:41
Szen
Аватар участника Szen
andre-money, заливаете на свой сайт свою картинку. Меняете в коде текст "Путь_к_вашей_кнопке" на адрес кнопки, которую Вы залили на сайт.
Szen · WWW
№ 4
2010-01-29 18:54
Allamar
Аватар участника Allamar
Ребята помогите пожалуйста.
Я не программист и даже не любитель постройки сайтов. Но так получилось что у меня есть форум на котором нужно поставить кнопочку. Я её поставила - но она у меня двоится.
Висит и в правой и в левой колонке. а Нужно чтобы только в одной (любой).

вот ссылка http://night-empire.forum2x2.ru

Заранее спасибо за помощь

Аламар
№ 5
2010-01-30 18:10
Szen
Аватар участника Szen
Allamar, я, почему-то, не нашел 2-х кнопок. У вас только одна, справа.
Szen · WWW
№ 6
2010-02-01 10:47
Allamar
Аватар участника Allamar
Спасибо за внимание.
И слева сверху есть ещё одна. Там кстати ещё фон в поле с кодом белый - его можно как-то изменить?
Аламар
Учавствовать в обсуждении "Кнопка сайта с раскрывающимся кодом" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким CMS вы пользуетесь?
Всего ответов: 243
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 5
Гостей: 4
Пользователей: 1

GenkaPAIRE
Портал SzenProgs.ru © 2008 - 2018 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz