2 красивых виджета комментариев. для блога

виджет последние комментарии для блога
Доброго времени суток всем, кто читает шраргалки блогерши.Сегодня совсем не запланированный пост. Поэтому спешу им поделиться. Дело в том, что с виджетами последние комментарии, последние дни возникли проблемы. У некоторых на блоге он или вообще перестал отображаться, или работает
не корректно. Причин может быть много. Возможно, что-то с хостингом. Возможно что-то ещё. Ну и чтобы компенсировать эту неприятность, хочу вам предложить ещё 2 варианта.

Устанавливаются они достаточно просто. Через гаджет HTML/JavaScript. Первый из них вы можете посмотреть и проверить на этом блоге. Он у меня стоит давно и сбоев никаких не было. Ниже приведён код для него.

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}

</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 6,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 50,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Вика';
//]]>
</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-commentsv3.js"></script>
<script type="text/javascript" src="####/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Давайте рассмотрим, что здесь можно и нужно поменять. Цифра 6-это желаемое количество комментариев, 35-размер аватора, красным-ваше имя и #####-(URL)адрес вашего блога.
Внимание-первый код уже не работает!

А вот ещё один красивый виджет последних комментариев. При наведении курсора на фото комментатора всплывает окошко с его именем.


В работе он себя зарекомендовал. Он уже давно установлен на этом блоге. Пока работает без перебоев. Делюсь его кодом.

<style type="text/css">
#komentar {background: #fff; border:1px solid #8181F7;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;margin:5px 0;padding:5px;}
#komentar ul{margin:0;padding:0px;list-style: none;}
#komentar ul li:first-child {border-top:none;}
#komentar ul li {height:46px; background: #A9D0F5; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border:1px solid #8181F7;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;margin:5px 0;padding:5px;}
 
#komentar ul li:last-child {border-bottom: none;}
#komentar ul li:hover {background: #CCFFFF;
-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;margin:5px 0;padding:5px;}
#komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#222;display:block;text-decoration:none;}
#komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
#komentar .gamen>img { border: 2px solid #ffffff;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;box-shadow: 0 1px 2px #222222;background: url(http://tipstrikblogging.googlecode.com/files/Avatar%20Blogger%20Comments.jpg)repeat-x;}
#komentar ul li div.ismen {color:#333;text-shadow:-1px -1px 1px #ccc;}
#komentar .ismen {display: block;font-size: 1em;font-style: italic;line-height: 1.2;padding: 2px 4px 2px 0;}
#komentar .gamen>span{width: 150px;height: auto;line-height: 20px;padding: 5px;left: 115px;margin-left: -64px;font-size: 1em;font-weight:bold;color: #212121;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid #5858FA;background: rgba(255,255,255,0.7);text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 100px;opacity: 0;box-shadow: 1px 1px 2px rgba(0,0,0,0.2);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#komentar .gamen>span:before, #komentar .gamen>span:after{content: '';position: absolute;bottom: -15px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
#komentar .gamen>span:after{bottom: -14px;margin-left: -10px;border-top: 10px solid #5858FA;}
#komentar .gamen:hover>span{opacity: 0.9;bottom: 55px;}
</style>
<div id="komentar">
<ul>
<script type="text/javascript">
//<![CDATA[
var jmlkomentar = 8;
var jmlkarakter = 60;
//]]></script>
<script src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar-Tooltip.js" type="text/javascript"></script>
<script src="####/feeds/comments/default?alt=json&amp;callback=tampilkankomentar" type="text/javascript"></script>
</ul>
</div>

В этом коде 8 количество комментариев и решётки -адрес вашего блога.
Хочу вас попросить. При копировании кода будьте внимательны. Каждая чёрточка и точка очень важны. Попробуйте. Возникнут вопросы пишите в комментариях. Попытаемся разобраться.

Удачи всем нам.

Ой, а что это там ниже?  



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

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

23 комментария:

  1. А у вас на блоге стоит защита от копирования контента?

    ОтветитьУдалить
  2. Aleks Vas-если Вы решили взять код берите ьез боязни. Как я могу установить защиту, если предлагаю коды для пользования. А вот про авторство-это уже другое. Как могу защитила. Но от воришек увы никто не застрахован. Чтобы там не ставили. Как говорится-против лома нет приёма.

    ОтветитьУдалить
  3. Спасибо! Забрала--- вставила -- работает! Ура! Ура! Ура
    еще надо установить обратную связь -- надо поискать у вас как это зделать!

    ОтветитьУдалить
  4. Ну вот Людмила и здорово. А насчёт обратной связи можно тут посмотреть
    http://hpargallka.blogspot.ru/search?q=%D1%84%D0%BE%D1%80%D0%BC%D0%B0+%D1%81%D0%B2%D1%8F%D0%B7%D0%B8&x=11&y=18

    ОтветитьУдалить
  5. ееееееее! у меня получилось поставить этот виджет! пойду на старый блог и буду пробовать там! спасибо Вика!

    ОтветитьУдалить
  6. ооооо нет! на "Успехе" почему то не идет этот виджет :(((( а он мне так нужен

    ОтветитьУдалить
  7. Аксинья, привет. Такое бывает. Об этом прочитай пожалуйста вот здесь http://hpargallka.blogspot.ru/2014/07/biblioteka-jquery-v-bloge.html#more.
    Сразу и найдёшь причину.

    ОтветитьУдалить
  8. Спасибо! сейчас гляну

    ОтветитьУдалить
  9. Привет, перепробовала все коды с твоего сайта для "последних комментариев" - ничего не вышло, только надпись. Адрес меняла. А они мне так нужны, бывает пропускаю комментарии, почему-то не все появляются в g+. Может что-то не так делаю?

    ОтветитьУдалить
  10. Олеся. у тебя скорее всего не настроен канал FeedBurner. RSS лента У меня нет сообщения на эту тему так как полно информации в интернете. Почитай хотя бы здесь. http://pervushin.com/feedburner-burn-and-options.html.
    О настройках RSS ленты здесь немного упомянула.http://www.shpargalochki.ru/2013/11/rss.html

    ОтветитьУдалить
    Ответы
    1. Спасибо за ответ, буду разбираться, что же это за зверь такой RSS)

      Удалить
    2. Привет, как смогла все настроила. RSS подписка работает. Но вот комментарии не отображаются. Похожая ситуация как со статическими страницами, когда их не было видно. Но, где поставить галочку, я не нашла.

      Удалить
    3. Олеся, вышли мне на почту твой код комментариев. И про какую галочку ты говоришь?

      Удалить
  11. не отображается почему то :(

    ОтветитьУдалить
    Ответы
    1. Ой, Рамазан. Мне с этими виджетами так и хочется караул кричать. Сама перепробовала уже почти все варианты. То работают, то нет. Который сейчас у меня стоит пока тьфу, тьфу. эта беда у многих. Я однажды просто поставила комментарии от feedburner. Пусть без наворотов, но работали корректно.
      Попробуйте в настройках-другое- сделать так -канал сообщения до перехода, канал комментариев-ПОЛНЫЙ,канал комментариев к сообщению-короткий. Бывает и из-за этого.

      Удалить
  12. Ого! Сработало!
    Попробовал установить на моем новом блоге, и все получилось.

    ОтветитьУдалить
    Ответы
    1. Вот, о чём я и говорила. Капризные они. Интересно было бы узнать какой именно сработал.

      Удалить
  13. Виктория, а я поставила гаджет "Последние комментарии" на своих блогах "Волшебный фонарик" и "Блог Кота Васьки"! ЗДОРОВО получилось!

    ОтветитьУдалить
  14. Виктория, а если вместо 8 (кол-во комментарий) написать, например, 10? Можно? БОЛЬШОЕ СПАСИБО!!!

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Ирина. Можно хоть сколько , но если хватает места на панели.

      Удалить
  15. Очередное спасибо, Вика. В результате проб двух вариантов, получила свой, адаптированный к моим условиям. Очень приятно, когда есть у кого поучиться. И комментарии, кстати, тоже, но на другом блоге попробовала редактировать http://000149.blogspot.ru/2016/03/blog-post.html#comment-form Всяких "приятностей"

    ОтветитьУдалить
    Ответы
    1. И Вам Любовь, спасибо. Пойду посмотрю на творение.

      Удалить

Пользовательский поиск
Foto Saya
My Photo