Виджет подписки по E-mail и кнопок поделиться в соц сетях



Для блогов Blogspot красивый виджет Поделиться и Подписаться


Доброго времени суток всем ! Сегодня для блогов Blogspot предлагаю еще один виджет социальных кнопок в комплекте подписки на обновления блога. Пример можно посмотреть в тестовом блоге, в правой колонке под слайдером.

Установка в блог виджета поделиться в соц сетях и подписаться на почтовый ящик
Виджет устанавливаем в черновике blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить в макете блога. Но перед сохранением настройте его под дизайн своего блога. Скопируйте код ниже :




<style type="text/css">
#Trickstoo-sidebar-wrap
{
height:250px;
width:260px;
background:#F2F2F2;
color:#009;
font-family:Georgia, "Times New Roman", Times, serif;
padding:3px;
border:3px solid #0e5198;
border-radius: 5px;
}
#Trickstoo-sidebar-icons-wrap
{
text-align:center;
height:50px;
padding: 5px 0px;
}
.Trickstoo-sidebar-icons
{
height:40px;
width:40px;
float:left;
margin-left:15px;
margin-bottom:10px;
}
.Trickstoo-sidebar-icons:hover
{
opacity: .7;
filter:alpha(opacity=70);
height:40px;
width:40px;
cursor:pointer;
}
.Trickstoo-sidebar-lbl
{
color:#0e5198;
font-weight:500;
text-align:center;
padding: 2px 0px 10px 0px;
}
.UT-email-field
{
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#fff url(http://1.bp.blogspot.com/-aN-9NuB-9t0/UbSeXzRF5II/AAAAAAAAApc/bn-lNSJ6VaY/s1600/icons.png) no-repeat 0 -27px;
border:1px solid #dcdcdc;
border-radius:4px;
color:#444;
margin:0 0 15px;
padding:10px 40px;
width: 166px;
}
#Trickstoo-sidebar-submit
{
height:40px;
width:150px;;
background:#0e5198;
color:#FFF;
font-weight:bold;
text-align:center;
margin-left: 42px;
border-radius: 10px;
}
</style>

<div id="Trickstoo-sidebar-wrap">
<div class="Trickstoo-sidebar-lbl">Подписаться на Рассылку!</div>
<div id="Trickstoo-sidebar-icons-wrap">
<a href="https://www.facebook.com/ХХХХ927" rel="nofollow" title="Like us">
<img src="http://1.bp.blogspot.com/-rom0fP44ejo/Ucl-v1Bu20I/AAAAAAAAAsA/2Ywu0ZE_j9o/s1600/facebook-v3.png" class="Trickstoo-sidebar-icons" alt="FB"/>
</a>
<a href="https://www.twitter.com/УУУУУ" rel="nofollow" title="Follow Us">
<img src="http://4.bp.blogspot.com/-p6SV9eQtPEI/Ucl-wXggpLI/AAAAAAAAAsE/oEtli0Ob1Vw/s1600/twitter-v3.png" class="Trickstoo-sidebar-icons" alt="TW" />
</a>
<a href="https://plus.google.com/77771220847694180518" rel="nofollow" title="Follow us">
<img src="http://1.bp.blogspot.com/-Uy19r1CpVog/Ucl-vYYftQI/AAAAAAAAArw/gDDxoH2mlg8/s1600/google+-v3.png" class="Trickstoo-sidebar-icons" alt="G+"/>
</a>
<a href="http://feedburner.google.com/fb/a/maverify?uri=blogspot/tPDSo&amp;loc=ru_RU" title="Subscribe Us">
<img src="http://1.bp.blogspot.com/-9mP99wndEk0/Ucl-v09LxKI/AAAAAAAAAr0/aaxYZQUsPrY/s1600/rss-v3.png" class="Trickstoo-sidebar-icons" alt="RSS"/>
</a>
</div>
<div class="Trickstoo-sidebar-lbl">Получайте последние обновления первыми<br />на Ваш почтовый ящик</div>
<form action="http://feedburner.google.com/fb/a/maverify?uri=blogspot/tPDSo&amp;loc=ru_RU" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=trickstoo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="trickstoo-email-field" name="email" autocomplete="off" placeholder="Ваш e-mail адрес"/><br />
<input type="hidden" value="trickstoo" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Подписаться" id="Trickstoo-sidebar-submit"/>
</form>
</div>



Самые необходимые настройки :



height:250px; width:260px; - высота и ширина виджета; border:3px solid #0e5198; - цвет и размер рамки (толщина); www.facebook.com/ХХХХ927 - ваш адрес в Facebook; 

www.twitter.com/УУУУУ - ваш адрес в Twitter; plus.google.com/77771220847694180518 - адрес страницы в Google+; 

http://feedburner.google.com/fb/a/maverify - адрес Feedburner; color:#0e5198; - цвет слова Подписаться; выделенное у меня красным цветом курсивом можно изменить на свой текст; С остальными цветами не разбиралась, будет желание экспериментируйте. На этом у меня все. Всего Вам доброго.




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


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

0 коммент. :

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

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

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

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

Имя

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

Сообщение *