Блок отображения важных сообщений в Blogger

важные сообщения
Всем, доброго времени суток. Хочу сегодня предложить вам сразу 2 скрипта, с помощью одного сделаем небольшой блок с активными  ссылками на какие - то важные сообщения вашего блога или другие нужные материалы. С помощью другого можно вывести горизонтально бегущее анонсы последних статей.
Это совершенно разные темы, но по просьбе одного из своих читателей как это реализовать в Блоггере, решила сразу их разместить в одном месте.

Посмотрите на тестовом блоге в самом низу их работу. Там у меня всё бегает, кружится и вертится, не потеряйтесь.


Код для важных сообщений.

<style type="text/css">

#pscroller2{
background:url(http://www.gifki.org/data/media/111/strelka-animatsionnaya-kartinka-0532.gif) no-repeat top left;
width: 380px; /* ширина блока*/
height: 25px; /* высота блока*/
border: 2px solid#CD5C5C; /*ширина и цвет рамки*/
padding: 8px 3px 3px 50px; /* отступы*/
margin:40px 0;
}
#pscroller2 a{
font-size: 16px; /* размер шрифта*/
text-decoration: none;
color:##F08080; /* цвет шрифта*/
}
#pscroller2 a:hover{
text-decoration: underline;
}
.someclass{
}
</style>
<script type="text/javascript">

var pausecontent2=new Array()
pausecontent2[0]='<a href="###">Ваш текст</a>'
pausecontent2[1]='<a href="###">Ваш текст</a>'
pausecontent2[2]='<a href="###">Ваш текст</a>'
pausecontent2[3]='<a href="###">Ваш текст</a>'
</script>
<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}

pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}

pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>


При необходимости можно добавлять ещё нужные ссылки приписывая строку

pausecontent2[4]='<a href="###">Ваш текст</a>'

и так далее. Остальные желаемые настройки я отметила в коде пояснениями. Розовым цветом выделен адрес картинки, которую тоже можно заменить на другую. Вместо решёток должны быть адреса ваших страниц куда читатель перейдёт по ссылке и названия страниц, соответсятвенно.
Готовый код установите в гаджет HTML/JavaScript в нужном месте.

В этом сообщении ещё есть вариант блока важных объявлений.


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

</script>
<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent2, "pscroller2", "someclass", 2500)
</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 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 = 170; var sDirection="right"; var sOpenLinkLocation="N"; var sBulletChar="●"; </script> <script src="http://www.shpargalochki.ru/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2"></script>


Здесь всё просто. Вставляйте код в гаджет HTML/JavaScript над сообщениями блога. Замените только адрес домена на свой и количество отображаемых заголовков. Установите нужную скорость.

Вот и всё сегодня. Всем тепла, лета, отдыха.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email


2 комментария:

  1. Вика, все ваши коды копирую и беру себе на заметку, со временем буду экспериментировать. Спасибо, что делитесь своими знаниями!

    ОтветитьУдалить
    Ответы
    1. Алла, не важно когда поэксперементируете, главное что пригодится. Спасибо.

      Удалить

Пользовательский поиск
Foto Saya
My Photo