Blogger પર Table of Contents Add કરતા સીખો
Step I : Blogger પર Login થઈ Theme માં Edit HTML કરો.
Step II : </Head> ને Search કરો.
Step III : આ Code Past કરો. </head> Section Na Just ઉપર આ Code Past કરો.
<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>
Step IV - હવે HTML Theme પર જઈ
]]></b:skin> Code Search કરો
]]></b:skin> આ Code ના Just ઉપર નીચેનો Code Paste કરો અથવા આ Code Direct CSS માં પણ Set Kari શકાઈ છે.
.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;}
Step VI - અને પછી પાછો એક Code Search કરો.
Search <data:post.body/>
Step VII - આ Code મળ્યા પછી તેને નીચે ના Code સાથે Replace કરો.
<data:post.body/> ને Remove કરી તેની જગ્યાએ <div id="post-toc"><data:post.body/></div> Paste કરો.
<div id="post-toc"><data:post.body/></div>
Step VIII- હવે Blogger Post કે Page ના HTML માં જાઓ અને Table of Contents જ્યાં મૂકવું હોય ત્યાં નીચે નો Code Past કરો.
<div class="mbtTOC"> <button onclick="mbtToggle()">Table Of Contents</button> <ul id="mbtTOC"></ul> </div>
Step IX - અને HTML Page માં Blog Post ના Last મા નીચે નો Code Past કરો.
<script>mbtTOC();</script>
Table Of Content box ના background color ને Change કરવા માટે edit કરો #FFFFE0
Border Color ને બદલવા માટે edit કરો #EE5535
Anchor Link Color ને को बदलने के लिए edit करें #0080ff
और आखिर में आप Table Of Contents के Headline text के font color को बदलने के लिए edit करें #707037
