Оповещение о новых комментариях как в Гугл для блога.

Привет, друзья. Если вы хотите сделать у себя в блоге оповещение о новых комментариях, как в Гугл+, такое, с колокольчиком, то эта шпаргалка для вас. Решение очень интересное. В Блоггере есть возможность подключить функцию оповещать о новых комментариях на электронную почту.
Или просматривать их через гаджет последние комментарии непосредственно в блоге. Вариант, который сегодня предлагаю вам, может послужить прекрасной альтернативой этому.

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

оповещения о новых комментариев

Как это выглядит посмотрите на тестовом  блоге.

Реализация в три шага. И обязательно нужно сделать резервную копию шаблона если что у вас пойдёт не так.

1. Заходим во вкладку шаблон и нажимаем изменить HTML. Находим закрывающийся тег </body> и над ним устанавливаем следующий код.

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: " http://www.shpargalochki.ru ",
    max_result: 6,
    t_w: 80,
    t_h: 80,
    summary: 40,
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Новый комментарий!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>


В строке новый комментарий напишите свой вариант. У меня количество отображаемых комментариев 6. Тут тоже сами решайте. В строке отмеченной красным цветом пишем адрес вашего блога без слэша (/).

2. Ищем там же в шаблоне строку ]]></b:skin>. И также над ней ставим код CSS.

#cm-total {
  position:fixed;
  top:14px;
  right:0;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:#d11919;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {
  position:fixed;
  top:20px;
  right:180px;
  z-index:9999;
  height:22px;
  width:19px;
  opacity:.4;
  cursor:pointer;
}
#notif:hover {
  opacity:1;
}
.close-notif {
  position:fixed;
  top:92px;
  right:20px;
  z-index:9999;
  cursor:pointer;
  display:none;
}
#cm-container {
  width:355px;
  position:fixed;
  top:67px;
  right:0;
  z-index:9999;
  background-color:#e5e5e5;
  padding:60px 20px 10px 20px;
  color:#666;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:1px solid rgba(0,0,0,.2);
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/s1600/arrow-notif.png');
  position:absolute;
  top:-14px;
  left:196px;
}
#cm-container:after {
  content:"Новый комментарий";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#333;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:9px 10px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: white;
  margin-bottom:10px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
  display:block;
  float:left;
  background:#ececec url('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/s1600/anon80.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:3px 0 0 3px;
  position:absolute;
  top:0;
  left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}

3. И, наконец, чтобы всё это у нас заработало, код библиотеки Jquery. Обязательно прочитайте это сообщение. Возможно, она у вас уже установлена и тогда этот шаг пропустите.
<script  src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Нажмите на функцию просмотра и если нет замечаний сохраняем шаблон. Бежим на главную блога и вверху видим значок колокольчика. Дождитесь пока кто-нибудь напишет комментарий. Или сами попробуйте написать в качестве примера. Результат появится сразу.

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

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

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

Введите Ваш email


11 комментариев:

  1. Интересный вариант, не уверена пока, что хочу отказаться от привычной формы "последних комментариев", но для тех, кто экономит место на боковой панели - отличный выход!

    ОтветитьУдалить
    Ответы
    1. Да, Олеся. Вариант интересный. Я всегда говорю всё подряд не вталкаешь в блог. Выбор за каждым.

      Удалить
  2. Вика,простите, что не по теме вопрос задаю, но очень расстраивают меня сейчас Альбомы Пикаса от Гугля. Что с ними происходит? Может быть вы владеете информацией. Я так была довольна, просто влюблена в программу Пикаса и ее вебальбомы, а теперь в полной растерянности... Заранее спасибо.

    ОтветитьУдалить
    Ответы
    1. Yana Yar-kaya, Вот что пишут об этом
      По словам представителей #Google, вопрос о возможном закрытии фотосерфиса #Picasa назрел ещё с тех пор, как компания запустила #Google_Photos — «облачный» сервис для хранения и редактирования снимков, помимо прочего встроенный в последние версии Android.

      Финальным решением компании стала попытка сфокусироваться только на одном фотосервисе. Picasa решено постепенно закрыть, а пользователям предлагается мигрировать на Google Photos: для этого нужно залогиниться там, и все снимки синхронизируются.

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

      В отличие от Picasa, у Google Photos нет настольного приложения: он представлен в виде веб-сервиса.

      Мы знаем, что многие из вас вложили много сил и заботы в управление своими фото и видео в Picasa. Так что мы подождём, чтобы сделать всё правильно, и дать вам возможности легко получить доступ к своему контенту.

      С 15 марта прекратится поддержка приложений Picasa для настольных компьютеров: они продолжат работать, но не будут получать обновления. Все основные изменения Google начнёт вводить с 1 мая 2016 года.

      Picasa была разработана компанией Lifescape в 2002 году. В 2004 году сервис был приобретён компанией Google и стал бесплатным. Основным преимуществом Picasa была работа с альбомами: сервис позволял каталогизировать библиотеку и загружать её на «облачный» сервер. В июле 2015 года Picasa уже предлагала десктопным пользователям перейти на Google Photos для загрузки фотографий в «облако».

      Удалить
  3. Спасибо. Надеюсь, альбомы блогов останутся в не прикосновенности... иначе как быть с иллюстрациями для статей. Жаль.

    ОтветитьУдалить
    Ответы
    1. Вроде, как обещают. Будем надеяться.

      Удалить
  4. Для начала сохраним шаблон на ПК- резервное копирование. Так нужно делать перед каждым его изменением (не у всех руки прямые), чтобы в случае проблем можно было восстановить исходник.
    А CSS можно добавить в дизайнере шаблонов. Последний пункт "Дополнительно"-"Добавить CSS"

    А статья интересна. Спасибо. Протестирую.

    ОтветитьУдалить
    Ответы
    1. BOMBERuss Поэтому и предупреждаю в каждом сообщении про резервную копию. А CSS таким образом не у всех работает . С этим уже неоднократно сталкивались.
      Спасибо за визит. Только почему-то этот Ваш комментарий изначально блоггер отправил в спам.

      Удалить
  5. Это очень интересная штуковина. Прямо хочется ее себе установить.
    Вот правильно ты говоришь, Вика, всего на блог не втолкнуть.. Буду думать-решать) А пока утаскиваю в кладовочку с закладками. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Наташа, у меня тоже руки чешутся такое сделать, но пока думаю.

      Удалить

Пользовательский поиск