источник: https://www.mycrib.ru/2012/11/gallery-blogspot-jquery-zoom-effect.html
Еще статьи автора:
1.Простой галереи blogspot(http://www.mycrib.ru/2012/09/galereya-blogspot.html) в виде слайд-шоу,
2.Подборка шаблонов галерей для blogger(http://www.mycrib.ru/2012/09/shablony-blogger-gallery.html)и 3.Создание jquery карусели (http://www.mycrib.ru/2012/09/jquery-jcarousel.html)
|
Показаны сообщения с ярлыком CSS. Показать все сообщения
Показаны сообщения с ярлыком CSS. Показать все сообщения
вторник, 5 июня 2018 г.
четверг, 31 мая 2018 г.
Innushka
<style type="text/css">
.hbz-signature {
text-align: right; /* - расположение подписи- */
font-size: 20px; /* - размер шрифта- */
font-family: Papyrus,fantasy; /* - стили текста - */
text-shadow: 1px 1px #ffedae, 1px -1px #ffedae, -1px 1px #ffedae, -1px -1px #ffedae, 3px 3px 6px rgba(0,0,0,.5); /* - цвет и размеры тени - */
margin-top : 30px; /* - отступ - */
color: #1d4c07; /* - основной цвет текста - */
}
.hbz-signature span {
font-size: 14px;
vertical-align: top;
}
</style>
<div class="hbz-signature">
Innushka</div>
среда, 30 мая 2018 г.
Загружаете в редакторе блоггер картинки или фото, настройте размер (маленький, средний, крупный), переходите по вкладке HTML и внизу страницы вставьте код CSS.
<style>.post img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease; -o-transition: all 1s ease;-ms-transition: all 1s ease; transition: all 1s ease;}.post img:hover {width: 100%;height: 100%;}</style>
В стиль CSS можно добавить размеры высоты и ширины картинки. Тогда устанавливаете размеры изображений уже в самом коде.
<style>.post img {height: 50%;width: 50%;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease; transition: all 1s ease;}.post img:hover {width: 100%;height: 100%;}</style>
Кто захочет таким способом увеличить изображения во всех постах блога, код CSS (без тэга style) вставьте в шаблон изменить шаблон выше строки ]]></b:skin>.
если кому понадобится, измените в коде .post img { на .sidebar img{
|
понедельник, 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 - поставьте нужный вам цвет.
|
вторник, 22 мая 2018 г.
Вариант № 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.
Для этого изменим стиль оформления тега <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;
}
понедельник, 14 мая 2018 г.
|
|
|
среда, 2 мая 2018 г.
|
вторник, 1 мая 2018 г.
|
среда, 25 апреля 2018 г.
|
вторник, 24 апреля 2018 г.
|
Подписаться на:
Сообщения (Atom)
