Горизонтальное меню с кнопками социальных сетей



Элегантное горизонтальное меню с кнопками социальных сетей


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

Меню устанавливаем с помощью гаджета: дизайн-добавить гаджет, предварительно необходимо будет его настроить.

Чтобы не отнимать Ваше драгоценное время, приступим к работе. Для начала посмотрите скриншот. Желающие могут перейти по ссылке в тестовый блог и посмотреть внизу страницы, так сказать в реальном мире.
  

Установка и настройка меню в блоге блогспот

Копируем код ниже:


 <style>
#bsCSSmenu{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
width:940px;
 margin: 0 0 0 0px;
 padding: 12px 0 8px 0;
 clear: both;
 background: #111111 left bottom no-repeat;
}
#bsCSSmenu .catList{
 padding: 4px 0 0 35px;
 float: left;
    margin-top:-3px;
}
#bsCSSmenu .pageList{
 padding: 8px 0px 0 0;
 float: right;
}
#bsCSSmenu ul li{
 float: left;
 margin: 0 18px 0 0 ;
}
#bsCSSmenu a{
 color: #fff;
    list-style:none;
    text-decoration: none;
}
#bsCSSmenu a:hover{
 color: #919191;
}
#bsCSSmenu li {
list-style:none;
text-decoration:none;
}
#bssearch{
 margin: -2px 20px 0 0;
 float: right;
}
#bssocial{
 margin-left: 100px;
}
<!--Menu by www.bdblogov.ru-->
</style>
<div class="bsmenustart" id="bsCSSmenu">
<ul class="catList">
<li class="bscat-item-1"><a href="#">Главная страница</a></li>
<li class="bscat-item-2"><a href="#">Об авторе</a></li>
<li class="bscat-item-3"><a href="#">Контакты</a></li>
<li class="bscat-item-4"><a href="#">AdSense</a></li>
<li class="bscat-item-5"><a href="#">Widget</a></li>
<li class="bscat-item-6"><a href="#">HTML</a></li>
<li class="bscat-item-7"><a href="#">RSS</a></li>
<li class="bscat-item-8"><a href="#">CSS</a></li>
</ul>

<div id="http://feeds.feedburner.com/blogspot/tPDSo">
<a alt="Subscribe to RSS" class="http://feeds.feedburner.com/blogspot/tPDSo" href="http://feeds.feedburner.com/blogspot/tPDSo" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="http://4.bp.blogsp
ot.com/-GV5tBPml5W4/UasEi3SU2rI/AAAAAAAADRA/qrvW3HxfAQo/s1600/BS+RSS-icon+Menu.png" style="" /></a>
<a alt="Follow Us" class="http://feeds.feedburner.com/blogspot/tPDSo" href="http://twitter.com/viola " target="_blank" title="Follow Us"><img src="http://4.bp.blogspot.com/-flfZva27Xjw/UasEjeAUj1I/AAAAAAAADRQ/VOor94MgHgk/s1600/BS+twitter-icon+menu.png" /></a>
<a alt="Become a Fan" class="bssocialicon" href="http://www.facebook.com/olga" target="_blank" title="Become a Fan"><img src="http://2.bp.blogspot.com/-nWh261blWNY/UasEi1YvFEI/AAAAAAAADRE/iWbAORIPWuY/s1600/BS+facebook-icon+menu.png" /></a></div>
</div>
  


Настройки:

width:940px;-ширина меню; #-URL адрес ссылки; Главная страница - название ссылок;  

http://feeds.feedburner.com/blogspot/tPDSo - feed адрес блога;

http://twitter.com/viola - адрес в Twitter;  

http://www.facebook.com/olga - адрес в Facebook.

Посмотрите статьи на похожие темы: Оригинальное горизонтальное меню для блога; Изящное горизонтальное меню для блога Blogspot; Так же можете перейти в меню содержание блога, в разделе меню почитайте о других видах навигации. 

На этом у меня все. Комментируйте, делитесь с друзьями в социальных сетях. Всего наилучшего.


Автор статьи ✎ Olga Protasova Выпуск ✹ 3/21/2014 Ярлыки ►


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

0 коммент. :

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


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

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

Имя

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

Сообщение *