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

  • 30 Pure CSS Loading Animations Examples From CodePen
    30 Pure CSS Loading Animations Examples From CodePen
  • Add Auto Read More with Thumbnail to Blogger/Blogspot
    Add Auto Read More with Thumbnail to Blogger/Blogspot
  • Random Posts Displaying Button for Blogger
    Random Posts Displaying Button for Blogger
  • How to Add Official Contact Form to a Specific Page in Blogger / Blogspot
    How to Add Official Contact Form to a Specific Page in Blogger / Blogspot
  • Things to do when creating a Blog
    Things to do when creating a Blog
  • How to generate sales with a high converting landing page
    How to generate sales with a high converting landing page
  • How to fix Blogger Image Color Changing Issue
    How to fix Blogger Image Color Changing Issue
  • What is Responsive Design and how can it Benefit Your Site
    What is Responsive Design and how can it Benefit Your Site
  • 6 Simple Ways Students Can Make Money Online
    6 Simple Ways Students Can Make Money Online
  • Are you using SSL ? As Now It Is A Ranking Factor !
    Are you using SSL ? As Now It Is A Ranking Factor !

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