Создавать бесплатные сайты и на этом зарабатывать могут многие, но новички, которые даже толком не знают как создать и настроить Blogger блог должны с чего кто начинать и как по мне, ресурс Blogspot.com это очень даже подходящий выбор. А в дальнейшем можно создавать разнообразные ресурсы, раскручивать их и получить пассивную Интернет прибыль.

Настройка сайтов на Блогер занимает немного времени, но без сторонней помощи новичку не обойтись. В своем блоге я уже написал несколько уроков для Blogger (например показал как установить бесплатный шаблон для Internet блога или создать и установить иконку сайта Favicon) и сейчас продолжу на данную тему.

Добавление специальных стилей для изображений в своем блоге делает вид добавленной графики только лучше. Многие блоггеры изменяют стили своих загруженных картинок при помощи CSS стилей – чаще всего добавляют границы стилей изображения в свой блог что-бы чтобы они выглядели привлекательно, поскольку частенько картинки сливаются с фоном блога и графика теряет свою утонченность.

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

Чтобы добавить границы своих изображений, исполните несколько простых модификаций кода Вашего шаблона. Для начала войдите в контрольную панель блога на Blogger и нажмите “Дизайн” – “Изменить HTML”. Теперь нажмите на кнопку “Расширить шаблоны виджета”.

Теперь при помощи комбинации клавиш CTRL + F используйте поиск по коду Вашего шаблона и найдите фразу </ HEAD> в шаблоне. Перед (над) этим кустом кода надо добавить следующий код:

<style type='text/css'>
.borders {border:3px solid #E7E7E7;}
</style>

Теперь перейдите в редактор сообщений Вашего блога, тут придется проделать небольшие изменения к статьям, которые содержат картинки. В каждом сообщении, где нужно назначить новый стиль картинок надо немного изменить код графики.

Для примера, покажу как работает новая система стилей для картинок в Blogger.com. Ранее код изображения выглядел вот так:

<img src="ссылка на картинку" alt="заголовок или альтернативный текст" />

Для активации нашего стиля (css стиль границы) надо добавить class нашего стиля (class=”borders”).

<img class="borders" src="ссылка на картинку" alt="заголовок или альтернативный текст" />

То, теперь публикуем или сохранияем сообщение дабы посмотреть новый стиль границ изображения. Для примера покажу мой код картинки с определенным class’ом прямо из моего Blogger блога.

<div style="text-align: center;"><img src="http://2.bp.blogspot.com/_-AgEQOcr5aQ/S2C1IHifgZI/AAAAAAAAAAs/i4xbzTpRXf8/s320/alertpay.jpg" <strong>class="borders"</strong> alt="" id="BLOGGER_PHOTO_ID_5431540301676118418" style="cursor: pointer; width: 262px; height: 62px;" border="0" />
</div>

На моем тестовом блоге все очень даже и работает, а те, кто хотя бы немного разбираются в CSS смогут изменить цвет рамки в CSS коде. Все очень просто, если Вы сможете определить код нужного цвета и изменить параметр #E7E7E7 в данном коде.

<style type='text/css'>
.borders {border:3px solid #E7E7E7;}
</style>

Спасибо за внимание и не забывайте подписываться на RSS ленту блога Ezarabotok.info. В дальнейшем будут представлены новые шаблоны для Blogger.com и Вы сможете сделать Ваш ресурс еще более привлекательным. Если возникают какие-либо вопросы, оставляйте комментарии и я на них с радостью отвечу.