Виджет - последние комментарии с аватарками для Blogger, Блогспот

Виджет - последние комментарии с аватарками для Blogger, Блогспот


Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

В последнее время стал заставлять себя, сразу же после введения какого нибудь нововведения на свой блог, публиковать пост с описанием установки. А то проходит время и многое забывается!  © blogodel.com 


Наконец то установил - виджет последние комментарии на Blogger, Блогспот. Все, что я видел до сих пор меня не устраивало, не было аватарок комментаторов. Теперь виджет выглядит вполне симпатично, так что и вам, советую установить таковой!  © blogodel.com 


Виджет устанавливается очень просто: вставляете скрипт в Добавить гаджет - HTML/JavaScript.
<style type="text/css">    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}    .w2b_recent_comments li .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;}    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var numComments  = 45, showAvatar  = true, avatarSize  = 60, roundAvatar = true, characters  = 140, defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true;//]]></script><script src="http://bloggerndch.googlecode.com/files/w2b-recent-comments-w-gravatar.js.txt" type="text/javascript"></script><script src="http://blogodel.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=10" type="text/javascript"></script>

Красная маркировка это урл. - адрес вашего блога, а синяя, количество отображаемых комментариев.  © blogodel.com 

Вариант с белым шрифтом, для "темных" блогов (зеленая маркировка - цвет шрифта), а так же с размерами шрифта (красная маркировка) имени автора комментариев (по просьбе читателя).

<style type="text/css">    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;font-size: 13px;}    .w2b_recent_comments li .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;}    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .w2b_recent_comments li span{margin-top:4px;color: #ffffff;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var numComments  = 45, showAvatar  = true, avatarSize  = 60, roundAvatar = true, characters  = 140, defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true;//]]></script><script src="http://bloggerndch.googlecode.com/files/w2b-recent-comments-w-gravatar.js.txt" type="text/javascript"></script><script src="http://blogodel.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=10" type="text/javascript"></script>

По мотивам: http://blogger.omg-linux.ru


Для тех у кого (по тем или иным причинам) не функционирует виджет, предлагаю вариант без аватарок.

<div style="padding: 0px 0px 0px 20px; color: #343f4a"><script type="text/javascript">//<![CDATA[var comsmaxamostrar = 7;var comslongitud = 60;function showrecentcomments(json) {  var entry, comulr, comcontent, salida;  for (var i=0;i<comsmaxamostrar;i++) {    entry = json.feed.entry[i];    if (i==json.feed.entry.length)break;    for (var k = 0; k < entry.link.length; k++) {       if (entry.link[k].rel == 'alternate') {          comulr=entry.link[k].href;          break;       }    }    comulr=comulr.replace("#","#");    if ("content" in entry){      comcontent = entry.content.$t;    } else if("summary" in entry) {      comcontent = entry.summary.$t;    } else {      comcontent = "";    }    var re=/<\S[^>]*>/g;    comcontent=comcontent.replace(re,"");    if (comcontent.length>comslongitud) {      comcontent = comcontent.substring(0,comslongitud) + " &hellip;";    }    salida = "<li style='list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQDreRHO0TwreX5qhnvIAQv0tFmIHVmfDucs0HKQBNgzk3GGJp0DX2fISaoEkFrLfqhwBMtol-jQ2W2m2Awzu3iawsaxaLqI8yPQ5e3o6n-dgxn8y8b-tdVkoW9h0RGpQ5NvCU8PFw9VCM/s1600/komment.png);>";    salida +=  "<span class='simgvaga001'></span><b>" + entry.author[0].name.$t + "</b><br />";    salida +=  "<a rel='nofollow' href='" + comulr + "'>" + comcontent +"</a>";    salida +=  "</li>";    document.write(salida );  }}//]]></script>
<ul id="poslednie-comment"><script src="http://rukodelka-lu.blogspot.ru/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul></div>
blogodel


Виджет с эффектом вращения при наведении и с возможностью удалить автора блога

<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  = 5,
  showAvatar  = true,
  avatarSize  = 35,
  roundAvatar = true,
  characters  = 40,
  defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
  hideCredits = true;
  maxfeeds=50,
  adminBlog='ваш ник';
//]]>
</script>
<script type="text/javascript" src="http://photoforum.do.am/1.js"></script>
<script type="text/javascript" src="http://blogodel.com/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>


Красная маркировка это урл. - адрес вашего блога. Желтая маркировка - необходимо ввести ваш ник, что бы не отображался в виджете.

Немає коментарів:

Дописати коментар

Підписатися на: Коментарі (Atom)