কিভাবে ফ্লটিং Newer & Older পোস্ট বাটন ব্লগারে যুক্ত করবেন !

ফ্লটিং Newer & Older পোস্ট বাটন অসাধারন একটি মজার স্টাইল ব্লগার বাটন। আসলে আমারা ইতিমধ্যে ব্লগে একাধিক ফ্লটিং ওয়েডগেট ব্যবহার করেছি। যেমন ফ্লটিং শেয়ার বাটন , ফ্লটিং ফেসবুক লাইক বক্স ইত্যাদি। কিন্তু আজকে আমি আপনাদের দেখাব কিভাবে আপনি আপনার ব্লগস্পট ব্লগে Newer & Older বাটন অর্থাৎ Next & Previous বাংলাই যাকে বলে নতুন পোস্ট , পুরনো পোস্ট। যাই হোক এসো বন্ধু ব্লগ যারা অনেক দিন থেকে নিয়মিত ভিজিট করেন তারা অবশ্যই আমার এর আগের থিমে ঐ স্টাইল দেখেছেন এবং সেই সময় অনেকে আমাকে এটার জন্য অনেক অনুরধ করেছিল কিন্তু সেই সময় পোস্ট করা হয়নি। যাই হোক আজকে সময় পেলাম তাই আপনাদের সঙ্গে শেয়ার করতে বসে পড়লাম, অনেকেই ভাবতে পারেন এটা মনে হয় একদম নতুন জিনিস তবে বলি না বন্ধু এটা অনেক পুরনো একটি সিস্টেম তবে আমাদের কাছে এটা অবশ্যই নতুন। তাহলে চলুন আর কথা না বাড়িয়ে দেখে নিই কিভাবে ফ্লটিং Newer & Older আপনার ব্লগে যুক্ত করবেন।

কিভাবে ফ্লটিং Newer & Older পোস্ট বাটন ব্লগারে যুক্ত করবেন

প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Template তারপর Edit HTML এ ক্লিক করুন। এবার আপনার কীবোর্ড থেকে CTRL+F প্রেস করে এই ]]></b:skin> ট্যাগটি সার্চ করুন।

এবার নিচের কোড গুল সম্পূর্ণ কপি করেনিন এবং ]]></b:skin> এর ঠিক উপরে বা আগে নিচের কোড গুল হুবহু কপি পেস্ট করে দিন এর জন্য আপনি কীবোর্ড এর CTRL+V প্রেস করতে পারেন বা মউস এর ডান ক্লিক করেও করতে পারেন।

 .arrowLeft a{-moz-transition:.2s ease-in;-o-transition:.2s ease-in;-webkit-transition:.2s ease-in;left:-5px;padding:25px 20px;position:fixed;top:45%;transition:.2s ease-in;z-index:100}.arrowLeft a:hover{-moz-transition:.2s ease-in;-o-transition:.2s ease-in;-webkit-transition:.2s ease-in;color:#fff;left:0;transition:.2s ease-in}.arrowRight a{-moz-transition:.2s ease-in;-o-transition:.2s ease-in;-webkit-transition:.2s ease-in;padding:25px 20px;position:fixed;right:-5px;top:45%;transition:.2s ease-in;z-index:100}.arrowRight a:hover{-moz-transition:.2s ease-in;-o-transition:.2s ease-in;-webkit-transition:.2s ease-in;color:#fff;right:0;transition:.2s ease-in}.arrowNav a{background:#039be5;color:#fff;font-size:25px;text-decoration:none}

এবার উপরের নিয়ম অনুসরন করে একি ভাবে এই <b:includable id='nextprev'> ট্যাগটি সার্চ করুন। এবার উপরের দেখুন উপরের ট্যাগটি আপনার থিমে <b:includable id='nextprev'>....</b:includable> এখুন <b:includable id='nextprev'>....</b:includable> এই লাইনের উপর মউস ক্লিক করে যে কোড গুল পাবেন সব রিমুভ করেদিন এবং সেখানে নিচের কোড গুল বসিয়ে দিন।

 <b:includable id='nextprev'><div class='blog-pager' id='blog-pager'><div class='arrowNav'><b:if cond='data:newerPageUrl'><span id='blog-pager-newer-link'><div class='arrowLeft'><a class='prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' id='nextLink'><span class='arrow'/><span class='prevnext'><img src="http://i.imgur.com/4sieEVz.png"/></span></a></div></span></b:if><b:if cond='data:olderPageUrl'><span id='blog-pager-older-link'><div class='arrowRight'><a class='next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' id='prevLink'><span class='arrow'/><span class='prevnext'><img src="http://i.imgur.com/1uAQUbN.png"/></span><br/></a></div></span></b:if></div><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a><b:if cond='data:mobileLinkUrl'><div class='blog-mobile-link'><a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a></div></b:if></div><div class='clear'/></b:includable>

Save Template এ ক্লিক করুন এবং আপনার ব্লগ ভিজিট করুন এবং কোন একটি পোস্ট দেখুন। আশাকরি উপরের ফটোর মত দেখতে পারবেন। এখুন ঠিক কাজ করছে কিনা সেটা চেক করেনিন সেই বাটনে ক্লিক করে।

উপরের টিপস দেখে আপনার কাজ করতে বা বুঝতে সমস্যা হলে নিচের ভিডিও দেখুন আশাকরি আপনাদের বুঝতে সুবিদা হবে এবং কোথাই কি করবেন পরিস্কার বুঝতে পারবেন।

আশাকরি আপনি কাজটি করতে সুন্দর ভাবে সফল হয়েছেন। কোন রকম সমস্যা হলে অবশ্যই নিচে কমেন্ট করুন পোস্টটি ভাল লাগলে অবশ্যই বন্ধদের সঙ্গে শেয়ার করুন এটা আমার স্বার্থে। তাহলে ভাল থাকবেন সুস্থ থাকবেন আজকের মত এই পর্যন্ত। আসসালামু আলাইকুম।