Бегущая строка сообщений блога



Бегущая строка последних сообщений блога

Здравствуйте читатели и гости моего блога! Сегодня небольшой пост о бегущей строке для последних сообщений. Вы наверное видели или обращали внимание на многих сайтах/блогах бегущую строку под шапкой или внизу страницы. Правда оригинально, и в то же время удобно для посетителей.

Вставить такой виджет на страницу легко и быстро. Копируем код ниже и в админ панели 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 = "&nbsp;&nbsp;";
    }
    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 + "&nbsp;" +  sPoweredBy;
   }
   else if(sDirection == "right")
   {
    sHeadLines = sPoweredBy +  "&nbsp;" + 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 = 15; var nWidth; var nScrollDelay = 175; var sDirection="right"; var sOpenLinkLocation="N"; var sBulletChar="→"; </script> <script src="http://www.bdblogov.ru/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2"></script>

Настройки: в коде в строке var nMax Posts=15;-это количество сообщений в бегущей строке, Вы можете выставить больше или меньше; var nWidth-ширина полосы, в скрипте по умолчанию, можно выставить в пикселях var nWidth=60px; 175-скорость строки; 

left-бежит слева направо, можно настроить справа налево (right); var sBulletChar="|"-вставьте свой символ; оранжевым-адрес вашего блога; Цвет текста будет такой, какой настроен в дизайнере шаблонов-дополнительно-ссылки.

На этом сегодня все, всего доброго. На все вопросы отвечу в комментариях.


Автор статьи ✎ Olga Protasova Выпуск ✹ 9/22/2013 Ярлыки ►


Открыть комментарии →

4 коммент. :

  1. Большое спасибо вам за бегущую строку! Только вчера об этом мечтала, когда зашла в ваш блог! Я совсем новичок здесь, блог создала 3 недели назад, и много не знаю, так что ваш бог для меня это целая кладезь знаний! Очень бы хотелось ещё узнать как сделать кликабельные кнопки в строке как у вас под бегущей строкой? И ещё почему то у меня не видны комментарии, что надо сделать , что бы была возможность написать комментарий как у вас?

    ОтветитьУдалить
    Ответы
    1. Спасибо за комментарий! Валентина, кликабельные кнопки под бегущей строкой, это меню. Почитайте мой пост-Делаем меню для блога. Это самое простое меню. Вы создаете страницу, публикуете и она автоматически отображается в меню блога. Также её можно скрыть. Об этом тоже написано в посте.Теперь о комментариях: в черновике blogger слева нажмите на вкладку-настройки-сообщения и комментарии. Посмотрите, у Вас по всей вероятности они скрыты, надо настроить-встроенный. Будут вопросы, обращайтесь.

      Удалить
  2. Доброго времени суток Инесса, очень рада знакомству с вами! Я с удовольствием подписалась на ваш блог который мне интересен ! Меню для блога я сделала сразу при его создании, всё что у меня есть в блоге, до всего дошла самостоятельно методом "тыка" хотела вместо названий в меню вставить кнопки как у вас, но у меня не получается никак...название остаётся как и прежде, а сама кнопка видна лишь после того как кликнешь на название.. теперь по поводу комментарий, я посмотрела у себя в настройках , они у меня встроены и нет такой настройки как у вас показано на скринах в посте о комметариях...Инесса если вы окажете мне помощь в дизайне блога я буду вам очень благодарна! Буду рада , если вы найдёте время и загляните ко мне в блог который посвящён моему творчеству.

    ОтветитьУдалить
    Ответы
    1. Валентина, это не кнопки в меню Я настраивала в дизайнере шаблонов: текст вкладок и фон вкладок.Зависит от шаблона. Вам нужно искать в инете, как сделать анимированное меню. У меня была ссылка на блог, но после ремонта компьютера и переустановки системы ничего не сохранилось.Что до формы комментариев, то код в моем посте вставляется там же в дизайнере шаблонов-дополнительно-добавить CSS-изменение стилей. Можно изменить в самом коде шаблона, но я веду блог для начинающих, и стараюсь найти варианты попроще.Сама не люблю залезать в HTML код.Зашла к Вам в гости, красивый блог, оформление понравилось и тема. Все у Вас получится.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *