ব্লগার ওয়েবসাইটে টেবিল অফ কন্টেন্ট কিভাবে তৈরি করবেন | How to making table of contant on your blog post
আজকের আর্টিকেলে আমি আপনাদেরকে ব্লগার পোস্টে টেবিল অফ কনটেন্ট কিভাবে তৈরি করবেন তাই নিয়ে আলোচনা করব। আপনার যদি নতুন ব্লগার হয়ে থাকেন নতুন নতুন ব্লগ লিখছেন তাহলে দেখবেন অনেক প্রিমিয়াম ওয়েবসাইট আছে যেখানে সুন্দর করে টেবিল অফ কন্টেন্ট তৈরি করা থাকে যেগুলি দেখতে অনেকটাই সুন্দর লাগে।
মাঝে মাঝে আমরাও ভাবি যদি আমাদের ব্লগার ওয়েবসাইটে টেবিল অফ কন্টেন সুন্দরভাবে তৈরি করা হয় তাহলে কেমন লাগে। ব্লগার ওয়েবসাইটে কোন আর্টিকেল কে রেংক করাবার জন্য আপনি টেবিল অফ কনটেন্টকে গুরুত্ব দিতে পারেন। টেবিল অফ কন্টেন্ট তৈরি করা ব্লগার একদম সহজ শুধুমাত্র আপনাকে প্রসেসটি জানতে হবে। এই প্রসেস নিয়েই আজকের এই আর্টিকেলে আমরা আলোচনা করব।
কিভাবে ব্লগারে টেবিল অফ কন্টেন্ট তৈরি করবেন ?
টেবিল অফ কন্টেন্ট তৈরি করার জন্য আপনাদেরকে আমাদের দেওয়া নিচে বেশ কিছু স্টেপ ফলো করতে হবে নিচে দেওয়া কোডটিকে প্রথমে আপনি সমস্ত কপি করবেন। তারপর সেটাকে </head> এর উপরে বসিয়ে দিতে হবে।
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.com
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([d]).*?>(.*?)</h([d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>
এবার আপনাকে আপনার ব্লগার ওয়েবসাইটে থিম সেকশনটিতে যেতে হবে সেখানে আপনারা
]]></b:skin>
এবার সেটা কে Blogger Theme এর Html tabe CTRL+F খুঁজে নেবেন আর ঠিক তার উপরে নিচের দেওয়া কোডটিকে বসিয়ে Save করে দেবেন।
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{
border:5px solid #0008FC ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:dashed;
background-color:#ACDEFB;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:Oswald, arial;
display: block;width: 70%;
}
.mbtTOC2 button{
background:#ACDEFB;
font-family:oswald, arial; font-size:22px;
position:relative;
outline:none;
border:none;
color:#2E2E2E;
padding:0 0 0 15px;
}
.mbtTOC2 button a {
color:#FF0313;
padding:0px 2px;
cursor:pointer;
}
.mbtTOC2 button a:hover{
text-decoration:underline;
}
.mbtTOC2 button span {
font-size:15px; margin:0px 10px;
}
.mbtTOC2 li{margin:10px 0; }
.mbtTOC2 li a {
color:#EA1414;
text-decoration:none;
font-size:18px;
text-transform:capitalize;
}
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{
color:#040404;
font-size:15px;
}
.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/*
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
*/
এবার আপনার থিমের মধ্যে একটা জিনিস চেঞ্জ করতে হবে CTRL+F খুঁজে নেবেন <data:post.body/> আর এর জায়গায় আপনাকে <div id=”post-toc”><data:post.body/></div> এই কোডটিকে বসিয়ে দিতে হবে তারপরে আপনার থিমটিকে সেভ করে দেবেন।
এবার আপনি প্রতিটি আরটিকেল লেখার পর আর্টিকেলের শেষ ভাগে নিচে দেওয়া কোনটিকে বসিয়ে আর্টিকেলটিকে পাবলিশ করে দিতে হবে।
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>