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

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




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

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

Чтобы установить такую внутри сообщения нам понадобится вот такой код 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 ...: