Здравствуйте !
На блоге О ТОМ И О СЁМ можно просто отдохнуть,почитать статьи о блогах и многое другое .
Я не являюсь автором данных идей . Я просто спёр, где что мог.я
.
Я чайник ,естественно , поэтому для себя сделал небольшую памятку по оформлению текста .
Такой вот вариант- листок , вырванный из блокнотаВариант 1
Плохо лежало здесь
.
.
.bloknot1 {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyFFdFmaK0vv-X09bB3DCUfdwEXatP0fXEfDB0OITckiTXJ2F1LYy_cGmINK3Fpm1ni3ec16FgjAvXGeEOiwrwS_Gk_xC5xwaQU4L2l4IyX8GUpXjvCUno_bym7gYpSKwlV6LKeRFLUQJ2/s800/Bloknot.gif) repeat-y top left;
border-top : 1px solid #555555;
border-right : 1px solid #555555;
border-bottom : 1px solid #555555;
border-left : 1px solid #555555;
}
-
Определившись с видом оформления, пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги:
<div class="bloknot1"> ------ </div>
.
Это уже скорее листок , вырванный из тетрадки в линеечкуСледующий вариант \вариант 2\
Плохо лежало здесь
.
.
.bloknot2 {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOshFxWoV1WNd7qZZZ8WG48nU85sO9lBtdN705EZyn6rwKzecmniCmJB_klUhaJwUNl_OK5QcFDhVFZ8onsY7ewnM6Yr1n_6XYRVwIcsazKYJjuqK1b16qigbm4rs-DsnvBKbUir0yt9BV/s1600/note.jpg) repeat-y top left;
border-top : 1px solid #555555;
border-right : 1px solid #555555;
border-bottom : 1px solid #555555;
border-left : 1px solid #555555;
}
-
Определившись с видом оформления, пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги:
<div class="bloknot2"> ------ </div>
вместо ------текст
Результат должен получиться , как под кодом выше
.
Вариант с каким - то фоном внутри рамки ,Фон , кстати можно сделать любойВариант 3
При желании можно изменить цвет
Плохо лежало здесь
.
.
.
.bloknot3 {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #F7C65C;
border-top : 1px solid #B5520B;
border-right : 1px solid #B5520B;
border-bottom : 1px solid #B5520B;
border-left : 1px solid #B5520B;
border-radius: 5px;
-moz-border-radius: 5px; -webkit-border-radius: 5px; }
=
=
Вы можете использовать собственные цвета для третьего варианта, более подходящие под дизайн Вашего блога. В участке кода значение цвета background : #F7C65C замените на свое. Для выбора подходящего цветового оттенка воспользуйтесь удобным генератором веб-цветов.Определившись с видом оформления, пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги:
<div class="bloknot3"> ---------</div>
вместо ------текст
Результат должен получиться , как под кодом выше
=
padding : 20px 10px 10px 35px;
background : #F7C65C;
border-top : 1px solid #B5520B;
border-right : 1px solid #B5520B;
border-bottom : 1px solid #B5520B;
border-left : 1px solid #B5520B;
border-radius: 5px;
-moz-border-radius: 5px; -webkit-border-radius: 5px; }
.
Почему-то у многих в инете есть именно первые три варианта .У меня встала проблема ,как сделать белый фон к сообщениям .А также в клеточку .Ну . и методом тыка , я всё-таки сделал на базе Варианта № 3.
Вообще по идее можно любую картинку подставить таким макаром в виде фона ,единственное ,что фон при повторении должен быть однородным .То есть не должно быть границы между повторяющимися частями ,не должен быть виден переход. Кстати ,заметил одну особенность в Internet Explorer вся красота куда-то девается .Скруглённые углы пропадают ,в варианте 3Б
исчезает клеточка .В браузерах Опера, или Гугле Хром, или Мазила Фаерфокс всё нормально
.
.
.
..
Варианты 3А,3Б
Варианты с рамкой и белым фоном ,а также с рамкой и фоном в клеточку
Вообще по идее можно любую картинку подставить таким макаром в виде фона ,единственное ,что фон при повторении должен быть однородным .То есть не должно быть границы между повторяющимися частями ,не должен быть виден переход. Кстати ,заметил одну особенность в Internet Explorer вся красота куда-то девается .Скруглённые углы пропадают ,в варианте 3Б
исчезает клеточка .В браузерах Опера, или Гугле Хром, или Мазила Фаерфокс всё нормально
.
.
Вариант 3а -это фон у этого сообщения .Первоначально использовал варианты 5,6,7 .Но остановился на этом варианте .
Установка идентична Варианту 3 .Пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги: <div class="bloknot4"> ---------</div> вместо ------текст Результат должен получиться , как под кодом выше .Изменения сделал небольшие .
Изменил
margin -отступ всего фона от краёв ,последние 15px отступ слева
padding -отступ текста внутри фона ,последняя 35 - отступ слева
background-заменил цвет на белый ,кстати можно вместо цвета подставить картинку ,что я и сделал в варианте 3Б ,добавив url
Ну и скруглил чуть больше углы ,изменив три значения
border-radius
В общем даётся большая возможность для творчества
.bloknot4 {margin : 15px 15px 15px 15px;
padding :20px 35px 10px 35px;
background : #ffffff;
border-top : 1px solid #B5520B;
border-right : 1px solid #B5520B;
border-bottom : 1px solid #B5520B;
border-left : 1px solid #B5520B;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}
padding :20px 35px 10px 35px;
background : #ffffff;
border-top : 1px solid #B5520B;
border-right : 1px solid #B5520B;
border-bottom : 1px solid #B5520B;
border-left : 1px solid #B5520B;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}
Установка идентична Варианту 3 .Пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги: <div class="bloknot4"> ---------</div> вместо ------текст Результат должен получиться , как под кодом выше .Изменения сделал небольшие .
Изменил
margin -отступ всего фона от краёв ,последние 15px отступ слева
padding -отступ текста внутри фона ,последняя 35 - отступ слева
background-заменил цвет на белый ,кстати можно вместо цвета подставить картинку ,что я и сделал в варианте 3Б ,добавив url
Ну и скруглил чуть больше углы ,изменив три значения
border-radius
В общем даётся большая возможность для творчества
Вариант 3Б
.bloknot5 {
margin : 15px 15px 15px 15px;
padding : 20px 10px 10px 35px;
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcix031LYMsuSZKfrk_NzehR-mupZit-7pRVeLCRtCNQNnfekK2zBlFlhnt4_1sU8mnt1B6M-CEZBbOvmhtP3HvvqseMfTgBXCl_qasR0nMtl1-ZkH0o5l2aAo4pt2ck_W1sz0zPxcgdF0/s789/%25D0%25BA%25D0%25BB%25D0%25B5%25D1%2582%25D0%25BE%25D1%2587%25D0%25BA%25D0%25B01.jpg)repeat-y top left;
border-top : 1px solid #B5520B;
border-right : 1px solid #B5520B;
border-bottom : 1px solid #B5520B;
border-left : 1px solid #B5520B;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Установка идентична варианту 3А .
Пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги: <div class="bloknot5"> ---------</div> вместо ------текст Результат должен получиться , как под кодом выше .
margin : 15px 15px 15px 15px;
padding : 20px 10px 10px 35px;
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcix031LYMsuSZKfrk_NzehR-mupZit-7pRVeLCRtCNQNnfekK2zBlFlhnt4_1sU8mnt1B6M-CEZBbOvmhtP3HvvqseMfTgBXCl_qasR0nMtl1-ZkH0o5l2aAo4pt2ck_W1sz0zPxcgdF0/s789/%25D0%25BA%25D0%25BB%25D0%25B5%25D1%2582%25D0%25BE%25D1%2587%25D0%25BA%25D0%25B01.jpg)repeat-y top left;
border-top : 1px solid #B5520B;
border-right : 1px solid #B5520B;
border-bottom : 1px solid #B5520B;
border-left : 1px solid #B5520B;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Установка идентична варианту 3А .
Пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги: <div class="bloknot5"> ---------</div> вместо ------текст Результат должен получиться , как под кодом выше .
.
..
Вы можете вставить в шаблон все стили оформления и соответственно заключать текст в нужные теги.Вот и всё.Оформляйте красиво часть текста в своём любимом блоге.
-
.
Хотя на самом деле можно так вставить любой из стилей из данной статьи или какой-то другой .Сделать его по умолчанию в цитатах
После введения кода получается в результате стандартного нажатия кавычек в панели инстументов блога .Вначале нужно выделить текст , конечно,потом нажать кавычки.
Выглядит этот вариант цитирования как на картинке нижеВариант 4 (Цитирование)
.
Хотя на самом деле можно так вставить любой из стилей из данной статьи или какой-то другой .Сделать его по умолчанию в цитатах
После введения кода получается в результате стандартного нажатия кавычек в панели инстументов блога .Вначале нужно выделить текст , конечно,потом нажать кавычки.
.
.
.
Не забудьте сделать резервную копию шаблона
Для того что бы поменять способ цитирования , нужно зайти в панель управления, выбрать вкладку шаблон – изменить HTML – Приступить – ставим галку расширить виджеты шаблона. С помощью поиска (Ctrl + F) ищем строчку ]]></b:skin> Перед строчкой вставляем код представленный ниже
Не забудьте сделать резервную копию шаблона
Для того что бы поменять способ цитирования , нужно зайти в панель управления, выбрать вкладку шаблон – изменить HTML – Приступить – ставим галку расширить виджеты шаблона. С помощью поиска (Ctrl + F) ищем строчку ]]></b:skin> Перед строчкой вставляем код представленный ниже
blockquote { background:#F9F9F9; border:1px solid #CCC; margin:10px 0; padding:10px; }
.
.
.
Вариант 5,6 ,7
При желании можно изменить цвет ,поставить другую картинку , или удалить её вообще.Кстати ,первоначально белый фон в этой статье сделан при помощи одного из вариантов ,но потом всё-таки поменял на вариант 3А,а на базе этих вариантов сделано оглавление статьи ,правда уже видоизменённое,относительно первоисточника .
Во завернул аа!
Во завернул аа!
Плохо лежало здесь
.
.
=
Вместо тега <div style="text-аlign: justify;"> поставьте тег блока. Закрывающую часть тега не трогайте (</div>)
=
.
Как сделать красивое оформление текста
Стандартно: заходим в “Панель инструментов” – “Шаблон” – нажимаем “Изменить HTML” – далее “Приступить”. Расширять ничего не надо. Красивое оформление достигается за счет добавления стиля CSS. Нужно найти конец CSS стиля и перед ним добавить CSS стиль для блоков.
С помощью поиска браузера (Ctrl+F) находим строчку конца стиля дизайна
]]></b:skin>
До этой строчки в шаблон блога, вставьте
И еще я свой текст выравниваю по ширине, и каждая часть текста находится в теге:.vajno, .kod,.bel,.yo, .info{ 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("http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png"); } .info { background-color:#FFFFCC; background-image: url("http://lh5.ggpht.com/_G92voTj-yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png"); } .kod { background-color:#E9FFD4; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiowVJYtKmftm5j4JAOaHmISZjfampz_UWNIf-iZ0efy5l8OFrLdPW4kPXnu8a3in6a0QaCWR-KvWPzqSMFi7siqIsoy4i-W9vp8V0eH15UmIsWD7fJ2v1RaKtPOuX2-f3SR3XtAjKzcTL_/"); }Названия блоков находятся в первой части кода CSS – это vajno, kod, info. При добавлении новых блоков, вписывайте в верхнюю часть кода их название. При редактировании названия блока меняйте его в верхней части и в нужном коде отдельного блока оформления текста. Не забывайте добавлять точку перед каждым названием. Возможность редактирования: Цвет тела в рамке, просто измените на свой, в background-color Вывод картинки, вставьте ссылку вашей картинки, в background-image. Может найдете более красивое. Если картинка не нужна, удалите ссылку с путем картинки. Можно изменить радиус закругления рамки и другие параметры. После внесения изменений, если таковые были – Сохраните шаблон. Перейдем к написанию статьи. Как было сказано ранее что бы сделать красивое оформление текста нужно зайти в редакторе сообщений в HTML. Написав статью, определившись какой текст будете вносить в рамку, нажимаете на HTML. Находите кусок текста, и заключаете его в тег div.
<div style="tеxt-аlign: justify;">Часть текста</div>
Вместо тега <div style="text-аlign: justify;"> поставьте тег блока. Закрывающую часть тега не трогайте (</div>)
=
<div class="yo">tekst</div>
.
<div class="bel">tekst</div>
.
<div class="vajno">tekst</div>
.
<div class="kod">tekst</div>
.
<div class="info">tekst</div>
.Вариант 8,9 ,10,11,12 (Цитирование)
Плохо лежало здесь
.
.
=
blockquote.style1 { font: 14px/20px italic Times, serif; padding: 8px; background-color: #faebbc; border-top: 1px solid #e1cc89; border-bottom: 1px solid #e1cc89; margin: 5px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXn_XxQNaGVVeX6HTmh3kPZhsRw5iILSHZm5QmMm2lo4L-5DpFPZe86_QkRylNFULsckvoHd7szbdtI4cLOSwucXlH9-qu6V11PBtOF0nhmbTAc8fUpM2efdRZdg6lqUG4PeIz5-SAiX6D/s25/openquote1.gif); background-position: top left; background-repeat: no-repeat; text-indent: 23px; } blockquote.style1 span { display: block; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFKkJGNYHLBKFwpJKBZCQ8XE4qWeE8sUOcDKkut-_rBgbGBZAyAdpvi5SjGMiw1EQclTJeEkq1ihGxLOMP6U1OsVt3QnlOgd4YU3m_0Pb4olAdzCxUEn73HF_nx-pAzSwMsxtq3NR6cpnc/s25/closequote1.gif); background-repeat: no-repeat; background-position: bottom right; }=
<blockquote class="style2">blockquote.style2 { font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc; }</blockquote>=
blockquote.style3 { font: 18px/30px normal Tahoma, sans-serif; padding-top: 22px; margin: 5px; background-image: url(https://lh3.googleusercontent.com/-rpej94PjpCQ/TryOIy2XNRI/AAAAAAAABt4/7UzggrE0a1I/s65/openquote3.gif); background-position: top left; background-repeat: no-repeat; text-indent: 65px; } blockquote.style3 span { display: block; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4sgSiksKc9RSkdNsHFRN3ryLKtlmcPunZJ-JqolKxpV0KOIS4_hGGdC2G6ZAXbqvfRR-hxOagXwKygxS157UHgJsuJd15mj-h6M-YG6EqP7MmYz1TBU1IGaAKGfD4Y_-IEYpniHbxN1Sp/s65/closequote3.gif); background-repeat: no-repeat; background-position: bottom right; }=
blockquote.style4 { font: 14px/20px italic Times, serif; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiYLuTZohM7eMD91pTG7SOMqjez05EmahISu920JenToiEoOvrYFhMseEzY4CAdRo-DsNY9dBgsaTcoy7TXaZrF2lDLem1vyeUHImzrsvHf0aLgqON6bXQOq6kfvw_vrI2VY_qMH-KJSJp/s96/openquote4.gif); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; }=
blockquote.style5 { font: 12px/18px normal "Courier New", sans-serif; padding-left: 70px; padding-top: 2px; padding-bottom: 2px; background-color: #000; color: white; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url(https://lh5.googleusercontent.com/-FE9KBDRGPXU/TryOMrkGGMI/AAAAAAAABuI/JnOFc9fOP3w/s96/openquote5.gif); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; } blockquote.style5 div { padding-right: 50px; display: block; background-image: url(https://lh5.googleusercontent.com/-IJBaN0C6Ut0/TryOLMDUG1I/AAAAAAAABuA/le8LXAuQzMw/s96/closequote5.gif); background-repeat: no-repeat; background-position: bottom right; }= Код стиля вставляется перед строчкой ]]></b:skin> в вашем шаблоне.Во время написания поста нужный Вам фрагмент текста заключаем в <blockquote class="style1">tekst</blockquote> Код общий для всех примеров, неободимо только подставить нужное название стиля 1,2,3 или 4,5. Можно все стили использовать в шаблоне.Вот вроде и всё.Пока. =
.
Вариант 13
Ещё один листочек в линеечку
Взят ЗДЕСЬ
Итак ещё один вариант .Кстати могут стоять и все одновремено.Для разных стилей оформления
.
.......
.....
blockquote.style6 { margin : 10px;Код стиля вставляется перед строчкой ]]></b:skin> в вашем шаблоне.Во время написания поста нужный Вам фрагмент текста заключаем в <blockquote class="style6">tekst</blockquote>
padding: 0px 20px 5px 40px;
background : #fff url(http://i015.radikal.ru/1207/0f/00db3bb5891f.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675; }
.....
Ещё статьи на эту тему
http://www.aboutblogger.ru/2011/08/kak-krasivo-vydelit-text-statyi-v-bloge.html
http://www.bloguspeh.ru/2011/11/videlenie-citati-na-blogspot.html
Оформление кода HTML,CSS на красивом фоне
Как красиво оформить участок статьи в блоге http://new-school-blogger.blogspot.com/2011/12/kak-krasivo-oformit-uchastok-stati-v.html
http://www.aboutblogger.ru/2011/08/kak-krasivo-vydelit-text-statyi-v-bloge.html
http://www.bloguspeh.ru/2011/11/videlenie-citati-na-blogspot.html
Оформление кода HTML,CSS на красивом фоне
Как красиво оформить участок статьи в блоге http://new-school-blogger.blogspot.com/2011/12/kak-krasivo-oformit-uchastok-stati-v.html
С уважением !
ЕЩЁ СТАТЕЙ ОТ ЙЁЖИ ЙЕЖОВА
Об Авторе
