Selasa, 28 Februari 2017

Create 'Table Of Contents' With Multi-level List In JavaScript

Create 'Table Of Contents' With Multi-level List In JavaScript

Link to My Blogger Tricks

Create 'Table Of Contents' With Multi-level List In JavaScript

Posted: 27 Feb 2017 10:07 AM PST

Ever wondered to generate a dynamic Table of Contents list in pure JavaScript without using a single line of jQuery? We have successfully programmed a robust TOC Script in JavaScript and CSS3 entitled as "TOC Plugin V 2.0". This plugin will create a multi-level Table of Contents from a webpage's heading tags on page load in a fraction of a second!

TOC Plugin - Table of contents build in JavaScript

DEMO: The list bellow is dynamically created on page load using this TOC Script.

Introduction To TOC Plugin V 2.0

TOC Plugin V 2.0 is the upgraded version of the TOC Script we released last week. It is much more dynamic in its  functionalities and features compared to the previous one. It is a unique script that auto-generates a TOC from the heading tags (i.e. H1, H2, H3, H4, H5, H6) of the page and adds anchor links to each nested list item.

I recommend the previous version for those bloggers who do not write in-depth content with heading tags of the lower level i.e. (h3,h4,h5). But if you do use multi-level subheadings in your content then V2.0 best suits you.  This new version supports both a flat list or multi-level list of heading tags.

Why Use a TOC?

For webmasters and bloggers who write lengthy articles and divide the article in several sub-sections, the readers may find it difficult reading such long posts without a friendly navigation. The only solution to better present long, lengthy articles is displaying a "Table Of Contents."

TOC is one such feature that you often see on Wikipedia pages to provide easy navigation for long Articles. Wikipedia loves adding a TOC because it helps the readers to jump from one section to another easily.

Is TOC Plugin SEO Friendly?

A TOC gives a basic summary to search engines of what your article is all about. The anchor links inside a TOC offers an added benefit to your SEO efforts. Google loves anchor links and especially when these links are meaningful and provide better navigation and understanding of your blog content.

The contents list generated using TOC plugin is SEO friendly. Anchor links inside it are easily crawled and indexed by search robots. See the image below taken from our last blog post:

JavaScript "Table of Contents" is SEO friendly

Update: TOC V2.0 Anchor links are instantly indexed and crawled by Google minutes after we published this post! :)

Table of contents anchor links indexed by Google

TOC Plugin is must to have if you are serious about ranking high in SERPs.

Features of TOC Plugin

This new version has some additional features as listed below:

  • Coded in pure JavaScript
  • Supports Nested heading tags
  • Numbered Navigation With Counters
  • Finds Heading tags from H2-H6 automatically
  • Adds unique ID to each content section automatically
  • Adds unique ID to each list of anchor links inside TOC 
  • Supports both Flat list & Multilevel List
  • Show/Hide Option
  • Compressed Script
  • Lightweight and fast.
  • SEO Friendly
  • Easily Customized
  • Mobile responsive
  • Executes only when invoked!

How Does It Work?

Optional: You may skip this section if you are not interested in understanding the programming logic used to build this plugin. Click here to go straight to the installation guide.

I have shared the compressed script in the installation section for performance purpose but to give you a more clear idea of how the script gets the list of heading tags and how it converts them into anchor links, please read the detailed explanation below.

Methods Used

The backbone of this entire script is based on using a string search() method with RegExp.

I started by using the getElementById() method to search for all heading tags located inside the DOM having ID "post-toc".

To search for the heading tags <h2>, <h3>, <h3> etc.  I coined a search pattern as explained below.

Using JavaScript Regular Expressions

A regular expression, as you may know is a sequence of characters that forms a search pattern. To search for heading tags, we will need to first create a RegExp or search pattern.

In HTML a heading title will have the following structure:

<h2>Your Sub Heading Text</h2>  

Where <h2> is the opening tag and </h2> is the closing tag. This headline tag could also contain attributes or nested tags such as:

<h2 id="xyz">Your Sub Heading Text With a <a href="#">Hyperlink</a></h2>  

In order to perform a perfect search I came up with the following search pattern after many trials and errors.

/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi  

The pattern above is divided into three important groups as discussed below:

1st Group: ([\d])

  • \d matches a digit (equal to [0-9]) (Matches the opening tag)

2nd Group: (.*?)

  • .*? matches any character between opening and closing tags.

3rd Group: ([\d])

  • \d matches again a digit or single character (equal to [0-9]) (Matches the closing tag)

Other matches

  • <h matches the characters <h literally (case insensitive)
  • .*? matches any character (except for line terminators)
  • > matches the character > literally (case insensitive)
  • < matches the character < literally
  • \/ matches the character / literally
  • h matches the character h literally

Global pattern flags

  • g modifier: global. All matches (don't return after first match)
  • i modifier: insensitive. Case insensitive match (ignores case of [a-zA-Z])

This expression is then passed to replace() function as a search argument.

Using String replace() Method

Once a match is found, the replace method passes these three groups as values to a function with four parameters.

.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(Newheading,opening,Title,closing)  

I hope the colors may better help you in understanding how the RegExp groups refer to which parameter.

The function takes these values and performs these tasks:

  • It first checks if opening tag is equal to closing tag. If it is the function will continue running else it will exit.
  • It will compare the opening tag integer value against the item level.
  • The TOC displays the list in multi-levels where each level represents the hierarchy.  For example H2 is set to be at level 1, H3 at level 2, H4 at level 3, and so on.
  • If opening tag is greater than the level, then start the array list by appending <ol>  at its beginning.
  • Else If opening tag is less than the level, then close the array list by appending </ol></li> at its end.
  • Assign a unique ID to each Heading and return it back as Newheading.
  • The replace() method then replaces the old heading on page with Newheading containing the unique ID.
  • The array lists are added inside the variable mbtTOC which is then appended inside the DOM mbtTOC2 using innerHTML()
  • The function is invoked only when mbtTOC2() is called.

Programming The CSS Counters

The final part was styling the numbered list, assigning a unique index number to each list item. The default look of the TOC ordered list without CSS styling looks like this:

table of contents with multi levels

Which of course does not build a nested relationship between the link at all and is not a good UI.

However after assigning different CSS classes to each ordered list, I was able to transform the look of TOC to something more user friendly:

.point2 {list-style-type:lower-alpha}   .point3 {list-style-type:lower-roman}   .point4 {list-style-type:disc}  

table of contents with multiple levels

The alpha-numeric and Roman values does help in better understanding the relationship between parent and child items. But what if you want only numbers? Something exactly similar to wikipedia TOC? For that CSS counters came in handy!

I came across CSS counters few years back when I introduced a numbered threaded comments system for blogger blogs.

Nested Numbering Of List Items

CSS counters are simple "variables" maintained by CSS whose values can be incremented by CSS rules.

For CSS counters the following properties are used:

  • counter-reset - Creates or resets a counter
  • counter-increment - Increments a counter value
  • content - Inserts generated content
  • counter()function - Adds the value of a counter to an element

Using all these available properties I crafted the following styles:

.mbtTOC2 ol{counter-reset:section1;list-style:none}  .mbtTOC2 ol ol{counter-reset:section2}  .mbtTOC2 ol ol ol{counter-reset:section3}  .mbtTOC2 ol ol ol ol{counter-reset:section4}  .mbtTOC2 ol ol ol ol ol{counter-reset:section5}  .mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}  .mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}  .mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}  .mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}  .mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}  

Where section1, section2, section3 etc. represents CSS counters for the different list levels. In other words they represent the heading tags from H2-H5. I concatenated a counter with its sub-counter in order to create the nested numbered list appearance. (i.e. 1 > 1.1, 1.2 > 1.2.1 and 1.2.1 > 1.2.1.1)

The result was a beautiful interface with nested numbered list as shown below:

table of contents with nested numbered list

Showing and Hiding The ToC

In version two, I replaced the FontAwesome toggle Icon with a Show/Hide toggle link. The function mbtToggle2() first checks the current TOC state, and then generates a new text and a new display style based on that information.

Show/hide button in "Table of contents"

It is called whenever the user clicks on the Show or Hide link, thus making it easy to toggle the content.

Installation Guide

TOC Plugin can easily be installed on any platform. Whether it is a wordpress site, blogspot blog or a simple HTML page. The installation guide consists of three main steps:

  1. Add the JS script and CSS code above </head> tag
  2. Enclose the content section with ID "post-toc"
  3. Add the container Div and the calling function to the page where you wish to display the TOC.

For simplicity, I will discuss the installation steps for blogger blogs only. You can get an idea from these steps in order to integrate the plugin on your 3rd-party CMS platforms.

Add a 'Table Of Contents' In Blogger Posts & Pages

Most blogspot users refer to this plugin as a Table Of Contents widget while in fact it is just a script that needs to be added inside the template and post editor. So using the word widget would be incorrect here, so lets just call it a TOC plugin in short.

Follow these easy steps:

  1. Sign in Blogger > Template
  2. Backup your template
  3. Click "Edit HTML"
  4. Just above </head> tag paste the following source links:
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>  <script type='text/javascript'>   //<![CDATA[   //*************TOC Plugin V2.0 by MyBloggerTricks.com   function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}   //]]>   </script>      
  5. Next search ]]></b:skin> and just above it paste the following CSS code:
    /*####TOC Plugin V2.0 by MyBloggerTricks####*/  .mbtTOC2{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;}   .mbtTOC2 button a:hover{ text-decoration:underline; }   .mbtTOC2 button span {font-size:15px; margin:0px 10px; }    .mbtTOC2 li{margin:10px 0;  }   .mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;}   .mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;}   .mbtTOC2 li li a{ color:#289728; font-size:15px;}    .mbtTOC2 ol{counter-reset:section1;list-style:none}  .mbtTOC2 ol ol{counter-reset:section2}  .mbtTOC2 ol ol ol{counter-reset:section3}  .mbtTOC2 ol ol ol ol{counter-reset:section4}  .mbtTOC2 ol ol ol ol ol{counter-reset:section5}  .mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}  .mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}  .mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}  .mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}  .mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}  /*   .point2 {list-style-type:lower-alpha}   .point3 {list-style-type:lower-roman}   .point4 {list-style-type:disc}   */      

    Make these custom changes if you want:

    • To change background color of container box edit #FFFFE0
    • To change border color of the box edit #f7f0b8
    • To change font color of the headline text edit #707037
    • To change anchor link color edit #0080ff
    • To change link hover color edit #289728
    • If you would like to show the alpha-numeric & roman list style then delete the green highlighted chunk of code and also the two yellow highlighted lines. This will remove the nested numbered list and replace it with alpha-numeric.
  6. Finally search for <data:post.body/> and replace it with the code below:

    Note: You will find this code two or more times inside your template, so replace all its instances with the code below especially the second occurrence. TOC Plugin will not work if you replace <data:post.body/>  just once.

    <div id="post-toc"><data:post.body/></div>
  7. Save your template and you are all done!

How To Show TOC Inside a Post or Page?

Add TOC to only those blog posts which are long and lengthy in length with several subheadings. Adding it to a blog post with just three or less headings does not make sense.

You can add a dynamic TOC inside a blog post in two easy steps.

Step #1 Mention Location Of TOC Container

It is best to display TOC right after your starting paragraph or show it before the first heading on your blog post.

To do this, switch to "HTML" mode of blogger editor and then paste the following HTML code just before the first heading.

<div class="mbtTOC2">   <button>Contents <span>[<a onclick="mbtToggle2()"  id="Tog">hide</a>]</span></button>   <div id="mbtTOC2"></div>   </div>  

 

Step #2  Call The TOC Function

Finally, its time to invoke the plugin so that it could auto-generate a TOC on page load,

To do this, paste the following JS code at the bottom of your blogger editor where your post ends:

<script>mbtTOC2();</script>  

Publish your post and see it in action! :)

Copyrights

Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

© 2008-2017 MyBloggerTricks.com
Version: 2.0  2017/02/27

TOC Plugin by MyBloggerTricks (MBT) is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

You are most welcomed to share the plugin with your readership as long as you attach credit link back to this page. You are most welcomed to use the plugin in your commercial products as long as you keep the source credits intact.

Feedback

Would love to hear your thoughts on this major upgrade. Let me know if it lived up to your expectations. :)

I tried my best to create an SEO friendly and extremely lightweight script to the best of my ability. I hope it may add a new soul to your content and give it a big push in SERPs.  Share it with your friends and #JavaScript lovers!

Let me know if you need any help or further clarification with any part of this tutorial. Would love to help as soon as time allows.

Selasa, 14 Februari 2017

TOC Plugin: Show Automatic Table Of Contents With JavaScript

TOC Plugin: Show Automatic Table Of Contents With JavaScript

Link to My Blogger Tricks

TOC Plugin: Show Automatic Table Of Contents With JavaScript

Posted: 14 Feb 2017 08:12 AM PST

Wikipedia loves adding "Automatic Table Of Contents" for each article it publishes because it engages readers more by providing more accessibility and better navigation. Google prefers high-quality content which is well organized and formatted. Adding elements like tables, numbered sections, and an auto-generated TOC is a big bonus for ranking high in SERPS.

TOC Plugin: Automatic Table of Contents using JavaScript

In this article, we will share a lightweight TOC plugin written in pure JavaScript to automatically generate a table of contents from the section headings of a web page. 

DEMO: The contents table bellow is dynamically created on page load using this TOC Script.

    What is Table Of Contents or TOC?

    In websites, a table of contents abbreviated as TOC or ToC, is a link list, usually found on a web page placed right after the first paragraph. Each anchor link inside a TOC takes you to a specific section of the web page.

    An HTML table of contents provides a quick way to jump to the desired section of a page. It usually includes the titles of the first-level headers (headings) or second level headers(subheadings).

    Table Of Contents of a wikipedia page

    In printable work, a table of contents refers to the index page of the book which contains the page number to each chapter. TOC for books are more in-depth and comprehensive, containing not only section titles but descriptions, author names, and subheadings.

    table of contents of a drawing book

    What Is TOC Plugin?

    TOC plugin developed by MBT, is an automatic solution to the tedious method of creating a table of contents manually for each web page. It auto-generates a user-friendly table of contents for your lengthy blog articles. It is coded in pure JavaScript and loads lightening fast. Contents table generated using TOC plugin is easily crawled and indexed by search robots.

    • Read this interesting article by MOZ which mentions SEO support for all JS methods that we have used so far in building TOC plugin.

    I have not included lower level heading tags (i.e. h3/h4/h5/h6) in TOC plugin because a blog post is neither a wiki nor a long lengthy book, it is best to show only major headlines for simplicity and accessibility. Adding subheadings or lower inside a table of contents only makes it longer in length thus pushing down your main content and destroying visibility.

    Automatic Table Of Contents for blogger blogs

    So far many developers have written a dynamic table of contents script but most of these scripts are either coded in jQuery or they are render-blocking JS eating up your page load time. You may even find table of contents generator but these scripts again lack flexibility and ease of customization.

    Table of contents should be added only to those articles which are lengthy or contain at least four headings. On contrary, some TOC generators will add a table of contents on all your pages whether containing several headings or just a single heading, which of course is not a sensible thing to do.

    jQuery table of contents is much slower compared to this TOC plugin built with traditional pure JS. JavaScript is executed much faster by browsers compared to a JS library (jQuery) that needs to be imported first.

    Features of Table Of Contents (TOC) Plugin:

    It is the first JavaScript plugin of its kind that is unique in several ways as mentioned below:

    • Coded in pure JavaScript - just 10 lines of code!
    • Lightweight and fast.
    • SEO Friendly
    • Adds unique ID to each section automatically.
    • Creates both ordered or unordered list
    • Contains a Toggle button
    • Show on any location you choose
    • Easily Customized
    • Mobile responsive
    • Executes only when invoked!

    Pseudo Code Of TOC Plugin

    Understand how the TOC Script works in plain English. The numbered list below is the pseudo code for our TOC plugin. It is a simplified description of the JavaScript code we wrote.

    Table Of Contents for blogspot blogs

    1. Create a function to print headline links
    2. Count the number of heading sections on a page
    3. Run a loop equivalent to the number of heading sections
    4. Extract text content from the heading titles
    5. Give each heading a different ID
    6. Convert the heading text into an anchor link
    7. Print the heading anchor links inside a bullet list
    8. Find the location by TOC ID to display the list
    9. End the loop
    10. Trigger the function only when invoked inside the page

    Table Of Contents with show/hide button

    Following is the pseudo code for the toggle button which shows or hides the table of contents.

    1. Create a new function to show/hide the TOC.
    2. Show the TOC by default
    3. Use a conditional statement to check if TOC is hidden or visible.
    4. Use CSS to show or hide the TOC
    5. Trigger the function only when button is clicked

    How To Install TOC Plugin in Blogger Blogs?

    I am sharing below the method of adding TOC plugin in Blogspot blogs but you can apply almost the exact same method for installing TOC plugin on any website you want, may it be hosted on Wordpress or anywhere else.

    Follow these steps to install TOC plugin in BlogSpot:

    1. Sign in Blogger > Template
    2. Backup your template
    3. Click "Edit HTML"
    4. Just above </head> tag paste the following source links:
             

      <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
      <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

      <script type='text/javascript'>
      //<![CDATA[

      //*************TOC plugin by MyBloggerTricks.com
      function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
      headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
      {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
      //]]>
      </script>

      Note that I am adding source links to Oswald font and Font-Awesome for styling purposes. You may or may not wish to add them. The code inside purple highlighted lines is the major TOC script in no more than 10 lines!

    5. Next search ]]></b:skin> and just above it paste the following CSS code:
            

      /*####Automatic TOC Plugin by MyBloggerTricks####*/
      .mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}
      .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
      .mbtTOC ul {list-style:none;}
      .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}
      .mbtTOC a{color:#0080ff;text-decoration:none;}
      .mbtTOC a:hover{text-decoration:underline; }

      .mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}
      .mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

      Make these color changes if you want:

      • To change background color of TOC box edit #FFFFE0
      • To change border color of TOC box edit #f7f0b8
      • To change font color of TOC headline text edit #707037
      • To change anchor link color edit #0080ff
      • To change font size of anchor links edit 15px
      • To change font size of TOC headline text edit 20px
    6. Finally search for <data:post.body/> and replace it with the code below:

      Note: You will find two or more occurrences of this code so replace all its instances with the code below:

      <div id="post-toc"><data:post.body/></div>
    7. Save your template and you are all done!

    Show Table Of Contents Automatically in Blog Posts

    Each time you may want to display TOC inside a specific post, follow these two steps.

    Step #1  Mention Location Of TOC Container

    It is best to display TOC right after your starting paragraph or show it before the first heading on your blog post.

    To do this, switch to "HTML" mode of blogger editor and then paste the following HTML code just before the first heading or anywhere else you may want.

    <div class="mbtTOC">       <button onclick="mbtToggle()">Contents</button>       <ol id="mbtTOC"></ol>       </div>  
    • You can replace the text "Contents" with any other text you may like.
    • If in case your headings already contain numbers in beginning then replace ol with ul.

    Add Table Of Contents automatically in blog posts

    Step #2    Activate TOC Plugin

    Finally, its time to invoke the plugin so that it could auto-generate a TOC on page load,

    To do this, paste the following JS code at the bottom of your blogger editor where your post ends:

    <script>mbtTOC();</script>  

    Invoke TOC plugin

    Publish your post and see the magic! :)

    TOC Plugin Copyrights

    Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

    © 2008-2017 MyBloggerTricks.com
    Version: 1.0  2017/02/14

    Table Of Contents (TOC) Plugin by MyBloggerTricks (MBT) is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

    You are most welcomed to share the plugin with your readership as long as you attach attribution link back to this page. You are most welcomed to use the plugin in your commercial products as long as you keep the source credits intact.

    Need Help With TOC Plugin?

    I tried my best making this tutorial as easy as possible but if there is anything you could not understand then please feel free to post your queries below in the comment section. I would love to answer as soon as possible.

    I hope it adds a positive impact on your SERPS ranking and help you in making your content more search-friendly. I will develop the plugin with time, adding more features and functionalities if required. Till then, I would love to hear your feedback on this.  :)

    Selasa, 24 Januari 2017

    Headlines News Widget For Blogger With Tooltips

    Headlines News Widget For Blogger With Tooltips

    Link to My Blogger Tricks

    Headlines News Widget For Blogger With Tooltips

    Posted: 23 Jan 2017 11:28 AM PST

    Headlines News Widget is an awesome, super lightweight plugin for Blogger blogs, which shows headlines of your recent posts as a scrolling text, floating from left to right. It's a horizontal auto scrolling recent posts widget for blogger that is responsive and automatic. It's built using Blogger JSON Feeds API and jQuery News Ticker plugin.

    headlines news widget for blogger with tooltips Scrolling headline news widget surely makes your introductory texts standout and noticeable as soon as a visitor lands on your blog. It's the best way to draw visitors attraction towards your featured content.

    What is a Headlines News Widget For Blogger?

    Headlines News widget is basically a news ticker plugin which shows latest headlines of your blogspot blog as a horizontal scrolling text. It's the first news ticker of its kind for blogger blogs that does not only display your title links like ordinary tickers found across the web but also shows post info such as:

    • Author Name
    • Author Avatar
    • Comments Link
    • Comments Count
    • Published Date
    • Featured Thumbnail
    • Post description/summary snippet

    [Desktop View]

    headlines news widget for blogspot with tooltips

    You can choose to display recent posts by label by specifying a particular category or you can simply choose to show latest posts. It can easily be customized to change its background colors and fonts. Headline news widget is mobile responsive and fits perfectly to different screen sizes.

    [Mobile View]

    news headlines widget - mobile responsive

    We have already released its simplest version but today we will add some more features to it like CSS3 tooltips to display description and featured image. To add a simple news gadget for blogger without tooltips then please check the following tutorial:

    If in case you want a simple news widget to display text, custom html or even RSS/Atom feed then try our jQuery Announcement widget, where you can display headline news in vertical scroll.

    Is Headlines News Ticker Standards-Compliant?

    Headlines News ticker widget uses CSS and jQuery to create the scrolling text animation. It does not uses the <marquee> tag. We are using standards-compliant jQuery script and CSS3 to make the text scroll across the screen. The text animation is controlled used navigation such as play/pause and Next/Previous buttons, which makes it really easy for website visitors to navigate between scrolling headlines. 

    headlines news ticker widget for blogger

    The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. This feature is obsolete now and its use is discouraged by W3C.

    Features of Headlines News Widget

    Headlines News Ticker is an advanced widget equipped with these features:

    • Author Avatar
    • Displays latest posts dynamically
    • Displays recent posts from a specific category/label
    • Tooltips support
    • Shows Post Description/Summary
    • Shows Featured Thumbnail Image
    • Scrolling text with two animations: reveal & fade
    • Clickable Comments Count
    • Custom Date Format
    • Title Length is adjustable
    • Fully Customizable - Multi Colors!
    • Responsive and mobile friendly
    • Controls Navigation. Play/Pause, Next/Previous
    • Support all browsers: Firefox, Chrome, IE, Safari etc.
    Headlines News Widget Specs
    Created Dec 10, 2016
    Last Update Jan 23, 2017
    Compatible Browsers IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
    Technology Used JSON, CSS3, HTML4, jQuery, JavaScript
    Layout Mobile Responsive
    Platform Support Google Blogger 1.0
    Text Direction LTR

    How To add Headlines News Widget In Blogger?

    Follow these easy steps:

    1. Go To Blogger > Template
    2. Backup your template
    3. Click "Edit HTML"
    4. Just below <head> tag paste the following JS and CSS source links:

      <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
      <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

    5. Next search ]]></b:skin> and just above it paste the following code:

      /*--------------Headlines News Widget By MyBloggerTricks.com----------*/

      .ticker-wrapper.has-js{margin:20px 0;padding:0 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#f8f0db;font-size:.75em}
      .ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#f8f0db}
      .ticker-title{padding-top:9px;color:#900;font-weight:700;background-color:#f8f0db;text-transform:uppercase}
      .ticker-content{margin:0;padding-top:9px;position:absolute;color:#1F527B;font-weight:700;background-color:#f8f0db;overflow:hidden;white-space:nowrap;line-height:1.2em}
      .ticker-content a{text-decoration:none;color:#1F527B}
      .ticker-content a:hover{text-decoration:underline;color:#0D3059}
      .ticker-swipe{padding-top:9px;position:absolute;top:0;background-color:#f8f0db;display:block;width:800px;height:23px}
      .ticker-swipe span{margin-left:1px;background-color:#f8f0db;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block}
      .ticker-controls{padding:8px 0 0;list-style-type:none;float:left}
      .ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
      .ticker-controls li.jnt-play-pause{background-image:url(../images/controls.png);background-position:32px 16px}
      .ticker-controls li.jnt-play-pause.over{background-position:32px 32px}
      .ticker-controls li.jnt-play-pause.down{background-position:32px 0}
      .ticker-controls li.jnt-play-pause.paused{background-image:url(../images/controls.png);background-position:48px 16px}
      .ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px}
      .ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0}
      .ticker-controls li.jnt-prev{background-image:url(../images/controls.png);background-position:0 16px}
      .ticker-controls li.jnt-prev.over{background-position:0 32px}
      .ticker-controls li.jnt-prev.down{background-position:0 0}
      .ticker-controls li.jnt-next{background-image:url(../images/controls.png);background-position:16px 16px}
      .ticker-controls li.jnt-next.over{background-position:16px 32px}
      .ticker-controls li.jnt-next.down{background-position:16px 0}
      .js-hidden{display:none}
      .no-js-news{padding:10px 0 0 45px;color:#F8F0DB}
      .left .ticker-controls,.left .ticker-content,.left .ticker-title,.left .ticker{float:left}
      .left .ticker-controls{padding-left:6px}
      .right .ticker-controls,.right .ticker-content,.right .ticker-title,.right .ticker{float:right}
      .right .ticker-controls{padding-right:6px}
      /*########Default Style by MBT#########*/
      .ticker-wrapper.has-js{margin:0 0 -200px;padding:0;width:98%;min-height:242px;display:block;border-radius:0;background-color:#fff;border:0 solid #eee;font-size:12px;overflow:hidden}
      .ticker{width:80%;height:42px;display:block;position:relative;overflow:visible;background-color:#fff}
      .ticker-title{background:#71db00;padding:9px 10px;color:#FFF;font-size:16px;font-family:oswald;text-transform:uppercase;text-shadow:1px 1px 6px #666}
      .ticker-title:after{left:90px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-left:0;margin-top:1px;border-left:13px solid #71db00;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}
      .ticker-content{background-color:#fff;margin-left:18px!important;color:#444;margin-top:1px!important;overflow:visible!important; padding-top: 2px!important;}
      .ticker-swipe{background-color:#fff;position:relative;top:6px;left:110px!important}
      .ticker-swipe span{margin-left:1px;background-color:#fff;border-bottom:1px solid #333;height:12px;width:7px}
      .ticker-controls{padding: 0px!important;margin: 17px 0 0 10px!important;list-style-type:none;position:relative;right:-50px}
      .ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
      .ticker-controls li a{border:0px!important; padding:0px!important;}
      .ticker-controls li.jnt-play-pause,.ticker-controls li.jnt-play-pause.paused,.ticker-controls li.jnt-play-pause.paused.over,.ticker-controls li.jnt-prev,.ticker-controls li.jnt-play-pause.over,.ticker-controls li.jnt-next{position:absolute;background:none}
      .ticker-controls li.jnt-play-pause:after,.ticker-controls li.jnt-play-pause.over:after{content:"\f04c";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
      .ticker-controls li.jnt-play-pause.paused:after,.ticker-controls li.jnt-play-pause.paused.over:after{content:"\f04b";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
      .ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:0}
      .ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:3.6em}
      .ticker .iauthor:before, .ticker .icomments:before, .ticker .idate:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
      .ticker .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin-right:3px;position:relative;
      top: 6px;border: 1px solid #eeeeee;
          -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
          -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
          box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
          padding: 3px;
      }
      .ticker span {padding-right:5px; font-family:Oswald; font-weight:normal}
      .ticker .icomments a{color:#71db00;font-size:11px}
      .ticker .icomments a:hover{text-decoration:underline}
      .ticker .icomments:before{content:'\f086';padding:0 3px 0 0px;color:#777;position:relative; top:-1px}
      .ticker .idate{font-size:11px;padding-right:7px;}
      .ticker .idate:before{content:'\f073';padding:0 5px;color:#777; position:relative; top:-1px}
      .ticker .mbttitle{font-family:oswald;font-size:14px;color:#71db00!important;font-weight:400;text-decoration:none;}
      .ticker .mbttitle:hover{text-decoration:underline}

      /*------ CSS3 Tooltip by MBT -------------*/
      .ticker .tooltip{outline:none;text-decoration:none!important;position:relative}
      .ticker .tooltip strong{line-height:30px}
      .ticker .tooltip > span{width:290px; white-space: normal; padding:15px 15px 0px 15px;opacity:0;top:170%;visibility:hidden;z-index:10;position:absolute;font-family:Arial;font-size:12px;font-style:normal;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}
      .ticker .tooltip > span img{float:right;width:130px;margin:0 0 30px 10px;padding: 0;border: none;}
      .ticker .tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:0px}
      .ticker .tooltip span b{width:15px;height:15px;margin-left:20px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}
      .ticker .tooltip > span{color:#fff; background:#71db00;border:1px solid #94fb26}
      .ticker .tooltip span b{margin-top:-19px;top:10px;background:#71db00;border-top:1px solid #94fb26;border-right:1px solid #94fb26;border-bottom:1px solid #71db00;border-left:1px solid #71db00}

      @media only screen and (max-width:480px) {
      .ticker-content {margin-left: -5px!important;padding-top: 4px!important;}.ticker-title{font-size:10px!important;padding:5px!important;}
      .ticker-controls, .ticker .icomments, .ticker .idate, .ticker .iauthor, .ticker .iauthorpic, .ticker-title:after {display:none;}}

      Make these custom changes

      • To change the green color theme of the News Ticker simply replace the green highlighted color codes with color of your choice. Use our  Color Code Generator.
    6. Save your template.
    7. Now go to Blogger > Layout
    8. Select "Add a Gadget"
    9. Choose "HTML/JavaScript" gadget
    10. Keep the title field empty and then paste the following code inside it:

      <!-- ######### Headlines News Widget By MBT ############# -->

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
      <script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>

      <!-- ######### Writing Callback Function ############# -->
      <script type="text/javascript">
      //----------------------------Defaults
      var ListBlogLink = "http://www.mybloggertricks.com";
      var ListCount = 5;
      var TitleCount = 70;
      var ListLabel ="Widgets";
      var ChrCount = 140;
      var ImageSize = 200;

      //----------------------------Function Start
      function mbtlist(json) {
      document.write('<ul id="js-news" class="js-hidden">');
      for (var i = 0; i < ListCount; i++)
      {

      //-----------------------------Variables Declared
      var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";
      //----------------------------- Title URL
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
      break;
      }
      }
      ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
      //----------------------------------- Title Stirng
      if (json.feed.entry[i].title!= null)
      {
      ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
      }

      if (json.feed.entry[i].thr$total)
      {
      ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
      }
      ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
      ListAuthor=ListAuthor.slice(0, 1).join(" ");
      AuthorPic = json.feed.entry[i].author[0].gd$image.src;


      //################### Content Check
      ListConten = json.feed.entry[i].content.$t;
      ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);

      //################### Date Format

      ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

      ListDate= json.feed.entry[i].published.$t.substring(0,10);

                               Y = ListDate.substring(0, 4);
                              m = ListDate.substring(5, 7);
                               D = ListDate.substring(8, 10);
                               M = ListMonth[parseInt(m - 1)]; 

      //################### Thumbnail Check
      if (json.feed.entry[i].media$thumbnail)
      {
      thumbUrl = json.feed.entry[i].media$thumbnail.url;
      sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
      ListImage= "'" + sk.replace("?imgmax=800","") + "'";
      }

      // YouTube scan
      else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
      {
          var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
         
          if (youtube_id.length == 11) {
              var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
              }
      }


      else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
      {
      // Support For 3rd Party Images
      ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
      }
      else
      {
      ListImage= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'";
      }

      //----------------------------------- Printing List
      var listing = "<li class='news-item'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
      +ListAuthor+ "</span> <span class='icomments'>"
      +ListComments + "</span>  <span class='idate'>"
      + D + " " + M + "</span><i class='fa fa-chevron-right'></i> <a class='mbttitle tooltip' href="
      +ListUrl+
      "><span><b></b><img src="
      +ListImage+
      "/>"
      +ListContent+
      " →</span>"+ListTitle+"</a></li>";
      document.write(listing);
      }}

      document.write("</ul><script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
      /*##########Newsticker settings########*/
          $(function () {
              $('#js-news').ticker({
              speed: 0.20,
              controls: true,  
              titleText: 'Headlines',
              displayType: 'reveal',
              pauseOnItems: 2000});
      });
      </script>

      Make these changes:

      • ListBlogLink : Insert your Blog URL here
      • ListCount : Decide how many headlines do you wish to display.
      • TitleCount : Choose how many characters to display in post title length.
      • ListLabel : Insert your blog label here. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar. News Ticker will not work if label case is not correct. 
      • ChrCount : Set the length of post description here.
      • ImageSize : Set image resolution (aspect ratio) here.
      • speed: Edit this value (0.20) to increase or decrease the scroll speed.
      • controls: Set true to false if you wish to hide the control buttons i.e. Play/Pause, Next/Previous
      • titleText: Set the News Ticker title here from Headlines to anything you like such as Latest, Hottest etc.
      • displayType: There are two types of scrolling text animation, reveal or fade. Set it as per your preference.
      • If you want to show latest posts headlines of your blog without mentioning any specific label/category then simply remove /-/"+ListLabel+" from the code above.
    11. Click Save button and you are all done.

    Enjoy showing animated plus scrolling news headlines to your visitors! :)

    Facing Problems Installing Headlines News Widget?

    I tried keeping these steps as simple as possible but if in case you are facing problems in any step please feel free to post your queries below. I would love to help as soon as time allows.

    I hope this cool headline news  ticker may help you in generating extra pageviews and creating better user engagement. If you liked this plugin and want a similar plugin to be developed for wordPress blogs using the WP rest API, then please post your comments below.

    Have a great day buddies! =)