0

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

Оформяне на важен текст
Добър ден, скъпи читатели. В последно време в някои блогове попадах на публикации, които изглеждат много впечатляващо по моя вкус и аз помислих, че е добре да споделя това с вас. По-късно, когато реших да създам рубриката "Задайте въпрос" и ако трябваше да публикувам отговори, просто се замислих как ще бъде по - интересно да се оформят писмата за читателите. Реших да премина от идеи към действия и ето какво се получи. Отчасти това може да се види дори и в тази моя публикация. Ако ви харесва и имате желание да направите в своя блог същото, продължете с четенето. Основното нещо, върху което искам да насоча вниманието ви е, че след всички настройки, когато искате
определена част от текста да е в определен блок, ще трябва да редактирате 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("http://lh3.ggpht.com/_G92voTj-yF0/TO0Yze20zPI/AAAAAAAAA7U/AuB_pacAJy8/mail.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("http://lh3.ggpht.com/_G92voTj-yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png");
}


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

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

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

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

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


текст в блока

текст в блока

текст в блока

текст в блока


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

Желая ви късмет.


Няма коментари :

Винаги се радвам на Вашето мнение


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | Всички права запазени |
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита