Всплывающая панель социальной сети Twitter



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


Здравствуйте дорогие гости и читатели. Сегодня информация о всплывающей панельке социальной сети Twitter. У меня в блоге есть пост о плавающей панели этой соц сети. Но уж очень хочется иметь и всплывающую панельку популярной сети Twitter.

Скопированный код вставляете в дизайн-добавить гаджет. Устанавливаете где нибудь внизу макета блога. Работу виджета проверила в пяти браузерах: ИЕ-со скрипом, но открывается, Google, Yandex, Опера, Mozilla Firefox. Источником вдохновения послужил код четырех кнопок соц сетей. Удалила все три кнопки, оставила только кнопку Twitter. Можете слетать в тестовый блог и посмотреть справа. И кого заинтересовал данный виджет, копируйте код ниже.

<style>
img, a {    border: 0;  }  #on {    visibility: visible;  }  #off {    visibility: hidden;  }   #twitter_div {    width: 246px;    height: 350px;    overflow: hidden;  }

#twitter_right {    z-index: 10004;    border: 2px dotted #cccccc;    background-color: #F8F8FF;    width: 250px;    height: 250px;    position: fixed;    right: -254px;  }
#twitter_right_img {    position: absolute;    top: -2px;    left: -35px;    border: 0;  }

#twitter_left {    z-index: 10004;    border: 2px dotted #cccccc;    background-color: #F8F8FF;    width: 246px;    height: 250px;    position: fixed;    left: -254px;  }  #twitter_left_img {    position: absolute;    top: -2px;    right: -35px;    border: 0;  }

</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("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate(  { right: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { right: -254 }, 500);  });   }); </script>
<br />
<div id="on">
<div id="twitter_right" style="top: 8%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://lh6.googleusercontent.com/-fem0XHsZeko/UiHzVpUe2yI/AAAAAAAADYM/wgckwn8YALw/s101/twitter-icon.png" /><a class="twitter-timeline" href="https://twitter.com/violavasil_eva" data-widget-id="451015247420067842">Твиты пользователя @violavasil_eva</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div style="width:246px;font-size:10px;text-align:right;">
<script type="text/javascript"> document.write(unescape("%3Cscript src='' type='text/javascript'%3E%3C/script%3E" ));</script> </div></div></div>
</div>


Это код кнопки Facebook меньшего размера, может кому пригодится для дизайна


Выделенное коричневым-сюда Вы должны вставить код виджета соц сети Twitter. Как создать такой виджет, читайте в моем постеtop: 8%-расположение кнопки верх-низ. Чем больше установите числовое значение, тем ниже будет кнопка; выделенное голубым-это размер и цвет окантовки виджета, яснее выражаясь, это рамка. 

В коде у меня установлена точечная. Измените на другую форму и размеры. Какие бывают формы рамок, читайте здесь. Вот собственно и все. Комментируйте, делитесь с друзьями и знакомыми. А я говорю Вам всего Доброго.


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


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

3 коммент. :

  1. Ольга,сердечно благодарю вас за оперативность к нуждам ваших подписчиков !

    ОтветитьУдалить
  2. А невозможно сделать чтобы видимая кнопка была таких же размеров как у Фейбука ? Что то пробую менять выделенное голубым и ничего

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Павел. Размеры кнопки в коде Вы не измените. Вид кнопки-это URL адрес изображения, то есть кнопки. Чтобы изменить её вид, надо сохранить на компьютер, затем изменить размер и уже новый URL адрес кнопки Twitter вставить в код.

      Удалить


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

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

Имя

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

Сообщение *