0

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

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



 Код 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>


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





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

Всичко най-хубаво.


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

Публикуване на коментар

Ако имате необходимост да вмъкнете HTML код в коментара си, моля използвайте един от инструментите в основното меню - Конвертор на HTML кодове.


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved