 |
| ALL BANGLA NEWS |
Table of Content কি?
ব্লগার এ ফিচারটি আপনার প্রত্যেকটি পোষ্টের সঙ্গে ব্যবহার করতে হয়। এটি ব্যবহার করলে খুব সহজে একজন ইউজার তার মূল টপিক খুঁজে পায়। যে ইউজারের যেই টপিক বাজে হেডলাইন সম্পর্কে জানার প্রয়োজন সে শুধুমাত্র সেই টপিক কি খুঁজে পাবে খুব সহজে।
এছাড়াও এই ফিচারটি কি এই বিষয়টি জানতে আমাদের পোস্টের টেবিল অফ কনটেন্ট বক্সটি দেখুন।
Table of Content এর সুবিধা কি?
এই ফিচারটির সুবিধা অনেক। এই ফিচারটির মাধ্যমে যে কোন ভিজিটর বা ইউজার খুব সহজেই তার মূল্যবান যে হেডলাইন বা টপিক সেই টপিকটি তারা খুঁজে পাবে।
অনেকে দেখবেন যে একটি পোষ্টের মধ্যে অনেক ওয়ার্ডের একটি পোস্ট দেখা হয় এবং অনেকগুলি হেডলাইন এবং ইনফরমেশন যুক্ত করা হয়।
কিন্তু অনেক ইউজারদের কিন্তু সব বিষয়ের প্রয়োজন হয় না এজন্য যেকোন ইউজার বা ভিজিটর যে কেউ চাইলে তার নির্দিষ্ট টপ একটি সম্পর্কে সে সহজেই খুঁজে পাবে এবং প্রয়োজন মেটাবে।
শুধুমাত্র এই বিষয়টির উপরে লক্ষ্য রেখেই ব্লগার এই Table of Content ফিচারটি যুক্ত করা হয়।
কিভাবে আপনি আপনার ব্লগ সাইটে যুক্ত করবেন?
এই কাজটি করার জন্য এখন আমি শুধু আপনাদেরকে ধাপ গুলি বলছি পরবর্তীতে এই ধাপগুলো একদম ব্যাখ্যা করে প্র্যাকটিক্যালি দেখিয়ে দিব।
- · 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
চলুন এখন আমরা এই ফিচারটি আমাদের ব্লগ ওয়েবসাইটে সেটআপ করি।খুবই সহজ একটু ধৈর্য সহকারে আপনারা নিচের স্টেপ গুলো ফলো করুন।
আপনার জন্য-গুগল এডসেন্স গ্যারান্টেড কিওয়ার্ড লিস্ট
ধাপ-০১- Log In to Blogger Account
এই ধাপে আপনি আপনার ব্লগ ওয়েবসাইটের লগইন করুন অর্থাৎ আপনার অ্যাকাউন্টটি তে লগইন করে নিন। নিচের এই ছবিটি দেখুন
ধাপ -০২: Go To Theme
এখন আপনি আপনাদের ব্লগার সাইটের থিম অপশন এ যান। নিচের ছবি ফলো করুন।
ধাপ-০৩: Go To Edit HTML
এখন আপনি ইডিট এইচটিএমএল এই অপশনটির উপরে ক্লিক করুন। নিচের ছবি দেখুন।
তবে এই কাজটি করার পূর্বে অবশ্যই আপনি আপনার থিম ফাইলটির ব্রেকআপ এই অপশন থেকে ডাউনলোড দিয়ে রাখবেন।
ধাপ -০৪: Add Code in <Head> Section
এখন আপনি আপনার থিমের মধ্যে ctrl+F প্রেস করে সার্চ বক্সে </head> লিখে সার্চ করবেন।
এরপর হেড সেকশন আসলে তার উপরে নিচের ছবির মত। নিচে থাকা এই কোডটি কপি করে জাস্ট পেস্ট করে দিবেন।
নিচের এই কোডটি কপি করুন- 👇
<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>
ধাপ -০৫: Add Code in ]]></b:skin> Section
এখন আবার সেম নিয়মে ctrl+F চেপে সার্চ বক্সে এই লেখাটি ]]></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;}
এখন আপনি আপনার ব্লগার থেকে এই কোডগুলি সেভ দিয়ে দিন।
ধাপ -০৬: Replace Code
এখন আবার সেম নিয়মে ctrl+F চেপে সার্চ বক্সে এই লেখাটি <data:post.body/>পেস্ট করুন।
আপনার সামনে এই কোডটি ছবির মত চলে আসলে। নিচে থাকা যে কোডটি রয়েছে সেই কোডটি কপি করে সেই লেখাটি ডিলিট করে এই কোডটি পেস্ট করে দিন।
নিচের এই কোডটি কপি করুন- 👇
<div id="post-toc"><data:post.body/></div>
এখন আপনি পুনরায় সবকিছু ঠিকঠাক থাকলে ফাইল গুলি সেভ দিয়ে দিন।
ধাপ -০৭: Add Code in Post & Article
এখন আপনি বের হয়ে এসে আপনার পোস্ট সেকশনে চলে যান। সেখান থেকে আপনি যে পোস্টের মধ্যে Table of content যুক্ত করতে চাচ্ছেন সেই পোস্টটি ওপেন করুন।
এইচটিএমএল কোডের সেকশন সিলেক্ট করুন। এখন আপনি এই বক্সটি যেখানে যুক্ত করতে চাচ্ছেন তার নিচে কোডটি কপি করে নিয়ে পেস্ট করে দিন।
নিচের এই কোডটি কপি করুন- 👇
<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>
ধাপ -০৮: Last Code End of the Posts
এরপর আপনি পোষ্টের একদম নিচের শেষে এই নিচে থাকা এই কোডটি কপি করে পেস্ট করে দিন।
নিচের এই কোডটি কপি করুন- 👇
<script>avsTOC();</script></div>
শেষ কথা- আশা করছি উপরের এই নিয়ম অনুসরণ করলে হান্ড্রেড পারসেন্ট আপনি আপনার পোষ্টের মধ্যে Table Of Content এই বক্সটি আপনি ব্যবহার করতে পারবেন।
এরপরও যাদের এই পোস্টটি বুঝতে অসুবিধা হয়েছে তারা অবশ্যই নিচে থাকায় ভিডিওটি দেখে নিবেন।
আপনার জন্য-
No comments:
Post a Comment