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

Внешний вид виджетов легко настраиваемый под ваш дизайн. Перед тем как приступить к установке и разбору настроек, давайте смотреть на рабочий вариант.
Для просмотра попрошу перейти вас на тестовый блог.
1. Виджет последних сообщений бегущей строкой
Код
.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 = " ";
} 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 + " " + sPoweredBy;
} else if (sDirection == "right") {
sHeadLines = sPoweredBy + " " + 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&callback=RecentPostsScrollerv2&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 и располагаем где-нибудь над сообщениями или под шапкой блога.
Вот и всё на сегодня. Всем добра и до встречи
Честно говоря, идея с бегущей строкой мне очень понравилась. Жаль, что "Медведь умишком был силён не слишком..." Это цитата из одной басни Михалкова, хотя баснописцем он был скверным.
ОтветитьУдалитьСемён, цитата хорошая. Басни его особо и не читала. Погляжу на досуге.
ОтветитьУдалить