How to Display Animated Highlighter Text Widget for Blogger?

BlogTariff carry another most effective way to display text in Highlighted with animated effect. This animated text widget displays in various colors to share with others about information or Text links or anything. Webmasters definitely loves this widget because of its effective Text scrolling with eye-catching colors and it is customizable.
Bloggers have no need to work hard just add to share this Text Animated widget on their blog to display information about blog. Let’s begin the Tutorial.
Before you implement this on your blog You may like Watch Our

Live DEMO

How to Add Animated Highlighter Text widget for Blogger?

Sign into your blogger account
Click on “Design (Layout in the new blogger interface) Page Elements” link tab
Now, Click on “Add a Gadget” link Tab
Select “HTML/Javascript” widget and copy the below code and paste in it

<div style="left: 0px; position: relative; top: 0px;"><span id="highlighter" style="background-color: pink; clip: rect(0px 0px auto 0px); font-family: georgia; font-size: 18px; left: 0px; position: absolute; top: 0px;"></span></div><br />
<script type="text/javascript">
var tickercontents=new Array()
tickercontents[0]='Blogger Tricks and Social Networking Tips'
tickercontents[1]='Code by : www.BlogTariff.com'
var tickdelay=3000
var highlightspeed=10

var currentmessage=0
var clipwidth=0

function changetickercontent(){
crosstick.style.clip="rect(0px 0px auto 0px)"
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}

function highlightmsg(){
var msgwidth=crosstick.offsetWidth
if (clipwidth<msgwidth){
clipwidth+=highlightspeed
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipwidth=0
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}

function start_ticking(){
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}

if (document.all || document.getElementById)
window.onload=start_ticking
</script>
<p><a style=" font-size:9px; color:#ffffff; text-decoration:none;" href="http://www.blogtariff.com">BlogTariff.com</a></p>

Customization

• Replace the above Red color words with your Information
• Replace the above Blue color code with your blog URL or Website URL

After successful replacing words now, "Save the widget" and Template to preview.

Appreciation

If you enjoyed this article let know your views and suggestions via comments. We always appreciate on Subscribing to US - Don't miss our ensuing posts.