Banner type Message board with Flipping text effect

Adding some spice to by means of banner type text message on blog builds extra effect on visitors/readers. Here, BlogTariff come up with stylish “Banner type Text board with Flipping text effect” which is based on CSS code. In this widget you don’t need any type of images or additional script code for adding to blog, just copy and paste the wherein a separate message will be displayed with links attached. It’s a customizable code you don’t need to work hard for adding this widget. CSS code displays Flipping text with different size of fonts, colors and all browsers supported. Let’s start the tutorials.

How to Add “Banner type Message Board with Flipping text effect?

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

<!-- STYLE CONFIGURATION STARTS -->
<style>
.textstyle{
 /* style attributes for the text */
 /* ATTENTION: font-color and background-color must be set within the script */
 font-family:Arial;
 font-size:10pt;
 padding:5px;
 text-decoration:none;
 font-weight:bold;
}
.textboxstyle{
 /* style attributes for the text-box */
 /* ATTENTION: width and height must be set within the script */
 overflow:hidden;
 border-style:solid;
 border-width:1px;
 border-color:white;
  /* shadow for Firefox */
 -moz-box-shadow: 5px 5px 8px #AAAAAA;
 /* shadow for Safari and Chrome */
 -webkit-box-shadow: 5px 5px 8px #AAAAAA;
 /* shadow for Opera */
 box-shadow: 5px 5px 5px #AAAAAA;
 /* shadow for Internet Explorer */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#AAAAAA');
}
</style>
<!-- STYLE CONFIGURATION ENDS -->


<script>
<!-- Beginning of JavaScript -
// CREDITS:
// Flip-Color-Board with lamellar effect
// Copyright (c) 2012 BlogTariff. All rights reserved.
// Additional scripts can be found at http://www.blogtariff.com
// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.blogtariff.com
// where this script will be running.
var message= [
///////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS
///////////////////////////////////////////////////////////////////////
// Set your messages and the corresponding links below
// Add as many links as you like
{
text : "Free Tutorials for Bloggers with simple methods",
linkto : "http://www.blogtariff.com"
}, // commra required
{
text : "Blogging Tricks - Tips and SEO Tutorials",
linkto : "http://www.blogtariff.com"
}, // comma required
{
text : "Learn Blogger Tricks and Tips from",
linkto : "http://www.blogtariff.com"
}, // comma required
{
text : "WWW.BLOGTARIFF.COM",
linkto : "http://www.blogtariff.com"
} // comma NOT required
]
// target of the message-link.
// Allowed values are "_top", "_blank", "_parent", "_self" or the name of your frame
var target_url="_blank"
 // width of scroller (pixels)
var textwidth=400
// height of scroller (pixels)
var textheight=42
// number of lamellas.
var x_slices=20
// two colors (required for the color-flip-effect)
var color1="#FFFF00"
var color2="blue"
// pause beween the messages (seconds)
var pause=2
///////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS
///////////////////////////////////////////////////////////////////////
// do not edit below this line
var horizontal_pos=0
var vertical_pos=0
var i_loop=0
var i_message=0
var width_slice=Math.ceil(textwidth/x_slices)
var cliptop=0
var clipbottom=textheight
var i_clipright=1
var content=""
var bg_ticker=new Array(color1,color2)
var font_color=new Array(color2,color1)
var i_color=0
pause=pause*1000
function initiate() {
 getcontent()
 for (i=0;i<=x_slices;i++) {
  document.getElementById("s"+i).innerHTML=content
  var thiss=eval("document.getElementById('s"+i+"').style")
  thiss.left=0+"px"
  thiss.top=0+"px"
   }  document.getElementById("whole").style.left=horizontal_pos+"px"
 document.getElementById("whole").style.top=vertical_pos+"px"
 i_message++
 openlamellar()
}
function openlamellar() {
 clipleft=-width_slice
 clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.getElementById('s"+i+"').style")
            thiss.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
            clipleft+=width_slice
            clipright=clipleft+i_clipright
  }
    i_clipright++
    var timer=setTimeout("openlamellar()",30)
    }
    else {
  clearTimeout(timer)
  document.getElementById("whole").innerHTML=content
  var timer=setTimeout("changemessage()",pause)
 }
}
function getcontent() {
    content="<table cellpadding=0 cellspacing=0 width="+textwidth+" height="+textheight+">"
    content+="<tr valign=middle><td bgcolor="+bg_ticker[i_color]+" align='center'>"
    content+="<a href='"+message[i_message].linkto+"' class='textstyle' style='color:"+font_color[i_color]+";' target="+target_url+">"
    content+=message[i_message].text
    content+="</a></td></tr></table>"
}
function changemessage() {
 i_color++
 if (i_color>1) {i_color=0}
 i_clipright=0
 clipleft=0
 clipright=0
 for (i=0;i<=x_slices;i++) {
        var thiss=eval("document.getElementById('s"+i+"').style")
     thiss.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
 }
 if (i_message>message.length-1) {i_message=0}
 getcontent()
 for (i=0;i<=x_slices;i++) {
        document.getElementById("s"+i).innerHTML=content
    }
 i_message++
 openlamellar()
}
document.write("<div class='textboxstyle' style='position:relative;width:"+textwidth+"px;height:"+textheight+"px;'>")
document.write("<span id='whole' style='position:absolute;'></span>")
for (i=0;i<=x_slices;i++) {
  document.write("<span id='s"+i+"' style='position:absolute;'></span>")
}
document.write("</div>")
window.onload=initiate
// - End of JavaScript - -->
</script>
<!--Please Do not Remove the Credits -->
    <div align='left'>
   <span style='font-style: italic; font-size: 10px; color: solid #ffffff;'><a href='http://www.blogtariff.com/' style='text-decoration: none;' target='_blank'><font color='grey' decoration='none'>Get this widget</font></a></span>
  </div>
<!---------BlogTariff.com----------------->

Customization:

After successful pasting the above code now, replace the tags in the above code as below.

• Replace "http://www.blogtariff.com" with your Blog/Website URL or page URL or post URL as highlighted in RED COLOR
• Replace “BLUE COLOR” word with your link description words

Note: Don’t alter remaining code it may not work properly.
If not working on your blog bring to us we try for you.
After successful altering the above code now, “Save the Template”

Appreciation:

If you enjoyed the above article let know your views and suggestions via comments. We always appreciate on Subscribing to US – Don’t miss ensuing posts.