Два варианта кнопки Тwitter для блога.

Привет друзья. Не буду сегодня заострять внимание о нужности социальных кнопок в блоге. У всех они установлены в самых различных вариантах. Предлагаю в дополнении ко всему фиксированную кнопку с картинкой, расположенной на боковой панели для приглашения в Тwitter. И выскальзывающую кнопку , которая появится при прокрутке страницы вниз.
Оба варианта можно посмотреть на демо блоге.

Установка совершенно простая. Через гаджет HTML/JavaScript в разделе дизайн. Копируйте выбранный вариант и поменяйте адрес моей странички на свой. Я его выделила в обеих кодах синим цветом.

1. Вариант с птичкой.

<style type='text/css'>
.feedbacktw {
width: 31px;
height: 138px;
display: block;
font-size: 8px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:20%;
right:2px;
}

.feedbacktw:hover {
width: 31px;
height: 138px;
display: block;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/xpu99c.jpg);
position:fixed;
top:20%;
right:8px;
}
</style>
<a style="display:scroll;" href="https://twitter.com/VikserV " class="feedbacktw"> </a>

В этом коде, то что отмечено красным цветом, адреса картинок. Можно заменить своими.

2. Выскакивающая кнопка.

<style>
#MDslidebox {
    background: none repeat scroll 0 0 #F3F3F3;
    border-radius: 9px 9px 9px 9px;
    border: 1px solid #D7D7D7;
    top: 50px;
    display: none;
    padding: 12px 14px;
    position: fixed;
    right: 2px;
    width: 300px;
    z-index: 3;
}
</style>
<script type="text/javascript">
$(window).scroll(function(){
if($(document).scrollTop()>=$(document).height()
/4)$("#MDslidebox").show("slow");
else $("#MDslidebox").hide("slow");});
function closeMDslidebox(){$('#MDslidebox').remove();}
</script>
  <div id="MDslidebox" style="display: none;">
 <a onclick="return closeMDslidebox();" href="javascript:void(0);" style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;">(X)</a>
<a href="https://twitter.com/VikserV" class="twitter-follow-button" data-show-count="false">Follow @nitinmaheta</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>

Всё. Приглашайте своих друзей на вашу страницу в Твиттере. Если хотите установить летающую птичку в блоге, то здесь пост об этом.

Спасибо за ваше внимание и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email