Кнопка блога с раскрывающимся кодом.

Привет, друзья. Сегодня много времени у вас не отниму и предлагаю вашему вниманию, вариант кнопки блога с раскрывающимся кодом. Многие пользователи взаимно или просто по желанию делятся на своих страницах кнопками любимых блогов. Почему бы и нет?

Ранее, в статье виджет установки кнопки - логотипа или баннера на своём блоге, были рассмотрены 2 примера, как это можно сделать. Если вам будет необходимо, выбор есть.

Давайте начнём с того, что прежде всего такая кнопка у нас должна быть. И соответственно иметь свой адрес. Кто-то делает логотипы или баннеры в фотошопе. В свою очередь, предложу вам несколько популярных онлайн-сервисов, где можно быстро создать себе уникальную кнопку. Они достаточно понятны и полный обзор не имеет смыла делать.

http://dabuttonfactory.com/,
http://www.glassybuttons.com/glassy.php.
http://www.flashvortex.com/buttons.php,
https://css-tricks.com/examples/ButtonMaker/.
http://kalsey.com/tools/buttonmaker/

В своё время я писала о сервисе http://cooltext.com/ в статье кнопка-логотип для блога.
Вернёмся к сегодняшней теме. Когда кнопку сделали, разместили её в нужном месте блога. И вот на случай, чтобы не писать автору - дай ка ты мне, мил человек, код твоей кнопочки для размещения её у себя. Мы предложим вот такой вариант c раскрывающимся кодом. В качестве примера возьму кнопку своих шпаргалок.

Получить код кнопки

<a href=" http://hpargallka.blogspot.ru/"> <img src=" http://i031.radikal.ru/1406/67/c01848dc22de.gif" width="110" height="20" alt="шпаргалки блогерши" border="0"> </a>

Это код для реализации.

<div style="text-align:center;">
  <a href="Путь к вашему сайту"><img src="Адрес картинки"width="110" height="20" alt="Подпись к кнопке" border="0"></a><br>
  <noscript><div>Код кнопки размером 110x20 для вставки на Ваш сайт:</div></noscript>
  <div id="idGetButtonMess" style="display:none;cursor:default;"onclick="if(document.getElementById('idGetButton').style.display=='none')document.getElementById('idGetButton').style.display='block'; elsedocument.getElementById('idGetButton').style.display='none';">Получить код кнопки</div><br>   <div id="idGetButton" style="display:block;">
    <textarea onclick="this.focus(); this.select();" rows="8" cols="20"readonly>
      &lt;a href="Путь к вашему блогу"> &lt;img src="Адрес к кнопки" width="110" height="20" alt="Подпись к кнопке" border="0"> &lt;/a>
    </textarea>
  </div>
  <script type="text/javascript"><!--
    document.getElementById('idGetButton').style.display='none';
    document.getElementById('idGetButtonMess').style.display='block';
  --></script>

В строки синего цвета пишите свои данные Ширину и высоту в двух местах тоже. Устанавливайте код в гаджет HTML/JavaScript в любое место блога. Или куда душа пожелает. И будет у вас своя кнопка блога с раскрывающимся кодом. Обязательно сбегаю посмотрю, что у вас получилось.

Всё на сегодня.Хороших выходных и до встречи. Спасибо.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email