Как разместить графические кнопки с ссылкой и эффектом подсветки в сообщениях на блогах Blogspot.

Для того чтобы устанавливать кнопки в сообщениях с эффектом наведения курсора, (к примеру, эффект подсветки) в сообщениях на блогах бесплатной площадки Blogspot, следует проделать следующие действия.

• Заранее делаем в любом редакторе графические кнопки для сайта двух видов, задаем им разные имена и сохраняем на компьютере.
• Открываем сообщение (статью) или создаем новое в панели управления блогом на blogger.
• В меню текстового редактора выбираем иконку «вставить изображение» и нажимаем.
• В всплывшем окне нажимаем отдельную кнопку «выбрать файлы», выбираем на компьютере заранее подготовленные два файла кнопок и загружаем в библиотеку блога.
• Левой кнопкой мышки выделяем сначала одну кнопку, затем щелкаем правой кнопкой и выбираем «копировать URL картинки». Скопированный URL вставляем в любой текстовой редактор и сохраняем.
• То же самое делаем с изображением второй кнопки.

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

Первая кнопка -
https://lh5.googleusercontent.com/-ssi fmxHoTc/T4gxNlOKVTI/AAAAAAAAAJE/xur8_DizYDg/h120/button-4573.png

Вторая кнопка -
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPn1Zzji5khbQvNuftjkp5YT-_0vu9XuzIw3URaPezistt_MLXcPsT-sg7R78lsttp0u7MnYIECmYvJJhQNhfVdzzxPXKokN7-D3o6z9K0E9Ji_BRjSZEgLa_m4Aw2m5hGv2KgVSHIk0Q/h120/button-6512.png

• Затем заранее в тот же текстовой редактор добавляем URL адрес будущей ссылки. Для примера я подготовил ссылку на онлайн генератор кноки для сайта AsButtonGen.

Ссылка выглядит так -
 http://vorabota.ru/zdes-mozhno-samostoyatelno-sozdat-knopki-dlya-sayta-v-graficheskom-onlayn-generatore.html

• Затем создаем конструкцию с атрибутом «onmouseover», который задает эффект наведения курсора, вот такого вида:

<a href=" http://vorabota.ru/zdes-mozhno-samostoyatelno-sozdat-knopki-dlya-sayta-v-graficheskom-onlayn-generatore.html " target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNrXj5eB3pHCS6Z2g2xxXW7nO2g9dfkVvHbA_W3KMezzB6ememGSeGcuQcSg4gjNIr4h60fqZ0XOH20De-1Lr3HiYXbaAIvw_76Fb3-ak1oUitt82wzkS_3x96aCPCvUvB89KOCii8Sf1/h120/button-4573.png" border="0" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPn1Zzji5khbQvNuftjkp5YT-_0vu9XuzIw3URaPezistt_MLXcPsT-sg7R78lsttp0u7MnYIECmYvJJhQNhfVdzzxPXKokN7-D3o6z9K0E9Ji_BRjSZEgLa_m4Aw2m5hGv2KgVSHIk0Q/h120/button-6512.png';" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNrXj5eB3pHCS6Z2g2xxXW7nO2g9dfkVvHbA_W3KMezzB6ememGSeGcuQcSg4gjNIr4h60fqZ0XOH20De-1Lr3HiYXbaAIvw_76Fb3-ak1oUitt82wzkS_3x96aCPCvUvB89KOCii8Sf1/h120/button-4573.png';"/></a>

Хочу обратить внимание на то, что URL одной из кнопок повторяется в конструкции дважды. А атрибут " target="_blank" означает, что адрес ссылки откроется в новом окне.

• Для увеличения значения ссылки и попадания изображения кнопки в индекс поисковых систем рекомендуется добавить атрибут " alt" и "title". В моем примере получилась вот такая длинная конструкция.

<a href="http://vorabota.ru/zdes-mozhno-samostoyatelno-sozdat-knopki-dlya-sayta-v-graficheskom-onlayn-generatore.html " target="_blank" alt="Кнопки для сайта "title="Онлайн генератор кнопок для сайтов AsButtonGen"><img src="https://lh5.googleusercontent.com/-ssi-fmxHoTc/T4gxNlOKVTI/AAAAAAAAAJE/xur8_DizYDg/h120/button-4573.png" border="0" onmouseover="this.src='https://lh5.googleusercontent.com/-_FrySaZJd0o/T4gxO3hp7wI/AAAAAAAAAJM/Bs8k3OqQTJo/h120/button-6512.png';" onmouseout="this.src='https://lh5.googleusercontent.com/-ssi-fmxHoTc/T4gxNlOKVTI/AAAAAAAAAJE/xur8_DizYDg/h120/button-4573.png';"/></a>

• Когда все подготовлено (следует внимательно следить за всеми знаками и пробелами), всю конструкцию вставляем через HTML редактор в панели управления в текст сообщения. И сохраняем.

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

Другие заметки схожей тематики