Меню горизонтальное с соц кнопками для блоггер Проще не бывает



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

Поэтому сегодня предлагаю создать горизонтальное меню простым способом добавить гаджет HTML/JavaScript, преобразуя текст в активные ссылки, и добавим HTML коды социальных кнопок.

На скриншоте варианты моих наработок, кликните по рисунку

Варианты оформления горизонтального меню

Как в гаджете преобразовать текст в активную ссылку, почитайте в статье Сделать текст активной ссылкой в гаджете blogger Создать почту интернета Microsoft Outlook.com

Это готовый HTML код

<a href="адрес ссылки">Главная &#9658;</a>
<a href="адрес ссылки">Содержание &#9658;</a>
<a href="адрес ссылки">Контакты &#9658;</a>
<a href="адрес ссылки">HTML &#9658;</a>
<a href="адрес ссылки">CSS &#9658;</a>
<a href="адрес ссылки">Дизайн &#9658;</a>
<a href="адрес ссылки">Инструменты &#9658;</a>
<a href="адрес ссылки">Сервисы &#9658;</a>

<a href="адрес ссылки"><img border="0" height="36" src="http://s1.iconbird.com/ico/1012/MinimalistSocial/w128h1281350926611Facebook2.png" width="36" /></a>
<a href="адрес ссылки"><img border="0" height="36" src="http://s1.iconbird.com/ico/1012/MinimalistSocial/w128h1281350926620Google2.png" width="36" /></a>
<a href="адрес ссылки"><img border="0" height="36" src="http://s1.iconbird.com/ico/1012/MinimalistSocial/w128h1281350926675Twitter2.png" width="36" /></a>
<a href="адрес ссылки"><img border="0" height="36" src="http://s1.iconbird.com/ico/1012/MinimalistSocial/w128h1281350926652RSS2.png" width="36" /></a>
<a href="адрес ссылки"><img border="0" height="36" src="http://s1.iconbird.com/ico/0512/odernWebSocialIcons/w64h641337455443youtube.png" width="36" /></a>


Вам остаётся только вставить url адреса ссылок и профилей социальных сетей. Выделенное жирным голубым-код HTML символа; сиреневым цветом-размеры кнопок социальных сетей.

Символы на любителя, как вариант вертикальная линия или угловые скобки с клавиатуры, здесь уже выбор за Вами.

Кнопки соц сетей можно выбрать и вставить другие. В этой статье найдете варианты Красивые кнопки социальных сетей для блогов blogspot.

С этим HTML кодом меню будет выглядеть простенько, возможно кому-то понравится такой вариант. Но я предложу Вам стиль CSS, где чуточку оформим оригинальнее, используя свойство box-shadow, придадим тень блоку меню и подчеркнем снизу border-bottom сплошной цветной линией solid.

Стиль CSS

<style type="text/css">
#HTML14{ *// ID гаджета меню
width:100%; *// ширина
height: 35px;  *// высота
margin:5px auto;
padding:7px; *// положение текста
border-bottom:9px solid #03b4cc; *// форма, размер и цвет линии снизу
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
</style> 


Стиль CSS вставьте добавить гаджет и сохраните внизу макета блога или, как обычно в шаблоне выше строки ]]></b:skin>, не забудьте удалить тэг <style></style>.

Я тестировала только на родных шаблонах блоггер, поэтому цвет и размер шрифта настраивайте в дизайнере шаблонов.

Например, в шаблоне "Простой" вкладка текст страницы, а "Венецианское окно" вкладка ссылки. При желании посмотрите наглядный пример в тестовых блогах: шаблон простой и венецианское окно

В некоторых шаблонах происходит одновременно увеличение размера шрифта ссылок (это наше меню) и текста на страницах. Если Вам не подходит такое соотношение, добавьте в стиль CSS размер шрифта: font-size: 16px;

И последнее, Вы обратили внимание на фишку?, у меня добавлены в меню скрипты приветствия и информер посещений читателями. Скрипты в статьях:


Коды скриптов или свой вариант добавляйте вместо кнопок соц сетей. Все вопросы задавайте в комментариях, или работает форма для связи. Удачи всем и всего доброго.
Читайте также:

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 11/01/2016 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *