Доброго времени суток, друзья. Как создать кнопку «Follow» , которая является одним из важных виджетов, устанавливаемых на блоге. Кнопка «Follower» BLOGGER называется функцией «стать постоянным читателем (присоединиться к этому блогу)».

Метод, который мы будем  использовать для создания кнопки «подписка», заключается в использовании ссылки «Подписаться», которая есть у виджета ПЧ (присоединяется к этому сайту), поэтому кнопка будет более удобной и простой в применении.

Первое, что нужно сделать - создать ссылку на блог follow + id, см. Пример ниже;

https://www.blogger.com/follow.g?blogID= 7438819944636028340

Идентификационный номер, выделенный жирным шрифтом, представляет собой номер идентификатора моего блога. Измените его на идентификатор вашего  блога. Чтобы получить или увидеть «идентификатор» войдите в админпанель  блогера, выберите нужный блог, если у вас их несколько. Затем посмотрите на адресную строку вашего блога.

Создали свою ссылку и пока сохраните её в блокноте или черновике. Рассмотрим варианты её размещения.

Как установить кнопку присоединиться в верхней части колонки комментариев

Идём во вкладку тема и находим строку ]]></b:skin> и над ней устанавливаем код

.comments .rightx{font-size:12px;position:absolute;$endSide:0;top:0;line-height:22px;max-height:22px;padding:4px 0 0 4px;margin-$endSide:0;background-color:#333333;overflow:hidden;display:block;}
.comments .rightx a{display:inline-block;min-width:75px;margin-$endSide:0;background-color:#333333;text-align:center;color:#ffffff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;text-decoration:none;text-transform: uppercase;}

Затем там же в шаблоне ищем строку

<h4 id='comment-post-message'>

 или

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

 и заменяем одну из них на

<h4 id='comment-post-message'>
<span class='subscrnya'><data:postCommentMsg/></span>
<span class='rightx'><b:if cond='data:top.commentLabel'>
<a href='https://www.blogger.com/follow.g?blogID=7438819944636028340'>стать читателем блога</a>
  </b:if>
  </span>
 </h4>

<h4 id='comment-post-message'> или <h4 id='comment-post-message'><data:postCommentMsg/></h4> это код родных комментариев Блоггер включенных по умолчанию. 

Сохраните шаблон. Вот так примерно это выглядит

Добавить кнопку в меню навигации «Follow». Просто добавим ссылку в пункт меню.

Так примерно

<nav class='naviy' id='nav'>
<ul class='sf-menu' id='menunav'>
<li><a href='add_url'>Об авторе</a></li>
<li><a href='add_url'>Содержание</a></li>
<li><a href='https://www.blogger.com/follow.g?blogID=7438819944636028340'>Форма подписки</a></li>
</ul>
</nav>

Живой пример на моём блоге дела домашние в меню под шапкой. Можете попробовать, чтобы увидеть, как это будет выглядеть при нажатии.

Добавить кнопку - ссылку подписаться в сайдбар

<button onclick="window.location='https://www.blogger.com/follow.g?blogID=7438819944636028340'" style="background-color: orange; color: white; height: 30px; width: 201px;"><b>Присоединиться к блогу</b></button>

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

В любом месте сообщения блога, переходим в режим HTML и вставляем код

<a href="https://www.blogger.com/follow.g?blogID=7438819944636028340" target="_blank"><button><b>подписка</b></button></a>

Уберите теги <button>...</button> останется только ссылка.

Или такая кнопка. Просто взяла вариант из сайдбара.



В последнем варианте можно сделать свою собственную кнопку - картинку. Подробнее здесь. А уж мотивирующий к подписке текст, придумайте сами.

Одним словом, вариантов много. И мимо интересной кнопки, точно не пройдут мимо. Включаем фантазию, а установка кнопки дело совсем не сложное. Можно и гаджет ПЧ оставить и ещё кнопочку куда - нибудь подключить. Хуже не будет.

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

введите пожалуйста свой email :

Подробнее...

Друзья, доброго времени суток. Я с очередным подробным обзором сервиса сбора, анализа статистики и установки счётчика статистики histats.com. Сервис абсолютно бесплатный, где мы сможем получить подробные отчёты по статистике блога, от посетителей в реальном времени до общего количества просмотров страниц блога. По часам, дням и за весь период. Недавние визиты, наиболее активные посетители, популярные страницы, геолокации, статистика поисковых систем и ещё много всего.

Удивило невероятное количество настраиваемых счётчиков на любой вкус и цвет. Не буду вас томить и сразу перейдём к созданию аккаунта и установке счётчика в блоге. 

Заходим по этой ссылке и вставляем в поле адрес своего блога. 

Нас тут же перебрасывает на страницу с созданным аккаунтом, где необходимо заполнить вполне стандартную форму. Заполняйте в английском варианте и абсолютно все поля. После подтверждения на почту придёт письмо со ссылкой на авторизацию аккаунта. Переходим на сайт и попадаем вот на такую панель управления

Здесь всё понятно. В первую очередь снова добавляем адрес блога, язык, категорию и часовой пояс. Определяемся кому будет видна статистика - всем или только вам. Опять капча и переход на страницу с выбором и настройками самого счётчика

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

Здесь можно подробно отслеживать статистику своего блога. Считайте, что отсчёт уже начался. Нам нужно только получить код и установить его на блоге.

Нажимаем на кнопку код счётчика, выбираем или стандартный, или функцию добавить новый. Здесь просто преогромнейший выбор вариантов счётчиков. Скрытый треккер, мультипликационный, в одну или несколько строк, счётчики иконки, текстовые, гиф счётчики. Красивые счётчики онлайн визитов. Сразу определиться не получается. Их более 600.

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

Просмотрите все варианты. Я вот в качестве пробы создала пока такой в стиле минимализм. 

Там масса вариантов цветового решения, статистики которую хотите отобразить. После создания счётчика нажмите на его номер слева и откроется окно с его кодом. А дальше всё совсем просто. Копируете код, заходите в админку блога, раздел дизайн, добавить гаджет HTML/JavaScript и устанавливайте в него скопированный код. Перемешаете гаджет в подвал блога, где обычно они устанавливаются. Или в боковую панель где - нибудь внизу. 

Всё, теперь и счётчик красивый есть и вы всегда сможете отслеживать статистику по всем параметрам. 

Посмотрите еще один счётчик статистики .

Выбор есть, дерзайте. Спасибо за внимание и до встречи. 

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

введите пожалуйста свой email :

Подробнее...

Всем, привет. Сегодня хочу показать вам, как легко добавить заголовок (Tittle) к любой ссылке на блоге. Когда указатель мыши указывает на элемент или ссылку, он отображает заголовок, который как бы объясняет содержание ссылки. Это просто небольшая фишечка, которую наверняка вы встречали на некоторых сайтах. Даже не знаю, как её назвать, но пусть будет заголовок к ссылке. Это простая всплывающая подсказка к любой ссылке.

Ссылка в основном формате HTML выглядит следующим образом

<a href=" URL "> тут название ссылки</a>

Если к ней добавить элемент tittle = " ", то она будет выглядеть, допустим так

<a href="URL" title="загрузите код "> Загрузить </a>

Подведите курсор на ссылку ниже

шпаргалки блогерши

Если мы обычным путём вставляем ссылку и перейдём в режим HTML, она имеет такой вид

<a href="http://www.shpargalochki.ru/" >шпаргалки блогерши</a>

Я просто добавила заголовок Tittle и она стала

<a href="http://www.shpargalochki.ru/" title="мой блог">шпаргалки блогерши</a>,

Такой заголовок можно применять в любом месте, содержащем <a href="#">... </a>, будь то в статье или в шаблоне. Посмотрите, я сделала пункт меню таким образом в разделе <<все статьи>>.

Возможно вас заинтересует вариант красивый блок ссылок в сообщении блога

Интересная мелочь. Имеет место быть. Все удачи и до встречи.

⇩

P.S. Скоро закроют социальную сеть Гугл+. Чтобы не потеряться присоединяйтесь ко мне - страница Блоггер для каждого В Контакте, страница шпаргалки блогерши в Фейсбуке, я в Твиттер.

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

введите пожалуйста свой email :

Подробнее...

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

Пусть этот новогодний снег накроет все прошлогодние проблемы и Новый Год будет чистым и здоровым, как младенец, чтобы можно было начать что-то новое, более удачливое, чем в прошлом году. Пусть наступающий Новый год станет красочным и волшебным мостом к новой и счастливой жизни.

Волшебного Нового Года, друзья!!!

Подробнее...

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

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

Скопируйте, приведённый ниже код меню и установите его в этом редакторе для просмотра.

Код

<style>.vb {

 margin: 0 auto;

 width: 206px;

 height: auto;

 background: rgba(0, 0, 0, 0.8); /* - цвет вкладок - */

 border: 2px solid #666666; /* - ширина и цвет рамки - */

 }

.vb>ul {

 margin: 3px;

 padding: 0;

 list-style: none;

 width: 200px; /* - ширина блока меню - */

 }

.vb>ul>li {

 display: block;

 overflow: hidden;

 margin: 0;

 padding: 0;

 list-style: none;

 height: 40px;

 width: 200px;

 background-color: #f0f0f0; /* - фон открытой вкладки - */

 transition: height 0.5s ease-in-out;

 -moz-transition: height 0.5s ease-in-out;

 -webkit-transition: height 0.5s ease-in-out;

 -o-transition: height 0.5s ease-in-out;

 }

.vb>ul>li>h3 {

 display: block;

 margin: 0;

 padding: 7px 10px 13px 10px;

 height: 19px;

 font-family: Georgia, Arial, Helvetica, sans-serif;

 text-decoration: none;

 color: #fff;

 background: #666;

 font-weight: normal;

 }

.vb>ul>li>div {

 margin: 0;

 overflow: auto;

 padding: 10px;

 height: 210px;

 }

.vb>ul>li>div>a {

 display: block;

 text-decoration: none;

 text-align: center;

 margin: 1px;

 padding: 3px;

 color: #000;

 background: #СССССС;

 }

.vb>ul>li>div>a:hover {

 color: #FFF;

 text-shadow: 0px -1px 0px #00518a;

 background: #CCCCFF; /* - цвет фона ссылки при наведении- */

 }

.vb>ul>li:hover {

 height: 200px;

 }

.vb>ul>li>h3:hover {

 cursor: pointer;

 }</style>



<div class="vb">

 <ul>

  <li>

   <h3>»МЕНЮ 1</h3>

   <div>

    <a href="http://www.shpargalochki.ru/">шпаргалки блогерши</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

   </div>

  </li>

  <li>

   <h3>»МЕНЮ 2</h3>

   <div>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

   </div>

  </li>

  <li>

   <h3>» МЕНЮ 3</h3>

   <div>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

   </div>

  </li>

 </ul>

</div>

Вставляйте вместо решёток адреса ваш страниц и подстраниц блога. И, соответственно, ваши названия. Все настройки я отметила комментариями в коде. Готовый код устанавливайте в гаджет HTML/JavaScript в любом месте боковой панели.

При необходимости добавляйте пункты меню

<li>

   <h3>»МЕНЮ 4</h3>

   <div>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

    <a href="#">Ссылка</a>

   </div>

  </li>

И подпункты (ссылки) <a href="#">Ссылка</a>

Сколько же можно информации разместить в таком компактном, раскрывающемся меню - аккордеон.

Всё. Добра всем и предновогоднего настроения. 

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

введите пожалуйста свой email :

Подробнее...