«

»

Фев 12 2017

Как сделать картинку ссылкой

На странице блога «Контакты» мне захотелось разместить кнопки социальных сетей ведущие на мои профили.

Чтобы вы, читатели моего блога, могли связаться со мной в социальных сетях или добавиться ко мне в друзья.

В принципе «зарядить» иконку социальной сети ссылкой на профиль , то есть сделать картинку ссылкой совершенно не сложно.

Достаточно привычным образом загрузить картинку в текст страниц, выделить ее, нажать на значок цепочки  и вставить ссылку.

Все. Картинка станет активной и направит кликнувшего по ней в новое окно  в браузере с нужной страницей в интернете.

ссылка в картинке

Точно так же устанавливается баннер в текст статьи. На странице блога или в записи — все равно.

Но если картинок несколько, например иконок соц сетей, и их вставлять в запись поочередно, то они «встанут» в вертикальный ряд — одна под другой.
А мне было необходимо выставить их в горизонтальный ряд.

Готовых решений я не нашла в интернете, поэтому пришлось мастерить самой.
Правда пришлось немного затратить времени на изучение курса по HTML от Евгения Попова. 

Добавлю, что рекомендую и Вам его изучить так как знания HTML блогеру в любом случае иногда бывают очень даже не лишними. Тем более что курс Евгений Попов раздает бесплатно.

Я решила пошагово все свои действия описать здесь. Авось пригодится кому

Итак, приготовим картинки. Точнее иконки социальных сетей, в которых у вас есть личные странички. И куда вы хотите привести своих читателей  через создаваемые кнопки.

Создаем новую страницу с названием «Контакты» или открываем для редактирования уже созданную ранее.

Загружаем одну из заготовленных иконку социальных сетей.

Если на вашем блоге иконки оформляются в рамочку, то вот здесь я рассказываю о нехитром способе «Как убрать рамку вокруг картинки»

Загрузили картинку  на страницу

и переходим во вкладку «Текст»

Во вкладке «Текст» картинка представляет собой код.

 Выделяем его и копируем с помощью сочетаний клавиш Ctrl+V или через клик правой кнопки мыши.

Код картинки на блоге

Открываем любой текстовый редактор на компьютере (блокнот, или word) или программу для работы с html.

Кому что удобно.

Мне в данном случае удобнее работать в документе word, потому что в нем код не расползается по всей строке как в блокноте.

И есть возможность увеличить размер шрифта, чтобы не напрягать глаза.

Вставляю в него код картинки.

Теперь моя задача добавить к картинке ссылку на мой профиль во «Вконтакте».

Захожу на свою страницу и в строке браузера копирую ссылку.
Эту ссылку необходимо заключить в тег

<a href=»сюда вписать ссылку на профиль« target=»_blank»>

(тег   » target=»_blank» добавляем сюда чтобы ссылка открывалась в новом окне)

добавить ссылку к картинке

То что получилось поставить перед кодом картинки

Теперь код картинки выглядит так

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

Все. Код картинки с ссылкой на профиль готов.
Его можно скопировать и вставить на страницу.

И это будет одиночная картиночка ведущая на нужный ресурс.

Так можно создавать баннеры.

Чтобы создать горизонтальную панельку социальных кнопок, нужно проделать все предыдущие манипуляции с остальными иконками.

И собрать все получившиеся коды в одном документе.

Желательно их сразу подписывать, чтобы не запутаться потом.

коды иконок в одном документе

Для горизонтального расположения иконок нам понадобится код таблицы.

С тем количеством ячеек, сколько иконок соцсетей у нас имеется.
У меня 6 иконок социальных сетей, где мои читатели смогут меня найти.

Поэтому мне понадобится таблица с шестью ячейками.

Код таблицы такой:

——————————————————————

<table border=»0″ width=»ширина» cellspacing=»0″ cellpadding=»0″ height=»высота«>

  <tr>

                <td>вставить код вконтакте</td>

                <td>вставить код </td>

                <td>вставить код </td>

                <td>вставить код </td>

                <td>вставить код </td>

                <td>вставить код </td>

        </tr>

</table>

—————————————————————

Лишнюю строку   <td>вставить код </td> можно удалить.

Или наоборот, скопировав, добавить ниже.

Высота — указать высоту равную высоте иконки.

Вписав все получившиеся коды (картинка+ссылка на профиль) в код таблицы вы получите html-код (скрипт),  который размещает активные иконки социальных сетей ведущие на ваши профили в одну строку.

Через вкладку «Текст» на странице «Контакты» вставьте скрипт — сохраните и обновите страницу просмотра.

Кстати,  вот что у меня получилось

Вы можете уже сейчас пройти по иконкам, найти меня в своих любимых социальных сетях и добавиться ко мне в друзья. Буду рада!

И еще один маленький момент. Каждая ссылка на другой ресурс на вашем блоге — это внешняя ссылка. Внешние ссылки нам на сайте не желательны.

Поэтому важно позаботиться о том. чтобы каждая ссылка была заключена в тег <noindex>сюда прописать ссылку</noindex>.

В нашем случае, когда ссылка на профиль + ссылка на картинку создают единый код, можно тег <noindex> проставить в начале и в конце единого кода.

<noindex> — открывающий, поставить в начале единого кода

</noindex> — закрывающий, поставить в конце.

И уже то, что получилось — все вместе вставлять в таблицу.

Так же любой баннер — в тексте статьи или в виджете обязательно заключать в тег <noindex></noindex>.

Этот тег дает указание поисковикам не индексировать данную ссылку. По- другому — прячет ее.

P. S  Я у себя на блоге заключаю в этот тег только баннеры в виджете.

Все остальные ссылки на блоге размещенные в записях и на страницах, у меня автоматически закрывают тегом  плагин All in One SEO

Это дает мне возможность спокойно размещать  ссылки на блоге на внешние ресурсы — свои, партнерские или на ресурсы, о которых я рассказываю в статьях.

На этом у меня все, друзья.
Надеюсь вы найдете что-то полезное для себя в этой статье.

 

Подписаться на обновление блога

Введите свой e-mail

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *