ScrapHouse - всё о скрапбукинге: материалы, инструменты, идеи, мастер-класс


Главная Начинающим скраперам Как добавить баннер на боковую панель Blogger?

Как добавить баннер на боковую панель Blogger?

Добрый день! Снова заметка для скрап-блоггеров. Расскажу, как добавить ссылку в виде картинки на боковую панель Blogger.

Заходим на главную страницу Blogger и видим список своих блогов (у большинства из вас 1 блог):
Как добавить баннер на боковую панель Blogger

Нажимаем на кнопочку с треугольничком напротив блога, на боковую панель которого хотим добавить гаджет. В выпадающем списке выбираем "Дизайн":
Как добавить баннер на боковую панель Blogger

Попадаем на страницу настройки содержимого блога, нажимаем в р-не боковой панели "Добавить гаджет" (к слову, подобным образом гаджет можно добавлять не только на боковую панель, а в любое место блога - в соответствии с его разметкой).
Как добавить баннер на боковую панель Blogger

Появляется окошко со списком возможных гаджетов, выбираем в этом списке "HTML/JavaScript":
Как добавить баннер на боковую панель Blogger

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

Давайте сразу пример, а потом разберём построчно, что есть что. В данном примере в поле "Название" я ввёл "ScrapHouse", а в поле "Содержание" вставил код баннера нашего сайта:
Как добавить баннер на боковую панель Blogger

После этого нажал "Сохранить" (оранжевая кнопка) и обнаружил гаджет в админке на боковой панели:
Как добавить баннер на боковую панель Blogger

Перетащил мышкой гаджет туда, куда хотел, например, на пару гаджетов ниже:
Как добавить баннер на боковую панель Blogger

Нажал "Сохранить расположение":
Как добавить баннер на боковую панель Blogger

Нажал на "Просмотр":
Как добавить баннер на боковую панель Blogger

Убедился, что гаджет не просто появился, а появился там, где я того хотел:
Как добавить баннер на боковую панель Blogger

Вы тоже убедились. И даже можете добавить гаджет (в данном случае - баннер) к себе в блог, если у вас есть готовый код баннера. А если нет готового кода? Сможете добавить, например, картинку, которую хотите?

Давайте разберём код баннера из приведённого выше примера:

<a target="_blank" href="http://scraphouse.ru/">
<img src="http://scraphouse.ru/images/scraphouse_banner.gif" alt="ScrapHouse: всё о скрапбукинге!" border="0" />
</a>
Смотрим на первую и третью строчки - это открывающий и закрывающий тэги "а". Всё, что находится внутри, всегда является ссылкой. В данном случае внутри тэга "а" находится тэг "img", являющийся картинкой. Поэтому наша картинка является "кликабельной". Поэтому, кликая на баннер (картинку), когда он находится на реальном блоге, мы попадаем на сайт http://scraphouse.ru.

Подробней о первой строке кода: открывается тэг "а" (ссылка), далее идет часть строки,

target="_blank"
которая говорит о том, что ссылка будет открыта в новой вкладке (или новом окне) браузера.
Следующая часть строки
href="http://scraphouse.ru/"
показывает, какой сайт/страница откроется, когда вы кликните по ссылке (в данном случае - по картинке). В кавычки вставляется адрес сайта/странички.

Подробней о второй строке кода: открывается тэг "img" (картинка), далее видим фрагмент,

src="http://scraphouse.ru/images/scraphouse_banner.gif"
обозначающий место, где лежит сама картинка. Это есть полный путь до картинки. Любая доступная картинка в сети Интернет имеет подобный адрес. Этот адрес вставляется в кавычки. Вот, к примеру, нашей помощницы, Саши Буйко. Перешли? Все видят справа мультяшную картинку барышни с белым венком на голове? Полный путь до этой картинки таков:
http://cs10412.vk.com/u442428/517081/m_ec7de2c2.jpg
Как я его получил? Кликнул на изображении правой кнопкой мыши, выбрал "Открыть картинку в новой вкладке", скопировал из адресной строки путь до картинки и вставил сюда. Всего-то.
Следующий фрагмент второй строки:
alt="ScrapHouse: всё о скрапбукинге!"
Это так называемый альтернативный текст (в кавычках), который будет отображаться вместо картинки в том случае, если по какой-либо причине сама картинка будет недоступна (ну, упал тот сервер, где находится картинка). Данный фрагмент строки не обязателен.
И третья часть второй строчки
border="0"
говорит о том, что рамка вокруг картинки отсутствует (её толщина, как видно, равна нулю).

Третья строка, которую мы уже упоминали состоит лишь из закрывающего тэга "а". Правильно, мы закрыли картинку тэгом "а" с двух сторон, т.к. хотим, чтобы картинка была ссылкой ("кликабельна").

Подытожим. Всё, что нам нужно в простейшем случае, - это ссылка на картинку и ссылка на сайт/страницу (ресурс).

<a href="/ссылка_на_ресурс">
<img src="/ссылка_на_картинку" />
</a>
Как это дело вставляется на блог - описано выше.

Пара простейших примеров:
- нужна ссылка, но текстовая, а не в виде картинки - вместо тэга "img" пишем любой текст, текст будет кликабельным:

<a href="/ссылка_на_ресурс">
Фальсификация выборов
</a>
- нужна картинка, но не кликабельная, просто хочется картинку - ну, так избавляемся от тэгов "а" и оставляем только картинку - тэг "img":
<img src="http://scraphouse.ru/images/banners/banner_shop.gif" />

Конечно, надо понимать, что в код можно добавлять и другие параметры, например, задавать размеры картинки. Можно замахнуться и на вставку джава-скриптов в блог, но это, полагаю, уже тема отдельной заметки.
Вроде бы осилил. Всё понятно?
Задавайте вопросы, дамы.

Отвечаю на вопрос Анны (комментарии ниже). Анна, в вашем случае код будет таким:

<a target="_blank" href="http://сайт.ру">
<img src="http://2.bp.blogspot.com/-JSkv8ZWpy7E/TsY4E0sg6OI/AAAAAAAAEe4/XuzbqDW3Zhs/s1600/IMG_1254.jpg" alt="ScrapHouse: всё о скрапбукинге!" width="250px" border="0" />
</a>
Единственное - в первой строке вам нужно будет вставить адрес сайта/странички, который должен открываться при клике на баннер (вместо моего http://сайт.ру). Да, так как у вас картинка огромная, то в теге img я ограничил её ширину (250 пикселей). Можете менять ширину так, как удобно, чтобы картинка вмещалась в вашу боковую панель блога.







Получайте новости и статьи по почте:       


Комментировать с помощью ВКонтакте

 

Комментарии  

 
0 #22 papa 07.03.2015 00:12
ха
Цитировать
 
 
0 #21 papa 07.03.2015 00:12
Да не так,нужно так...Заходи!!
Цитировать
 
 
0 #20 Kate P 24.02.2014 12:59
Добрый день... Не могу разобраться с тем, как сделать все баннеры одного размера... Сделать сами баннеры у меня получается, а вот картинки пляшут =(( Можете что-нибудь посоветовать?
Цитировать
 
 
0 #19 Lily 12.12.2013 01:02
Спасибо! Все получилось!

www.glorylook.blogspot.com
Цитировать
 
 
0 #18 АняУ 18.11.2012 21:30
Очень все доступно и понятно, но у меня не получается:( Помогите, пожалуйста :sad: Когда жму правой кнопкой на картинку нет кнопки с кодом картинки.
Цитировать
 
 
0 #17 Piama 10.08.2012 11:51
Хочу выразить свою презнательность за данную статью. Так доступро написань! Мне удалось добавить баннер и скорректировать его размер. Спасибо.
Цитировать
 
 
0 #16 Deadesign 13.06.2012 14:44
Спасибо. пытаюсь понять, что делаю не так
только название появляется. картинка не показывается.
Цитировать
 
 
0 #15 Oleg 07.04.2012 22:15
Цитирую Mar-ta:
А на картинку можно сослаться только которая находится в интернете? А как сослаться на свою картинку с компьютера?

здравствуйте! да, строчка в коде, отвечающая за картинку, сама собой подразумевает наличие картинки да доступном сервере в сети. подозреваю, вы не используете свой компьютер, как сервер. по этой причине вам необходимо загрузить нужную вам картинку на любой хостинг (сайт, блог, соцсеть...) и указать в коде путь к этой картинке, лежащей в сети
Цитировать
 
 
0 #14 Mar-ta 06.04.2012 15:06
А на картинку можно сослаться только которая находится в интернете? А как сослаться на свою картинку с компьютера?
Цитировать
 
 
0 #13 admin4ik_63 19.03.2012 23:09
Цитирую a-nitaa:
Пыталась добавить в блог. Но ничего не получается. Вновь надеюсь на вашу помощь. Спасибо!

Напишите, пожалуйста, что конкретно не получилось и на каком этапе потерпели неудачу?
Цитировать
 
 
0 #12 admin4ik_63 19.03.2012 23:08
Цитирую ИЯ:
Мама дорогая, СПАСИБО ВАМ ОГРОМНОЕ!!!!!!! !!!!!!!!! Все получилось, все понятно (наконец-то). Вы мой герой или героиня!!!!!!!! !!!! УРА!!!!!!!!!!!! !!

:-)
Цитировать
 
 
0 #11 a-nitaa 16.03.2012 20:21
Пыталась добавить в блог. Но ничего не получается. Вновь надеюсь на вашу помощь. Спасибо!
Цитировать
 
 
+1 #10 ИЯ 12.03.2012 23:13
Мама дорогая, СПАСИБО ВАМ ОГРОМНОЕ!!!!!!! !!!!!!!!! Все получилось, все понятно (наконец-то). Вы мой герой или героиня!!!!!!!! !!!! УРА!!!!!!!!!!!! !!
Цитировать
 
 
0 #9 admin4ik_63 22.12.2011 09:58
Здорово! Не за что. Справочник по html под рукой всегда имейте, их в сети полно. Абсолютно ничего сложного. Главное - привыкнуть :-)
Цитировать
 
 
0 #8 Котомахина Анна 21.12.2011 23:52
Урра! Заработало!Спас ибо! Теперь получилось! Только поменяла 250 на 100 Px( поняла что это размер). Только как бы эти буковки все выучить. Надо как схему записать....
Цитировать
 
 
0 #7 admin4ik_63 21.12.2011 22:45
Анна, в конец статьи добавил информацию по вашему случаю. Пишите, если не получится
Цитировать
 
 
0 #6 Котомахина Анна 21.12.2011 21:25
http://scrap-anita.blogspot.com/ скопировла не то, что нужно
Цитировать
 
 
0 #5 Котомахина Анна 21.12.2011 21:23
http://2.bp.blogspot.com/-JSkv8ZWpy7E/TsY4E0sg6OI/AAAAAAAAEe4/XuzbqDW3Zhs/s1600/IMG_1254.jpg это мой блог. Я с компьютером не особо дружу, но хочется вести свой блог. Пыталась вставить конфетку... Что нужно делать? Я кликала правой кнопкой и потом копировать ссылку на изображение, а дольше вставить, но похоже надо не так... Спасибо за помощь!
Цитировать
 
 
0 #4 admin4ik_63 21.12.2011 19:12
Цитирую Котомахина Анна:
Пыталась добавить гаджет. На его месте появляются только буквы. Наверное что-то не так делаю

Если вы можете дать более подробную информацию, я попытаюсь вам помочь. Какой гаджет вы пытаетесь вставить? Какой адрес вашего блога?
Цитировать
 
 
0 #3 admin4ik_63 21.12.2011 19:09
Цитирую Котомахина Анна:
Нужно ли прописывать вот эти буквы target="_blank"?

Здравствуйте, Анна. Нужно прописывать, если вы хотите, чтобы при клике на баннер ссылка открывалась в новом окне, а не в этом же.
Цитировать
 
 
0 #2 Котомахина Анна 20.12.2011 18:46
Нужно ли прописывать вот эти буквы target="_blank"?
Цитировать
 
 
0 #1 Котомахина Анна 20.12.2011 18:44
Пыталась добавить гаджет. На его месте появляются только буквы. Наверное что-то не так делаю
Цитировать
 

Добавить комментарий

Защитный код
Обновить

Главная Начинающим скраперам Как добавить баннер на боковую панель Blogger?

Новости

Открыта "Рукодельная витрина"
22.02.2012
Здравия желаю, уважаемые посетители! Как и было... Подробнее...
Изображение
Яндекс-виджет ленты новостей ScrapHouse
17.12.2011
Доброго времени суток, уважаемые посетители.... Подробнее...
Мы - СКРАПБУКИНГ.РФ
04.12.2010
Дамы и господа! Вашему вниманию - новость технического... Подробнее...
Открыт раздел новостей ScrapHouse
27.09.2010
Как вы уже, наверняка, догадались, в ScrapHouse открыт... Подробнее...
Баннер сайта ScrapHouse.ru

Закрыть

Если Вы желаете опубликовать материал на ScrapHouse.ru, прежде всего Вам необходимо зарегистрироваться или войти под уже созданной учётной записью. К публикации принимаются материалы, соответствующие тематике сайта, имеющие прямое или косвенное отношение к скрапбукингу и рукоделию в целом. Это могут быть мастер-классы, небольшие идеи, описания инструментов и материалов, вводные статьи для новичков и т.д. К публикации принимаются только уникальные материалы (например, Ваш собственный мастер-класс) или переводы статей с зарубежных сайтов (в случае публикации перевода необходимо оставить ссылку на источник). Это означает, что материалы, уже опубликованные на любом другом сайте или блоге рунета, не могут быть приняты. С помощью нашего сайта Вы можете дать рекламу своему блогу, оставив ссылку на блог в конце статьи.

Также мы принимаем заметки с информацией об интересных рукодельных играх и конкурсах, проводящихся на просторах рунета. Здесь одно условие - конкурс не должен быть коммерческим, т.е. не должен быть связан (прямо или косвенно) с деятельностью какого-либо магазина. Заметки об играх и конкурсах будут находиться на главной странице сайта 2-3 дня с момента их публикации, после чего будут перемещены в раздел "Посетители пишут...".

Любой из опубликованных материалов, если он соответствует вышеописанным правилам публикации, появится на главной странице сайта сразу после того, как будет проверен модератором.

Если после прочтения данных правил у Вас возникли вопросы или пожелания, можете воспользоваться формой обратной связи. Если же нет, ссылка "Опубликовать материал" расположена ниже. Спасибо за внимание, уважаемые посетители!

Опубликовать материал!

Хочу написать


Любые промышленные переключатели: . Электромеханические замки PERCo. ; Салон красоты: .


Делая ставки на биатлонистов здесь новички получают дополнительный бонус от фавбет.