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



Кнопки социальных сетей в заголовке блога



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

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

Желающим просмотреть посты, достаточно перейти по вкладке содержание блога, раздел-кнопки соц сетей.

На скриншоте показан пример таких кнопок, а посмотреть в живую можно в демо блоге.

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

Итак приступим: Копируем код ниже. Далее черновик blogger-шаблон-изменить шаблон. Не забываем делать резервную копию шаблона. В шаблоне находим строку <b:skin>...</b:skin>, нажимаем на стрелку слева и тихонько прокручиваем вниз. Над строкой ]]</b:skin> вставляем скопированный ниже код.  


/* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:20px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}


Настройки:  width:100%;-расположение кнопок; margin-left:6px;-расстояние между кнопками;

Это еще не все. Теперь нам надо вставить еще один код. В шаблоне находим строку 

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

 И над ней вставляем код ниже.


<div class='social-media-icons' id='social-icons'>

<ul>


<li class='media_icon'><a href='http://facebook.com/olga'><img border='0' src='http://2.bp.blogspot.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/viola'><img border='0' src='http://3.bp.blogspot.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/1Х53212ХХХХ94188/about'><img border='0' src='http://1.bp.blogspot.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/TsLmX'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

</ul></div>

Настройки:  http://facebook.com/olga - Ваш адрес в Facebook; http://twitter.com/#!/viola - Ваш адрес в Twitter; https://plus.google.com/1Х53212ХХХХ94188 - адрес в Google+; http://feedburner.google.com/fb/a/mailverify?uri=blogspot/TsLmX - feed адрес блога. Вот и все. Поработали и наслаждаемся. 

Да, когда будете искать строку заголовка в шаблоне, сверху в списке виджетов нажмите Header (заголовок). Будете знать, в какой области искать. Сегодня у меня все. Комментируйте, пишите отзывы, делитесь с друзьями. Всего доброго.


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


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

0 коммент. :

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


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

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

Имя

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

Сообщение *