Tool to extract headings (h1,h2) in browser Tool to extract headings (h1,h2) in browser - The New Minded Tool to extract headings (h1,h2) in browser Tool to extract headings (h1,h2) in browser

Rabu, 11 Mei 2016

Tool to extract headings (h1,h2) in browser

Leave a Comment

Appearing heading tag
Assalamualaikum and Good Evening,

Today I would like to share about nice and free tool to extract headings (h1,h2,..) in browser.

This tools can be work on the mozilla firefox browser and also google chrome browser, this tool is helping to show quick the heading (h1,h2,h3,...) in the browser at the end of word that have heading. For example you can see the picture above that at the end of word Cara Membuat Templates SEO Friendly has a word (h1). 

I would like to giving a big thankful to Jim Stewart for sharing this code with us. 

So, now I would like to starting the tutorial how to use this tool and coding.

Stylish extension
First is you need to installing stylish extension into your browser. You can get by searching stylish extension as shown in the picture above.
After you done installing that extension what you need to do is to click the symbol S in the menu bar as shown this picture and clicking on the menu "manage styles"

Manage style
 After clicking the manage style this tab would should come out and you click on the write new style.

write new style
After that, this tab should be appear for writing the code.
writing code area
Finally is to write the code inside that space area and giving the file name as "H-tag" and click save.

code
So the code is
h1:after{content:"(h1)";color:white;background-color:blue;font-family:’Helvetica Neue’,Arial,Tahoma,sans-serif;font-weight:bold;}
h2:after{content:"(h2)";color:red;background-color:yellow;font-family:’Helvetica Neue’,Arial,Tahoma,sans-serif;font-weight:bold;}
h3:after{content:"(h3)";color:yellow;background-color:green;font-family:’Helvetica Neue’,Arial,Tahoma,sans-serif;font-weight:bold;}
h4:after{content:"(h4)";color:white;background-color:black;font-family:’Helvetica Neue’,Arial,Tahoma,sans-serif;font-weight:bold;}
h5:after{content:"(h5)";color:black;background-color:yellow;font-family:’Helvetica Neue’,Arial,Tahoma,sans-serif;font-weight:bold;}

Here I would like to share the video tutorial how to use this extension..



I hope this tutorial would be helpful in making as one of your SEO tool guide in knowing the heading tag in your blog/website or also in your competitor website how they organize their template to giving the good SEO in their blog.

If You Enjoyed This, Take 5 Seconds To Share It
SHARE

About Ahmad Hasif


Blogger


Berkongsi Mengenai : Teknik SEO | Info | Tutorial | Freebies |


Untuk sebarang pertanyaan mengenai review atau giveaway boleh emel di:-

[email protected]

0 ulasan :

Catat Ulasan