Четыре плавающих социальных кнопки в одном виджете



Популярные плавающие кнопки социальных сетей


Как установить в блог плавающий виджет кнопок соц сетей

Здравствуйте дорогие гости и читатели. Согласно мнению пользователей интернета, социальные сети могут приносить до 30% трафика нашим блогам/сайтам, поэтому сегодня информация снова о кнопочках социальных сетей. Предлагаю уникальный плавающий виджет трех популярных кнопок: Facebook, Twitter, Google +; и окна подписки на RSS-канал блога. Согласитесь, очень удобно, тем более, что виджет плавающий и всегда на виду.

У меня в блоге (пока не удалила) слева установлен этот виджет, только без кнопки Twitter. Я что то не разобралась: имя пользователя вписала, а все равно пустое окно. Перешла по ссылке, пыталась создать виджет, результат нулевой. Решила пока удалить эту кнопку, может Вам удастся разобраться, тогда напишите мне пожалуйста. Итак поехали: вот код

<style>
img, a {    border: 0;  }  #on {    visibility: visible;  }  #off {    visibility: hidden;  }  #facebook_div {    width: 235px;    height: 236px;    overflow: hidden;  }  #twitter_div {    width: 246px;    height: 240px;    overflow: hidden;  }  #google_plus_div {    width: 290px;    height: 250px;    overflow: hidden;    margin-left: 5px;    margin-top: 1px;  }
#STfeedburner_div {    width: 300px;    height: 120px;    overflow: hidden;    margin-top: 5px;    margin-left: -4px;  }
#ST_div {    width: 300px;    height: 97px;    overflow: hidden;  }  /* right side style */   #facebook_right {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 270px;    position: fixed;    right: -239px;  }
#facebook_right img {    position: absolute;    top: -2px;    left: -35px;  }
#facebook_right iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    left: -2px;    top: -3px;  }
#twitter_right {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 250px;    height: 240px;    position: fixed;    right: -254px;  }
#twitter_right_img {    position: absolute;    top: -2px;    left: -35px;    border: 0;  }  #google_plus_right {    z-index: 10003;    background-color: #F2F2F2;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-right: 2px solid #0056a0;    border-left: 2px solid #0056a0;    width: 290px;    height: 250px; position: fixed; right: -294px;  }
#google_plus_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }
#feedburner_right {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right: 2px solid #5b5b5b;    border-left: hidden;    width: 300px;    height: 97px;    position: fixed;    right: -304px;  }
#feedburner_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }
#ST_right {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }
#ST_right img {    position: absolute;    top: -1px;    left: -101px;  }  /* left side style */   #facebook_left {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    left: -239px;  }  #facebook_left img {    position: absolute;    top: -2px;    right: -35px;  }
#facebook_left iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    right: -2px;    top: -3px;  }
#twitter_left {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 246px;    height: 240px;    position: fixed;    left: -254px;  }  #twitter_left_img {    position: absolute;    top: -2px;    right: -35px;    border: 0;  }
#google_plus_left {    z-index: 10003;    background-color: #006ec9;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-left: 2px solid #0056a0;    border-right: 2px solid #0056a0;    width: 290px;    height: 120px;    position: fixed;    left: -294px;  }
#google_plus_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }
#feedburner_left {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-left: 2px solid #5b5b5b;    border-right: hidden;    width: 300px;    height: 97px;    position: fixed;    left: -304px;  }
#feedburner_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #ST_left {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #ST_left img {    position: absolute;    top: -2px;    right: -101px;  }
.box-title1 {    border: 1px solid #ddd;    /*border-radius*/    -webkit-border-radius: 6px;    -moz-border-radius: 6px;    border-radius: 6px;    /*box-shadow*/    -webkit-box-shadow: 5px 5px 5px #CCCCCC;    -moz-box-shadow: 5px 5px 5px #CCCCCC;    box-shadow: 5px 5px 5px #CCCCCC;    padding: 10px;    margin: 10px 0;  }  .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2;    padding: 0px 8px 0px 8px;    color: #a19999;    font-size: 12px;    height: 25px;    width: 165px;    /*border-radius*/    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;  margin: 0px;  }
.submitbutton {  background: #FF8000;    border: 1px solid #F66303;    /*box-shadow*/    -webkit-box-shadow: 3px 3px 3px #666;    box-shadow: 3px 3px 3px #666;    font: bold 12px Arial, sans-serif;    color: #000000;    height: 25px;    padding: 0 12px 0 12px;    margin: 0 0 0 5px;    /*border-radius*/    -webkit-border-radius: 5px;    border-radius: 5px;    cursor: pointer;  }
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>  <script src="http://apis.google.com/js/plusone.js"  type="text/javascript"></script>  <script type="text/javascript">  jQuery(document).ready(function ()  {jQuery("#facebook_right").hover( function () { jQuery(this).stop(true,          false).animate( { right: 0  }, 500);  }, function () {  jQuery("#facebook_right").stop( true, false).animate(  {  right: -239 }, 500);  }); jQuery("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate(  { right: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { right: -254 }, 500);  });    jQuery("#google_plus_right").hover( function (){ jQuery(this).stop(true, false).animate( {  right: 0 }, 500); },  function () { jQuery("#google_plus_right").stop(  true, false).animate(  {  right: -294 },  500); }); jQuery("#feedburner_right").hover(  function (){ jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function (){ jQuery("#feedburner_right").stop( true, false).animate( { right: -304  },  500); }); }); </script>  
<br />
<div id="on">
<div id="facebook_right" style="top: 8%;">  
<div id="facebook_div">
<img alt="" src="https://lh3.googleusercontent.com/-c7j_1v090V4/UeWimQZ4dlI/AAAAAAAADBk/KbauGwsNp50/s101/fbfloat.jpg"/>    
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbdblogov&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 25%;"><div id="twitter_div"><img id="twitter_right_img" src="https://lh6.googleusercontent.com/-fem0XHsZeko/UiHzVpUe2yI/AAAAAAAADYM/wgckwn8YALw/s101/twitter-icon.png" />
<div style="width:248px;font-size:8px;text-align:right;">    
<script type="text/javascript"> document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=violavasil_eva&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E" ));</script> <a href="http://Safetricks.net/" target="_blank"></a></div></div></div></div><div id="on"><div id="google_plus_right" style="top: 42%;"><div id="google_plus_div">    
<img id="google_plus_right_img" src="https://lh6.googleusercontent.com/-_YBxSrlK_eI/UiHzV87NEkI/AAAAAAAADYQ/3OVaGl1x1NM/s101/googleplus.png"/> <div style="float: left; margin: 10px 10px 10px 0;">      
<div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/+OlgaProtasova/about"data-source="blogger:blog:followers"data-width="270"></div>          <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'en' }; var po = document.createElement('script'); po.type ='text/javascript'; po.async = true;  po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore( po, s); })();</script></div></div></div><div id="on"><div id="feedburner_right" style="top: 59%;">    
<div id="STfeedburner_div"><center> <h4 style="color: #f66303;">Получайте обновления по электронной почте:</h4> <form action="http://feedburner.google.com/fb/a/mailverify"  method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=http://feedburner.google.com/fb/a/mailverify', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Впишите E-mail адрес...';}" onfocus="if (this.value == 'Впишите E-mail адрес...') {this.value = '';}" type="text" value="Впишите E-mail адрес..."/> <input name="uri" type="hidden" value="http://feeds.feedburner.com/blogspot/TsLmX" /><input class="submitbutton" type="submit" value="Подписаться" /></form></center>      
<img id="feedburner_right_img" src="https://lh6.googleusercontent.com/-RsCL6J1l61c/UiHzWT-zuDI/AAAAAAAADYY/-0sHiOuLJdM/s101/subscribe-icon.png"/>      
<div style="float: right; padding: 15px; margin: 0px;">
<span style="font-size:10px;"></span>        
</div></div></div>  
</div></div>





Выделенное синим - адрес аккаунта или странички в Facebook; выделенное зеленым - имя пользователя в Twitter; выделенное фиолетовым - адрес в Google; выделенное оранжевым - адрес RSS-канала, выделенный у меня жирным текст можете изменить на свой.


Код виджета с четырьмя кнопками слева 




Код виджета с тремя кнопками слева




Код виджета с тремя кнопками справа




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


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


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

0 коммент. :

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


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

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

Имя

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

Сообщение *