How to Add Moving Page Title using JavaScript in Blogger

In browsers like Google chrome, etc. page title is displayed in the tab above with the favicon. But the page title is not displayed if it is bigger in size. For those of you who want to display the complete page title will have to add a little JavaScript. This piece of code will make your page title to scroll and all of its contents will be displayed, this JavaScript code can be squeezed by its speed, therefore you can set the speed accordingly.

Add Moving Page Title using JavaScript Blogger

Steps to Animate Blogger Post Title in Status Bar

It is not feasible to show the complete demo of the process but it is quite simple to understand and will be able to relate the process as you might have done something like this before.

Open Blogger > Template > Edit HTML.
Press Ctrl + F & search for </head> tag and paste below code above it.

<b:if cond='data:blog.pageType ==  &quot;index&quot;'><script>var title=&quot;  <data:blog.pageTitle/> &quot;;var speed=200;var  mpse=null;function  rotulo_title(){document.title=title;title=title.substring(1,title.length)+title.charAt(0);mpse=setTimeout(&quot;rotulo_title()&quot;,speed)}rotulo_title();</script>  <b:else/><script>var title=&quot;  <data:blog.pageName/> &quot;;var speed=200;var  mpse=null;function  rotulo_title(){document.title=title;title=title.substring(1,title.length)+title.charAt(0);mpse=setTimeout(&quot;rotulo_title()&quot;,speed)}rotulo_title();</script></b:if>

The speed of scrolling can be easily changed by editing the numbers in red colour present above. You can change it to smaller number to increase speed and for decreasing the scrolling speed change to bigger number.

Also see: "Select Text and Share it on Twitter" Widget for Blogger

You can now Save your Template and refresh your blog to see the changes that you have done.
Your page title will now be scrolling and all of its contents will be displayed. So now you don’t have to worry about bigger titles because all the visitors will be able to see the complete title easily within a few seconds.

1 comment: