কিভাবে টেবিল কন্টেন্ট অনুযায়ী ব্লগের পেজ বানাবেন ? Update কোড ব্লগারদের জন্য

Unknown January 26, 2015

আজ আমার দেখাবো কি ভাবে লেবেল কন্টেন্ট গুলিকে একই পেজে সম্মিলিত করা যায়। লেবেল কন্টেন্ট বলতে সাধারন কথায় বলতে পারি-অধ্যায় বা চ্যাপ্টার। সাইটের ক্ষেত্রে আমরা লেবেল অনুযায়ী পোষ্ট গুলিকে একই পেজে একত্রীকরন কে বলবো। যেমন কোন পুস্তকের অধ্যায় বা চ্যাপ্টার দেখে নির্বাচন করি কোন চ্যাপ্টারটা পড়ব। ঠিক সাইটের Table Contents বেলাতেও । যাক এবার হয়তো আপনি ভাবছেন এত সুন্দর Table Contents পোষ্টি কিভাবে আপনার ব্লগে যুক্ত করবেন ? কি ভাবে করবেন নিম্নে লক্ষ্য করুন-
এটিও পড়ুন -ব্লগস্পট ব্লগে পোষ্ট ভিউ কাউন্টার Plugin যোগ করুন সরল নিয়মে - নতুন !

ডেমো - ডেমো দেখতে চাইলে এখানে ক্লিক করুন

Table Contents পেজের জন্য যা যা করতে হবে-

প্রথমে Blogger এ লগ ইন করুন
তারপর Design গিয়ে Edit HTMLক্লিক করুন
এরপর ]]></b:skin>লিখে সার্চ করুন
এরপর নিম্ন প্রদত্ত কোডটি ]]></b:skin> উপরে পেস্ট করুন

কোডটি হল-

/*--------MBT TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

এরপর টেম্পলেটিকে সেভ করুন।
এরপর New Page অপশনে ক্লিক করুন
এরপর EDIT HTML মোডে ক্লিক করুন।
এরপর Blank পেজে নিচের কোডটি পেস্ট করুন

UPDATED কোডটি হল নিম্নরূপ-

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.computerjajot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>