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

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

Ранее, в статье виджет установки кнопки - логотипа или баннера на своём блоге, были рассмотрены 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 раскрывающимся кодом. В качестве примера возьму кнопку своих шпаргалок.

шпаргалки блогерши


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

<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


12 комментариев:

  1. Этот комментарий был удален автором.

    ОтветитьУдалить
  2. Вика, а почему у тебя у самой нету этой кнопки, может быть многие бы для удобства установили бы у себя в блогах, я, например, часто ей пользуюсь.

    ОтветитьУдалить
    Ответы
    1. Тебе Олеся спасибо огромное. А кнопку я заталкала на страницу об авторе. Но идейку ты мне подкинула. Надо реализовать.

      Удалить
  3. Виктория, вашу кнопку я поставила у себя на блоге "Волшебный фонарик", а на БЛОГЕ КОТА ВАСЬКИ вы у меня в гаджете "Блоги, которые я читаю".

    Теперь и в ВОЛШЕБНОМ ФОНАРИКЕ легко зайти к Вам в гости. Свою кнопку пока не создавала. Может попозже создам.

    ОтветитьУдалить
    Ответы
    1. Ирина я уже всё подглядела. и благодарна Вам.

      Удалить
  4. Я тоже свою кнопку на отдельную страницу разместила, аж три варианта. Только ее там никто не видит, наверно) Этот твой вариант мне нравится, классный!Код на виду не маячит.

    ОтветитьУдалить
    Ответы
    1. Наташа, и я об этом. Надо установить. Я вообще твою кнопку не видела. Вот так бывает.

      Удалить
    2. Да уж, что на виду, то и на виду) Вот я и задумалась..

      Удалить
  5. Слушай, Наташ. Ты мне идейку подкинула сейчас. Конечно не смогу все кнопки и баннеры установить-всем понятно-лишние ссылки и т.д. Но....есть идея.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo