среда, 5 сентября 2012 г.

Как красиво оформить участок статьи в блоге и другие ссылки


Как красиво оформить участок статьи в блоге

http://new-school-blogger.blogspot.com/2011/12/kak-krasivo-oformit-uchastok-stati-v.html


оформление ссылок
http://www.mycrib.ru/2010/07/html_2182.html

как написать на картинке без фотошопа
http://www.mycrib.ru/2010/07/tabler.html

Кнопки для сайта
http://www.mycrib.ru/2010/07/blog-post_7797.html
Убрать под кат
http://www.mycrib.ru/2010/07/blog-post_3057.html

Способы цитирования на Blogspot (Blogger)
http://www.avitra.ru/2012/04/sposoby-citirovanija.html

Красивое оформление текста \плюс выравнивание\
http://www.avitra.ru/2012/04/krasivoe-oformlenie-teksta.html

Оформление цитаты в блоге - blockquote
http://blogger.omg-linux.ru/2012/07/blockquote.html

 Делаем обычные ссылки красивыми картинками

 http://www.magentawave.com/2012/04/delaem-kartinku-ssilkoy.html

 Всплывающая подсказка на CSS для Блоггер.

http://lanaruvich.blogspot.com/2010/09/css.html


Анимированная кнопка для ссылки

http://blogger.omg-linux.ru/2011/12/animirovannaya-knopka-v-stile-twitter.html


Упрощаем CSS код и изображение для кнопок сайта.

 http://www.magentawave.com/2012/02/optimize-css-and-image.html

 

Добавляем CSS в HTML шаблона Blogger(Blogspot) 

 http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html

 

Делаем обычные ссылки красивыми картинками 

 http://www.magentawave.com/2012/04/delaem-kartinku-ssilkoy.html

 

Как красиво оформить блок цитаты

 http://forbloggerhelp.blogspot.com/2011/12/kak-krasivo-oformit-blok-citaty.html

 

Анимированные ссылки

 http://www.mycrib.ru/2012/05/animirovannye-ssylki-blogger.html

 

CSS и мой любимый градиент в дизайне блога 

 http://www.magentawave.com/2012/05/using-gradient-for-design.html#more

 

Как делать ссылки

 http://blogger.omg-linux.ru/p/blog-page.html

 

Как подключить jQuery к blogger/blogspot 

 http://blogger.omg-linux.ru/2011/07/jquery-bloggerblogspot.html

 

HTML для чайника. Как вставить ссылки и видео на веб-страницу.



Красивое оформление цитат на странице при помощи CSS

 http://serblog.ru/krasivoe-oformlenie-citat-na-stranice-pri-pomoshhi-css

 

В помощь блоггеру

 Первые шаги в создании блога на бесплатной платформе Blogger,

 

Оформление цитаты в блоге - blockquote 

 http://blogger.omg-linux.ru/2012/07/blockquote.html

 

Оригинальное оформление цитаты с помощью css.

 http://pozitivvv.ru/originalnoe-oformlenie-citaty-s-pomoshhyu-css/

 

Красивое оформление текста 

 http://www.avitra.ru/2012/04/krasivoe-oformlenie-teksta.html

 

Красивое оформление статей в блоге Blogger/Blogspot

 http://amateurblogger.ru/2010/11/krasivoe-oformlenie-statey-v-blogspot.html

 

Cоздаем эффектно оформленную блочную цитату-Стили CSS

 http://zsvblogger.blogspot.com/2011/11/css.html

Как красиво оформить участок статьи в блоге

 

Blogspot - как сделать простое горизонтальное меню

 

Горизонтальное меню для Blogger

 с кнопочками

 

Горизонтальное выпадающее меню CSS Blogger 

 http://shpargalkablog.ru/2011/10/gorizontalnoye-vypadayushcheye-menyu.html

 

Хотите красивые кнопки на сайт? Легко.

 http://sngsnick.blogspot.com/2012/08/blog-post_24.html#

 http://sngsnick.blogspot.com/p/blog-page_4.html

 

Красивое выделение текста 

 http://sngsnick.blogspot.com/2012/08/blog-post_23.html

 

Хотите бесплатно программу генерации CSS Menu? Нет проблем!

http://sngsnick.blogspot.com/2012/08/css-menu.html

CSS menu generator

 http://www.mycrib.ru/2011/12/css-menu-generator.html

 

Blogger: Начала HTML - Ссылки!

 

 

Редактирование шаблона Blogspot (Blogger) 

 http://www.avitra.ru/2012/03/blog-post_17.html

 Горизонтальные списки

 http://dotrb.blogspot.com/2008/11/css-horizontal-lists.html

 

SEO оптимизация блога на Blogspot - 

Blogger.com

 

Улучшаем блог на blogspot

 

Редакторы шаблонов для Blogger

 

Как сделать логотип в виде ссылки на блоге

 http://wordpresspro.ru/kak-sdelat-logotip-v-vide-ssylki-na-bloge

 css меню 

http://cheloblogger.blogspot.com/2009/04/css-menu-blogspotblogger.html

http://cheloblogger.blogspot.com/2009/02/ss-blogger.html

Виджеты для blogspot или ностальгия.

 http://blogodom.ru/vidzhety-blogspot/

курсы css html

http://1popov.ru/bonuscourse/htmlform/step3.php?smartemail=ccc990%40mail.ru&smartname=Ccccccc

Картинки для Блоггера!

 ссылка на блог или сайт

 http://klass-klass.taba.ru/news/1146_ssylka_na_blog_ili_sayt.html

 

==================

 

Вставка картинки с рамкой в HTML 

 http://veraborok.blogspot.com/2011/09/html.html

 

Как убрать рамки с картинок в Blogger

 

Blogger: Делаем картинку объемнее!  рамка

Как сделать оригинальную рамку вокруг изображений в блоге

 

фон-бордюр с одной или двумя картинками 

 http://gonorata.blogspot.com/2011/08/blog-post_28.html

 

 

Красивая форма поиска на основе CCS3

 

Виджет последних статей с изображениями для каждого из ярлыков

 ПОСЛЕДНИЕ АНОНСЫ ИЗ РАЗДЕЛА "ГАДЖЕТЫ/ВИДЖЕТЫ":

 \оформление страницы

 

Красочная всплывающая подсказка у изображений с помощью плагина jQuery Drop caption

Небольшое вращение списка меню с помощью CSS

 

Простое раздвижное меню с картинками

 

LightBox для Blogger или красивое решение для фотографий

 

Добавление разделителей в блоге на Blogger (Blogspot)

 

Таблица HTML

 

Бегущие строки на blogger

 

Выпадающее меню на blogger

 

"Размер шрифта" на blogger

 

Создание горизонтального меню с картинками

 

CSS Menu Generator

 

CSS шаблоны и CSS генераторы

Добавить CSS Стиль Границы Изображений в Блог Blogger.com

 

Специфика установки скриптов и стилей в Blogger

 

 

Делаем красивую рамку для блоков в Blogger(Blogspot)

 

вторник, 4 сентября 2012 г.

Оформление ссылок \в том числе и картинка -ссылка

  Взято здесь

 

Оформление ссылок

Написано: 7/31/2010 автор Mycrib ,


<a href="АДРЕС СТРАНИЦЫ"> Ваш текст </a> 
 - Шпаргалка по HTML для блоггера;
<a href="АДРЕС СТРАНИЦЫ" target="_blank">текст</a>
  - Шпаргалка по HTML для блоггера (откроется в новом окне);
<a href="АДРЕС СТРАНИЦЫ" target=_blank title="Пояснительный текст"><img src="URL картинки"></a> -

 где title="Шпаргалка по HTML для блоггера" - всплывающая подсказка.



Отменить подчеркивание ссылки:

<a href="АДРЕС СТРАНИЦЫ" style="text-decoration: none;">Ваш текст</a>
Пример: Азбука блоггера


Поменять шрифт, цвет и размер шрифта для ссылки:

<a href="АДРЕС СТРАНИЦЫ" style="font-family:Monotype Corsiva;color:green;font-size:25px">Ваш текст</a>
Пример: Ваш текст

Ссылка в рамке:
ааа
1. точками:
Ваш текст
Код: <a style="text-decoration: none; border-top;border-width:thin;border-style:dotted ;color:blue" href="АДРЕС СТРАНИЦЫ">Ваш текст</a>
2. пунктиром:
Ваш текст
код: <a style="text-decoration: none; border-bottom;border-width:medium;border-style:dashed;color:blue" href="АДРЕС СТРАНИЦЫ">Ваш текст</a>
3. трехмерная вдавленная:

Ваш текст

Код:<a style="text-decoration: none; border-top;border-width:thick;border-style:groove;border-color:green" href="АДРЕС СТРАНИЦЫ">Ваш текст</a>
4. Таким же образом можно задать и остальные рамки: сплошной чертой (solid), двойной (double), трехмерная выпуклая (ridge), трехмерная ступенька вверх (inset), трехмерная ступенька вниз (outset), изменяя параметр border-style
5. Ссылка в разноцветной рамке:

Ваш текст

Код:


Подчеркнутая ссылка

1. Ссылка зеленого цвета, подчеркнутая красной чертой
Ваш текст
Код:<a href="АДРЕС СТРАНИЦЫ" target="_blank" style="color:red; text-decoration:underline;"><span style="color:green;">Ваш текст</span></a>

1. Задается аналогично ссылке в рамке, только при этом задают параметр нижней границы рамочки: border-bottom
Например: Ваш текст
Код: <a href="АДРЕС СТРАНИЦЫ" style="border-bottom: 2px dotted DarkGreen; text-decoration: none;">Ваш текст</a>


На цветном фоне

Ссылка
Код: <a style="background-color: #6A5ACD; color: #E0FFFF; padding: 3px" href="АДРЕС СТРАНИЦЫ">Ссылка</a>

Изменение цвета фона ссылки после наведения на нее курсора (не везде работает)

ТЕКСТ ССЫЛКИ
Код: <a href="АДРЕС СТРАНИЦЫ"><font onmouseover="style.backgroundColor='#98FB98'; style.cursor='hand'" onMouseOut="style.backgroundColor='#FFDAB9';">ТЕКСТ ССЫЛКИ</font></a>

Ссылка на фоне из картинки:



HTML


Код:

понедельник, 3 сентября 2012 г.

Делаем подпись к картинке

 Взято здесь

Делаем подпись к картинке

Делаем подпись к картинке

Деньгами надо управлять, а не служить им. Сенека.
Сегодня я вас научу делать красивые подписи для картинок такие, как у меня слева. Делается все элементарно, ничего сложного в этом нет. Вам всего лишь нужно отредактировать немного HTML-код картинки. Итак, давайте приступим.


Показывать буду на примере Blogger, но так можно сделать на любом сайте. Первым шагом будет загрузка картинки в сообщение. Загружаем картинку и переходим во вкладку "Изменить HTML". Видим примерно такой код:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_8722tsTSUo8/TB5RTWDYVSI/AAAAAAAAANo/UA5UNunueWQ/s1600/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="http://2.bp.blogspot.com/_8722tsTSUo8/TB5RTWDYVSI/AAAAAAAAANo/UA5UNunueWQ/s200/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8.jpg" width="200" /></a></div>

Это код нашей картинки. Теперь нам нужно его отредактировать так, чтобы под ним появилась красивая надпись. Для этого окружаем весь этот код тегами  <div style="">  и </div>. Теперь между кавычками начинаем описывать нашу картинку. Кстати этот тег <div style=""> предназначен для того, чтобы придать тексту или картинке определенный вид, сделать ее такой, как мы хотим ее видеть.

Итак, вырезаем float: left; margin-bottom: 1em; margin-right: 1em; и вставляем его между кавычек, где float означает обтекание текста, а margin - отступы. Не забывайте после каждого элемента ставить точку с запятой, иначе код работать НЕ БУДЕТ! Далее копируем ширину картинки width="200";  но вставляем немного в другом виде width: 200px;

Можно дополнительно установить отдельные элементы, например, размер и цвет шрифта и выравнивание текста. Например, сделаем так, добавим: text-align: center; color: navy; font-style: italic; font-weight: bold;

text-align - выравнивание текста;
color -цвет текста;
font-style: italic - курсив;
font-weight: bold -полужирный шрифт.

Вот такой код мы получим:

<div style="float: left; margin-bottom: 1em; margin-right: 1em; width: 200px; text-align: center; color: navy; font-style: italic; font-weight: bold;"><div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_8722tsTSUo8/TB5RTWDYVSI/AAAAAAAAANo/UA5UNunueWQ/s1600/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8.jpg" imageanchor="1" style="clear: left;"><img border="0" height="160" src="http://2.bp.blogspot.com/_8722tsTSUo8/TB5RTWDYVSI/AAAAAAAAANo/UA5UNunueWQ/s200/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8.jpg" width="200" /></a></div>Деньгами надо управлять, а не служить им. Сенека.</div>

Попробуйте для начала скопировать это код и вставить его в свое сообщение, а потом уже попробуйте сделать свою картинку с подписью самостоятельно! Желаю удачи!

 

Отступ текста от картинки.Йёжа Йежов

Столкнулся с интересной проблемой .
Не получалось  сделать отступ  текста от картинки в Блоггер,долго искал и наконец нашёл .Вообще заметил , что на многих сайтах и блогах зазора между картинкой и текстом нет .
Смотрится не очень , мягко говоря .Можно,конечно, делать картинку посередине ,а текст сверху и снизу ,но иногда хочется расположить как-то покомпактнее .К тому же если много фото и текста ,страница выглядит очень растянутой ,что не всегда есть хорошо .Хотя -это дело вкуса  .Но с отступом  всё-таки смотрится немножко лучше -сугубо моё мнение , которое ,безусловно можно оспорить.Кстати как правильно располагать картинки можно прочитать здесь .Автор прекрасно рассказывает и показывает.


Пример взят из инета

Как видим здесь отступа нет и текст налипает на картинку .Смотрится не айс явно.Будем с этим бороться .Я нашёл несколько статей на эту тему .Кстати .пытался сделать текст без отступа для демонстрации ,но не получилось -закон подлости .Возможно уже  вбили в шаблон
данный отступ .Но если всё-таки отступа нет ,мы его сделаем .Сами .Своими руками .

Вариант 1

Достаточно простой и без ковыряния в шаблоне.Подойдёт для всех ,особо для новичков и не только . Хотя говорят , что он устарел .Недостаток -надо вставлять в каждую статью по новой, но это можно пережить как-нибудь .Материал взят ЗДЕСЬ И ЗДЕСЬ
Ёжики с отступами ,которых видите слева и справа, сделаны именно с помощью этих формул-кодов ,которые видите ниже. .




<img src="Адрес вашей картинки" align="left"title="Podskazka"width="310px" height="100px" hspace="15"vspace="15">

или Если хотим картинку справа  
<img src="Адрес вашей картинки" align="right"width="310px" height="100px" hspace="15"vspace="15">

 или Если хотим картинку справа c подсказкой и названием
<img src="Адрес вашей картинки" align="right"alt="nazvanie" title="podskazka"width="310px" height="100px" hspace="15"vspace="15">



.

Вместо Адрес вашей картинки ,естественно вставляем свой адрес картинки 
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
hspace="15" – расстояние между текстом и картинкой 15 пиксел по горизонтали h-Horizontal
vspace="15" – расстояние между текстом и картинкой 15 пиксел по вертикали v-Vertical
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию 
center -картинка по центру .Но отступ у меня не получается по центру
.

Вариант 2
В общем-то ненамного и сложнее  первого варианта .ВЗЯТ ЗДЕСЬ.
Вместо ёжик hspace и vspace варианта 1 присвоим  класс.
ёжикАвтор назвал его otstup-1.Ну пусть будет так. Здесь уже надо будет лезть в шаблон .Что cтрашно ? Когда-то же надо начинать!!
Пусть это будет сегодня .Прежде чем запускать свои шаловливые ручки в оный Нужно
.
.
Это надо делать перед любыми эксперементами

Приступим тогда к ломанию шаблона .
Идём в редактирование блога 

.  
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>
Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем
 .otstup-1 {

  margin: 0px 15px 10px 0px;

}

Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа
15px 10px величина отступа по горзотали и вертикали в пикселях
Для того ,чтобы Вставить картинку в статью. Пишем следующий код 

 Если картинка слева
<img class="otstup-1" align="left" width="310px" height="100px" alt="Название" src="Адрес ВАшей картинки">
или Если картинка справа
 <img class="otstup-1" align="right" width="310px" height="100px" alt="Название" src="Адрес ВАшей картинки">

   
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
alt="Название"-естнествено ставим своё
src="Адрес ВАшей картинки" само собой ваш адрес картинки

.


 Вариант 3
Добрались с горем пополам до третьего варианта.ВЗЯТ ЗДЕСЬ.
Он не
ёжик

ёжик
отличается в установке   от варианта 2 
Автор назвал его primer-2.Значит так его и назовём. Также заходим в шаблон . Уже есть небольшой опыт.Так что боимся меньше 
Но всё равно не забываем

Прежде чем запускать свои шаловливые ручки в шаблон Нужно
.
.
Это надо делать перед любыми эксперементами

Приступим .
В принципе всё тоже самое ,разница только в добавляемом коде
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>
Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем

 .primer-2 img {

  margin: 0px 15px 10px 0px;

}
Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа
15px 10px величина отступа по горзотали и вертикали в пикселях
Для того ,чтобы Вставить картинку в статью. Пишем следующий код

Если картинка слева
<div class="primer-2">

  <img align="left" width="310px" height="100px" alt="Название" src="Адрес ссылки">

  </div>


Если картинка справа
 <div class="primer-2">

  <img align="
right" width="310px" height="100px" alt="Название" src="Адрес ссылки">

  </div> 
.
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
alt="Название"-естнествено ставим своё
src="Адрес ВАшей картинки" само собой ваш адрес картинки


.


 Вариант 4

          
ЁжНу вот и четвёртый вариант .Отличия,как 
такового нет  , почти.Конечный результат мы получаем тот же .Ведь нас именно результат интересует ?!
Я не специалист и не очень разбираюсь в преимуществах одного кода над другим .
Но раз автор дал несколько вариантов ,я их прихватил ,прихватизировал, так сказать .
 Установка кода иденчина второму и Ёж третьему вариантам ,но всё равно опять расскажу про неё .Повторение мать учения!Так что будем повторять и учиться!!!! И я тоже виесте с вами .Ведь я тоже новичок в блогостроении и тоже учусь .Мы все учились понемногу, Чему-нибудь и как-нибудь .Правда вот не доучились .Ну ,что ж будем добирать недополученное.
Грызть гранит блоговедения .Судьба такой нелёгкий ,однако !
.

Прежде чем начнём курочить  наш шаблон Нужно
.
.
Это надо делать перед любыми эксперементами

Приступим .
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>
Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем

 .primer-3 img {

  float:left;  


  margin: 0px 15px 10px 0px;
 float:right;  

  margin: 0px 15px 10px 0px;
}
Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа
15px 10px величина отступа по горзотали и вертикали в пикселях
Для того ,чтобы Вставить картинку в статью. Пишем следующий код 
.
 Если картинка слева
<div class="primer-3">  <img align="left" width="310px" height="100px" alt="Название" src="Адрес ссылки на картинку"></div>

Если картинка справа

 <div class="primer-3">  <img align="right" width="310px" height="100px" alt="Название" src="Адрес ссылки на картинку"></div>
.
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
alt="Название"-естнествено ставим своё
src="Адрес ВАшей картинки" само собой ваш адрес картинки

. .

Вариант 5
Взят здесь


ёжаЕщё один вариант отступа .Далее текст автора варианта .
Нужен ли перенос текста, зависит от того, как ваш сайт построен. Блоги, которые используют широкий дизайн, обычно прикрепляют небольшие фотографии, встроенные в текст и опираются на параметры обтекания, чтобы изображения и текст были совместимыми. 
Многие сайты, имеют модульную конструкцию, поэтому им просто необходимо использоватьёжа  обтекание текстом, потому что текст и изображения почти полностью состыкованы
 и редко появляются с промежутками.Изображение и выравнивание, также может повлиять на внешний вид обтекания текстом. Обтекание всегда будет казаться лучше, когда будет попадать рядом с текстом (так, чтобы все линии начинались/заканчивались на том же месте). Обтекание проявляется слабее, когда оно находится вместе с «рваным» текстом.
Текст автора варианта вставлен для примера обтекания  текста на данном коде .да и просто полезно почитать
Вставляем в шаблон
.
Прежде чем начнём ломать  наш шаблон Нужно
.
.
Это надо делать перед любыми эксперементами

Приступим .
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>
Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем
следующий код
.
.align_left {

    float: left;

    margin-right: 1em;

    margin-bottom: 1em;

}



.align_right {

    float: right;

    margin-left: 1em;

    margin-bottom: 1em;

}



.align_center {

    display: block;

    margin-left: auto;

    margin-right: auto;

}
.

Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа 
 Для того ,чтобы Вставить картинку в статью. Пишем вот такой код код
<img src="Адрес картинки" alt="название" class="my-align-class" />


Вставляем свой адрес и название и все .перетягиваем картинку мышкой влево или вправо


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


ЕЩЁ СТАТЕЙ ОТ ЙЁЖИ ЙЕЖОВА


Об Авторе