| Здесь Ваш текст ...колонка №1 или картинка слева- в ней можно разместить часть всего текста или картинку... | Здесь Ваш текст ...колонка №2 или картинка справа- в ней можно разместить часть всего текста или картинку |
|
Показаны сообщения с ярлыком текст. Показать все сообщения
Показаны сообщения с ярлыком текст. Показать все сообщения
понедельник, 4 июня 2018 г.
0
коммент.
четверг, 31 мая 2018 г.
Источник: http://www.shpargalochki.ru/2016/02/originalnaja-prokrutka-teksta.html#more
Один из вариантов был описан в этом(http://www.shpargalochki.ru/2014/02/kak-skryt-chast-teksta-soobshhenii.html#more) сообщении.
Пользователь просто будет прокручивать колёсиком мыши по выделенному участку в сообщении. Посмотрите пример ниже.
Один из вариантов был описан в этом(http://www.shpargalochki.ru/2014/02/kak-skryt-chast-teksta-soobshhenii.html#more) сообщении.
Пользователь просто будет прокручивать колёсиком мыши по выделенному участку в сообщении. Посмотрите пример ниже.
<div class="inner">ДЛИННЫЙ ТЕКСТВ стилях CSS, которые выделены синим цветом, меняйте все значения на нужные вам.
</div>
</div>
<style>.scrollbar {
background-color:#556B2F ; / цвет фона /
border:4px solid:#008B8B ; /ширина и цвет рамки/
color:white; /цвет текста /
overflow:hidden;
text-align:justify;
}
.scrollbar .inner {
height:100px; /высота блока текста/
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}</style>
среда, 30 мая 2018 г.
|
понедельник, 28 мая 2018 г.
источник: https://www.bdblogov.ru/2014/07/beautiful-styles-design-quotes-in-blog-Blogspot.html
Оформление текста цитатой с использованием предлагаемых здесь стилей CSS намного проще. Единственный минус, все цитаты будут отображаться одинаково. Но при желании можно оформить и цитатой, а так же и с помощью вставки кода, описанного мной в статье.
Первое, что надо сделать-это посмотреть в своих шаблонах вот такой код .post blockquote и удалить его из шаблона или вставить в эту строку код CSS цитаты, чтобы стили не конкурировали друг с другом.
Можете найти у себя в шаблоне код такого вида .post-body blockquote { line-height:1.3em; } или .post blockquote{здесь код }. Можете не найти вообще никакого кода, тогда смело можете вставлять выбранный здесь стиль CSS.
Смотрите между строками <b:skin>...</b:skin>.
Можете найти у себя в шаблоне код такого вида .post-body blockquote { line-height:1.3em; } или .post blockquote{здесь код }. Можете не найти вообще никакого кода, тогда смело можете вставлять выбранный здесь стиль CSS.
Смотрите между строками <b:skin>...</b:skin>.
Выбранный CSS стиль вставляете выше строки ]]></b:skin>.
Дальше, когда пишите пост в редакторе сообщений, выделите его левой кнопкой мыши и вверху нажмите на кавычки.
пятница, 25 мая 2018 г.
источник: Я блоггер.
Пред.пост создавать таблицу html(https://yablogger.info/kak-sozdat-tablicu-v-html-teg-table.html).
Цвет и шрифт - настраиваем как в сообщении.
Как разделить текст на 2 и 3 колонки.
Начнем с тега <table>. Принцип тот же что и при создании таблицы. Открываем редактор сообщения в режиме html и вставляем код:<table border="0″ cellpadding="0″ cellspacing="10″><tr> <td valign="top">Текст первой колонки</td><td valign="top"><div style="background-color: snow; border-left: 2px solid #ff0000; height: 150px; padding-left: 10px; width: 400px;">Текст второй колонки</div></td></tr></table>height: 150px - высота вертикальной линии
Цвет и шрифт - настраиваем как в сообщении.
|
Изменении цвета - скопированного, выделенного текста.
1. Зайдите в Дизайн ---> Изменить HTML
2. С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:
]]></b:skin>
3 Перед этой строкой вставьте этот CSS стиль:
4. Вместо #EB7F17 - поставьте нужный вам цвет.
|
четверг, 24 мая 2018 г.
http://amateurblogger.ru/2010/11/krasivoe-oformlenie-statey-v-blogspot.html
Просто вставляете эту заготовку, в HTML редактор нового сообщения Blogger/Blogspot.
Просто вставляете эту заготовку, в HTML редактор нового сообщения Blogger/Blogspot.
<style type="text/css">.vajno, .info, .kod {
margin:10px;
padding:15px 20px 15px 80px;
border:1px solid #999999;
border-radius: 10px;
-moz-border-radius:10px 10px 10px 10px;
box-shadow:2px 2px 3px #999999;
-moz-box-shadow:2px 2px 3px #999999;
-webkit-box-shadow: #999 2px 2px 3px;
background-position:20px 50%;
background-repeat:no-repeat;
position:relative;
text-align:justify;
}.vajno {
background-color:#FFD4A0;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk1GvqgjyxyISzfh1551G9U66ZnEISXDW7ePk3iRgTIFcVGMoQQCrZAyyPFz92IqwXhJ8frk4ShUKj54Qj-OksifLJ1S9XH9yL3xcFLTfEQtCNr3EH0UfvGUWB43eiVhz4W9loNgNYvyg/");
}
.info {
background-color:#FFFFCC;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0XKRDeBUz85g78zQl4__V5kv6Rp7H8ovvq2pOng4Ucli0-nUX4tV9mMFw8yxid23leyb1jFeMYGYvn1hfDkXHRzpfPCrQ6EO93VivuJFlK3OU6xTeXR34XOq8vDiYr0XTZamnEENKLKk/");
}
.kod { background-color:#E9FFD4;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14Ztj9SrbDW7IJ4REhLURb0bEtMe39Q7nOiTNC7nwIC75W15sj4uhjQDHpl2tQvOBU5wDVG2rdqq_ZpaizTGJOkVJ1h0aijqt3Aq2VMoJjPTBz8cCFiT-hPnTvoMoMzt3lc_FCOTmBI_z/");
}</style><div class="info">ВАШ ТЕКСТ
</div>
Так будет выглядеть, если там где маркировано красным, вставить - info
Так будет выглядеть, если там где маркировано красным, вставить - vajno
Так будет выглядеть, если там где маркировано красным, вставить - kod
источник :https://www.mycrib.ru/2014/08/text-pod-spoiler.html
Иногда нужно спрятать часть текста под спойлер.
Не нужно путать спойлер с понятием “убрать под кат”(http://www.mycrib.ru/2010/07/blog-post_3057.html), во втором случае часть контента будет показано на главной странице, а все сообщение – открываться на отдельной странице записи.
Как же спрятать текст под спойлер?
Универсальным код, который будет работать на любой площадке, где поддерживаются html-коды и javascript, а точнее – на blogger (blogspot), wordpress, joomla, ucoz.
| <lj-spoiler title="Текст ссылки на спойлер"> Этот текст будет скрыт </lj-spoiler>
Как сделать спойлер – вставьте в сообщение в режиме html следующий код.
Иногда нужно спрятать часть текста под спойлер.
Не нужно путать спойлер с понятием “убрать под кат”(http://www.mycrib.ru/2010/07/blog-post_3057.html), во втором случае часть контента будет показано на главной странице, а все сообщение – открываться на отдельной странице записи.
Универсальным код, который будет работать на любой площадке, где поддерживаются html-коды и javascript, а точнее – на blogger (blogspot), wordpress, joomla, ucoz.
| <lj-spoiler title="Текст ссылки на спойлер"> Этот текст будет скрыт </lj-spoiler>
Как сделать спойлер – вставьте в сообщение в режиме html следующий код.
<div id="spoiler" style="display:none">Пример спойлера:
Скрытый контент (текст, код изображения, ссылки, видео и др.)</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Показать/Скрыть</button>
вторник, 22 мая 2018 г.
 |
<textarea style="border-right: black 2px solid; border-top: black 2px solid; background-color:dodgerblue; color:white; border-left: black 2px solid; border-bottom: black 2px solid; width: 100%;">КОДЫ</textarea>Некоторые пояснения к коду:
- border-right: black 2px solid - правая граница рамки: чёрный цвет, ширина 2 px, сплошная рамка
- background-color:dodgerblue - цвет фона: синий
- color:white - цвет текста: белый
1.
2.
3.
4.
Примечание:
HTML-редактор Блоггера незначительно видоизменил код, который предложен в источнике.
Поэтому код (например, по варианту 1) нужно вставлять в HTML-редактор в таком виде:
<textarea style="background-color: #cceeff; border-bottom: #004566 2px solid; border-left: #004566 2px solid; border-right: #004566 2px solid; border-top: #004566 2px solid; color: #004566; width: 100%;"> ВСТАВЬТЕ СЮДА ВАШ КОД </textarea>Как пример, код вставки формы поиска на блоге от 404.RU! будет выглядеть так:
источник :http://exp13blog.blogspot.com/2013/06/vstavka-koda.html
Вариант № 1.
Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS.blockquote {Так будет внешне выглядеть цитата в статье блога:
border: dotted #666 1px;
border-left:solid #2388BB 5px;
margin:10px 40px;
padding:15px;
color:#333;
font-style:normal;
font-size:14px;
background:#F0F9FF;
}
Вариант № 2.
В этом варианте несколько изменены цветовое оформление и начертание шрифта.blockquote {
margin:10px;
padding:10px;
border:1px solid #D6D6D6;
border-radius: 5px;
font-family: monospace;
background-color:#F7F7F7;
font-size:90%;
color: #000;
}
здесь: border - граница, border-radius - скругление краев, margin - отступы блока, padding - отступ внутри блока, font-size - размер шрифта, color - цвет шрифта, background - цвет фона.
здесь НЕ работает
Вариант оформления кода с помощью CSS (вручную) в целом похож на последний способ, описанный в статье "Вставка кода в статью блога (продолжение)"(http://exp13blog.blogspot.com/2013/06/vstavka-koda-2.html).
1. Новый класс .mykod, для которого CSS стиль такого вида:
2. Теперь каждый раз, когда нужно оформить код, его нужно заключить между тегами:
Идею такого оформления кода позаимствованна в статье "Красивое выделение текста".
здесь: border - граница, border-radius - скругление краев, margin - отступы блока, padding - отступ внутри блока, font-size - размер шрифта, color - цвет шрифта, background - цвет фона.
По этой теме можно прочесть также:
Вариант оформления кода с помощью CSS (вручную) в целом похож на последний способ, описанный в статье "Вставка кода в статью блога (продолжение)"(http://exp13blog.blogspot.com/2013/06/vstavka-koda-2.html).
1. Новый класс .mykod, для которого CSS стиль такого вида:
Этот стиль CSS сохраняем через Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS..mykod {
margin:10px;
padding:15px 15px 15px 70px;
border:2px solid #2288bb;
border-radius: 10px;
background-position:10px 50%;
background-repeat:no-repeat;
position:relative;
background-color:#F0F9FF;
font-family: monospace;
font-size:90%;
color: #2288bb;
background-image:url("https://dl.dropboxusercontent.com/u/54357058/kod.png");
}
То есть, сначала в визуальном редакторе пишем код , а затем (после написания всей статьи), переключаемся на HTML-редактор и участок текста, соответствующий нашему коду, обрамляем в вышеуказанные div-ы.
Идею такого оформления кода позаимствованна в статье "Красивое выделение текста".
здесь: border - граница, border-radius - скругление краев, margin - отступы блока, padding - отступ внутри блока, font-size - размер шрифта, color - цвет шрифта, background - цвет фона.
По этой теме можно прочесть также:
- Вставка кода в статью блога( http://exp13blog.blogspot.com/2013/06/vstavka-koda.html)
- Вставка кода в статью блога (продолжение)http://exp13blog.blogspot.com/2013/06/vstavka-koda-2.html
- Оформление участка текста стилем "Тетрадный лист в линейку"http://exp13blog.blogspot.com/2014/09/oformlenie-uchastka-teksta.html
Клавиши в тексте статьи блога можно выделить интересным образом, нужно внести лишь небольшие изменения в CSS.
Для этого изменим стиль оформления тега <kbd> через:
Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS.
kbd{Теперь, чтобы придать буквам (тексту) эффект клавиш клавиатуры, то нужно в режиме HTML-редактора обрамить их тегами в виде:
border:1px solid gray;
font-size:1.1em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}
<kbd>Текст</kbd>Например, так:
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd>Тогда в статье эта строчка примет такой вид:
Ctrl + Shift + V
Примечание:
Оформление текста в виде клавиш не отобразится в визуальном редакторе, однако появится в режиме предварительного просмотра статьи.
Идею позаимствованна в статье "Add Keyboard Keys Effect To Your Text in Blogger with CSS".
Другой вариант (попроще) будет выглядеть так:
Текст
И для этого варианта стиль оформления тега <kbd> будет таким:kbd{источник: http://exp13blog.blogspot.com/2013/12/text-v-vide-klavish-css.html
border:1px solid gray;
font-size:1.1em;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px;
padding:1px 3px;
}
Сначала добавляем новый класс CSS ("quote") через:
Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS
После чего участок текста, который будем выделять, заключаем в конструкцию вида:
Можно поэкспериментировать с цветами:
rgba(34, 136, 187, .5) - цвет вертикальной полоски слева
#f2f9fc - цвет фона
источник: http://exp13blog.blogspot.com/2014/09/oformlenie-uchastka-teksta.html#more
Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS
/* Стиль оформления текста Лист в линейку */Сохраняем.
.quote {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 1.8em, rgba(34, 136, 187, .5) 2em)
3em 0 repeat-y,
linear-gradient(
rgba(255,255,255, 0) 1.9em, rgba(0, 0, 0, .15) 2em)
0 0;
background-size: 2em 2em;
background-color: #f2f9fc;
margin: 1em 0em 1em 0em;
padding: 2.5em 2em 1em 6em;
font: 16px/2 Georgia;
font-style:italic;
}
/* END Стиль оформления текста Лист в линейку */
После чего участок текста, который будем выделять, заключаем в конструкцию вида:
<div class="quote">Пример оформленного таким способом текста:
УЧАСТОК ТЕКСТА
</div>
В компьютере предусмотрена функция Awaseru Voice. Она усиливает высокие
частоты, которые хуже слышат люди в возрасте. Функция Awaseru View, в
свою очередь, подбирает оптимальные яркость и цветовой баланс экрана.
Можно поэкспериментировать с цветами:
rgba(34, 136, 187, .5) - цвет вертикальной полоски слева
#f2f9fc - цвет фона
источник: http://exp13blog.blogspot.com/2014/09/oformlenie-uchastka-teksta.html#more
пятница, 18 мая 2018 г.
Эффект подъёма текста при наведении с отбрасываемой тенью
Эффект создаёт иллюзию подъёма текста с отбрасываемой тенью, выделяя его из остального при наведении мышки на задействованный участок элемента. Можно применить эффект подъёма как к отдельным словам, так и к целым предложениям или параграфам. Эффект имеет простое использование свойств CSS в качестве перехода состояния и создания тени выделенному элементу. Все параметры эффекта Вы сможете настроить по своему усмотрению, в коде для установки сделаны комментарии в местах регулировок значениями.
Эффект создаёт иллюзию подъёма текста с отбрасываемой тенью, выделяя его из остального при наведении мышки на задействованный участок элемента. Можно применить эффект подъёма как к отдельным словам, так и к целым предложениям или параграфам. Эффект имеет простое использование свойств CSS в качестве перехода состояния и создания тени выделенному элементу. Все параметры эффекта Вы сможете настроить по своему усмотрению, в коде для установки сделаны комментарии в местах регулировок значениями.
четверг, 17 мая 2018 г.
<style>.post blockquote{font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;background-color: #F2F1F1;color: #000;margin: 5px 10px;padding: 20px 20px 20px 20px;border: 2px dotted lightgrey;border-radius: 10px;box-shadow: -1px -1px 12px 2px gainsboro;transition: background-color .777s;-webkit-transition: background-color .777s;-moz-transition: background-color .777s;-o-transition: background-color .777s;-ms-transition: background-color .777s;}.post blockquote:hover{background-color: #6495ED;CornflowerBlue ;color: #fff;}.post blockquote:active{background-color: #eeeeee;lightblue ; ;color: #000;}</style>
понедельник, 14 мая 2018 г.
|
воскресенье, 13 мая 2018 г.
Анимированный фон для цитаты<blockquote>здесь ваш текст </blockquote>Красивые ссылки<div class="rotate-links"><a href="адрес_ссылки">Ваш текст </a></div>Эффект подсветки ссылок<a class="text" href="адрес страницы">Ваш текст</a>Эффект подъёма текста с тенью<a class="bv-text-effect" href="адрес_ссылки">Ваш текст</a>
|
среда, 9 мая 2018 г.
|
Подписаться на:
Сообщения (Atom)
