Кнопки соц сетей в шапке блога blogger



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


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

Работать будем в шаблоне блога. В blogger идем в шаблон, делаем резервную копию. Далее изменить шаблон. Сразу после открывающего тэга <body> вставляем код кнопок


Скопируйте код

 <div class='social'>
 <ul>
    <li class='twitter'><a href='http://twitter.com/viola' title='Follow Us'>Twitter</a></li>
    <li class='facebook'><a href='http://www.facebook.com/olga.' title='Join with Us'>Facebook</a></li>
             <li class='rss'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe RSS Feed'>RSS Feed</a></li>
 </ul>
        </div>

Выделенное жирным шрифтом измените на свои адреса в социальных сетях. Адрес фида я не вставляла. Если у Вас есть аккаунт Feedburner, при нажатии на кнопку RSS откроется страница подписки Вашего блога на канал RSS. 

Зеленым цветом-измените при желании текст при наведении мыши на кнопку.

Следующий шаг ищем строку <b:skin>...</b:skin>, нажимаем слева на стрелочку и прокручиваем немного вниз, находим строку ]]></b:skin> и выше вставляем код CSS

/* Social */
.social {
  float:right;
  width:360px;
  margin:10px 0;
  padding:0;
}
.social ul{
  float:left;
  margin: 0;
}
.social ul li{
  float:left;
  padding: 0 0 0 20px;
  margin-left:15px;
  list-style:none;
}
.social ul li.facebook{
  background: url(http://3.bp.blogspot.com/-bNWy2gHuHho/Tv_FOLH7qWI/AAAAAAAAD5w/0YPQlFVEYvY/s000/facebook.gif) no-repeat 0 2px;
}
.social ul li.twitter{
  background: url(http://3.bp.blogspot.com/-f7TmoSKM8c0/Tv_FO33Df5I/AAAAAAAAD54/PvEWoqEIyPM/s000/twitter.gif) no-repeat 0 2px;
}
.social ul li.rss{
  background: url(http://3.bp.blogspot.com/-KrQv1hOjvOA/Tv_FOwoavfI/AAAAAAAAD6A/tWuwX3jHhEM/s000/rss.png) no-repeat 0 2px;
}
.social ul li a{
  color: #eee;font-size:16px;
}

Коричневый цвет: положение кнопок от верха и размер шрифта названия кнопок Twitter, Facebook, RSS Feed; сиреневым-расположение названия социальных сетей от кнопок (картинок); синим настройте положение от правого края.

Выделенное жирным шрифтом это адреса иконок (кнопок). Можно их изменить и вставить свои кнопочки.

На сегодня вся информация. Надеюсь, что такие кнопочки понравятся и уютно устроятся в Ваших блогах. Будут вопросы по установке, задавайте в комментариях. Всего доброго.

Почитайте другие интересные статьи:



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


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

0 коммент. :

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


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

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

Имя

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

Сообщение *