Сегодня я хочу рассмотреть вопрос вставки графического баннера в блог на платформе блоггер. В принципе, эта тема рассматривалась очень многими. Но есть некоторые моменты, которые в других статьях не затрагивались. А для новичка важна каждая мелочь.
Как создать сам баннер, это уже другой вопрос. Будем считать, что баннер у Вас уже есть и только требуется его вставить в блог.
Это может быть просто картинка или картинка с анимацией. В нашем случае это не играет никакой роли.
У себя в админке выбираем свой блог и на открывшейся странице жмем на пункт меню Дизайн. Вы увидите как бы блочную схему своего блога. И в этой схеме будет несколько полей для гаджетов с надписью Добавить гаджет.
Вот в один из этих участков мы и поместим наш баннер. Разницы нет, в какой именно. То есть она имеется, если судить с точки зрения СЕО и дизайна сайта. Но вставляется баннер одинаково в любой контейнер для гаджета. Поэтому выбирать Вам, куда уж Вы пожелаете его запихать. Вставим его с правой части блога, как отмечено на рисунке.
Во-первых, откуда будет грузиться каждый раз наш баннер? Его можно разместить на любом бесплатном файловом хостинге. Но нет смысла это делать, так как у блоггера для этого есть свой фото-хостинг. И уж больше гарантий, что Ваши фотографии и картинки не удалят в любой момент. Туда же помещаются и картинки, которые Вы вставляете непосредственно в тело своих постов. Попасть в хранилище Ваших картинок можно по ссылке picasaweb.google.com со своим логином и паролем в блоггере. В общем, перейдя по ссылке, Вы увидите альбом с названием своего блога и с картинками внутри, если Вы вставляли какие-то картинки раньше в сообщения. Если же нет, то альбом будет пустой. Открываете альбом и жмете на Добавить фотографии.
Затем на появившейся странице жмем на Выбрать фотографии с компьютера.
В открывшемся окне выбираем файл с баннером и после загрузки его в альбом жмем ОК.
Далее все просто. В дизайне нашего блога на блоггере жмем на Добавить гаджет. В открывшемся окошке выбираем HTML/JavaScript. У Вас откроется окно с двумя полями для ввода: названием и содержанием.
Если Вы хотите, чтоб над Вашим баннером была еще какая-то надпись, то заполняете поле Название. В поле Содержание, собственно, мы должны вставить код самого баннера. Код этот состоит из ссылки на сам баннер и ссылки сайта, который рекламируется этим самым баннером. То есть того сайта, на который перейдет пользователь, кликнув по баннеру. Выглядит код так:
После проделанных манипуляций нам надо скопировать ссылку. У Вас будет две ссылки. Первая, с названием Ссылка, нас не интересует. Копируем со второго поля, с названием Вставить изображение. Вот эту ссылку и вставляем вместо адреса картинки.
После заполнения окошка для гаджета жмем в нем кнопку Сохранить. проверяем свой блог. Баннер должен появится в означенном месте.
Как создать сам баннер, это уже другой вопрос. Будем считать, что баннер у Вас уже есть и только требуется его вставить в блог.
Это может быть просто картинка или картинка с анимацией. В нашем случае это не играет никакой роли.
У себя в админке выбираем свой блог и на открывшейся странице жмем на пункт меню Дизайн. Вы увидите как бы блочную схему своего блога. И в этой схеме будет несколько полей для гаджетов с надписью Добавить гаджет.
Вот в один из этих участков мы и поместим наш баннер. Разницы нет, в какой именно. То есть она имеется, если судить с точки зрения СЕО и дизайна сайта. Но вставляется баннер одинаково в любой контейнер для гаджета. Поэтому выбирать Вам, куда уж Вы пожелаете его запихать. Вставим его с правой части блога, как отмечено на рисунке.
Во-первых, откуда будет грузиться каждый раз наш баннер? Его можно разместить на любом бесплатном файловом хостинге. Но нет смысла это делать, так как у блоггера для этого есть свой фото-хостинг. И уж больше гарантий, что Ваши фотографии и картинки не удалят в любой момент. Туда же помещаются и картинки, которые Вы вставляете непосредственно в тело своих постов. Попасть в хранилище Ваших картинок можно по ссылке picasaweb.google.com со своим логином и паролем в блоггере. В общем, перейдя по ссылке, Вы увидите альбом с названием своего блога и с картинками внутри, если Вы вставляли какие-то картинки раньше в сообщения. Если же нет, то альбом будет пустой. Открываете альбом и жмете на Добавить фотографии.
Затем на появившейся странице жмем на Выбрать фотографии с компьютера.
В открывшемся окне выбираем файл с баннером и после загрузки его в альбом жмем ОК.
Далее все просто. В дизайне нашего блога на блоггере жмем на Добавить гаджет. В открывшемся окошке выбираем HTML/JavaScript. У Вас откроется окно с двумя полями для ввода: названием и содержанием.
Если Вы хотите, чтоб над Вашим баннером была еще какая-то надпись, то заполняете поле Название. В поле Содержание, собственно, мы должны вставить код самого баннера. Код этот состоит из ссылки на сам баннер и ссылки сайта, который рекламируется этим самым баннером. То есть того сайта, на который перейдет пользователь, кликнув по баннеру. Выглядит код так:
<a href="адрес ссылки" ><img src="адрес картинки" ></a>
Вместо адреса ссылки вставляете ссылку рекламируемого сайта (обязательно с http://). А вместо адреса картинки, ссылку на Ваш баннер. Как ее найти? Да очень просто. Открываете Ваш альбом, в который Вы загружали свой баннер на Пикаса. С правой стороны в столбце информации об изображении Вы увидите надпись Ссылка на эту фотографию. Жмете туда. Далее нас интересуют два параметра. Нужно поставить галочку на Только изображение (ссылка отсутствует). И обязательно в поле выбора размера нужно выбрать исходный размер, иначе Ваш баннер вставится на блог в миниатюре, а Вы будете задавать вопросы: "Почему я при создании баннера указывал(ла) нужные мне размеры, а при размещении баннера на сайте, он отображается очень маленьким?!"
После проделанных манипуляций нам надо скопировать ссылку. У Вас будет две ссылки. Первая, с названием Ссылка, нас не интересует. Копируем со второго поля, с названием Вставить изображение. Вот эту ссылку и вставляем вместо адреса картинки.
После заполнения окошка для гаджета жмем в нем кнопку Сохранить. проверяем свой блог. Баннер должен появится в означенном месте.
Комментариев нет:
Отправить комментарий