Социальный виджет подписаться для Blogger

Приветствую вас, дорогой читатель! В настоящее время социальный виджет - блок подписки на обновление блога, является одним из важных составляющих вашего Blogger. Поэтому, я хочу поделиться с вами красивыми социальными виджетами на боковую панель блога. Блок "Подписаться" содержит социальные кнопки Google plus, Facebook, Twitter, подписку по электронной почте и так далее.

Виджеты легко настроить и установить, выглядят очень красиво и прекрасно подойдут для вашего блога.

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

Для того, чтобы установить простую социальную коробку на боковую панель блога Blogger, зайдите в панель инструментов Blogger - Дизайн - Добавить гаджет HTML/JavaScript. Даём любое название виджету и в его поле вставляем код:

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div>
<br/>
<div style='text-align: center'>
<a href="https://facebook.com/zagulyaevsv"><img src="http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a>
<a href="https://twitter.com/zagulyaevsv"><img src="http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png" /></a>
<a href="https://plus.google.com/111471932706805203111"><img src="http://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a>
<a href="http://www.feedburner.com/blogspot/jizET"><img src="http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a>
<p>Подписаться на электронную рассылку:</p>
<div><form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jizET" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jizET', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="blogspot/jizET" /> <input name="loc" type="hidden" value="en_US" /><input name="email" autocomplete="off" placeholder="Введите ваш email "/> <input title="" type="submit" value="Подписаться!" /></form> </div></div></div></div>

В коде нужно заменить мои данные на ваши: zagulyaevsv, 111471932706805203111, blogspot/jizET. Виджет - Bloggertrix

Стильный социальный виджет с блоком подписки на обновления блога

Такой социальный блок "Подписаться" устанавливается так же, при помощи гаджета HTML/JavaScript. В поле гаджета вставьте следующий код стиля:

<style> &nbsp;#socialnetworking { &nbsp; &nbsp; border: 1px solid #ebebeb; &nbsp; &nbsp; width: 280px; } &nbsp;.fb-likebox { &nbsp; &nbsp; padding: 10px 10px 0 10px; &nbsp; &nbsp; border-bottom: 1px solid #ebebeb; } &nbsp;.googleplus { &nbsp; &nbsp; background: #787c7b; &nbsp; &nbsp; border-top: 1px solid white; &nbsp; &nbsp; border-bottom: 1px solid #ebebeb; &nbsp; &nbsp; font-size: 12px; &nbsp; &nbsp; color: #000; &nbsp; &nbsp; padding: 9px 11px; &nbsp; &nbsp; line-height: 1px; &nbsp; &nbsp; font-family: Verdana, Geneva, sans-serif; } &nbsp;.googleplus span { &nbsp; &nbsp; color: #000; &nbsp; &nbsp; font-size: 11px; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; margin: 9px 70px; &nbsp; &nbsp; width: 280px; } &nbsp;#widgetbox { &nbsp; &nbsp; background: #EBEBEB; &nbsp; &nbsp; padding: 2px 8px 2px 3px; &nbsp; &nbsp; text-align: right; &nbsp; &nbsp; border-image: initial; } &nbsp;#widgetbox .author-credit a { &nbsp; &nbsp; font-size: 10px; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; text-shadow: 1px 1px white; &nbsp; &nbsp; color: #1E598E; &nbsp; &nbsp; text-decoration: none; } &nbsp;.g-plusone { &nbsp; &nbsp; float: left; } &nbsp;.twitter { &nbsp; &nbsp; background: #b1dff5; &nbsp; &nbsp; border-top: 1px solid #fff; &nbsp; &nbsp; padding: 10px; } &nbsp;.fb { &nbsp; &nbsp; background: #0a94d4; &nbsp; &nbsp; border-top: 1px solid white; &nbsp; &nbsp; border-bottom: 1px solid #ebebeb; &nbsp; &nbsp; font-size: 12px; &nbsp; &nbsp; color: #000; &nbsp; &nbsp; padding: 9px 11px; &nbsp; &nbsp; line-height: 1px; &nbsp; &nbsp; font-family: Verdana, Geneva, sans-serif; } &nbsp;.fb span { &nbsp; &nbsp; color: #000; &nbsp; &nbsp; font-size: 11px; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; margin: -12px 100px; &nbsp; &nbsp; width: 280px; } &nbsp;.pterest { &nbsp; &nbsp; background: #EFF5FB; &nbsp; &nbsp; border-bottom: 1px solid #ebebeb; &nbsp; &nbsp; font-size: 12px; &nbsp; &nbsp; color: #000; &nbsp; &nbsp; padding: 9px 11px; &nbsp; &nbsp; line-height: 1px; &nbsp; &nbsp; font-family: Verdana, Geneva, sans-serif; &nbsp; &nbsp; border-top: 1px solid #ddd; } &nbsp;#email-news-subscribe .email-box { &nbsp; &nbsp; padding: 5px 10px; &nbsp; &nbsp; font-family: "Arial","Helvetica",sans-serif; &nbsp; &nbsp; border-top: 0; &nbsp; &nbsp; border-image: initial; &nbsp; &nbsp; height: 35px; &nbsp; &nbsp; background: #fbfbfb; &nbsp; &nbsp; width: 260px; } &nbsp;#email-news-subscribe .email-box input.email { &nbsp; &nbsp; background: #FFFFFF; &nbsp; &nbsp; border: 1px solid #dedede; &nbsp; &nbsp; color: #999; &nbsp; &nbsp; padding: 7px 10px 8px 10px; &nbsp; &nbsp; -moz-border-radius: 3px; &nbsp; &nbsp; -webkit-border-radius: 3px; &nbsp; &nbsp; -o-border-radius: 3px; &nbsp; &nbsp; -ms-border-radius: 3px; &nbsp; &nbsp; -khtml-border-radius: 3px; &nbsp; &nbsp; border-radius: 3px; &nbsp; &nbsp; border-image: initial; &nbsp; &nbsp; font-family: "Arial","Helvetica",sans-serif; } &nbsp;#email-news-subscribe .email-box input.email:focus { &nbsp; &nbsp; color: #333 } &nbsp;#email-news-subscribe .email-box input.subscribe { &nbsp; &nbsp; background: -moz-linear-gradient(center top,#afafaf 0,#FF9B00 100%); &nbsp; &nbsp; background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); &nbsp; &nbsp; background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); &nbsp; &nbsp; -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); &nbsp; &nbsp; font-family: "Arial","Helvetica",sans-serif; &nbsp; &nbsp; border-radius: 3px; &nbsp; &nbsp; -moz-border-radius: 3px; &nbsp; &nbsp; -webkit-border-radius: 3px; &nbsp; &nbsp; border: 1px solid #cc7c00; &nbsp; &nbsp; color: white; &nbsp; &nbsp; text-shadow: #d08d00 1px 1px 0; &nbsp; &nbsp; padding: 7px 14px; &nbsp; &nbsp; margin-left: 3px; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; font-size: 12px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; border-image: initial; } &nbsp;#email-news-subscribe .email-box input.subscribe:hover { &nbsp; &nbsp; background: #ff9b00; &nbsp; &nbsp; background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00); &nbsp; &nbsp; background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); &nbsp; &nbsp; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); &nbsp; &nbsp; outline: 0; &nbsp; &nbsp; -moz-box-shadow: 0 0 3px #999; &nbsp; &nbsp; -webkit-box-shadow: 0 0 3px #999; &nbsp; &nbsp; box-shadow: 0 0 3px #999 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); &nbsp; &nbsp; background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); &nbsp; &nbsp; -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00); &nbsp; &nbsp; border-radius: 3px; &nbsp; &nbsp; -moz-border-radius: 3px; &nbsp; &nbsp; -webkit-border-radius: 3px; &nbsp; &nbsp; border: 1px solid #cc7c00; &nbsp; &nbsp; color: #FFFFFF; &nbsp; &nbsp; text-shadow: #d08d00 1px 1px 0 } &nbsp; &nbsp;</style>

И добавьте к стилю другой код:

<div id="socialnetworking"> &nbsp;<!-- Begin Widget --> &nbsp;<div> &nbsp; <!-- Facebook --> &nbsp; <center> &nbsp; <a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/111471932706805203111" target="_blank"> &nbsp; <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-google.png" /></a> &nbsp; <a style="margin-right: 10px;" href="http://www.facebook.com/zagulyaevsv" target="_blank" rel="nofollow"> &nbsp; <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png" /></a> &nbsp; <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/shkolablogger/Kyok" target="_blank" rel="nofollow"> &nbsp; <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-rss.png" /></a> &nbsp; <a style="margin-right: 10px;" href="http://twitter.com/#!/zagulyaevsv" target="_blank" rel="nofollow"> &nbsp; <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png" /></a> &nbsp; </center> &nbsp;</div> &nbsp;<div> &nbsp; <span><font><font color="white">Рекомендовать в Google </font></font></span> &nbsp; <!-- GooglePlus --> &nbsp; <!-- Place this tag where you want the &nbsp;1 button to render --> &nbsp; <g:plusone size="medium"></g:plusone> &nbsp; <!-- Place this render call where appropriate --> &nbsp; <script type="text/javascript"> &nbsp; (function() { &nbsp; &nbsp; var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; &nbsp; &nbsp; po.src = 'https://apis.google.com/js/plusone.js'; &nbsp; &nbsp; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); &nbsp; })(); </script> &nbsp; <script type="text/javascript"> &nbsp; gapi.plusone.render &nbsp; ( &nbsp; &nbsp;'plusone-div', &nbsp; &nbsp;{ &nbsp; &nbsp; "size": "medium", &nbsp; &nbsp; "count": "true" &nbsp; &nbsp;} &nbsp; ); &nbsp; </script> </div> <div> <!-- Twitter --> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fzagulyaevsv&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"> </iframe> <span><font color="white">Like Us On Facebook</font></span> </div> <div> <!-- Twitter --> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=zagulyaevsv&amp;show_count=true&amp;show_screen_name=true&amp;size=m" style="width: 244px; height: 20px; " title="Twitter Follow Button"> </iframe> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> </div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <div> &nbsp;<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=shkolablogger/Kyok', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> &nbsp; <input type="text" style="width: 140px; font-size: 12px;" id="email" name="email" value="Введите ваш Email.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/> &nbsp; <input type="hidden" value="shkolablogger/Kyok" name="uri"/> &nbsp; <input type="hidden" name="loc" value="en_US"/> &nbsp; <input name="commit" type="submit" value="Подписаться"/> &nbsp;</form> </div> </div> <!-- End Widget --> </div>

Здесь тоже меняем мои данные на свои, все, что найдёте: страница блога на Google plus: 111471932706805203111, Twitter и страница на Facebook: zagulyaevsv, подписка по RSS и по почте: shkolablogger/Kyok. Естественно можно все надписи заменить на нужные вам. Вроде всё. Удачи. До новых встреч.

Виджет наверное - gameryards

С уважением, Сергей