Как сделать картинку ссылкой в сайдбаре
Здравствуйте друзья! В процессе обучения выяснилось, что не все новички знают, как сделать картинку ссылкой в сайдбаре. В представленной статье, будет показано, как сделать картинку в виде ссылки на сайте.
Сделать картинку ссылкой в сайдбаре очень просто
Если Вы хотите получать заработок через Интернет с помощью сайта, то Вам нужно рекламировать свои и чужие продукты на его страницах. Вы можете написать целевую статью на тему рекламируемого продукта, её посетители будут читать и переходить по ссылкам. Но статья со временем будет опускаться ниже, и все меньше читателей будет видеть её, а значит и по ссылкам переходов будет меньше.
В этом случае лучшие результаты даёт рекламный баннер, установленный на сайте. Рекламный баннер на свой или чужой продукт можно установить в любом месте – в шапке сайта, в подвале, под статьёй или в сайдбаре. Рекламный баннер не что иное, как обычная картинка. Для каждого места на сайте, есть свои методы установки такой картинки. Вопрос, как установить баннер на сайте достаточно широкий, всё мы рассматривать не будем, а рассмотрим лишь, как разместить картинку в сайдбаре.
Наверняка каждый новичок сталкивался с установкой рекламного баннера в сайдбар своего сайта (блога). Здесь особых проблем нет, устанавливаете в нужное место виджет и вставляете в него код рекламного баннера, где есть ссылка на рекламируемый продукт.
Но если Вы хотите установить свой собственный рекламный баннер, а это обычная картинка различных расширений, то возникнет вопрос, где взять код, где взять ссылки на картинку? Сейчас мы рассмотрим, как сделать картинку ссылкой в сайдбаре.
к оглавлению ↑Как установить баннер на сайте (блоге)
Итак, перед тем, как установить баннер на сайте (блоге), нам нужно определиться, где его взять? Поскольку баннер является обычной картинкой, а картинки могут иметь различное расширение – png, jpg, gif и другие. Если рекламный баннер будет переключаться, то в этом случае говорят, что он является анимированным и такой баннер может быть только в gif расширении, если баннер будет статичным, то можно использовать любое расширение, которое поддерживает WordPress.
Для подбора картинок для рекламного баннера есть несколько вариантов:
- найти в Интернете;
- использовать баннер из рекламных материалов, например, партнерской программы;
- создать свой статичный баннер, то есть обычную неподвижную картинку в программе фотошоп или Pixlr;
- создать свой анимированный баннер.
Создать баннер своими руками можно за несколько минут, о том, как это сделать, подробно показано в статьях на блоге:
Особый интерес представляет анимированный баннер, который делается в программе Easy GIF Animator (ссылка выше), он привлекает внимание и по нему кликают лучше раз в десять – советую ставить его. Всё, считаем, что картинка у нас есть, закачиваем её на сайт в папку «Все медиафайлы», в ту папку, где храним все картинки для статей блога.
Теперь решаем, как на картинке сделать ссылку на сайт, например, на продающий. Для этого нужно использовать этот шаблон:
<center><a href=»https://biz-iskun.ru/kniga/» target=»_blank»><img src=»https://biz-iskun.ru/wp-content/uploads/2014/01/kniga-for-blog.jpg» /></a></center>
Первая ссылка должна вести посетителя на продающий сайт или подписную страницу. Вы аккуратно убираете ссылку из этого шаблона (кавычки не трогать) и вставляете свою ссылку. Вторая ссылка, это ссылка на картинку, которую закачали на свой блог. Взять Вы её можете в библиотеке медиафайлов, она появляется при выделении нужной картинки (смотрите скрин). Вторую ссылку также аккуратно меняете в шаблоне на свою.
Код готов, теперь можно добавить в сайдбар картинку. Здесь есть один нюанс, скопированная ссылка может быть не активной, а значит, не будет работать. Активировать ссылку можно следующим образом – вставляете её в Word документ и нажимаете пробел или Enter, ссылка становится активной и Вы, можете её вставлять в шаблон. Между кавычками и ссылкой не должно быть пробелов. Шаблон можете скопировать к себе на компьютер и работать с ним в отдельном документе, например, в Word.
Следующим шагом является установка самого баннера в сайдбар. Для этого идем в админпанель сайта (блога), выбираем «Внешний вид», «Виджеты». Определяемся с местом установки картинки в сайдбаре. Находим в левой части панели поле «Текст» и перетаскиваем его мышкой в то место, где мы хотим видеть наш рекламный баннер.
При желании пишем заголовок, а в поле «Текст», вставляем полученный нами код и нажимаем кнопку «Сохранить». Возвращаемся на главную страницу сайта и видим, что наш рекламный баннер работает. В данном разделе мы рассмотрели вопрос, как установить баннер на сайте, то есть, как сделать картинку ссылкой в сайдбаре – Вы убедились, что ничего сложно здесь нет, а делается это за несколько минут.
к оглавлению ↑Заключение
Итак, в данной статье мы рассмотрели вопрос, как сделать картинку ссылкой в сайдбаре. Этот прием пригодится новичкам для рекламы своих продуктов, реселлерских комплектов, партнерских программ и других продуктов. В сайдбаре можно устанавливать несколько баннеров, что повысит заработок через Интернет. Используйте приведенный в статье шаблон, он Вам облегчит процесс установки рекламных баннеров в сайдбаре. Удачи Вам!
С уважением, Иван Кунпан.
Иван, приветствую! Прочел и вспомнил свою статью. Но там, я как раз показывал как получить ссылку на автомате. Вернее просто скопировать то что получилось и вставить в сайдбар вместе с уже готовой картинкой баннера. Если интересно, то вот kosolapovblog.ru/kak-sdelat-kartinku-ssyilkoy.html
Андрей, варианты есть разные, но для новичков удобнее делать по шаблону, хотя дело каждого.
Иван, спасибо за статью…Всё думаю над этим и никак не соберусь это сделать…Наверное, пока в этом не вижу необходимости…я ведь ничего не рекламирую и не продаю на блоге…Но за статью спасибо, ваш образец кода взяла себе в закладки, пусть будет…С уважением, Анна.
Анна, часто бывает, что не надо, а потом резко понадобилось — вот и примените на практике.
Недавно рассказывал про установку баннера в сайдбар блога на вебинаре. Работа простая, хотя у новичков бывают сложности.
Андрей, поэтому я и написал эту статью и сделал видео, данный материал поможет новичкам.
Спасибо. Теперь буду знать как создать код, а то как -то у меня возникал этот вопрос, но не нашла тогда ответа.
Создать код просто, но не все знают, как это сделать.
Спасибо, Иван, очень скоро мне понадобится установить свою картинку со ссылкой в сайдбар. Ваши статьи понятны и всё в них по делу.
С уважением, Алина Таранец, автор блога ПУТИ К ЗДОРОВЬЮ
Алина, я старался сделать статью для новичков, чтобы они смогли понять и повторить. Значит, моя статья удалась. Спасибо за оценку.
Благодарю Иван за статью, для тех, кто только начинает вести свой блог, статья очень полезна. Помню, когда мне надо было первый раз загрузить баннер на блог, я понятия не имела как это сделать. А сейчас любой новичок при помощи такой статьи справится. Всё разжеванно и расписано по шагам. Успехов тебе.
Елизавета, спасибо. Именно для новичков написана эта статья. Думаю, такие статьи им нужны.
Иван я в клубе офферинвест взял код на баннер вставил туда свою портнёрку всё вроде клёво получилось. Через некоторое время картинка исчезла а осталась только портнёрка. Где я накосячил можешь сказать?
Сергей, а картинку Вы не убирали? Если убрать на сайте картинку, то может так и произойти. Возможно, ссылка на картинку перестала работать. Попробуйте всё повторить.
Иван, как видете, ваша статья получила очень позитивный отклик от всех ваших посетителей блога, особенно тех, кто впервые сталкивается с такой проблемой…Спасибо вам за статью и за внимание к тем, кто делает свои первые шаги в ведении блога…С уважением, Анна.
Анна, мне приятно, что читатели блога активно используют мои знания и опыт. Значит, статьи пишутся не зря, а это главное.
Вы знаете, Иван, даже если вам удалось помочь одному человеку — это уже здорово!!! Я вот думала поставить меняющиеся картинки в сайт бар просто для красоты, но потом пришла такая мысль, как поставить самые читаемые статьи, сделать, как анонс: картинка статьи и её начало немного…Но пока не могу ещё осуществить, не готова…С уважением, Анна.
Думаю, что можно реализовать Вашу идею. Надо поискать в Интернете информацию, должны быть такие плагины, которые будут переключать статьи. Я этим не занимался, поэтому точно сказать не могу, но скорее всего они есть. В худшем случае это можно сделать вручную через код.
Иван, будем работать в этом направлении…Придёт и на это время…Благодарю за поддержку…С уважением, Анна.
Если есть желание и настойчивость, то обязательно реализуете.
Я немного не так делал баннер в сайтбаре. В самом редакторе давал картинке ссылку. Потом переключался с визуального на текстовый режим, и этот код вставлял в сайтбаре. Я думаю так быстрее будет.
Евгений, один вопрос — как присваивали ссылку, ведь при размещении картинки в библиотеке, ссылка сразу же генерируется сама. Или я не так понял?
В редакторе ВордПресс создаю новую запись, дальше беру картинку с библиотеки или просто перетягиваю с рабочего стола в редактор. Ну и как обычно выделяю картинку щелчком левой клавиши мышки. После чего в панели инструментов щёлкаю по кнопке «Вставить/изменить ссылку». В открывшемся окошке в поле URL вставляю свою ссылку. Дальше переключаюсь на режим текст, и сгенерированный код копирую для вставки в сайтбаре.
Можно и по-другому. Выделить картинку и в появившейся панельке инструментов над картинкой выбрать карандаш (Изменить). В открывшемся окне напротив пункта ссылка выбрать вариант «произвольный URL». Это мы изменяем только копию картинки, а та картинка, что находится в библиотеке остаётся с прежним адресом, ведущим в директорию на сервере. Ну и на конец, удаляем только что созданную временную запись, она нам больше не нужна
Спасибо за пояснение, Евгений. Да, варианты всегда есть — век живи, век учись!
Узнав, как сделать картинку ссылкой на нужную страницу, вы сможете не только украсить свой блог красивыми фото, но и направлять трафик в желаемую сторону. Как и было обещано в предыдущей статье
Ирина, для красоты не совсем будет правильно, а вот рекламный баннер да.
Благодарю Иван! за статью очень много полезного на блоге лично для меня.
Фарит, рад, что статья Вам помогла решить задачу!
Сейчас попробую сделать. Только мне нужно вставить маленькую картинку, а сбоку хочу сделать описание.
Александр, у Вас все получится, только нужно учесть последние обновления WordPress и сделать немного иначе. Размещение баннера с учетом изменений показаны в новой статье https://biz-iskun.ru/kak-ustanovit-banner-na-sayte.html
Иван, спасибо за ответ. Только мне не баннер нужно установить. Я хочу сделать своего рода как произвольное меню: установить маленькую картинку, а сбоку вывести описание. В принципе это тот же самый баннер, только структура кода немного будет другая. Сейчас вот ищу как это сделать более правильно, чтобы ничего ни где не выпирало и красиво смотрелось.
Александр, думаю все получится. Единственное, нужно будет указать в коде ширину текста. Если Вы не совсем разбираетесь в коде, то есть два пути — поэкспериментировать, пока не получится или обратиться к фрилансеру, который все сделает за пару минут.