Плавающая кнопка стать постоянным читателем блога



Доброго времени суток друзья и читатели блога. Написать эту статью подсказал вопрос участника нашего сообщества Blogger на русском в Google+. Вопрос: есть ли возможность гаджет Постоянные читатели установить в виде кнопки, и как узнать адрес ссылки стать постоянным читателем.

Я ответила, что нет. Затем подумала, а почему бы не создать такую кнопку, ведь делается все элементарно просто. Создадим аккуратную кнопочку для сайдбара или плавающую, всегда на виду, смотришь и читателей приумножим. Сходите в тестовый блог и посмотрите пример: слева плавающая кнопка, справа горизонтальная.

Адрес ссылки узнать легко, нажмите войти в гаджет ПЧ, в адресной строке ссылка на форму. Пробовала использовать адрес ссылки для вставки в коды, понаблюдала, постоянно глючит, форма не открывается (подключение соединения защищено и зашифровано по протоколу).

Виджет ПЧ очень капризный, поэтому самый оптимальный вариант создать страницу и вставить код формы в режиме HTML. Давайте приступим к реализации:

1.Создаем кнопку для виджета постоянные читатели. Можно воспользоваться сервисом Cooltext.com или в статье Полезные и необходимые программы для вебмастеров найдете другие сервисы. Сохраните кнопку в папку на компьютер. Для примера такие кнопочки:

Горизонтальная кнопка для гаджета Постоянные читатели

Вертикальная кнопка для гаджета Постоянные читатели
Кнопки для гаджета Постоянные читатели


Синюю кнопку как Вы поняли, я всего лишь обрезала с гаджета постоянные читатели, а вторую создала в сервисе по ссылке выше, текст пишите свой. На рисунке кнопка горизонтальная для экономии места, но в коде адрес вертикальной.

2. Далее все очень просто. Для горизонтальной кнопки: дизайн добавить гаджет изображения. Загружаете кнопку, связываете с url адресом и устанавливаете в нужное место макета блога. 

3. Обе кнопки можно добавить гаджетом с помощью любимого нами HTML/JavaScript. Вот коды

Для горизонтальной, открывается в новом окне на странице


<a href="http://application-2.blogspot.com/p/window.html" onclick="newMyWindow1(this.href); return false;"><img style="border:0;" src="http://goo.gl/lVLSkr" /></a>

<script>
function newMyWindow1(href) {
  var d = document.documentElement,
      h = 538,
      w = 640,
      myWindow = window.open(href, 'myWindow', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, ((d.clientWidth - w)/2 + window.screenX))+',top='+Math.max(0, ((d.clientHeight - h)/2 + window.screenY)));

      // абзац для Chrome
      if (myWindow.screenY >= (screen.availHeight - myWindow.outerHeight)) {myWindow.moveTo(myWindow.screenX, (screen.availHeight - myWindow.outerHeight))};
      if (myWindow.screenX >= (screen.availWidth - myWindow.outerWidth)) {myWindow.moveTo((screen.availWidth - myWindow.outerWidth), myWindow.screenY)};
}
</script>



Для горизонтальной, открывается в новом окне браузера

<script language="JavaScript">
function popUp() {
props=window.open('http://application-2.blogspot.com/p/window.html', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=1, width=1152, height=780');
}</script><a href="javascript:popUp()"><img class="swing" src="http://goo.gl/lVLSkr"/></a>


Для плавающей

<a style="display:scroll;position:fixed;bottom:450px;left:1px;" 
href="http://application-2.blogspot.com/p/window.html"width="640"height="538" onclick="newMyWindow1(this.href); return false;"><img style="border:0;" src="http://goo.gl/2Jw1Xb" /></a>

<script>
function newMyWindow1(href) {
  var d = document.documentElement,
      h = 538,
      w = 640,
      myWindow = window.open(href, 'myWindow', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, ((d.clientWidth - w)/2 + window.screenX))+',top='+Math.max(0, ((d.clientHeight - h)/2 + window.screenY)));

      // абзац для Chrome
      if (myWindow.screenY >= (screen.availHeight - myWindow.outerHeight)) {myWindow.moveTo(myWindow.screenX, (screen.availHeight - myWindow.outerHeight))};
      if (myWindow.screenX >= (screen.availWidth - myWindow.outerWidth)) {myWindow.moveTo((screen.availWidth - myWindow.outerWidth), myWindow.screenY)};
}
</script>


Выделенное синим в кодах-url адрес страницы с гаджетом ПЧ; лиловым-url адрес картинки (кнопки). Почитайте статью Простые способы узнать адрес ссылки изображений; 450px;-положение плавающей кнопки верх-низ; left:1px; или (right)-кнопка слева-справа; 1px; это положение от края;

В черновике blogger нажмите создать страницу, в редакторе перейти в режим HTM, вставить код, далее создать и опубликовать. Это код гаджета постоянные читатели:


<div class="widget Followers" data-version="1" id="Followers1">
<h2 class="title">
<span style="color: #134f5c; font-family: &quot;georgia&quot; , &quot;times new roman&quot; , serif; font-size: x-large;"><i>
Постоянные читатели</i></span></h2>
<div class="widget-content">
<div id="Followers1-wrapper">
<div style="margin-right: 2px;">
<div>
<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>

<br />
<div id="followers-iframe-container">
</div>
<script type="text/javascript">
    window.followersIframe = null;
    function followersIframeOpen(url) {
      gapi.load("gapi.iframes", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          window.followersIframe = gapi.iframes.getContext().openChild({
            url: url,
            where: document.getElementById("followers-iframe-container"),
            messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
            messageHandlers: {
              '_ready': function(obj) {
                window.followersIframe.getIframeEl().height = obj.height;
              },
              'reset': function() {
                window.followersIframe.close();
                followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d8142585837575624831\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjAwMDAwMCIGNGY4N2Y0KgZmZmZmZmYyBjUyOGRmZjoGMDAwMDAwQgY0Zjg3ZjRKBmZmZmZmZlIGNGY4N2Y0Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26origin\x3dhttp://www.bdblogov.ru/");
              },
              'open': function(url) {
                window.followersIframe.close();
                followersIframeOpen(url);
              },
              'blogger-ping': function() {
              }
            }
          });
        }
      });
    }
    followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d8142585837575624831\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjAwMDAwMCIGNGY4N2Y0KgZmZmZmZmYyBjUyOGRmZjoGMDAwMDAwQgY0Zjg3ZjRKBmZmZmZmZlIGNGY4N2Y0Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26origin\x3dhttp://www.bdblogov.ru/");
  </script></div>
</div>
</div>
<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="https://www.blogger.com/rearrange?blogID=8142585837575624831&amp;widgetType=Followers&amp;widgetId=Followers1&amp;action=editWidget&amp;sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;Followers1&quot;));" target="configFollowers1" title="Изменить">
<img alt="" height="18" src="https://resources.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<br />
<div class="clear">
</div>
</div>
</div>



Выделено красным-ID вашего блога, посмотрите в адресную строку, 19 цифр; коричневым-url адрес блога; Будьте внимательны, изменить на свой ID блога нужно в трех местах, а url адрес дважды в коде.

Форму виджета ПЧ на странице можно оформить в рамку. В содержании блога, ярлык рамки, найдете много способов оформления.

А это самый простой код, страница для подписчиков будет открываться в новой вкладке

<a href="http://application-2.blogspot.com/p/window.html"target="_blank"><img  src="http://goo.gl/lVLSkr"width=""height="" /></a>

Страницу с виджетом можно добавить в меню или дизайн добавить гаджет список ссылок

Установка кнопок вместо гаджета постоянные читатели конечно на любителя. Во многих блогах вижу такой виджет с очень большим количеством читателей и ничего, нравится. Решать Вам: или аккуратную кнопку, или простыню читателей. Хотелось бы узнать Ваше мнение, пишите отзывы в комментариях. Всего доброго.

Почитайте предыдущий пост



Автор статьи ✎ Olga Protasova Выпуск ✹ 7/22/2015 Ярлыки ►


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

13 коммент. :

  1. Ольга,идея оригинальная. Думаю это на любителя. Мне нравиться всё же родной. Вообще с этими выпадающими кнопками всё что угодно можно вытворять. Очень удобно.

    ОтветитьУдалить
    Ответы
    1. Вика привет. Согласна с тобой, что на любителя. В основном в блогах смотрю этот гаджет либо не установлен, только форма подписки по эл. адресу или же привычный родной. А с кнопками можно придумать разные варианты гаджетов.

      Удалить
  2. Спасибо, Ольга. Я в этом ключе и мыслила, отправлю гаджет в виде кнопки на страницу с о всеми вариантами подписки. А плавающая кнопочка мне тоже пригодится. Спасибо!

    ОтветитьУдалить
  3. Ольга, все получилось, я довольна. Моя страничка с подписками, хвалюсь) http://corolesja.blogspot.com/p/blog-page_7.html
    И еще конвертик с права с формой связи, тоже частично использовала ваш код.
    Спасибо, большое!

    ОтветитьУдалить
    Ответы
    1. Олеся, замечательно у Вас все получилось. Ни у кого еще такого не видела в блогах. Только у кнопки блоггера стать ПЧ надпись Вконтакте. Это так задумано или может написать Читать блог...

      Удалить
    2. Ольга, спасибо, что глянули, исправлю на полную ссылку и исправлю на читать. Интересно, вчера, когда проверяла еще ошибки не было, а сегодня уже не работает. Еще раз, спасибо!

      Удалить
  4. Ольга, и еще один небольшой вопросик. Я не нашла, как в админ-панели смотреть количество постоянных читателей. Думаю, это можно узнать только время от времени устанавливая назад гаджет "Постоянных читателей". Или я плохо искала?

    ОтветитьУдалить
    Ответы
    1. Олеся нужно изменить код, target_blank не срабатывает. Посмотреть количество ПЧ можно в списке всех созданных Вами блогов (где создать "новый блог"), или в черновике blogger-обзор, самая первая вкладка. В окне, последняя строка Постоянные читатели, нажмите снизу на значок (типа символа стрелочек) откроется список всех ПЧ.

      Удалить
  5. Ольга, огромное спасибо. Вне тоже пришла мысль вынести гаджет на статичесскую страницу. Потратила около 2х часов на поиски информации как это сделать. Кстати, в интернете нет ни одной статьи о том как переносить гаджеты на страницы.
    Зашла к вам, чтобы посоветоваться, а вы уже об этом написали. Мне понадобилось пара минут, чтобы все сделать.
    Так жалко потраченного времени.
    Спасибо, все работает!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста Олеся. Я писала Вам сообщение, Вы его получали? Как раз в письме я и посоветовала вывести гаджет ПЧ на страницу. По адресу постоянно глючит. У Вас тоже смотрела, выдавало ошибку. Пришлось дописать статью, добавить код гаджета ПЧ.

      Удалить
  6. здравствуйте, Ольга, спасибо, очень много полезного у вас узнала. подскажите, пожалуйста, как можно сделать выпадающее меню с соцстраничками как у вас в демоблоге...спасибо

    ОтветитьУдалить
  7. Лидия, спасибо за отзыв. О меню с соц страницами я пост не писала. Подождите немного, скоро опубликую.

    ОтветитьУдалить
  8. Лидия, ссылка на статью по вашему вопросу:

    http://www.bdblogov.ru/2015/11/gadget-tab-with-pages-social-networking-for-blogger.html

    ОтветитьУдалить


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

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

Имя

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

Сообщение *