HackingUniversity - Hacks . Tricks . How-To's

21 August 2015

How to Add Moving Page Title using JavaScript Blogger


Usually chrome and other browser display the page title in the tab above with the favicon but in case your page title is little bigger then its hidden, if you want to display whole page title then you can add a little JavaScript which will make your page title to scroll and display its all contents, this little JavaScript can be tweaked by its speed, so you can select what speed you want.

How to Animate Blogger Post Title in Status Bar

I am not able to show you the demo of this thing, but you might have seen this somewhere, so I guess you got it what I actually meant.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for </head> tag & 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>

  3. You can change the speed of scrolling by editing the above numbers in red color, just change it smaller number to increase speed and to bigger number to decrease the scrolling speed.
  4. Now Save your Template and refresh your blog to see this effect.

You will be able to see your page title scrolling and displaying all its content, so now if you are having bigger title no worries as your reader will be able to see whole title easily in a matter of seconds.