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 :