<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 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 -полужирный шрифт.

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

<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; }

Если картинка слева
<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;

}

Если картинка слева
<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>

. .

Вариант 5

Взят здесь

Ещё один вариант отступа .Далее текст автора варианта .

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

Многие сайты, имеют модульную конструкцию, поэтому им просто необходимо использовать

обтекание текстом, потому что текст и изображения почти полностью состыкованы

и редко появляются с промежутками.Изображение и выравнивание, также может повлиять на внешний вид обтекания текстом. Обтекание всегда будет казаться лучше, когда будет попадать рядом с текстом (так, чтобы все линии начинались/заканчивались на том же месте). Обтекание проявляется слабее, когда оно находится вместе с «рваным» текстом.

Текст автора варианта вставлен для примера обтекания текста на данном коде .да и просто полезно почитать
Вставляем в шаблон
.

Прежде чем начнём ломать наш шаблон Нужно
.

Сохранить свой блог (бэкап-резервное копирование блога.)

Это надо делать перед любыми эксперементами

]]></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-есть величина отступа
Для того ,чтобы Вставить картинку в статью. Пишем вот такой код код

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

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

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

Об Авторе

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

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

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

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

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

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

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

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

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

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

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

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

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

с кнопочками

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

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

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

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

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

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

Blogger.com

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

css меню

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

курсы css html

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

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

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

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

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

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

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

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