Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger jQuery » Blogger Tutorial » How-to » How to Add Moving Page Title using JavaScript in Blogger

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.
Add Comment
Blogger jQuery Blogger Tutorial How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Customize Blogger Threaded/Nested Comments with CSS
    Customize Blogger Threaded/Nested Comments with CSS
  • Download Best and SEO Friendly Blogger Templates for your Blog
    Download Best and SEO Friendly Blogger Templates for your Blog
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ▼  2015 (28)
    • ►  November (1)
    • ▼  September (7)
      • Getresponse Vs iContact – Which Email Marketing pl...
      • Hide/Show Widgets/Gadgets in Home/post/static/arch...
      • How to Add Moving Page Title using JavaScript in B...
      • Add a YouTube Subscribe Button in Blogger
      • "Select Text and Share it on Twitter" Widget for B...
      • How to Add Whatsapp Share Button in Blogger
      • Learn how to save or preview posts in blogger
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ►  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates