<script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin           
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>

4. Now search ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line.


.mbtTOC{border:5px solid #6c6cfe;box-shadow:1px 1px 0 #e1e1fc;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:Raleway,italic;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:Raleway,italic;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:1 1 1 15px}.mbtTOC button:after{content:"\f0dc";font-family:Raleway,italic;position:relative;left:13px;font-size:20px}

5. Lastly search for the <data:post.body/> , there can be more than 1 <data:post.body/> tag , Replace all of them with below code.


 <div id="post-toc"><data:post.body/></div>

6. The coding part ends here, Click on “SAVE” and you are all done!

How to show TOC in blog post?

In order to activate TOC in your Blog post or article, while writing a new post switch to “HTML” mode and then paste the below code just after the first paragraph or before your first heading tag.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">محتويات الموضوع :</button> 
    <ol id="mbtTOC"></ol> 
    </div>

Activating TOC in blog post

To active the TOC plugin paste the below Javascript code after the end of your post.

<p><strong>المصدر :</strong>&nbsp;للرجال فقط</p>


<p><strong>المصدر :</strong>&nbsp;للرجال فقط</p>
<script>mbtTOC();</script>


 

المصدر : للرجال فقط

Shopping Cart