Всплывающая панель Facebook для Blogger



Как вставить в блог Blogspot всплывающую панель соц сети Facebook


Всем привет ! Предлагаю для блогов на платформе Blogspot всплывающую панель социальной сети Facebook. Панелька легко вставляется обычным гаджетом. В черновике blogger-дизайн, нажимаем добавить гаджет-Html/JavaScript-вставить-сохранить. Скопируйте код ниже. Пример панельки смотрите в демо блоге справа.


Вы можете изменитьfont-size: 10px-размер шрифта слова Поделиться; если необходимо панель вставить слева, меняем все выделенные right на left; С размерами я думаю разберетесь, мне нравятся настроенные в коде размеры панельки. 

Цвета я меняю следующим образом: вместо указанного цвета впишите #000000 (черный) и смотрите что у Вас поменялось. Затем уже вписывайте нужный цвет. Вот и все, ничего сложного. Всего Вам доброго.

<b:if cond='data:blog.pageType == "item"'>
<style>
#fixed-share {background: none repeat scroll 0 0 #4C6699;border-bottom: 3px solid #30476F;bottom: 60px;box-shadow: 0 8px 8px #888888;font-family: Arial;font-size: 10px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;}
#fixed-share:hover {right: 0}
#fixed-share:hover > #share-box {right: 147px}
#share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;}
</style>
 <div id="fixed-share">
 <div id="share-box">
<img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" />
</div>
<span>Поделиться<br/> <script>(function(d){ var js, id =
'facebook-jssdk'; if (d.getElementById(id)) {return;} js =
d.createElement('script'); js.id = id; js.async = true; js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>  <fb:share-button expr:href='data:post.url'
type='button_count'/> </fb:share-button>
</span></div>
</b:if>


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


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

0 коммент. :

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


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

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

Имя

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

Сообщение *