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

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




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


здесь текст , код, изображение

Чтобы установить такую внутри сообщения нам понадобится вот такой код CSS-

<style>.V-Bspoler{
background:#CC6666;
border: 2px solid rgb( 66, 100, 7);
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 3px 3px rgb(113, 112, 112);
color:#FFFFFF;
cursor:pointer;
font-family:verdana;
font-weight:700;
padding:20px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100%;
background-color: #CC6666 ;
border-color: # FFCCCC;
}
.V-Bspoler:hover,V-Bspoler:focus{
background-color: #9999FF;
color: #FFFFFF;
border-color: #666699;
}</style>


Здесь можно менять на своё усмотрение все значения цвета, рамки, шрифта. font-weight:700; -ширина всей конструкции.

И вот такой HTML код-


<div style="margin: 2px; text-align: center;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;"> </span></i><input class="V-Bspoler " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'CODE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'посмотреть '; }" style="font-size: large; margin: 0px; padding: 0px; text-align: center; width: 320px;" type="button" value="посмотреть " />
</div>
<div class="alt2" style="background-color: #e6dbff; border: 2px inset; font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px; padding: 4px;">
<div style="display: none;">
<div align="left"> здесь скрытый текст , код, изображение</div>
</div>
</div>
</div>


В сроку, выделенную синим цветом, пишем то что хотим скрыть. Зелёным - надпись на кнопке.

Копируйте в блокнот сначала первый код и ниже второй. При написании сообщения, в том месте, где предполагается скрыть текст, перейдите в режим HTML и вставляйте их. Если предполагается частое использование такой кнопки, лучше будет установить первый код CSS
в шаблон блога перед строкой ]]></b:skin>. Без тегов <style>...</style>. А уже потом в редакторе сообщений также вставлять в нужном месте только второй код HTML .

Всё это можно применить и в любом гаджете сайдбара или футера. Экономит место и смотрится неплохо.

Если возникнут вопросы по настройке и установки такой кнопки спрашивайте-разберёмся.

Сегодня не смею больше отвлекать ваше внимание. Хороших выходных и до встречи.
Удачи всем нам.

Ой, а что это там ниже? Ну надо же! Нажимаем!

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

Введите Ваш email ...:


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

  1. Как здорово! Спасибо, Вика, обязательно попробую!

    ОтветитьУдалить
  2. Елена, обязательно попробуйте. Кстати, как у Вас дела с блогом.

    ОтветитьУдалить
  3. Вика,здравствуйте. Вставляю кнопку, идет, но правая сторона страницы перемещается влево. Жаль, кнопка красивая. Почему так у меня происходит? подскажите.

    ОтветитьУдалить
    Ответы
    1. Тамара, добрый день. Возможно Вам надо поиграться со значениями ширины font-weight:700;

      Удалить
  4. Спасибо за быстрый ответ, попробую.

    ОтветитьУдалить
  5. Вика, извините. Идет текст "ваш код не может быть принят. Тег не закрыт div. как его закрыть, не знаю. Извините за безграмотность.

    ОтветитьУдалить
    Ответы
    1. Тамара, в коде есть открывающиеся теги див < тут участок кода и далее в конце закрывающийся /div. Только заключите его с обеих сторон вот так < > Вот в каком-то месте Вы его пропустили. Попробуйте пока сделать эту кнопку в новом сообщении без текста. Сразу перейдите в режим HTML и установите предложенные коды. Попробуйте ещё сначала установить второй, а ниже первый. У меня эта кнопка на всех блогах работает.

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

    ОтветитьУдалить
  7. Тамара, здравствуйте. Подправила второй код. Там да лишний див был. Извиняюсь за неудобства. Только вот не могу понять почему он у Вас уползает. Попробуйте поменять эти значения font-weight:700;
    padding:20px;

    ОтветитьУдалить
  8. Вика, получилось. Спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Приятно слышать, Тамара. Рада за Вас. Обращайтесь.

      Удалить

Пользовательский поиск