![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil2pGRDZwFLwal1M0IT3OPu0RxfU3f3cpb8Ha8c4Bblz7h-uW8DJFjnMUp-mg0M_CNsYAd35Mj3Ja7RvIt2impptKke8bbd7LVbX5y_r0CexZO1R6y6qHSpp0fvZvqoB4WQ_uOXJdTuUT0/s300/oformlenie+koda.jpg)
Выделение некоторых участков текста в сообщении, например, сопроводительных кодов либо важных абзацев, является хорошим тоном и отличной визуальной находкой.
Такое оформление позволяет владельцу блога указать на нужную часть статьи и лучше сориентироваться в перечне букв читателю.
Побудем и мы джентльменами и рассмотрим несколько способов такого оформления.
Все варианты, приведенные ниже, имеют сопроводительные примеры в виде картинок, из которых вы можете выбрать себе подходящий, и, скопировав код к нему, установить себе в блог. Оформленная таким образом часть статьи будет полностью функциональна и подобна остальному тексту, только выделена из общей массы букв за счет особого отношения к ней автора :)
Вариант 1:
Для особого выделения текста можно задействовать фоновое изображение.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio5M5k4VUBZNb9v-IriGocBMa-H6C7qmcyS5KSKmvylax-iUwkRYjbvZy4w4fQ7L6Ef7aOWVGgXANEKEoBC7ItwoNNf6JZu_gaBAMwHxfy8qfC2mdUVi37zZKDaHCaKc5BxF8EUorfCulr/?imgmax=800)
Можно просто залить блок с кодом однотонным цветом и закруглить углы:
Ну и напоследок, еще пару вариантов выделения текста с использованием изображений в бэкграунде.
Вариант 4:
Теперь при создании сообщения, переключившись во вкладку "Изменить HTML", можно легко облечь нужный участок текста в выбранное оформление путем заключения участка в теги:
Такое оформление позволяет владельцу блога указать на нужную часть статьи и лучше сориентироваться в перечне букв читателю.
Побудем и мы джентльменами и рассмотрим несколько способов такого оформления.
Все варианты, приведенные ниже, имеют сопроводительные примеры в виде картинок, из которых вы можете выбрать себе подходящий, и, скопировав код к нему, установить себе в блог. Оформленная таким образом часть статьи будет полностью функциональна и подобна остальному тексту, только выделена из общей массы букв за счет особого отношения к ней автора :)
Вариант 1:
Для особого выделения текста можно задействовать фоновое изображение.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA43ESK6ypUtax1Iqilz52CwxbiNK6w7gMkUgRpM6y4pxbuJBnJDG_oILqFn9zwikKkqW8FVhyphenhyphenO3SuF9Lh-UlTzbjqoZQ09GkBPASZ-eKOXLKLwyh2W0ImrBr0SgwGXdUBwcd8SnFOQBuk/s1600/kod-bloknot.png)
.bloknot { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7FCjDoc9ILkxvRNyv0l-EqN4iywUZbVE-e__4DxRDXUi8u9U2t1g4DDX7ttW54g-sbBp93r_R_nXOe4kzQ_-Pb_miTVrJqueV2Y9Ah0LSntFf1AhTBO9GPBIkvGEq8wrS6QbQbchVoiw/s1600/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; }Вариант 2:
.bloknot { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFvcDCJEw5G61Pyaum3LDTkIEfMQipGTLM2uHyITzZnJmtpt8ynYy-U5S-q-IPGmzzkjzi_u0Za0iZXo22rmLcu1_X8clTnQAqyXTIQmGUx-Dl6Su77xBMmTzO4fc_DJYIyb4yRg-zK4V/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; }Вариант 3:
Можно просто залить блок с кодом однотонным цветом и закруглить углы:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU_e4DYzaXlt8NE3DWnBFG-4u1GC_WiNytt0deYx4_euWuMJUDk5x6cGSqjSr9VEZA830ygPAeVjvVfA5ME7D4rRQOfUaW-J8ZPO_ZtCjx9vCcBnuLcYKTolueSkdsGF_R7D7sJy4QEq5f/s1600/kod-bloknota.png)
.bloknot { 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 замените на свое. Для выбора подходящего цветового оттенка воспользуйтесь удобным онлайн-генератором веб-цветов, а для настройки гармоничного цветового оформления - вот этим онлайн-приложением.
Ну и напоследок, еще пару вариантов выделения текста с использованием изображений в бэкграунде.
Вариант 4:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj00BwgCtCoGmkG1sFifOU3v9PZfjQsmnRST7X0xevMqxYDt-jjgYNt47BLASG16NoOD5Mnm0tNC4A-8_E5lYFadXhc9kPoN55hbYmfwPum0IO2Cw7ljlxLdJ5WEr0KaLGgjAcYi5NXWbm6/s1600/kod-fon.png)
.bloknot { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAz08ZX54onc-dNZ8p8PH45Kw_7-jWMA1jUSVANomKsDA0gxgV1-qOjRgh_E3vBNkV1pwBSJRSodWMloZZtJV0GRr5AmVtFP3OexM_2EDqDTXWoVckBnxLi69-e3smzEBHmtDBdwfSDSD7/s800/ground+%252820%2529.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: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }Вариант 5:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbxcSGCQxie8HP67XjsXTwM9wQyYRCpuNzfVGpOpi2HIVAakyHL1e9UlR-B7Xwj-J5OP-X6JOgVI98wSD3uryyWUpnUHfjx70SJBaQGyvkugesR5g1G-VIRjndudQU8hJcX2o1Vo6XOx8G/s1600/kodabloknote.png)
.bloknot { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 40px; background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9Vr1VC_Rrecjpl5xxmF4qoslWGJA7cSSdxad0EnAhyKa6_nzeXUNjJ_pq3wRP0vXe1D6u43PJ4-gPscg7HHhsV4xfoO4RALnP7Hs-EzGfMKoFLhIdot2D3Ui2mk3d0nucW87csi9WVke/s800/kod.jpg) repeat-y top left; border-top : 1px solid #3D282B; border-right : 1px solid #3D282B; border-bottom : 1px solid #3D282B; border-left : 1px solid #3D282B; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }Определившись с видом оформления, проследуйте в административной панели вашего блога Дизайн > Изменить HTML, посредством сочетания клавишCTRL+F найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним впишите выбранный вариант кода из предложенных выше. Сохраните шаблон.
Теперь при создании сообщения, переключившись во вкладку "Изменить HTML", можно легко облечь нужный участок текста в выбранное оформление путем заключения участка в теги:
<div class="bloknot"> Участок текста </div>
0 коммент.:
Отправить комментарий