Эффектный компактный виджет социальных кнопок



Чудо виджет Подписаться на обновления блога и кнопок социальных сетей


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

Установка и настройка виджета кнопок соц сетей

А теперь копируем код ниже

<style type="text/css">
 /* Delete form Here*/  
img.beintouch:hover {
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
/* Delete to Here*/
.emailtext {
    background: url("http://2.bp.blogspot.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 2px #CCCCCC inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0 0 #ABAB12;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #444444;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
}
</style>
<table align="center" width="300px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/olga.protasova"><img src="http://2.bp.blogspot.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/viola/" rel="nofollow"><img src="http://3.bp.blogspot.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/blogspot/tPDSo" rel="nofollow"><img src="http://2.bp.blogspot.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
<div>Подпишитесь на новые записи блога</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/o&loc=ru_RU', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="NetOopsBloggerTricks" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Ваш e-mail..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Подписаться" title="" class="ebutton" alt="" />
</form>



Настройки:  width="300px-ширина виджета; http://www.facebook.com/olga.protasova-адрес в Facebook;
http://twitter.com/viola-адрес в Twitter; 
http://feeds.feedburner.com/blogspot/tPDSo-подписка на RSS; 
http://feedburner.google.com/fb/a/mailverify?uri=blogspot/o&loc=ru_RU - адрес feed подписки по E-mail. 

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

Почитайте мои статьи: Красивый виджет социальных кнопок;  Как вставить кнопки соц сетей в заголовок блога.


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


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

0 коммент. :

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


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

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

Имя

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

Сообщение *