Плавающая кнопка контактной формы для связи с автором блога




Установка и настройка плавающего гаджета контактной формы для связи с автором блога
Добрый вечер гости и читатели моего блога. В данном посте информация о плавающем гаджете контактной формы. Гаджет выглядит в виде кнопки, подведя к которой курсор мыши выдвигается форма для связи с автором блога.

То есть нет необходимости переходить на страницу с контактной формой. Связаться с автором можно с любой страницы, на которой Вы находитесь.

В интернете видела такие кнопки, но то услуга платная, то блоггер не поддерживает, то еще какие то причины. Конечно при платной установке таких кнопок при нажатии всплывает форма для связи, и она фиксированная, посередине страницы или снизу. 

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



Чтобы установить такую кнопку, сначала почитайте информацию Как изменить стиль родного гаджета Google Форма для связи. Первое, в дизайне добавляете гаджет Форма для связи. Второе, в шаблон-изменить шаблон выше  строки ]]></b:skin> вставьте CSS код.

В шаблоне в коде CSS настройте свою форму: цвет фона, цвет границ и форму рамки, у меня в статье по ссылке выше все подробно написано, как установить и настроить.

И последнее, скопируйте код ниже, затем дизайн-добавить гаджет, сохраните где-нибудь внизу макета блога, можно под гаджетом форма для связи.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-335"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("http://1.bp.blogspot.com/-pGKuMxrg0J4/VHnhiEtQ2LI/AAAAAAAAGJA/pmPWMdhC1rs/s1600/cooltext1822320286.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 200px;
padding: 0 0px 0 54px;
width: 315px;
z-index: 99999;
position:fixed;
right:-335px;
top:19%;
}
</style>

<div class="gplusbox"><div class="widget ContactForm" id="ContactForm1">
<br />
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Имя*<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
        <br />
E-mail *<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        <br />
Сообщение *<br />
<textarea class="contact-form-email-message" cols="20" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
        <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Отправить" />
        <br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form></div></div></div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'en'};
        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>


Теперь немного о настройках: выделенное синим, это адрес кнопки. Вы можете создать свою кнопку и вставить адрес; лиловым-положение кнопки верх-низ на странице; красным-ширина и высота поля гаджета; 

Оранжевым-положение поля гаджета к боковой панели блога, настраивайте, чтобы поле не выглядывало. Обратите внимание, что в коде два числовых значения и они должны быть одинаковы; padding: 0 0px 0 54px; (54 px)-положение (прилипание) кнопки к полю гаджета; выделенное бардовым-это код формы. 


Вот еще два адреса кнопок светлая и желтая

http://3.bp.blogspot.com/-
jYKyFJZ8lFw/VHoxqDU9AUI/AAAAAAAAGJ0/uh2GxKlLiOs/s1600/cooltext1822317715.png

http://3.bp.blogspot.com/-KuJvL6VMcLk/VHoyTVbP39I/AAAAAAAAGJ8/EKbvtgmaNeM/s1600/4611833235_345277.gif


Вместо кода формы можно вставить код баннера, счетчиков, ссылки партнерских программ, написать Поздравительный текст и еще много всего интересного.

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

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




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


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

15 коммент. :

  1. Доброго времени суток Ольга! подскажите пожалуйста как сделать эту плавающую кнопку, чтоб она выскакивала справа не так далеко, т.е. уменьшить расстояния с правой стороны (она у меня "набегает" аж за правый сайтбар на сообщение? пыталась поиграться с right:-300px; но так и ничего не вышло? Я удалила код формы подписки, и теперь пустое место, поместила туда статистику mail. Как можно сделать рамку к этой кнопке и чтоб она прилипала к этой рамке, чтоб не было зазора между этой кнопочкой и рамкой? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, этот скрипт кнопки для контактной формы больше подходит.

      Попробуйте установить другую кнопку, ссылка

      http://www.bdblogov.ru/2014/11/Floating-banner-counter-images-or-text-in-onegadget.html

      В настройках "играйтесь" с размерами высоты и ширины, в статье написано. Для кнопки статистики можно установить размеры меньше. Настройка рамки также есть в коде.

      В любом случае, если что-то не получится, обращайтесь, будем вместе решать проблему.

      Удалить
  2. Добрый день Ольга! Спасибо за предложение, сделала новую всплывающую панель, и у меня кнопка внутри рамки оказалась, пыталась поиграться с цифрами так и не поучилось вот скрин (извините, я пока собираю блог и закрыла ее от индексации) https://4.bp.blogspot.com/-y6H4DzwPG8w/V-t-gL3Ld-I/AAAAAAAABgs/RZbj8z3OwywGnEZiXvXSRtCObY3F5NOsACLcB/s1600/2016-09-28_152418.jpg. И еще такой вопрос: у меня в футере я отметила стрелкой блоггеровская статистика, я тоже ее хочу поместить в эту рамочку, но не получается, возможно ли ее перенести? С уважением Тата!

    ОтветитьУдалить
    Ответы
    1. Tata, Вам надо поработать с этими параметрами

      border: 2px solid #1a8fce; background-color: #F2F2F2; width: 240px; height: 350px; position: fixed; right: -239px;} #box2_right_img { position: absolute; top: -2px; left: -42px;

      Вот кнопка на Вашем шаблоне, ссылка на тестовый блог

      https://experiment-u.blogspot.com/

      Я в статье по ссылке выше (комментарий 1.а) дописала в настройках.

      Статистику блоггер не установите, надо выдергивать код счетчика статистики из шаблона.

      Трудно работать, не видя шаблона Вашего блога. Так хоть по коду страницы можно посмотреть, что и как Вы устанавливаете.

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

      Удалить
  3. Ольга, я перенесла шаблон на тест блог probtestez.blogspot.com, но почему-то все виджеты настройки как по новому, ни одного сообщения ни других настроек, поменялся один фон? Может я не так сохраняю шаблон? Это отступление, перенесла на этот шаблон плавающую кнопку, она так же не выходит за пределы рамки. Вместо своей кнопки вашу поставила она как надо встала. Ничего не пойму, что с моей кнопкой? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, удалите из секции CSS /*---граница сообщения---*/, и подобные названия, там их много. Или переведите на английский язык. На русском в шаблоне только названия гаджетов.

      В коде кнопки ошибка, скриншот
      goo.gl/Vj06no

      Где стрелки-удалить, где отмечено галкой после адреса кнопки вставить
      id="box2_right_img" /> и поработать с параметрами. У Вас перенос
      не в том месте вставлен.

      Или скопируйте заново код, вставьте адрес своей кнопки и установите, только внимательно.

      По шаблону. Вы тестовый блог создали новый? Если в блоге нет ни виджетов, ни сообщений, то изменится только шаблон.

      Настройки-Другое-Контент (страницы, сообщения и комментарии)- Сохранить резервную копию контента. Тогда все записи можно импортировать в новый блог.

      Удалить
  4. Ольга, извините на вашем блоге experiment-u.blogspot.com, подсмотрела слева вертикальное меню, очень интересное, ищу себе что-то подобное не могу найти, у Александра спросила он опубликовал сообщение по вертикальному меню на ваше очень похожее (три полоски, когда раскрывается, образуется крестик). Если ли у вас публикация по этому вертикальному меню? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, если меню кнопка, вот ссылка

      http://www.bdblogov.ru/2016/05/button-popup-side-menu-for-blogger.html

      Там есть еще одно меню слева, пока информацию не публиковала.

      Удалить
    2. Доброго времени суток Ольга! Уррааа, наконец-то сделала как надо! Спасибо вам за наставничество! Я оказывается когда меняла вашу кнопку на свою удаляла часть (id="box2_right_img") вижу что в конце img обвожу все и меняю на свое!!! Теперь все тип-топ!!! А насчет секции CSS /*---граница сообщения---*/ я это делала чтоб знать когда вставляю в стили где какой есть, для того чтобы потом можно было удалить. Просто увидела, что в некоторых кодах такое прописывают! Как-то зашла в стили css смотрю и не помню что за код! решила самодеятельностью заняться и наделала этих подсказок! Хорошо что вы увидели профессиональным взглядом и сделали замечание! А можно эти подсказки как то оформить, чтоб ориентироваться? С уважением Тата!

      Удалить
    3. Ольга, благодарю, я про меню кнопка (где три полосочки) с раскрывающимся эффектом уже ознакомилась, уже думаю как ее применить! А меня интересует меню слева, про которое вы информацию еще не опубликовали! Буду ждать с нетерпением! С уважением к вам и вашему творчеству! Тата.

      Удалить
    4. Tata, в стилях CSS подсказки сохраняйте только на английском языке. А чтобы вспомнить, где, что вставлено, сохраняйте в черновиках "страницы" Нажимайте создать страницу, и пихайте туда все коды, в заголовке можете написать название.

      Или как вариант, в блокноте: На компе Мои документы, создать папку-открыть с помощью..Блокнот.

      Подсказки на русском можно вставить выше закрывающего тэга head или в body.

      С кодом меню надо еще поработать, не все получается.

      Удалить
  5. Спасибо за ликбез Ольга! а вот так можно/*---Bolshaja bukva---*/
    .post-body:first-letter, это я отрывок скопировала? И у меня еще один вопрос, если можно? Рекомендуют в Постоянных ссылках указывать название на латыни, а у вас я посмотрела переведено на англ.язык, так как все-таки лучше на англ.? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, спорный вопрос, много было разных мнений. Я для себя решила: Google признает только английский, яндекс справляется с двумя языками. Поэтому перевожу ссылки на англ. язык.

      Тема Вашего блога для какой аудитории рассчитана? Если русскоязычной, переводите на транслит. Вот кстати ссылочка яндекса
      http://translit-online.ru/yandex.html

      Я пыталась в яндексе настроить региональность Украина, отклонил. А блог читают с разных стран. Вот как-то так, объяснила.

      Удалить
  6. P.S.Будет чудесно если код меню получится!!! Желаю успехов вам! Очень ждем!

    ОтветитьУдалить
    Ответы
    1. Спасибо, Tata. Буду стараться.

      Удалить

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

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

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

Имя

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

Сообщение *