Saturday, September 19, 2020
Home Blogging Tips & Tweaks How to Add a Simple Announcement Widget to Blogger Blog

How to Add a Simple Announcement Widget to Blogger Blog

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

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments