Оригинальный 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

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

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