Вроде бы и сайту уже более пяти лет, и все нормально шло, все работало, и тут, где-то увидел, и загорелся, и просто возникла жизненная необходимость сделать "живые кнопки" для сайта, а, когда узнал, что есть статистика, что "живые кнопки" кликаются почти на 50 процентов чаще, то рвение удвоилось.
Прочитал сотню статей в интернете, пытался вникнуть, разобраться, люди лезут в такие дебри, так все замысловато, а, как водится, самое простое и оптимальное решение было совсем рядом. Сейчас об этом и поговорим.
Блок "живых кнопок" соц.сетей есть на "Вебпомощнике" в левом и правом колонтитуле. А это кнопки со страницы моего сайта "Пешком по Крыму"
Алгоритм совсем прост. Создаем картинку Кнопка 1, создаем картинку Кнопка 2, другого цвета, или просто потемнее.
Кнопки с надписями я делаю с помощью онлайн-конструктора Button Factory
Кнопка 1
Кнопка 2
Загружаем их на какой-нибудь фото хостинг, Google-фото, или Яндекс-фото, копируем их ссылки. Далее, на странице, где будет располагаться кнопка, пишем HTML-код
Вот, что у нас получилось:
Если хотите сделать блок из нескольких кнопок, то пишете:
Блок кнопок соц. сетей.
Можно сделать аналогичным способом.
Только, если хотите расположить их в левом, или правом колонтитуле сайта, делается это при помощи гаджета HTML/ JavaScript. В редакторе Блоггера располагаете кнопки в одну строку, как показано выше, копируете код HTML, в левом, или правом колонтитуле добавляете гаджет HTML/ JavaScript, вставляете в него код, и при помощи изменения размера кнопок и пробелов, добиваетесь необходимого вам вида блока кнопок.
Прочитал сотню статей в интернете, пытался вникнуть, разобраться, люди лезут в такие дебри, так все замысловато, а, как водится, самое простое и оптимальное решение было совсем рядом. Сейчас об этом и поговорим.
Блок "живых кнопок" соц.сетей есть на "Вебпомощнике" в левом и правом колонтитуле. А это кнопки со страницы моего сайта "Пешком по Крыму"
Алгоритм совсем прост. Создаем картинку Кнопка 1, создаем картинку Кнопка 2, другого цвета, или просто потемнее.
Кнопки с надписями я делаю с помощью онлайн-конструктора Button Factory
Загружаем их на какой-нибудь фото хостинг, Google-фото, или Яндекс-фото, копируем их ссылки. Далее, на странице, где будет располагаться кнопка, пишем HTML-код
<div dir="ltr" style="text-align: left;" trbidi="on">
Зеленым отмечены размеры кнопки на странице.<a a="" class="button" href="ссылка, на которую ведет кнопка" imageanchor="1"><img border="0" height="27" onmouseout="this.src='ссылка на картинку Кнопка 1'; this.width=305;this.height=27;" onmouseover="this.src='ссылка на картинку Кнопка 2'; this.width=305;this.height=27;" src="ссылка на картинку Кнопка 1" title="текст пояснения" width="305" /></a><br /><br /></div>
Вот, что у нас получилось:
Если хотите сделать блок из нескольких кнопок, то пишете:
<div dir="ltr" style="text-align: left;" trbidi="on">
<a a="" class="button" href=.............</a><a a="" class="button" href="ссылка, на которую ведет кнопка" imageanchor="1"><img border="0" height="27" onmouseout="this.src='ссылка на картинку Кнопка 1'; this.width=305;this.height=27;" onmouseover="this.src='ссылка на картинку Кнопка 2'; this.width=305;this.height=27;" src="ссылка на картинку Кнопка 1" title="текст пояснения" width="305" /></a>
где - это один пробел между кнопками, так же размеры пробелов между кнопками можно регулировать кнопкой "Пробел" на клавиатуре в редакторе Блоггера, а с помощью кнопки "Enter" на клавиатуре, там же, в редакторе, можно расположить кнопки одна под другой.<br /><br /></div>
Блок кнопок соц. сетей.
Можно сделать аналогичным способом.
Только, если хотите расположить их в левом, или правом колонтитуле сайта, делается это при помощи гаджета HTML/ JavaScript. В редакторе Блоггера располагаете кнопки в одну строку, как показано выше, копируете код HTML, в левом, или правом колонтитуле добавляете гаджет HTML/ JavaScript, вставляете в него код, и при помощи изменения размера кнопок и пробелов, добиваетесь необходимого вам вида блока кнопок.