Всплывающий блок Google Поделиться информацией



Установка в блог всплывающего блока Google+


Как установить в блог и настроить блок соц сети Google
Доброго времени суток всем кому не спиться. В этой статье информация снова о социальной сети. Что поделаешь, если эти самые сети опутали нас и без них уже веб мастеру ну никак не обойтись для продвижения своего блога или сайта.

Информация о всплывающем блоке социальной сети Google+. Открывает посетитель страницу Вашего блога и сразу выпрыгивает блок Google+ Поделиться.

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

Итак, в черновике blogger нажимаем дизайн-добавить гаджет-Html/JavaScript и вставляем скопированный ниже код.
<style type="text/css" scoped>
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:blue;
border:2px dotted green;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"200px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<div style="text-align: center;">
<p style=" margin:10px; font-size:15px; color:#000; font-weight:bold;">Поделитесь информацией со своими друзьями в Google+</p>
<div style='background: url(http://bit.ly/1sD5WyL)no-repeat top left; width:283px; height:125px; padding-top:27px; text-align:left; padding-left:60px; margin-top:20px'>
<div class='g-plusone' data-annotation='inline' data-width='300'></div>
<script type='text/javascript'>
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<!-- HTML End -->
</div>
<small><div style=”font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;”></div></small><a class='close' href='#'>&times;</a></div>


Выделенное синим-ширина блока; лиловым-размер, цвет и форма границы рамки; оранжевым-размер и цвет шрифта; красным-текст (измените на свой); фиолетовым-url адрес картинки; выделенный коричневым фон не меняйте, фон и картинка будут отличаться; С остальными настройками можете экспериментировать.

На сегодня это вся информация. Не забывайте поделиться со своими друзьями в социальных сетях, пишите отзывы, задавайте вопросы. Всего Доброго.

Почитайте  как изменить курсор мыши в блоге blogspot; как установить всплывающее окно остаться или уйти со страницы блога; как перейти по адресу не активной ссылки;




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


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

6 коммент. :

  1. Оля, привет! Мне кажется, что ты права по поводу ПЧ, да и новым читателям будет даже интересно) Больше раздражает окно с подпиской, которое бегает за посетителем по всем страницам

    ОтветитьУдалить
    Ответы
    1. Ира здравствуй. Постоянные читатели я думаю да поделятся. А вот новые тоже наверное, если не уйдут сразу и найдут в блоге информацию, за которой они собственно пришли. Тему всплывающих окон можно долго обсуждать. На русскоязычных ресурсах уже тоже стали применять, но не так как на забугорных. У них открываешь блог, всплывает отовсюду: и снизу, и с боков и сверху. Есть мнение, что увеличивается число подписчиков. За бегающее окно с подпиской, ты права на все 100%. Меня это тоже раздражает.

      Удалить
    2. Ну, если "там" активно это используется, то значит, через пару лет и у нас будут выскакивать. Если приживется)))

      Удалить
    3. Ирина, поживем-увидим. Но что то мне подсказывает, что у нас такого бума не будет. Кстати, твой комментарий в моем блоге был 300-ый.

      Удалить
  2. Оля, мы перенимаем по большей части то, что полезно, а не не то, что "крикливо". Нам нужно то, что можно пощупать, поиметь, но не то, что "вымагают". Мы продуманные)))
    А в комментах мне что-то везет:)

    ОтветитьУдалить
    Ответы
    1. Ирина, все верно. Вот потому я и думаю, что у нас это не прокатит. Я анализировала расположение рекламных блоков верх-низ: у них повально в верхней части страницы установлены, а у меня клики на нижние рекламные блоки в основном идут.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

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

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

Имя

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

Сообщение *