Site icon TheCreatology.com

How to add scrolling text in header to increase blog hits ?

Moving Objects and animating text looks fascinating on a website and it increases number of hits on website. You must of seen websites with moving text in header, which contains latest news, or product offers, or some alert etc. In my recent project, a client just demanded to add text scrolling in header, just like you can see in the screenshot below:

Screenshot showing Text Scrolling

Few days back I wrote about How to add alert bar to grab reader attention in Thesis Theme which grabs visitor attention and increase clicks on blog. In this article we will learn to scrolling text in header, which I believe is another way to increase hit on website.

How to add Scrolling Text in Blog ?

We are using a simple and smart concept here and the analogy behind is by registering scroll text widget in wordpress and further displaying it  by function call in the header. You can follow the procedure below to add scrolling text in wordpress:

Make sure you take full backup of functions.php file using FTP before modifying it.


//Author: Aky Joe
//Email: akyjoe@thecreatology.com

function joe_scroll_text() { ?>
 <div class="text-flash">
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" >
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('ScrollText') ) { ?>

<?php } ?>
</marquee>
</div>
<?php }
register_sidebar(array('name'=>'ScrollText', 'before_title'=>'', 'after_title'=>''));

Make sure you take full backup of header.php file using FTP before modifying it.


<?php
//Function call to display Scroll Text
joe_scroll_text();
?>


.text-flash {
width:188px;
height:32px;
background:#fff;
float:right;
margin:30px 20px 20px;
font-size: 15px;
color:#bc2b21;
padding: 2px 5px;
line-height: 30px;
border: 1px solid #eee;
font-family: Arial;
list-style: none outside none;
}

Demo: Scrolling Text in Header

The scrolling text uses an old school html code “marquee” which scrolls from left to right and vice-versa. Using this tutorial, you will be able move dynamic texts of blog like latest post, news and offers with ease. If you are you using scroll text for your blog then you can share with us here by leaving a comment below.

Exit mobile version