How to Add Automatic Table of Contents in Google Blogger full guide

How to Add Automatic Table of Contents in Google Blogger full guide

5:55 PM

How to Add Automatic Table of Contents in Google Blogger full guide

How to Generate Automattic Table of Contents in Google Blogger | Hello Dosto I have been able to get you a lot of new or very useful articles, if you are using a google blogger to add more content to the content of the content, or if you have any questions, please help by using the plugin I have been able to add a description of a particular article to my blog,

How to Add Automatic Table of Contents in Google Blogger full guide

Table of Contents in Google Blogger

Google Blogger has added text to the table of content, but if I have to add wordpress to it, it is easy to add, which is what I can use to add a simple plugin, or to add some text to my blogger. I have a nice code, I have used you.


Yah code is originally written, but if you want to get a real code, you can click on the link, then you can add some code to the same code.


Step by Add to Table of Contents in Google Blogger

  1. Open Blogger's dashboard.
  2. Click here for the theme
  3. Click here to edit HTML text.
  4. Try the HTML editor to open your keyboard instead of Ctrl + F or / head search.
  5. I would like to paste your CSS code into the main header.
  6. Find key Ctrl + F or keybar / body search.
  7. Bad me javascript code for body / body to paste it.
  8. The final step is to paste a single text into a single text in the HTML code.
  9. If you do not have any questions, please watch the video.

CSS

<style> article { max-width: 50em; background: white; padding: 2em; margin: 1em auto; } .table-of-contents { float: right; width: 40%; background: #eee; font-size: 0.8em; padding: 1em 2em; margin: 0 0 0.5em 0.5em; } .table-of-contents ul { padding: 0; } .table-of-contents li { margin: 0 0 0.25em 0; } .table-of-contents a { text-decoration: none; } .table-of-contents a:hover, .table-of-contents a:active { text-decoration: underline; } h3:target { animation: highlight 1s ease; } @keyframes highlight { from { background: yellow; } to { background: white; } } </style>

JavaScript



<script type='text/javascript'> var ToC = "<nav class='table-of-contents' role='navigation'>" + "<h2>Table of Contents:</h2>" + "<ul>"; var newLine, el, title, link; $("article h3").each(function() { el = $(this); title = el.text(); link = "#" + el.attr("id"); newLine = "<li>" + "<a href='" + link + "'>" + title + "</a>" + "</li>"; ToC += newLine; }); ToC += "</ul>" + "</nav>"; $(".all-questions").prepend(ToC); </script>


HTML


<article> <div class="all-questions"> </div> </article>


# Final Word


Friends, I hope Phineoya may have liked this article, if you come, then share what things are so that your friends also learn something new.

Also, Read

About

Welcome to technicaltipssakir Online Internet Jankari In Hindi V EnglishMe Me Md Sakir Hussain apni blogger 2018 me satar kr raha hu me is wabsite pr Intrnet se smbhsdit jankari post karunga SEO wabmaster tool youtube online earnig digital markitig wabsit creat ki jankari dunga Hello Dosto Mera Name Md Sakir Hussain Ha Me 12th Pass Hu Our ITI Pass Meri Age 18 Yers h Me Village - Nai Nangla P.O Mandikhera TEL. F.P Jhirka Dstt. Mewat Se Hu Me Blogger Ki Surwat 2018 Me krne Laga Hu Hindi v English Internet Ke Jankari Sher Krta Hu Me Soch Raha H Sbko Internet Ke Jankari Hindi V English Me Mile Our Apna Online Business stat kre .

ConversionConversion EmoticonEmoticon

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Subscribe to: Post Comments (Atom)