ব্লগার নিয়ে ইতোমধ্যে আমি অনেক পোস্ট করেছি।যেগুলো ফলো করে আপনি আপনার ব্লগার সাইটকে অনেক সুন্দর ভাবে কাস্টোমাইজ করতে পারবেন।ব্লগারের জন্য যেসব টুল এর স্ক্রিপ্ট শেয়ার করেছি সেগুলো দিয়ে সহজেই অনেক টুলস বানাতে পারবেন।ব্লগার সম্পর্কিত সকল সমস্যার সমাধান , ব্লগার টেমপ্লেট , ব্লগার উইজেট নিয়ে বিস্তারিত জানতে আমার প্রোফাইল থেকে পোস্টগুলো দেখে নিতে পারেন।
আজকের এই পোস্টে আমি আলোচনা করবো,কিভাবে ব্লগারে Previous এবং Next বাটন যুক্ত করবেন।এই উইজেট এর সাহায্যে আপনার ব্লগের ভিজিটররা সহজেই একটি পোস্ট ওরা শেষে অন্য পোস্ট ভিউ করতে পারবে।এটাকে আমাদের ওয়েবসাইটে ভিজিটর ধরে রাখার আরেকটি প্রক্রিয়াও বলতে পারেন।এতে করে আমাদের ব্লগের বাউন্স রেট অনেক কমে যাবে।
আমাদের ব্লগের ভিজিটর আসে গুগল সার্চ ইঞ্জিন থেকে।করো কোনো প্রয়োজনে গুগল সার্চ দিয়ে আমাদের ওয়েবসাইটে ভিজিট করলে পোস্ট পড়া শেষেই ওয়েবসাইট থেকে লিভ নেয়।কিন্তু এই next এবং previous বাটন উইজেট আমাদের ব্লগে যুক্ত করলে ভিজিটররা আমাদের ওয়েবসাইটের অন্যান্য পোস্ট সহজেই ভিজিট করতে পারবে।
ব্লগারে এই previous এবং next post বাটন যুক্ত করতে আপনাকে শুধুমাত্র থিমের ভিতরের সঠিক কোড খুঁজে বের করে আমি যে কোডগুলো নিচে দিবো সেগুলো তার আগে এবং পরে পেস্ট করে থিম সেভ করে দিলেই হয়ে যাবে।তো চলুন শুরু করা যাক।
Steps to Add Previous & Next buttons in Blogger
- প্রথমেই যাবেন Blogger Dashboard এ।
- এখন Theme এ গিয়ে আপনার বর্তমান থিমের ব্যাকআপ নিয়ে রাখুন।যাতে পরবর্তীতে সহজেই যেকোনো সমস্যায় থিম পরিবর্তন করতে পারেন।
- এখন Drop-down মেনু থেকে Edit HTML এ ক্লিক করে থিমের ভিতর রিডাইরেক্ট হলে সার্চ করুন <data:post.body/> এই কোডটি।
- খুঁজে পেলে এই <data:post.body/> কোডের পরেই নিচে দেয়া কোডগুলো পেস্ট করে দিন।
<b:if cond='data:blog.pageType == "item" '> <div class='K2_Pre_Next'> <b:if cond='data:olderPageUrl'> <a class='pre-btn' expr:href='data:olderPageUrl'> <div class='icon'><svg class='h-6 w-6' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M11 19l-7-7 7-7m8 14l-7-7 7-7' stroke-linecap='round' stroke-linejoin='round'/></svg></div><div class='label'>Previous</div></a> </b:if> <b:if cond='data:newerPageUrl'> <a class='next-btn' expr:href='data:newerPageUrl'> <div class='label'>Next</div> <div class='icon'><svg class='h-6 w-6' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M13 5l7 7-7 7M5 5l7 7-7 7' stroke-linecap='round' stroke-linejoin='round'/></svg></div></a> </b:if> </div> </b:if>
- এখন নিচে দেয়া সিএসএস কোডগুলো ]]></b:skin> or </style> ট্যাগ এর উপরে পেস্ট করে দিন।
/* CSS code for previous-Next button */
.K2_Pre_Next .icon {width: 20px;height: 20px;}
.K2_Pre_Next {display: flex;position: relative;margin-top: 24px;}
.K2_Pre_Next .pre-btn,.K2_Pre_Next .next-btn {display: flex;align-items: center;justify-content: center; gap: 8px;font-family: "Inter", sans-serif;background: #ff1a75; color: #fff;text-decoration: none;padding: 8px 24px;font-size: 16px;min-width: 150px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;width: 50%;border-left:1px solid; border-right:1px solid;}
.K2_Pre_Next .pre-btn:hover,.K2_Pre_Next .next-btn:hover{background: #3a8f7b;}
.K2_Pre_Next .next-btn {position: absolute;right: 0;}
.K2_Pre_Next .pre-btn:hover .icon {animation: nav-prev-anim 300ms alternate infinite;}
.K2_Pre_Next .next-btn:hover .icon {animation: nav-next-anim 300ms alternate infinite;}
@keyframes nav-prev-anim { to {transform: translateX(4px);}}
@keyframes nav-next-anim {to {transform: translateX(-4px);}}
- থিমটি সেভ করে দিন।
এখন আপনার ওয়েবসাইটের পোস্টগুলো ভিজিট করে দেখুন আপনার ওয়েবসাইটে next এবং previous button যুক্ত হয়ে গেছে।
উপরে দেয়া কোডগুলো যদি কপি করতে সমস্যা হয় তবে এখানে ক্লিক করে কোডগুলো ডাউনলোড করে নিন।
উপসংহার
আজকের এই পোস্টে আমি আপনাদের সাথে শেয়ার করেছি কিভাবে সহজেই ব্লগার ওয়েবসাইটে আগের পোস্ট এবং পরবর্তী পোস্ট অর্থাৎ Next post এবং previous post বাটন উইজেট যুক্ত করবেন। আশা করি কোথাও সমস্যা হবে না।যদি কোনো প্রকার সমস্যা ফেস করেন তবে অবশ্যই কমেন্ট করে জানাবেন।
ব্লগারে গুগল নিউজ উইজেট যুক্ত করার টিউটোরিয়াল।
প্রিমিয়াম ব্লগার টেমপ্লেট , ব্লগিং টিপস , ব্লগার উইজেট স্ক্রিপ্ট , এসইও টিপস পেতে ভিজিট করুন আমার Blogen ব্লগ।আল্লাহ হাফেজ।