Оригинальный scroll для блога

Приветствую читателей и гостей моего блога. Не могу не поделиться с вами, интересным  скроллом. Часто бывает просто необходимо спрятать часть текста или кода на странице в сообщении.В шпаргалке сим-сим откройся уже рассматривали несколько подобных вариантов. Дело в том, что если вы уже добавили стили CSS какого-то из вариантов, добавить этот тоже можно.

Кто давно читает мои шпаргалки, наверно обратили внимание,что коды я выделяю разными способами.

Вот так будет выглядеть этот скролл и работу его посмотреть можно здесь.


Так что если вам понравился этот  вариант давайте начнём. Заходим в ШАБЛОН-ИЗМЕНИТЬ HTML находим строку. Как это легко сделать прочитайте здесь. И над ней вставляем следующий код

#lightbdrs-code {
width: 400px;
margin: 10px auto;
overflow: auto;
height: 200px;
padding:0 20px;
background-color:#4E4E4E;
border:solid #0099FF 3px;
box-shadow:0 0 10px 2px #000 inset;
background: url(http://2.bp.blogspot.com/-Z0NQ5NxNkmE/UjSXktAKEEI/AAAAAAAAByM/AGe4VEHPfJw/s1600/bg.png);
}
#lightbdrs-code:hover {
border-color: #333;
box-shadow:0 0 5px 2px #000 ;
}
#lightbdrs-code code {
font-size : 12px;
color : #000000;
font-family: "Courier New", Courier, monospace;
line-height: 20px;
font-weight: bold;
}

Теперь, когда вы захотите скрыть часть  текста или кода  вам понадобиться просто вставить в нужное место вот это-

<div style="background:#fff; width:460px;margin: 10px auto;height: 227px;padding:1px ;box-shadow:0 0 10px 2px #000 inset;border-radius:10px; ">
<div id="lightbdrs-code">
<code>

здесь ваш текст 
</code>
</div></div>


Как это сделать. Перейдите в редакторе сообщений в режим HTML


И вместо текста , который я выделила красным цветом вставляйте то, что задумали. Хочу дать небольшой совет. Последний код лучше всего сохранить у себя в блокноте или в черновике в сообщениях. Все значения в этом коде которые выделены зелёным при желании можно поменять.

Обращаю ваше  внимание ещё на один момент. Во время написания сообщения выглядеть это будет так


Пусть это вас не смущает. При просмотре и публикации всё будет в надлежащем виде.

Если будут вопросы обращайтесь. На этом в сегодняшней шпаргалке поставим точку.


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

введите пожалуйста свой email :

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

  1. Та-ак, еще подкинула тему для размышлений))) Как это все освоить?

    ОтветитьУдалить
  2. Ирина, с твоим упорством возможно всё. Спасибо за комментарий.

    ОтветитьУдалить
  3. Значит упираюсь по сильнее и... начинаю думать)

    ОтветитьУдалить
  4. Добрый вечер, Вика! Когда я в коде меняю размеры, меняется только внешняя серая рамка, а внутреннее поле остаётся прежним. Никаких других значений для изменения размеров не просматривается. Что нужно сделать, чтоб менялось и рамка и поле? спасибо..

    ОтветитьУдалить
  5. Лариса Нужно поиграться со значениями padding:0 20px;По часовой стрелке(верх,право, низ , слева. Тут об этом http://htmlbook.ru/css/padding

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

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