Как бързо и красиво да оформим текст в блога

Здравейте скъпи читатели и посетители. В този пост искам да ви кажа как да оформите, или по-скоро се откроите, нужния ви текст в страниците на блога си. В една своя публикация писах за този код, но не обърнах внимание и не разказах как с негова помощ, веднъж настроен, можете да оформите текста в блога си бързо и лесно.
Ето и кода в четири варианта.


 Код 1.

.code 1 {

margin : 15px 35px 15px 15px;

padding : 20px 10px 10px 35px;background : #f3f3f3;

border-top : 1px solid #E3E3E3; цвят на горната граница

border-right : 1px solid #E3E3E3;  цвят на границата в дясно

border-bottom : 1px solid #E3E3E3; цвят на долна граница

border-left : 1px solid #E3E3E3; цвят на границата в ляво

border-radius: 5px; размер на рамката

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

Код 2.

.code 2 {

margin : 15px 35px 15px 15px;

padding : 20px 10px 10px 35px;background : # FAFA87;

border-top : 1px solid #E3E3E3; цвят на горната граница

border-right : 1px solid #E3E3E3;  цвят на границата в дясно

border-bottom : 1px solid #E3E3E3; цвят на долна граница

border-left : 1px solid #E3E3E3; цвят на границата в ляво

border-radius: 5px; размер на рамката

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

Код 3.

.code 3 {

margin : 15px 35px 15px 15px;

padding : 20px 10px 10px 35px;background : # ABF5C0;

border-top : 1px solid #E3E3E3;  цвят на горната граница

border-right : 1px solid #E3E3E3;  цвят на границата в дясно

border-bottom : 1px solid #E3E3E3; цвят на долна граница

border-left : 1px solid #E3E3E3; цвят на границата в ляво

border-radius: 5px; размер на рамката

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

Код 4.

.code 4 {

margin : 15px 35px 15px 15px;

padding : 20px 10px 10px 35px;background : # 87F8FA;

border-top : 1px solid #E3E3E3; цвят на горната граница

border-right : 1px solid #E3E3E3;  цвят на границата в дясно

border-bottom : 1px solid #E3E3E3; цвят на долна граница

border-left : 1px solid #E3E3E3; цвят на границата в ляво

border-radius: 5px; размер на рамката

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

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

➤за цвета на фона отговаря значението: background : # f3f3f3

Можете да сложите значение, което подхожда на цветовата гама, в която попада вашия блог.
➤ляво, дясно, горе, долу са разграничени. Тези значения определят цвета и дебелината на четирите страни в правоъгълната рамка. Те могат да бъдат различни за вас и тогава ще се получи рамка с различен цвят в четирите си страни.
➤border-top: 1px; border-right: 1px; border-bottom: 1px; border-lift: 1px; това са размерите, определящи дебелината на рамката горе, дясно, долу, ляво.
➤Solid е формата "права линия" на рамката. Можете да я промените в точковидна (dotted), пунктирана (dashed), изпъкнала (outset), вдлъбната (inset), двойна (dooble), обхватът на прореза (groove), на ръба (ridge).
➤border-radius: 5px; - е размерът на заобляне на ъглите.

Можете да промените всички стойности, ако сметнете за необходимо, а можете да ги запазите същите.
С настройките се уточнихме. Сега този код, или по-скоро няколкото кода, трябва да поставите веднъж в шаблона по познатия ни начин. Влизате в админ панел ➔ шаблон (сега вече е тема) ➔ редактиране на HTML код ➔ търсим познатото ни редче ]]> </ skin>. Веднага над него поставяме вашия, или вашите кодове един след друг. Веднъж вложени в кода на шаблона ще използвате в редактора на текста само кратките кодове 1,2,3,4 (и нататък, ако искате сами да си създадете такива). Когато пишете публикация, в режим на HTML редактор, там където ще има оформена част от текст, вписвате един от кратките кодове.

<div class="code1">текст</div>

<div class="code2">текст</div>

<div class="code3">текст</div>

<div class="code4">текст</div>

А в режим на текстови редактор вписвате текста на посоченото място.
Можете също да вмъкнете снимка или изображение. Изображението се добавя както обикновено в редактора на публикацията. Изображението може да е на ляво, дясно или в центъра.

Това е всичко. Ако нещо не е ясно, то задавайте въпроси. Пишете в коментарите. Споделете с приятелите си.
Пожелавам ви във всяка публикация красиво оформен текст.

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

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