ব্লগস্পট/ব্লগার টিউটোরিয়ালঃ ট্যাবড সাইডবার নেভিগেশন
ব্লগস্পট টিউটোরিয়ালঃ নতুন টেমপ্লেট সেটআপ
ব্লগস্পট টিউটোরিয়াল ৩: নাম্বারড পেইজ নেভিগেশন

ব্লগস্পট বা ব্লগারে যে কোন পোস্ট প্রথম পাতায় পুরোপুরি দেখা যায়। ফলে প্রথম পাতায় নীচের পোস্টগুলো পড়তে অনেক সময় অনেক বেশি স্ক্রল করতে হয়। সেজন্য যদি ফ্রন্ট পেইজে পোস্টের সামান্য অংশ দেখিয়ে বাকি অংশটুকু Read More বা বিস্তারিত পড়ুন টাইপ কমান্ড দিয়ে দেয়া যায়, তাহলে ফ্রন্ট পেইজ অনেক সুন্দর থাকে। নীচের কোডগুলো ইউজ করলে এই সিস্টেম করে ফেলা যায় ব্লগারে।

১. ব্লগার এ লগইন করুন।

২. আপনার বর্তমান টেমপ্লেটটির ব্যাকআপ নিন। তার জন্য ক্লিক করুনঃ ড্যাশবোর্ড>লেআউট>Edit HTML>Download Full Template.

[টিপসঃ যদি লেআউটের বদলে টেমপ্লেট ট্যাব দেখতে পান তাহলে Customise Design এ ক্লিক করে Upgrade Your Template এ ক্লিক করুন। তার আগে লিঙ্ক/ব্লগরোল অ্যাড করে থাকলে তা কপি করে রাখতে পারেন অন্য কোথাও। এখন আপনি Layout ও Edit HTML বাটন খুঁজে পাবেন।]

৩. এবার Edit HTML ট্যাবে </head> লেখাটা খুঁজে বের করুন ও নীচের কোডটি কপি করে পেইস্ট করুন।

টিপসঃ ড্যাশবোর্ড>লেআউট>Edit HTML>Expand Widget Templates এ টিক চিহ্ন দিন। তারপর Crtl+f চেপে সার্চ উইন্ডো ওপেন করে </head> লিখে সার্চ দিন; পেয়ে যাবেন।

tutorial-read-more-01

৪. আবার Ctrl+f চেপে সার্চ দিন post-body লেখাটি দিয়ে। div class=’post-body’ এইরকম একটি অংশ পাবেন। তার কয়েক লাইন নীচে clear for photos floats লেখা দেখবেন। এখানে নীচের কোডটি পেইস্ট করুন div class=’post-body থেকে clear for photos floats পর্যন্ত। [<div class='post-body' এর পরে আরো কিছু কোড থাকতে পারে টেমপ্লেটের উপরে নির্ভর করে, থাকলে সেইসব শব্দের পরে expr:id থেকে শুরু করবেন।]

tutorial-read-more-021

বুঝতে সমস্যা হলে ছবিতে দেখুন।

৫. এবার প্রিভিউ বাটনে প্রেস করে দেখুন। সব ঠিক থাকলে সেইভ করুন।

৬. এবার Dashboard>Settings>Formatting>Post Template এ গিয়ে নীচের অংশটুকু পেইস্ট করে সেইভ করুন।

<span id=”fullpost”>

</span>

৭. এবার পোস্ট লেখার সময়ে Edit HTML এ গিয়ে ৫-১০ লাইন বা যে অংশটুকু আপনি ফ্রন্ট পেইজে দেখাতে চান, ঠিক তার পরে <span id=fullpost”> লাইনটা কাট পেইস্ট করুন (এই লাইনটা আপনার পোস্টে ডিফল্ট হিসেবে সব সময় থাকবে, শুধু পজিশন চেঞ্জ করুন লাইনটার যেখানে চান সেখানে নিয়ে)। আর আপনার পোস্টের একদম শেষে </span> কাট করে বসিয়ে দিন। তাহলেই হবে।

কৃতজ্ঞতাঃ Ssannara এর লেখা একটি টিউটোরিয়াল।