পোস্টের শেষে কিভাবে "বিস্তারিত পড়ুন" বোতাম যোগ করবেন?

কোন কোন ব্লগে লক্ষ্য করে দেখবেন "Read More" লেখা থাকে। এখানে পোস্টের সংক্ষিপ্ত (Post Summery) একটুখানি প্রথমে লেখা থাকে। আর বাকী অংশটুকু থাকে আড়ালে। Read More লেখার উপরে ক্লিক করে পোস্টের বাকী অংশটুকু পড়ে নিতে হয়। এমন সুবিধা আমার 'বাংলা হ্যাকস' ব্লগে তৈরি করা হয়েছে। এর সুবিধা হল, যদি কোন পোস্ট বড় হয়, তাহলে তা লোড হ্ওয়ার জন্য অনেক্ষণ ধরে অপেক্ষা করতে হয় না। আবার পাঠকেরও সুবিধা হয়। তারা সূচনাটি পড়েই সিদ্ধান্ত নিতে পারে যে বাকী অংশটুকু পড়বে কি না।
বন্ধুদের কেউ কেউ এই বিষয়ে একটি পোস্ট দেয়ার জন্য অনুরোধ করেছেন। আজ আমরা এই সুবিধাটি ব্লগারের ব্লগে কিভাবে স্থাপন করতে হয় তা জানবো। তাদের জ্ঞাতার্থে জানাচ্ছি যে এই বিষয়টি একটু জটিল।
সতর্কতা: Edit Html অংশের কোনরকম পবিবর্তন করার আগে টেমপ্লেটটির একটি ব্যাকআপ রেখে দিতে ভুলবেন না।

এজন্য ব্লগের লেআউট অংশের Html অংশে সামান্য কিছু পরিবর্তন করতে হবে। এজন্য প্রথমেই আপনার ব্লগার একাউন্টে লগইন করুন। Layout এর Edit Html অংশে যান। এখানে </head> এর পূর্বে নিচের কোডটি পেস্ট করুন।

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

একই পেজের <data:post.body/>' লেখাটি খুজে বের করুন। এই কোডটুকুকে মুছে দিয়ে নিচের কোডটুকু সম্পূর্ণ পেস্ট করুন।

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>বিস্তারিত পড়ুন....</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->

এবার ড্যাশবোর্ডের Setting এর Formatting অংশে যান। সেখানে Post Template লেখা ঘরে নিচের কোডটুকু পেস্ট করে দিন। সেভ সেটিংস বোতামে ক্লিক করে সেভ করুন।

---এখানে পোস্টের সূচনা লিখুন---
<span id="fullpost">
এখানে পোস্টের বাকী অংশ লিখুন
</span>

এরপর যে কোন একটি পোস্ট লেখা শুরু করুন। দেখবেন নতুন পেজ (New Page) নিলে সেখানে

---এখানে পোস্টের সূচনা লিখুন---
--এখানে পোস্টের বাকী অংশ লিখুন--

লেখাটি আসবে। "---এখানে পোস্টের সূচনা লিখুন---" অংশে আপনার পোস্টের যতটুকু অংশ সূচনা হিসেবে রাখতে চান, তা লিখুন ও "--এখানে পোস্টের বাকী অংশ লিখুন--" অংশে পোস্টের সম্পূর্ণটুকু লিখুন। পোস্ট করুন। আশা করি এবার আপনার ব্লগের নতুন পোস্টটি "বিস্তারিত পড়ুন" সুবিধাযুক্ত হয়ে প্রকাশিত হয়ে গেছে।