ব্লগারে আমাদের ফলো করুন বাটন অ্যাড করুন খুব সহজে (কোড সহ )
আমাদের ফলো করুন সেকশন ব্লগারে যুক্ত করার সহজ ও সুন্দর উপায়
বর্তমানে ব্লগ বা ওয়েবসাইটে সোশ্যাল মিডিয়া ফলো বাটন থাকা অনেক গুরুত্বপূর্ণ। কারণ, এতে পাঠকরা সহজেই আমাদের ফেসবুক, ইউটিউব, হোয়াটসঅ্যাপ বা টেলিগ্রাম পেজে যুক্ত হতে পারে। আজ আমি তোমাদের দেখাবো কীভাবে নিজের Blogger সাইটে একটি সুন্দর ও মোবাইল-ফ্রেন্ডলি "আমাদের ফলো করুন" সেকশন যুক্ত করা যায়।
কেন এই সেকশন দরকার?
- পাঠকেরা সহজেই তোমার সোশ্যাল লিংকে যেতে পারবে
- ব্র্যান্ডিং এবং ট্রাস্ট বাড়াবে
- ব্লগের ডিজাইন আরও প্রফেশনাল দেখাবে
কোড যুক্ত করার নিয়ম
তুমি নিচের কোডটি কপি করে Blogger → Layout → Add a Gadget → HTML/JavaScript এর মধ্যে পেস্ট করো। তার আগে অবশ্যই লাস্টে দেওয়া "Font Awesome" লাইব্রেরি যুক্ত করতে ভুলবে না, না হলে আইকনগুলো দেখা যাবে না।
<style>
.follow-us-box {
max-width: 700px;
margin: 40px auto;
padding: 25px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
text-align: center;
border-top: 5px solid #7b2ff7;
font-family: 'Hind Siliguri', sans-serif;
}
.follow-us-box h2 {
font-size: 22px;
margin-bottom: 15px;
color: #333;
}
.social-icons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
}
.social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
color: #fff;
font-size: 20px;
text-decoration: none;
transition: 0.3s ease;
}
.social-icons a:hover {
transform: scale(1.1) rotate(5deg);
}
.facebook { background: #3b5998; }
.telegram { background: #0088cc; }
.whatsapp { background: #25D366; }
.youtube { background: #FF0000; }
.instagram {
background: radial-gradient(circle at 30% 30%, #fdf497 0%, #fd5949 50%, #d6249f 75%, #285AEB 100%);
}
</style>
<div class="follow-us-box">
<h2>আমাদের ফলো করুন</h2>
<div class="social-icons">
<a class="facebook" href="https://www.facebook.com/ariyan.shuvo.827630" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="telegram" href="https://t.me/01311008164" target="_blank"><i class="fab fa-telegram-plane"></i></a>
<a class="whatsapp" href="https://wa.me/01311008163" target="_blank"><i class="fab fa-whatsapp"></i></a>
<a class="youtube" href="https://youtube.com/" target="_blank"><i class="fab fa-youtube"></i></a>
<a class="instagram" href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- Font Awesome Icon CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
অতিরিক্ত টিপস:
- প্রয়োজনে আরও সোশ্যাল লিংক যেমন TikTok, LinkedIn ইত্যাদি যোগ করতে পারো।
- এই সেকশনটা Footer, Sidebar বা Newsletter এর নিচে বসালেই দারুণ মানাবে।
আশা করি এই টিউটোরিয়াল তোমাদের কাজে আসবে। যদি কোনও সমস্যা হয়, কমেন্টে জানাও। নতুন ডিজাইন ও ফিচার নিয়ে আবারও হাজির হবো ইনশাআল্লাহ। 😊
