Hello Friends Welcome to Digital GuruJi
आज में आपको बताउगा की अपनी Website में Table of Contents in Blogger कैसे लगा सकते है। अपनी websites में Table of Content लगाना बहुत ही जरुरी होता है क्योकि अगर आपकी Post बहुत लंबी या फिर बड़ी है तो यूजर आपकी पोस्ट को पड़ते-पड़ते परेशान हो जायेगा और बिना आपकी Post पड़े वापिस चला जायेगा।
यदि आपकी वेबसाइट में Table of Content ऐड होगा तो ऐसा नहीं होगा, टेबल ऑफ़ कंटेंट होने से यूजर अपने मतलब की जानकारी आसानी से देख कर पड़ सकता है। जिससे user को परेशानी भी नहीं होगी और वो अपने मतलब की जानकारी आसानी से बिना समय बर्बाद किये पढ़ सकता है।
Dosto, Table of Content 2020 में बहुत ही माना गया है क्योकि इससे आपकी वेबसाइट का On-Page SEO भी अच्छा हो जाता है और आपकी Blogger Website का Look भी अच्छा लगने लगता है। तो चलिए शुरू करते है- How to Create a Table of Contents For Blogger in Hindi.
अगर WordPress की बात करे तो Table of Content के लिए WordPress में बहुत से Plugins होते है जिससे Plugin को install करते ही आपकी पूरी वेबसाइट की Post और Pages में add हो जाता है लेकिन Blogger में ये काम आपको खुद से ही करना पड़ेगा।
Contents
Table of Content Blogger में कैसे लगते है??
Table of Content को Blogger में लगाने के लिए आपको कुछ Code की जरूरत होगी, जो की में आपको आज provide करुगा। जिससे आप Blogger में आसानी से लगा पाओगे, इसके लिए आपको Post को अंत तक पड़ना होगा।
Table of Content HTML Code 1
<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[
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>
]]></b:skin>.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;}<data:post.body/><div id="post-toc"><data:post.body/></div>Add Table Of Contents In Blogger Post
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div><script>mbtTOC();</script>
टिप्पणियाँ(1)