Новое в блоге
Loading...
21 дек. 2011 г.

Оформление кода HTML, CSS на красивом фоне в статье

Здравствуйте! Сейчас я Вам покажу как сделать  красивый фон для кода в Blogger. При создании статьи нам иногда приходиться вставлять разные коды HTMLCSS и другие, чтобы поделиться со своими читателями. Так вот, чтобы они смотрелись красиво в теле поста нужно стильно код оформить. Внешний вид всегда задается с помощью CSS стилей. Сейчас мы этим и займёмся. И так, у меня есть 4 вида блоков. Вам нужно выбрать какой Вам по душе. Можно  конечно пользоваться всеми, для разнообразия. Пожалуйста выбирайте:

Box Style 1:
Стиль 1
Вот для стиля  код:

.code1 {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://lh5.googleusercontent.com/-d4YVwecaRps/TvDsTm-6MlI/AAAAAAAADZs/bsW_tX3XoGc/w267-h164-k/codeview1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}
Box Style 2:
Стиль 2
А это код:
.code2{
margin : 15px 15px 15px 15px;
padding : 40px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://lh5.googleusercontent.com/-lGOvWwG5sEs/TvDtfD4gKQI/AAAAAAAADZ4/wEU4OjLIdQM/w1500-h108-k/codeview2.gif) no-repeat left top;
border : 3px solid #eeeeee;
color : #7D7D7D;
}
Box Style 3:
Стиль 3
Теперь код:
.code3 {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #F9F9F9 url(https://lh5.googleusercontent.com/-ZD7HZGBwnqA/TvDt_6N1jnI/AAAAAAAADaE/RVl_0CyX1J4/w252-h263-k/codeview3.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #BFBFBF;
}
Box Style 4:
Стиль 4
Код для него:
.code4 {
margin : 10px;
padding: 0px 25px 5px 20px;
background : #fff url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4WJqXLy5I/AAAAAAAAAUo/tl0XwXfvErQ/s1600/codesbg1.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}
Выбрав стиль идём Шаблон -- Изменить HTML.Ищем в шаблоне эту строчку ]]></b:skin> и перед ней вставьте выбранный Вами код. Как я уже писал выше Вы можете вставить все 4 стиля.Теперь при написании статьи заключать код в один из этих тегов:
<div class="code1">
  Здесь Ваш код
</div>

   или

<div class="code2">
  Здесь Ваш код
</div>

   или

<div class="code3">
  Здесь Ваш код
</div>

   или

<div class="code4">
  Здесь Ваш код
</div>
Цвета настройки: красный -- box основной фон,зеленый -- цвет текста, синий -- цвет границы.
Всё. Пользуемся на здоровье. Желаю удачи. До новых встреч.

Может Вам нужно: Как красиво оформить участок статьи в блоге или Как повысить качество изображений

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

0 коммент. :

Отправить комментарий

 
Footer