«

»

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

На странице блога «Контакты» мне захотелось разместить кнопки социальных сетей ведущие на мои профили.
Чтобы вы, читатели моего блога, могли связаться со мной в социальных сетях или добавиться ко мне в друзья.
В принципе «зарядить» иконку социальной сети ссылкой на профиль , то есть сделать картинку ссылкой совершенно не сложно.
Достаточно привычным образом загрузить картинку в текст страниц, выделить ее, нажать на значок цепочки  и вставить ссылку.
Все. Картинка станет активной и направит кликнувшего по ней в новое окно  в браузере с нужной страницей в интернете.

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

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

Но если картинок несколько, например иконок соц сетей, и их вставлять в запись поочередно, то они «встанут» в вертикальный ряд — одна под другой.
А мне было необходимо выставить их в горизонтальный ряд.
Готовых решений я не нашла в интернете, поэтому пришлось мастерить самой.
И заодно решила пошагово все свои действия описать здесь. Авось пригодится кому
Итак, приготовим картинки. Точнее иконки социальных сетей, в которых у вас есть личные странички. И куда вы хотите привести своих читателей  через создаваемые кнопки.
Создаем новую страницу с названием «Контакты» или открываем для редактирования уже созданную ранее.
Загружаем одну из заготовленных иконку социальных сетей.
Если на вашем блоге иконки оформляются в рамочку, то вот здесь я рассказываю о нехитром способе «Как убрать рамку вокруг картинки»
Загрузили картинку  на страницу

и переходим во вкладку «Текст»
Во вкладке «Текст» картинка представляет собой код.
 Выделяем его и копируем с помощью сочетаний клавиш 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 не будет опубликован. Обязательные поля помечены *