Оформяне на важен текст в блога

Добър ден, скъпи читатели. В последно време в някои блогове попадах на публикации, които изглеждат много впечатляващо по моя вкус и аз помислих, че е добре да споделя това с вас. По-късно, когато реших да създам рубриката "Задайте въпрос" и ако трябваше да публикувам отговори, просто се замислих как ще бъде по - интересно да се оформят писмата за читателите.
Реших да премина от идеи към действия и ето какво се получи. Отчасти това може да се види дори и в тази моя публикация. Ако ви харесва и имате желание да направите в своя блог същото, продължете с четенето. Основното нещо, върху което искам да насоча вниманието ви е, че след всички настройки, когато искате определена част от текста да е в определен блок, ще трябва да редактирате HTML кода на блога си. Абсолютно никакви трудности няма в това, но ще трябва да сте много внимателни.

Да започваме. Първата стъпка е да решите каква информация ще се съдържа във всеки блок. Например, в моя блог има създадени следните блокове:

➤Важно - vajno
➤Информация - info
➤Писма от читатели - mail
➤Код - kod

Всеки блок има своето име, което винаги трябва да помните, защото винаги ще го използвате.

Важно

Инфо

Код

Писма

И така, аз имам 4 вида блокове. Общо взето тези блокове изглеждат еднакво - рамка, ъгли, сенки, местоположение, разположение на изображението. И отчасти се различават в много отношения, по цвят на изображението, шрифта. Външният вид винаги се определя чрез CSS стилове. И се оказва, че част от кода винаги ще бъде един и същ за всички блокове, а другата част от кода ще трябва да се задава за всеки блок поотделно.
Влезте в Шаблон ➔ редактиране на HTML код ➔ намирате реда: ]]></ b: skin>. Останалата част от кода трябва да сложите ръчно. И така, ние имаме заглавието на блоковете, имаме кода, който е еднакъв за всички блокове. И поставяме този код в шаблона на блога пред ]]></ b: skin>.

.vajno, .info, .mail, .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;

}

Погледнете внимателно, в първия ред, разделени със запетая, са имената на моите блокове - vojno, info, mail, kod, като пред всяко име има точката. В бъдеще, ако решите да вложите в публикацията си нов блок, този код не е необходимо да дублирате, ще трябва само да въведете името му в първия ред след точка, като го отделите от другите имена със запетая. След това трябва да въведете кода за всеки блок поотделно. При мен този код е както следва:

.vajno {

background-color:#FFD4A0;

background-image: url("http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png");

}

.mail {

background-color:#E4F6F8;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSqrL7aBhdrwl0dMdSQwW_JwHUJn23__a3Edwzc5fkVlWJRH-TcWuOVg6RHkUnujC5F2o5jkmPnI7JIt4IVnBLg0n9As7crHc_JUtYaeTVyLWIadrdFiQZHI4RzyjrurNE6PI3-ueyy8k/");

}

.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/AVvXsEiFBtu3fGU_mZtAZr4auBAqevaTCqicoe7DwmMEzOgSpnQfvU_Xtyd9yyEv9mlLMFestH_FEU-YAePQuTm12elxlODB10Ad_WWjC9bbbK5TP5_3NjeI2_uXGPyhl1an4z8pD_g1ON7g8Huf/");

}

Този код определя цвета на фона на блока и пътя към изображението в него. В този код обаче вие можете да зададете цвят по ваше желание, като промените фрагментите на кода, оцветени в червено. Можете да въведете ваше изображение, като посочите неговия URL адрес. В изходния код, който ви предлагам той е оцветен в синьо. Също така, към този код можете да добавите стил на шрифта, неговия размер и други параметри (това е за по-напреднали потребители).
Съхранявате шаблона. Правейки това веднъж, повече към това вие няма да се връщате. Сега важното е да се помни как в тялото на публикацията да се отделят необходимите части на текста, така че те да приемат вида, който ние сме определили за тях. И така, вие пишете публикация както го правите обикновено. След като публикацията е готова, но все още не е публикувана, отидете на раздела "изменение HTML код". Там откриваме абзаца от текста, който искате да вмъкнете в конкретен блок. И около него слагате следните тагове:

<div class="название на блока">текст в блока</div>

Например, ако искате текстът да се показва в блок info, то слагате кода:

<div class="info"> текст в блок info</div>

И така за всички блокове, когато и които ви трябват

текст в блока

текст в блока

текст в блока

текст в блока

Кодът е тестван в Mozilla Firefox, Google Chrome, Opera и Internet Explorer. В Internet Explorer няма заоблени ъгли и сянка, почти не се вижда. Всичко останало изглежда много хубаво (по моя вкус).
С този не толкова хитър начин можете да внесете визуално разнообразие в желана от вас публикация. Надявам се, че това е от полза не само за мен.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и гласувате за блога на: