Home » Blogger Tutorials, Tricks and Hacks » Awesome JavaScript News Slider Widget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Awesome JavaScript News Slider Widget

Awesome JavaScript News Slider Widget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,071 views

Today’s featured Blogger widget comes from Muhammad Hassan and it’s a News Slider that runs on JavaScript. What it does is it displays a set of texts which scrolls upwards revealing another set of texts, kind of like a news ticker that behaves more like a chat box.

Check out the DEMO.

Of course you can also use this widget for other functions like a testimonial slider, a recent or popular posts slider, and whatever it is that you can come up with that involves text. It loads quickly and is easy to customize too.

Here’s how you can install it in your Blogger blog.

  1. On your Blogger dashboard go to Design then Layout.
  2. Click on any ‘Add a Gadget’ placeholder where you want the news slider to appear.
  3. Scroll down to the list of gadgets and choose ‘HTML/JavaScript’ by clicking on it.
  4. Copy and then paste the code below into the ‘Content’ field (you may leave the ‘Title’ field blank):
<style type="text/css">
#pscroller1{
width: 300px;
height: 80px;
border: 1px solid black;
padding: 5px;
background-color: #efefef;
}
#pscroller2{
width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}
#pscroller2 a{
text-decoration: none;
}
.someclass{ //class to apply to your scroller(s) if desired
}
EXETESTIMONIALS {font-size: 20px; font-style: oblique;}
</style>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent=new Array()

pausecontent[0]='<EXETESTIMONIALS>News Heading:</EXETESTIMONIALS></br><i>Your Latest News...!!!</i></br></br><center align="right"><a href="newsURL">Read More</a></center>'
pausecontent[1]=' <EXETESTIMONIALS>News Heading:</EXETESTIMONIALS></br><i>Your Latest News...!!!</i></br></br><center align="right"><a href="newsURL">Read More</a></center> '

pausecontent[2]=' <EXETESTIMONIALS>News Heading:</EXETESTIMONIALS></br><i>Your Latest News...!!!</i></br></br><center align="right"><a href="newsURL">Read More</a></center> '

</script>
<script type="text/javascript">
/***********************************************
* Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
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 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(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 3000)
</script>

5. Before hitting the ‘Save’ button, be sure to make the necessary changes to the following values:

  • News Heading
  • Your Latest News…!!!
  • newsURL

6. Other optional changes to the widget you might want to consider are its:

  • Size
    • width – currently set at ‘300px
    • height – currently set at ‘80px
    • Pause time – currently set at ‘3000’ (3 seconds)
  1. Hit ‘Save’ and check the result by clicking on the ‘View blog’ or the ‘Preview’ button.

And you’re done. Hope you have fun with your new Blogger widget!

Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here