नमस्कार ब्लॉगर मित्रांनो, तुम्हाला पण तुमच्या ब्लॉगर पोस्टमध्ये Table of Content add करायचे असेल तर तुम्ही काही मिनिटांत तुमच्या blogger वर Table of Content जोडू शकता. आजच्या लेखात मी तुम्हाला Blogger वर “Table of Contents” कसे Add करायचे याविषयी सविस्तर अशी स्टेप बाय स्टेप माहिती सांगणार आहे. त्यामुळे कृपया हा लेख शेवटपर्यंत काळजीपूर्वक वाचा.
मित्रांनो, जर तुम्ही तुमच्या वेबसाइट आणि ब्लॉगमध्ये Table of Content Add केला तर तुम्हाला त्याचा फायदा SEO मध्ये मिळेल आणि तुमच्या वेबसाइट आणि ब्लॉगला SERP मध्ये चांगली चालना मिळेल.
आणि तसे म्हटले तर तुमची वेबसाईट आणि ब्लॉग थेट Feature Snippet मध्ये येतील आणि तुम्हाला अधिक व्हिजिटर्स देखील मिळतील. चला तर मग जाणून घेऊया ब्लॉगर पोस्टमध्ये Table of Content add कसे करायचे?
Table Of Contents काय आहे?
मित्रांनो, जेव्हा तुम्ही गूगलवर एखादा ब्लॉग सर्च केला असेल आणि तेव्हा तुम्हाला एक टेबल नक्कीच सापडला असेल आणि त्यामध्ये तुम्हाला त्या पोस्टमधील सर्व हेडिंगची माहिती पाहावयास मिळाली असेल.
आणि यातून तुम्ही त्या पोस्टमध्ये तुम्हाला काय वाचायचे आहे ते निवडू शकता आणि त्यानुसार तुम्ही हेडिंगवर क्लिक केल्यास तुम्ही थेट त्याच माहितीवर जाल आणि यालाच Table Of Contents असे म्हणतात.
आणि हो मित्रांनो, त्याचा सर्वात मोठा फायदा हा आहे की तुमचा प्रत्येक परिच्छेद गुगलमध्ये रँक देखील करेल, त्यामुळे आता तुम्ही तुमच्या ब्लॉगर ब्लॉगमध्ये ही Table Of Contents नक्की add करा.
Blogger वर “Table of Contents” कसे Add करायचे
मित्रांनो, सर्वात अगोदर मी तुम्हाला फक्त स्टेप्स सांगत आहे आणि त्यानंतर मी एक एक करून सर्व स्टेप्स डिटेल्स मध्ये सांगेन.
- Log In to Blogger Account
- Go To Theme
- Go To Edit HTML
- Add Code in <Head> Section.
- Add Code in ]]></b:skin> Section
- Replace Code in Body
- Add Code in Post & Article
- Last Code End of the Posts
चला तर मग मित्रांनो एक-एक स्टेप्स विषयी माहिती बघूया.
स्टेप:1 – Log In to Blogger Account
सर्वप्रथम तुम्हाला तुमच्या Blogger Account मध्ये लॉग इन करावे लागेल.
स्टेप:2 – Go To Theme
मित्रांनो, आता तुम्ही Theme या ऑपशन वर क्लिक करा.
स्टेप:3 – Go To Edit HTML
आता Customize वर जा आणि त्यानंतर Edit HTML वर जा.
स्टेप:4 – Add Code in <Head> Section.
तुम्ही आता Search </head> tag and Paste below HTML Code above the </head> tag
खालील कोड कॉपी करा
<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[
//*************Table of Content (TOC) plugin by soumyahelp.com
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById(“post-toc”).getElementsByTagName(“h3”).length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById(“post-toc”).getElementsByTagName(“h3”)[i].textContent;document.getElementById(“post-toc”).getElementsByTagName(“h3”)[i].setAttribute(“id”, “point”+i);avsTOC = “<li><a href=’#point”+i+”‘>”+gethead+”</a></li>”;document.getElementById(“avsTOC”).innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById(‘avsTOC’);if (avs .style.display === ‘none’) {avs .style.display = ‘block’;} else {avs .style.display = ‘none’;}}
//]]>
</script>
स्टेप:5 – Add Code in ]]></b:skin> Section
Next, Search for ]]></b:skin> Code and Paste Below CSS Code before ]]></b:skin>, इमेजच्या अगदी खाली
खालील कोड कॉपी करा
.avsTOC{border:5px solid #EE5535;
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%;}
.avsTOC ol,.avsTOC ul {margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li {padding:15px 0 0;
margin:0 0 0 30px;font-size:15px;}
.avsTOC a{color:#EE5535;text-decoration:none;}
.avsTOC a:hover{text-decoration:underline; }
.avsTOC 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;}
.avsTOC button:after{content: “\f0dc”;
font-family:FontAwesome; position:relative;
left:10px; font-size:20px;}
आता तुम्हाला हे सर्व Save करून घ्यायचे आहे.
स्टेप:6 – Replace Code
आता, Search करा <data:post.body/> आणि त्यास खालील कोडने बदला
<div id=”post-toc”><data:post.body/></div>
स्टेप्स:7 – Add Code in Post & Article
आता तुम्हाला तुमच्या पोस्टमध्ये Table of Contents जोडावा लागेल आणि तुम्हाला तुमची Table of Contents हव्या असलेल्या ठिकाणी कोड टाकावा लागेल.
कोड कॉपी करा आणि तुमच्या पोस्टमध्ये Add करा.
<div class=”avsTOC”> <button onclick=”avsToggle()”>Contents</button> <ol id=”avsTOC”></ol> </div>
स्टेप:8 – Last Code End of the Posts
आता तुम्हाला एक कोड घ्यावा लागेल आणि तो पोस्टच्या शेवटी म्हणजेच शेवटच्या बाजूला ठेवावा लागेल. तो कोड मी खाली दिलेला आहे.
<script>avsTOC();</script></div>
निष्कर्ष
मित्रांनो, आजच्या लेखात ब्लॉगर पोस्टमध्ये Table of Content कसे जोडायचे? याविषयी स्टेप बाय स्टेप माहिती शेअर केली आहे. या स्टेप्सला फॉलो करून तुम्ही अगदी काही मिनिटांत तुमच्या ब्लॉगर मध्ये Table of Content Add करू शकता.
जर तुम्हाला काही स्टेप्स किंवा काही समस्या असतील तर कृपया खाली कमेंट मध्ये नक्की सांगा. धन्यवाद.
अधिक वाचा: How to Buy Hosting from Bluehost in Marathi | Bluehost वरून होस्टिंग कसे खरेदी करावे
Table of content
व्हिडिओ बनवा या वरती
Okay