Бегущая строка последних сообщений блога
Здравствуйте читатели и гости моего блога! Сегодня небольшой пост о бегущей строке для последних сообщений. Вы наверное видели или обращали внимание на многих сайтах/блогах бегущую строку под шапкой или внизу страницы. Правда оригинально, и в то же время удобно для посетителей.Вставить такой виджет на страницу легко и быстро. Копируем код ниже и в админ панели blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить.
<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 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")
{
//For left and right directions seperate the headilnes by two spaces.
sHeadlineTerminator = " ";
}
else
{
//For down and up directions seperate headlines by new line
sHeadlineTerminator = "\<br/\>";
}
}
if(sOpenLinkLocation =="N")
{
sPostLinkLocation = " target= \"_blank\" ";
}
else
{
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = "";
for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
{
objPost = json.feed.entry[nFeedCounter];
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/\>" + sPoweredBy;
}
else
{
//For down and up directions seperate headlines by new line
sHeadLines = sPoweredBy + "\<br/\>" + sHeadLines;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
}
catch(exception)
{
alert(exception);
}
}</script><script style=""> var nMaxPosts = 10; var nWidth; var nScrollDelay = 175; var sDirection="right"; var sOpenLinkLocation="N"; var sBulletChar="|"; </script> <script src="https://www.bdblogov.ru/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>
Настройки: в коде в строке var nMax Posts=15;-это количество сообщений в бегущей строке, Вы можете выставить больше или меньше; var nWidth-ширина полосы, в скрипте по умолчанию, можно выставить в пикселях var nWidth=60px; 175-скорость строки;
left-бежит слева направо, можно настроить справа налево (right), измените все значения left на right, и наоборот; var sBulletChar="|"-вставьте свой символ; оранжевым-адрес вашего блога; Цвет текста будет такой, какой настроен в дизайнере шаблонов-дополнительно-ссылки.
На этом сегодня все, всего доброго. На все вопросы отвечу в комментариях.
Рекомендуемый контент:
Большое спасибо вам за бегущую строку! Только вчера об этом мечтала, когда зашла в ваш блог! Я совсем новичок здесь, блог создала 3 недели назад, и много не знаю, так что ваш бог для меня это целая кладезь знаний! Очень бы хотелось ещё узнать как сделать кликабельные кнопки в строке как у вас под бегущей строкой? И ещё почему то у меня не видны комментарии, что надо сделать , что бы была возможность написать комментарий как у вас?
ОтветитьУдалитьСпасибо за комментарий! Валентина, кликабельные кнопки под бегущей строкой, это меню. Почитайте мой пост-Делаем меню для блога. Это самое простое меню. Вы создаете страницу, публикуете и она автоматически отображается в меню блога. Также её можно скрыть. Об этом тоже написано в посте.Теперь о комментариях: в черновике blogger слева нажмите на вкладку-настройки-сообщения и комментарии. Посмотрите, у Вас по всей вероятности они скрыты, надо настроить-встроенный. Будут вопросы, обращайтесь.
УдалитьДоброго времени суток Инесса, очень рада знакомству с вами! Я с удовольствием подписалась на ваш блог который мне интересен ! Меню для блога я сделала сразу при его создании, всё что у меня есть в блоге, до всего дошла самостоятельно методом "тыка" хотела вместо названий в меню вставить кнопки как у вас, но у меня не получается никак...название остаётся как и прежде, а сама кнопка видна лишь после того как кликнешь на название.. теперь по поводу комментарий, я посмотрела у себя в настройках , они у меня встроены и нет такой настройки как у вас показано на скринах в посте о комметариях...Инесса если вы окажете мне помощь в дизайне блога я буду вам очень благодарна! Буду рада , если вы найдёте время и загляните ко мне в блог который посвящён моему творчеству.
ОтветитьУдалитьВалентина, это не кнопки в меню Я настраивала в дизайнере шаблонов: текст вкладок и фон вкладок.Зависит от шаблона. Вам нужно искать в инете, как сделать анимированное меню. У меня была ссылка на блог, но после ремонта компьютера и переустановки системы ничего не сохранилось.Что до формы комментариев, то код в моем посте вставляется там же в дизайнере шаблонов-дополнительно-добавить CSS-изменение стилей. Можно изменить в самом коде шаблона, но я веду блог для начинающих, и стараюсь найти варианты попроще.Сама не люблю залезать в HTML код.Зашла к Вам в гости, красивый блог, оформление понравилось и тема. Все у Вас получится.
Удалить