How to Add a Simple Announcement Widget to Blogger Blog

0

As a Blogger or website owner, there are times when you will want tell your page visitors about the latest happenings in the blog or as a news website/blog administrator, you want to let visitors know about the trending topics. If I keep mentioning tasks that can be accomplished using this widget which I am going to make available to you guys, I will just end up boring you with too many stories. Simply put, today’s tutorial will be focusing on how to create a simple broadcast widget for Blogger.

This widget as I have mentioned can be used for various purposes like letting visitors know about the recent changes in your blog or maybe from showing updates or featured posts to simple announcements. The steps involved in adding it to a Blogger blog is very easy and can be done by following the below steps;

  • Login to your Blogger Dashboard.
  • Navigate to Layout >>> Add a Gadget.
  • Scroll down the pop up page and select HTML/JavaScript.
  • Copy the below code and paste into the HTML/JavaScript box.
<style type="text/css">

/*CSS*/

#edhelper{

background:url(https://www.educativehelper.com/wp-content/uploads/2020/01/EH-announce.png) no-repeat top left;

width: 430px;

height: 20px;

border: 1px solid #ddd;

padding: 3px 3px 3px 40px;

margin:10px 0;

}

#edhelper a{

text-decoration: none;

color:#0080ff;

}

#edhelper a:hover{

text-decoration: underline;

}

.someclass{

}

</style>

<script type="text/javascript">


var pausecontent2=new Array()

pausecontent2[0]='<a href="#">ENTER YOUR BROADCAST MESSAGE HERE</a>'

pausecontent2[1]='<a href="#">ENTER YOUR BROADCAST MESSAGE HERE</a>'

pausecontent2[2]='<a href="#">ENTER YOUR BROADCAST MESSAGE HERE</a>'

pausecontent2[3]='<a href="#">ENTER YOUR BROADCAST MESSAGE HERE</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)

}

// -------------------------------------------------------------------

// initialize()- Initialize scroller method.

// -Get div objects, set initial positions, start up down animation

// -------------------------------------------------------------------

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)

}


// -------------------------------------------------------------------

// animateup()- Move the two inner divs of the scroller up and in sync

// -------------------------------------------------------------------

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)

}

}

// -------------------------------------------------------------------

// swapdivs()- Swap between which is the visible and which is the hidden div

// -------------------------------------------------------------------

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"

}

// -------------------------------------------------------------------

// setmessage()- Populate the hidden div with the next message before it's visible

// -------------------------------------------------------------------

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>


<script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent2, "edhelper", "someclass", 600)

</script>
  • Finally click on ‘Save‘ and you are done.

Further Customization:

There are basically two changes that have to be done to make the widget work as specified.

  • Firstly, you need to change the text ENTER YOUR BROADCAST MESSAGE HERE to the message you want your blog visitors to see appearing in the broadcast widget.
  • Secondly, replace the # with the URL link of the broadcast message. In case the message doesn’t have a URL link, then delete the # thus leaving the href value blank.

Optionally, depending on how fast or slow you want the broadcast message to be going, you can make it faster by adding a value lower than the 600 in the above code or make it slower by increasing the value.

That’s it. Enjoy!

LEAVE A REPLY

Please enter your comment!
Please enter your name here