Всем привет! Предлагаю вашему вниманию не обычные социальные кнопки 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: "bea50586-2b9f-448d-947a-01385f28e305", 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('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</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: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", 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('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</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:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});</script> <!-- End Christmas Share Code -->
Готово. Расположение кнопок так же можно поменять. Всего хорошего. До новых встреч.
Виджеты забугорные - spiceupyourblog
С уважением, Сергей
в елочной игрушке во втором коде во второй строке после shareEgg пропущен /
Спасибо за интересное инфо, мне очень помогает при ведении блога.
Пожалуйста! Спасибо за пропуск в коде-надо проверить.
Здравствуйте! Как можно сделать чтоб открывалось вниз или вверх?
Так это сделано для горизонтальных кнопок, а таких эффектов для вертикальных, я не встречал.