How to add table of contents in blogger?
 |
What are the benefits of installing a table of contents in your articles?
First, including a summary or table of contents in your articles is the best way to optimize navigation and improve the user experience. It will make your blog look professional and organized.
In addition to being highly appreciated by Internet users, this feature facilitates access to information in particular, especially when you write long articles of more than 3000 words.
The summary has the other advantage of boosting the ranking of your articles for search engines, especially if they are well structured with titles and sub-titles that contain relevant keywords.
You have the option to add it to Blogger either manually or automatically . The automatic option does not mean that it will appear in each of your articles, you will always have the choice to include it or not according to your needs.
CREATE AN AUTOMATIC SUMMARY IN BLOGGER
FIRST METHOD
This automatic table of contents will look for the titles <h2>(<h2> Your title </h2>) automatically in your article. They will then be gathered in a nice table where you want them.
Its operation resembles that of the famous Wikipedia encyclopedia.
Reminder : Before starting any modification of the HTML code of your theme, I strongly advise you to save a copy of your theme.
Step 1. Click on "Theme"> "Edit HTML code"
Step 2. A box containing the HTML code of your theme will be displayed
Step 3. Click anywhere inside the HTML code
Step 4. Then press Ctrl + F at the same time or Cmd + F for Mac, a small search bar should appear at the top right.
Step 5. Look for the beacon </head>
Step 6. Insert the following code above the tag </head>
//<![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 = 'blogk';} else {mbt .style.display = 'none';}}
//]]> Now, we are going to add some style elements to personalize our summary.
Insert the following code just above the tag ]]></b:skin>
/* Table of Contents - Geeky Atul */
.mbtTOC{border:5px solid #eee9e9; /*le style et la couleur de la bordure */
box-shadow:1px 1px 0 #e3dede;
background-color:#fafafa; /* Changer la couleur de l'arrière plan (le fond) de votre table*/
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:open sans, arial;display: block;
width: 85%;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;} .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;} .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;} .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 -6px 3px;font-size:15px;}
.mbtTOC a{color:#0080ff;text-decoration:none;}
.mbtTOC a:hover{text-decoration:underline; }
.mbtTOC button{background:#fafafa;
font-family:open sans, arial; font-size:20px;
position:relative;
outline:none;cursor:pointer; border:none;font-weight: bold;text-transform: uppercase;
letter-spacing: 1px;color:#000;padding:0 0 0 15px;}
.mbtTOC button:after{content: "\f0dc";
font-family:FontAwesome; position:relative;
left:10px; font-size:20px;} You must then search for the code <data:post.body/>in your search bar
You're probably going to find it multiple times in your theme's HTML code, so replace it each time with the following code:
<div id="post-toc"><data:post.body/></div>Save the changes made to your theme.
Now we will see how to activate the table of contents, because as I already explained to you in the introduction, it will not be generated in each article written.
If you want to display it in a specific article, just insert a piece of code in the HTML pane when editing the article.
When you have finished writing your article, switch to "HTML" mode to activate the display of your table of contents.
First stage
Insert the activation code where you want the table of contents to appear. In our example, we will display it just after the introduction and before the first main title as up in the following image:
Tip : before adding the activation code in the HTML mode of your article, you can mark the spot first in the visual or "Write" mode to facilitate insertion.
In the example, I marked it with the highlighted text " I want to display my table of contents here ".
Second step
In HTML view, insert the following code in the place you marked before.
<div class="mbtTOC">
<button onclick="mbtToggle()">Table of Contents</button>
<ul id="mbtTOC"></ul>
</div> Third step
<button onclick="mbtToggle()">Contents</button>
You can replace "Contents" with another name of your choice, for example "Table of contents" or "Quick navigation".
Fourth step
We just have to add a last line of code to finish activating the summary at the end of the HTML code of our article.
<script>mbtTOC();</script>This automatic table of contents was developed by MyBloggerTricks.com. I took care to customize it by adding some CSS properties.
Now that you know how to add an automatic table of contents to your articles, we will discuss the manual addition process in the next section.
SECOND METHOD
Copy the following CSS and JavaScript codes before the tag </head> or </body>
CSS code:
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.bwstoc {
margin: 10px 0;
background: #F0F0F0;
border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
margin: 0 0 15px 20px;
padding: 0;
}
.bwstoc ul {
list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
font-size: 95%;
padding: 5px 10px 0 0;
margin: 0 0 0 30px;
}
.bwstoc a {
text-decoration: none;
}
.bwstoc a:hover {
text-decoration: underline;
}
.bwstoc .bwstocHeader {
font-weight: bold;
font-size: 100%;
position: relative;
outline: none;
border: none;
padding: 5px 15px 5px 5px;
margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
text-decoration: none;
cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
text-decoration: underline;
}
</style><b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.bwstoc {
margin: 10px 0;
background: #F0F0F0;
border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
margin: 0 0 15px 20px;
padding: 0;
}
.bwstoc ul {
list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
font-size: 95%;
padding: 5px 10px 0 0;
margin: 0 0 0 30px;
}
.bwstoc a {
text-decoration: none;
}
.bwstoc a:hover {
text-decoration: underline;
}
.bwstoc .bwstocHeader {
font-weight: bold;
font-size: 100%;
position: relative;
outline: none;
border: none;
padding: 5px 15px 5px 5px;
margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
text-decoration: none;
cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
text-decoration: underline;
}
</style>c<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.bwstoc {
margin: 10px 0;
background: #F0F0F0;
border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
margin: 0 0 15px 20px;
padding: 0;
}
.bwstoc ul {
list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
font-size: 95%;
padding: 5px 10px 0 0;
margin: 0 0 0 30px;
}
.bwstoc a {
text-decoration: none;
}
.bwstoc a:hover {
text-decoration: underline;
}
.bwstoc .bwstocHeader {
font-weight: bold;
font-size: 100%;
position: relative;
outline: none;
border: none;
padding: 5px 15px 5px 5px;
margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
text-decoration: none;
cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
text-decoration: underline;
}
</style> JavaScript code:
<!-- Blogger TOC -->
<script type='text/javascript'>
//<![CDATA[
function bwstoc() {
var bwstoc = i = headinglength = getheading = 0;
headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
if (headinglength > 1) {
// Hanya Tampil Jika Ditemukan Minimal 2 Heading
for (i = 0; i < headinglength; i++) {
getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
var bws_2 = bws_1.trim();
var getHeadUri = bws_2.replace(/s/g, "_");
document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
document.getElementById("bwstoc").innerHTML += bwstoc;
}
} else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
var bwstocBtn = document.getElementById('bwstoc');
var bwstocWrapID = document.getElementById('bwstocwrap');
var bwstocLink = document.getElementById('bwstocLink');
if (bwstocBtn.style.display === 'none') {
bwstocBtn.style.display = 'block';
bwstocWrapID.style.display = 'block';
bwstocLink.innerHTML = 'Tutup';
} else {
bwstocBtn.style.display = 'none';
bwstocWrapID.style.display = 'inline-block';
bwstocLink.innerHTML = 'Tampil';
}
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if><!-- Blogger TOC -->
<script type='text/javascript'>
//<![CDATA[
function bwstoc() {
var bwstoc = i = headinglength = getheading = 0;
headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
if (headinglength > 1) {
// Hanya Tampil Jika Ditemukan Minimal 2 Heading
for (i = 0; i < headinglength; i++) {
getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
var bws_2 = bws_1.trim();
var getHeadUri = bws_2.replace(/s/g, "_");
document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
document.getElementById("bwstoc").innerHTML += bwstoc;
}
} else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
var bwstocBtn = document.getElementById('bwstoc');
var bwstocWrapID = document.getElementById('bwstocwrap');
var bwstocLink = document.getElementById('bwstocLink');
if (bwstocBtn.style.display === 'none') {
bwstocBtn.style.display = 'block';
bwstocWrapID.style.display = 'block';
bwstocLink.innerHTML = 'Tutup';
} else {
bwstocBtn.style.display = 'none';
bwstocWrapID.style.display = 'inline-block';
bwstocLink.innerHTML = 'Tampil';
}
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>c<!-- Blogger TOC -->
<script type='text/javascript'>
//<![CDATA[
function bwstoc() {
var bwstoc = i = headinglength = getheading = 0;
headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
if (headinglength > 1) {
// Hanya Tampil Jika Ditemukan Minimal 2 Heading
for (i = 0; i < headinglength; i++) {
getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
var bws_2 = bws_1.trim();
var getHeadUri = bws_2.replace(/s/g, "_");
document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
document.getElementById("bwstoc").innerHTML += bwstoc;
}
} else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
var bwstocBtn = document.getElementById('bwstoc');
var bwstocWrapID = document.getElementById('bwstocwrap');
var bwstocLink = document.getElementById('bwstocLink');
if (bwstocBtn.style.display === 'none') {
bwstocBtn.style.display = 'block';
bwstocWrapID.style.display = 'block';
bwstocLink.innerHTML = 'Tutup';
} else {
bwstocBtn.style.display = 'none';
bwstocWrapID.style.display = 'inline-block';
bwstocLink.innerHTML = 'Tampil';
}
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if> You should then search for the code <data:post.body/>in your search bar, you will probably find it repeatedly (usually three times) in your theme's HTML code. Replace the third code with the following code:
<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Sommaire [<a id='bwstocLink' onclick='bwstocShow()'>Afficher</a>]</div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div> Tip : If this fails, replace the other codes in turn<data:post.body/>
The JavaScript code will automatically gather all the headlines </h3>and </h4>your Blogger article for display in the summary.
HOW DO I ADD A TABLE OF CONTENTS TO MY ARTICLES MANUALLY IN BLOGGER?
The manual table of contents will look for the main titles h2 ( <h2>Your title </h2>) of your article.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script> Then add this CSS code to customize the design of the table of contents
Copy and paste the following code above the tag ]]></b:skin>
/* TDM Geeky Atul */
#tdm-ub{border-radius:3px;padding:10px 20px;border: 5px solid #eee9e9;box-shadow: 1px 1px 0 #e3dede;background-color: #fafafa;color: #707037;line-height: 1.4em;margin: 30px auto;font-family: open sans, arial;display: block;width: 85%;}
#tdm-hd{background: #fafafa;font-family: open sans, arial;font-size: 20px;position: relative;outline: none;border: none;font-weight: bold;text-transform: uppercase;letter-spacing: 2px;color: #000;padding: 0 0 0 15px;}
#tdm li{background:transparent;margin:.2em 0 .2em 1em;padding: 4px 0px 0px 15px;font-size: 15px;}
#tdm ol li:before{left:-2em}
#tdm li a {color:#0080ff;text-decoration:none;}
#tdm li a:hover{color:#2cc990;text-decoration:underline;}
#tdm{display:grid}
Save the changes made to your theme
Now to activate the summary in a blog post, follow these steps:
In the "Articles" menu, select the article in which you want to add a summary
Then insert the activation code in the HTML pane where you want it to appear (see the integration tip in part one).
Here is the activation code for the numbered table of contents:
<div id="tdm-ub">
<div id="tdm-hd">Table of Contents</div>
<div id="tdm">
<ol>
<li><a href="#tdm_1" title="Title 1">Here I write my first title</a></li>
<li><a href="#tdm_2" title="Title 2">Here I write my second title</a></li>
<li><a href="#tdm_3" title="Title 3">Here I write my third title</a></li>
<li><a href="#tdm_4" title="Title 4">Here I write my fourth title</a></li>
<li><a href="#tdm_5" title="Title 5">Here I write my fifth title</a></li>
<li><a href="#tdm_6" title="Title 6">Here I write my sixth title</a></li>
</ol>
</div>
</div> Note : If you want to display your table of contents as a bulleted list , change the property <ol> and </ol> by <ul> and </ul>.
<div id="tdm-ub">
<div id="tdm-hd">Table of Contents</div>
<div id="tdm">
<ul>
<li><a href="#tdm_1" title="Title 1">Here I write my first title</a></li>
……………………………………………………………..
…………………………………………………………….
………………………………………………………………
</ul>
</div>
</div>
Complete the activation code by entering your various titles in the lines:
<li><a href="#tdm_1" title="Title 1">Here I write my first title</a></li>
<li><a href="#tdm_2" title="Title 2">Here I write my first title</a></li>
Etc.Now add an identifier to each of your titles in the HTML pane
tdm_1 for title 1
tdm_2 for title 2, and so on.
To do this, follow these steps:
First, locate your titles in the HTML pane of your article. You will notice that all of your main titles are surrounded by the following tags <h2> your title </h2>
Finally, save the changes and view the results before your article is published.
So ! That's it for this tutorial on how to create a custom table of contents in Blogger.
Thank you to you and do not hesitate to share this tutorial on social networks if you think it could be useful for other people.
° ° °
Post a Comment