Translate

БАННЕРЫ

ВСЕ ПРО БАННЕРЫ
например:

или:


Как вставить баннер в блог

Часто в блогах можно увидеть картинки, нажав на которые можно перейти к другому сообщению или в другой блог. Например, сообщения о конкурсах, розыгрышах призов, т.н. "конфетках", кнопки коллективных блогов, рекламные баннеры, наконец. Часто и при участии в каких-либо конкурсах в условиях стоит пункт о необходимости размещения их баннера у себя в блоге. Как это сделать?
Чтобы вставить картинку со ссылкой (баннер, кнопку) в блог, есть несколько способов.

Если надо поставить баннер или кнопку на главную страницу в боковую панель, то самый простой способ - воспользоваться стандартным гаджетом Блоггера "Изображение".
Сохраните изображение баннера куда-нибудь к себе на компьютер. После этого выберите в "Дизайн"-"Вставить гаджет"-"Изображение". В появившемся окошке надо заполнить поля. Ввести название (если надо), подпись. А в "Связать" ссылку, по которой будет производиться переход при нажатии на картинку. После этого нужно загрузить само изображение баннера оттуда, куда вы его скопировали (можно и из своего компьютера, и из интернета по URL).

Если надо поставить баннер или кнопку, HTML-код которых вам дали в каком-то другом блоге, на главную страницу в боковую панель, то делаем следующее:
1. Копируем нужный код (Ctrl-C) из блога-источника
2. Переходим к себе в блог. Выбираем "Дизайн"-"Добавить гаджет"-"HTML-код" и в появившееся окошко вставляем скопированный код (Ctrl-V). Тот же эффект дает копирование кода в стандартный гаджет "Текст".

Если вам не подходят размеры данного вам  баннера, его можно изменить.
Для этого надо исправить его длину и ширину.
Смотрим внимательно на код. Обычно он имеет такой вид:
<a href="http://адрес, на который перейдет человек после нажатия на баннер "target="_blank" title="текст, который будет появляться после наведения на баннер мышки"><img src="http://адрес изображения" width="260" height="200" border="0" /></a>
Нас интересует ширина (width ) и высота (height ).
Вот у них и меняем цифры на нужные.
Например, баннер размером 260 у вас вылезает за панель, она у вас 180 пикселов шириной. Тогда заходим и исправляем  width="260" на  width="180".
Если писать только один из параметров - например, стереть высоту и оставить только ширину, то изображение будет менять размеры пропорционально.

Если надо поставить баннер или кнопку, HTML-код которых вам дали в каком-то другом блоге, прямо в  ваш пост, то делаем следующее:
1. Копируем нужный код (Ctrl-C) из блога-источника
2.Переходим к себе в блог. Открываем нужное сообщение для редактирования ("Изменить").
3. В левом верхнем углу в меню находим кнопку "HTML" и нажимаем ее. Сообщение теперь видно в виде HTML-кода. В нужное место кода (ориентируйтесь по фразам текста, которые остались в прежнем виде) вставляем скопированный код (Ctrl-V).
4. Нажимаем в меню "Создать" и смотрим, что получилось.



Как сделать свой баннер

Для того, чтобы сделать свой баннер (картинку с привязанным к нему адресом), нужно написать его код. Этот код потом любой желающий сможет вставить к себе в блог - в сообщение или на боковую панельку (я уже писала о том, как вставлять баннер или кнопку в блог).

Как же написать код для баннера?

Для начала нам нужно взять (или нарисовать) изображение, которую хотим сделать нашим баннером. И разместить ее на каком-нибудь общедоступном ресурсе в интернете. Нам для кода понадобится его адрес.

А потом надо написать такой кусочек HTML-кода, который и предложить вставлять другим людям в их блоги. (Как сделать, чтобы текст кода корректно отображался на станице поста, я писала тут).

<a href="http://адрес, на который перейдет человек после нажатия на баннер "target="_blank" title="текст, который будет появляться после наведения на баннер мышки"><img src="http://адрес изображения" /></a>

Это самый простой вариант. Но в нем нужно учесть, что наше изображение будет вставлено того размера, как оно есть. Поэтому нужно сразу делать его того размера, какой вы хотите видеть на экране. Это оптимально с точки зрения быстроты загрузки картинки.
Можно немного скорректировать код и добавить параметры изображение - ширину (width) и высоту (height). Тогда в сети вы можете разместить изображение любого размера, а уже в самом коде задать нужные длины и даже рамочку (border). Если не указать что то из  width или height, то картинка будет смасштабированна пропорционально до соответствия оставшемуся размеру.

<a href="http://адрес, на который перейдет человек после нажатия на баннер "target="_blank" title="текст, который будет появляться после наведения на баннер мышки"><img src="http://адрес изображения" width="200" height="200" border="0" /></a>.

Для того, чтобы баннер сам становился по центру строки текста (если добавлять его будут прямо в текст сообщения), его нужно заключить в такие строчки:

<div style="text-align: center;">
код для баннера
</div>

Пример моего баннера:

Я сделала баннер по первому варианту, взяв адрес нужной картинки уже подготовленного размера прямо из поста в блоге.


<div style="text-align: center;">
<a href="http://ta-vi-ka.blogspot.com/p/blog-page_31.html" target="_blank" title="Клуб почемучек"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8iagNQrzxVLYU4rESvQhpQU8T4-tGrmHsMlcw2WLS2QnV-vHh5VBomWDIECPPnCTyQf1Q6w8R_dhUlm4Ra1rjvmBF2xtqc2x_VYfg1E5dmnZQRTGx19LliRAZsDttH3Qis8xMlGQXoA6/s1600/pochemuchka_mini.jpg" /></a>
</div>

Тут можно узнать, как вставлять в блог другие полезные вещи:
Как вставить музыку в блог
Как вставить проверку орфографии
Как вставить социальный плагин от Фейсбука
Как вставить виджет от ВКонтакте
Как вставить свои кнопки социальных сетей

Как вставить презентацию в блог

Как вставить свою кнопку "Далее"

Чтобы на главной странице блога публиковалось не все сообщение целиком, а только его начало, нужно пользоваться так называемым катом.
При редактировании сообщения нажимаем такой значок (фото кликабельно):




В результате в редакторе появляется линия, которая отделяет ту часть сообщения, которая будет видна на главной, от остального текста.
При публикации поста на главной странице в этом месте появляется надпись "Дальше", нажав которую можно прочитать все сообщение целиком. Но эта ссылка не сильно выделяется на фоне остального текста.

Вместо нее можно поставить кнопку со своим текстом
Для этого надо найти или нарисовать самим картинку нужного размера и вида для кнопки и загрузить ее куда-нибудь в интернет (я для этого пользуюсь вебальбомом Пикасса). Нам понадобится ее адрес.


Потом переходим в редактор своего блога.
Обязательно сохраняем шаблон перед внесением любых изменений! 
Выбираем "Шаблон"-"Изменить HTML". Ставим галочку "Расширить шаблон виждета"
Поиском находим строку :  b:if cond='data:post.hasJumpLink'

С нее начинается такой блок:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Заменяем его на новый блок:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img border='0' src='адрес_изображени_кнопки'/></a>
</div>
</b:if>

И вставляете свой адрес. После этого нажимаем "Сохранить шаблон".
Если просто нажать "Просмотр", то выскакивает ошибка 400. Можно на это внимание не обращать - в блоге все будет правильно. Но плохо, что код шаблона у нас становится "грязным" :(
Все - любуемся своей кнопочкой.



источник: http://blogformyblog.blogspot.com/

Комментариев нет:

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