Виджет последних статей блога и комментариев бегущей строкой

 Доброго времени суток, читатели и гости блога.  Давно на блоге был опубликован пост виджет последних сообщений BLOGGER в виде стикера.  Обратила внимание, что на некоторых блогах мои подписчики установили такой. Предложу, в качестве альтернативы, ещё вариант более лёгкий, где названия  последних статьей будут выводиться бегущей строкой. С кликабельными ссылками А ещё, на основе того же скрипта покажу, как можно сделать такой же виджет с последними комментариями блога  и виджет последних статей определённого ярлыка. Может, кому-то и такие варианты подойдут для блога. 

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

Для просмотра попрошу перейти вас на тестовый блог.

Демонстрация

1. Виджет последних сообщений бегущей строкой

Код

<style>
.topnews,.topnews a:link {text-decoration: none; color:#FFF !important}
.topnews a:visited {text-decoration: none; color:#FDFDFD !important;}
.topnews a:hover {text-decoration:none; color: red !important;}
</style>
<div class="topnews">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%; border: 1px solid #000;  background-color:#556B2F;"><tbody><tr><td><div style="position:relative;overflow:hidden;width:100%; height:20px;" onmouseover="copyspeed=pausespeed"
onmouseout="copyspeed=memoryspeed"><div id="memoryscroller" style="position: absolute; left: -101px; top: 0px;"><nobr><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script><script type="text/javascript">
var nMaxPosts =10;
        var nWidth = 100;
        var nScrollDelay = 0;
        var sDirection = "left";
        var sOpenLinkLocation = "N";
        var sBulletChar = ">>"
</script>
<script type="text/javascript">
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
  try {
   sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
   if (nWidth) {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
  } else {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
  }
  if (nScrollDelay) {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
  }
  if (sDirection) {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";
    if (sDirection == "left" || sDirection == "right") {
    sHeadlineTerminator = "&nbsp;&nbsp;";
   } else {
    sHeadlineTerminator = "\<br/\>";
   }
  }
  if (sOpenLinkLocation == "N") {
   sPostLinkLocation = " target= \"_blank\" ";
  } else {
   sPostLinkLocation = " ";
  }
  sMoqueeHTMLEnd = "\</MARQUEE\>"
   sHeadLines = "";
   for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
   var objPost = json.feed.entry[nFeedCounter];
    if (nFeedCounter == json.feed.entry.length) break;
    for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
    if (objPost.link[nCounter].rel == 'alternate') {
     sPostURL = objPost.link[nCounter].href;
     break;
    }
   }
   sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" +
sHeadlineTerminator;
  }
   if (sDirection == "left") {
   sHeadLines = sHeadLines + "&nbsp;&nbsp;" + sPoweredBy;
  } else if (sDirection == "right") {
   sHeadLines = sPoweredBy + "&nbsp;&nbsp;" + sHeadLines;
  } else if (sDirection == "up") {
   sHeadLines = sHeadLines + "\<br/\>" + sHeadLines;
  }
  document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
  alert(exception);
}
}</script>
<script src="https://bvd-2.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10"
type="text/javascript"></script></nobr></div></div></td></tr></tbody></table></div>

Настройки виджета

Все настройки помечены цветом.

 

Ширина задана 100%; можно менять в зависимости от макета блога. 

Высота строки 20px; тоже настраиваемая, меняйте по желанию 

Максимальное количество постов поvar nMaxPosts =10;  по вашему желанию. В примерах я задала 10.

Цвет background-color:#556B2F;"> строки на ваше усмотрение 

Цвет текст задан  color:#FFF белым цветом

при наведении курсора и остановке текста  color:#FDFDFD  красный 

Толщина и цвет  border: 1px solid #000;  рамки так же по желанию

Скорость  var nScrollDelay = 0; прокрутки регулируется

Ну и наконец, в этой https://bvd-2.blogspot.com/feeds/posts/default строке нужно вставить адрес вашего блога (будьте внимательны с символами).

2. Виджет последних комментариев бегущей строкой

Здесь уже проще. Тот же самый код, только в строке

 участок https://bvd-2.blogspot.com/feeds/posts/default замените участок feeds/posts/default на feeds/comments/default.

3. Виджет последних стаей определённого ярлыка.

Меняем так же , только прописываем название нужного ярлыка, статьи которого хотим показать в бегущей строке. В этом случае, нужно быть внимательным к регистру. Допустим у меня ярлык КАРТИНКИ все крупным шрифтом, так и нужно писать . А не так Картинки. Пишем так

https://bvd-2.blogspot.com/feeds/posts/default /-/КАРТИНКИ

Код каждого из вариантов или все их сразу устанавливаем в гаджет (гаджеты) HTML/JavaScript и располагаем где-нибудь над сообщениями или под шапкой блога.

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