Кнопка сайта с раскрывающимся кодом. Скрипты. Блог. Портал SzenProgs
 

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

Программы, скрипты, инструкции

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

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

  • Кнопка не портит дизайн сайта;
  • Метод кроссбраузерный;
  • Код кнопки виден только по желанию пользователя;
  • Если у пользователя отключен запуск 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/;
  • Путь_к_вашей_кнопке - тут путь к Вашей кнопке;
  • Подпись_к_вашей_кнопке - подпись к кнопке, в стандарте, краткое описание ресурса.

Код можно изменить на Ваш вкус и цвет. Цветовых схем в коде не использовано, поэтому код можно использовать в чистом виде.



Вы можете выразить свою благодарность администрации портала отправив SMS-кой выбранное вами количество денежек:


Категория:Скрипты
Просмотрено:2422
Рейтинг:4.6/8
Дата добавления:20.05.2009 12:49, Среда
Добавил:Szen
Теги:кнопка, DHTML, кнопка сайта, JavaScript

Внимание

Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.

Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.

Мини-форум

№ 0Среда, 20.05.2009 12:49
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Кнопка сайта с раскрывающимся кодом".
Профиль
№ 1Четверг, 21.05.2009 04:11
Mishgan
Аватар участника Mishgan
up
Профиль
№ 2Понедельник, 22.06.2009 23:40
andre-money
Аватар участника andre-money
Спасибо!
Один вопрос как поставить свою картинку на кнопку
Профиль
№ 3Четверг, 25.06.2009 11:41
Szen
Аватар участника Szen
andre-money, заливаете на свой сайт свою картинку. Меняете в коде текст "Путь_к_вашей_кнопке" на адрес кнопки, которую Вы залили на сайт.
ПрофильWWW
№ 4Пятница, 29.01.2010 18:54
Allamar
Аватар участника Allamar
Ребята помогите пожалуйста.
Я не программист и даже не любитель постройки сайтов. Но так получилось что у меня есть форум на котором нужно поставить кнопочку. Я её поставила - но она у меня двоится.
Висит и в правой и в левой колонке. а Нужно чтобы только в одной (любой).

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

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

Профиль
№ 5Суббота, 30.01.2010 18:10
Szen
Аватар участника Szen
Allamar, я, почему-то, не нашел 2-х кнопок. У вас только одна, справа.
ПрофильWWW
№ 6Понедельник, 01.02.2010 10:47
Allamar
Аватар участника Allamar
Спасибо за внимание.
И слева сверху есть ещё одна. Там кстати ещё фон в поле с кодом белый - его можно как-то изменить?
Профиль
Учавствовать в обсуждении "Кнопка сайта с раскрывающимся кодом" могут только зарегистрированные пользователи.
Реклама
Интересное
Загрузка...
День рождения
Поздравляем с днем рождения следующих друзей:
kola_haker(16), angel_neo(26), NVKirillof(39), alnika(32).
Желаем им счастья, здоровья, благополучия, любви и богатства!

С уважением, администрация сайта.
Holiday
Статистика
Valid HTML 4.01 Transitional

Онлайн всего: 66
Гостей: 66
Пользователей: 0
Кнопка портала
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Софт
Заработок
Интересное
Загрузка...
Опрос
Сколько сайтов у вас есть?
Всего ответов: 476
Друзья портала
© 2009, SzenProgs
Администратор и дизайнер портала: Szen
Хостинг от uCoz