Социальные кнопки Share This в раздвижном сердце и яйце

Всем привет! Предлагаю вашему вниманию не обычные социальные кнопки Share This. В этом посте я хочу показать вам новый способ поделиться в социальных сетях вашими интересными сообщениями. Обычно мы вставляем кнопки социальных сетей под каждую статью или сверху поста. В этот раз мы делать этого не будем. А установим виджет социальных кнопок в виде раздвижного сердца, яичка или новогодней игрушки в уголок блога.

При наведении на гаджет указателем мышки он раздвигается и появляются социальные кнопки Share This, Facebook, Twitter, Pinterest, Google plus и так далее. Посмотреть и попробовать виджет можно здесь.

Социальные кнопки Share This в раздвижном яйце

Первым делом нам нужно зайти в панель инструментов Blogger — Шаблон — Изменить HTML. Находим тег </head> и чуть выше вставляем код:

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Дальше, находим следующий тег </body> и добавляем чуть выше этот код:

<div style='position:fixed;bottom:2%;left:2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>

Готово. В первой строчке кода, можете поменять расположение виджета — left (слева) на right (справа).

Кнопки социальных сетей Share This в раздвижном сердце

Всё делается так же как написано выше, только код разный. Над </head> добавляем код:

<!-- Start Heart Bookmarking Gadget Code -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Bookmarking Gadget Code -->

А над </body> следующий код:

<!-- Start Heart Share Code -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script>
<!-- End Heart Share Code -->

Всё готово. Здесь также можно поменять расположение гаджета слева на право.

Социальные кнопки Share This в раздвижной новогодней игрушке

Над </head> вставляем код:

<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script>
<link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link>

А над </body> этот:

<!-- Start Christmas Share Code -->
<div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:'holiday'});</script>
<!-- End Christmas Share Code -->

Готово. Расположение кнопок так же можно поменять. Всего хорошего. До новых встреч.

Виджеты забугорные — spiceupyourblog

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