অনেক সময় আমাদের ওয়েবসাইটে সোশ্যাল মিডিয়া ফলো বাটন যোগ করার প্রয়োজন হয়, যাতে ভিজিটররা সহজেই আমাদের ফেসবুক, টুইটার, ইনস্টাগ্রাম, ইউটিউব বা অন্য যে কোনো সোশ্যাল প্রোফাইলে কানেক্ট হতে পারে। যদি আপনি GeneratePress Premium Theme ব্যবহার করে থাকেন, তবে খুব সহজেই HTML ও CSS কোড ব্যবহার করে সাইটে সোশ্যাল ফলো বাটন যুক্ত করতে পারবেন।
এই বিষয়ে আমি আমার YouTube চ্যানেলে বিস্তারিত ভিডিও করেছি, যেখানে ধাপে ধাপে দেখানো হয়েছে কীভাবে সোশ্যাল মিডিয়া বাটন যুক্ত করতে হয় এবং কাস্টমাইজ করা যায়।
আমার ভিডিওতে বিস্তারিত দেখানো হয়েছে
আমি আমার ইউটিউব ভিডিওতে ধাপে ধাপে দেখিয়েছি কীভাবে GeneratePress Premium Theme–এ সোশ্যাল মিডিয়া ফলো বাটন যুক্ত করবেন, সাথে HTML ও CSS কোড কাস্টমাইজ করবেন।
কেন সোশ্যাল মিডিয়া ফলো বাটন যুক্ত করবেন?
ভিজিটররা সহজেই আপনার সোশ্যাল মিডিয়ায় ফলো করতে পারবে।
ওয়েবসাইটের সাথে আপনার ব্র্যান্ড আইডেন্টিটি আরও শক্তিশালী হবে।
উপরের এই কোডটি কপি করে আপনার ওয়ার্ডপ্রেস এডমিন ড্যাশবোর্ডে পেস্ট করুন।
CSS কোডসোশ্যালআইকনকাস্টমাইজেশনকরারজন্য👇
/* ssitbari Follow Buttons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
.web-insights {
text-align: center;
display: table;
border: 1px solid #ddd;
padding: 10px 10px 5px;
border-radius: 10px;
width:100%;
margin:0;
}
.web-insights .fttl {
font-size: 18px;
font-weight:600;
letter-spacing: 1px;
color:black;border-bottom: 1px solid #ddd;
padding-bottom:12px;
}
.web-insights .ffttl {
font-size: 16px;
letter-spacing: 0.5px;
color:black;border-bottom: 1px solid #ddd;
padding-bottom:15px;
margin-top:-15px;
}
.web-insights ul{
padding: 0px;
margin: 0px;
margin-left:15px;
}
.web-insights li {
float: left;
list-style: none;
font-size: 20px;
text-align: center;
margin-right:8px;
}
.web-insights li a i {
background-color: #f1f1f1;
color: #fff;
border-radius: 100%;
height: 40px;
width: 40px;
line-height: 43px !important;
}
.web-insights li a i:hover{
opacity: 0.8;
}
.web-insights li a i.fa.fa-facebook {
background-color: #3b5997;
}
.web-insights li a i.fa.fa-whatsapp {
background-color: #25D366;
}
.web-insights li a i.fa.fa-instagram {
background-color: #F65C3E;
}
.web-insights li a i.fa.fa-paper-plane {
background-color: #1DA1F2;
}
.web-insights li a i.fa.fa-youtube-play {
background-color: #c42f2b;
}
.web-insights li a i.fa.fa-twitter {
background-color: #57aced;
}
.web-insights li a i.fa.fa-pinterest-p {
background-color: #cb2026;
}
.web-insights li a i.fa.fa-linkedin {
background-color: #0A66C2;
}
.web-insights li a i.fa.fa-quora {
background-color: #C53131;
}
/* End of ssitbaritech Follow Buttons */
👉 এই CSS কোড আপনার বাটনগুলোকে সুন্দর রঙিন স্টাইল দেবে। চাইলে আপনি আরও কাস্টমাইজ করতে পারবেন (যেমন: আইকন যুক্ত করা বা গোলাকার করা)।
প্রশ্নোত্তর
প্রশ্ন ১: GeneratePress Premium Theme-এ সোশ্যাল মিডিয়া ফলো বাটন কেন প্রয়োজন? উত্তর: সোশ্যাল মিডিয়া ফলো বাটন ব্যবহার করলে আপনার ভিজিটররা খুব সহজেই আপনার ফেসবুক, ইউটিউব, টুইটার, ইনস্টাগ্রাম ইত্যাদি প্রোফাইলে যুক্ত হতে পারে। এতে সাইটের ভিজিটর সংখ্যা বাড়ে এবং ব্র্যান্ডিং আরও শক্তিশালী হয়।
প্রশ্ন ২: আমি কি এইচটিএমএল এবং সিএসএস কোড না জেনেও এই কাজ করতে পারব? উত্তর: হ্যাঁ, আমার পোস্টে শেয়ার করা কোডগুলো একদম সহজভাবে কপি-পেস্ট করলেই কাজ করবে। তবুও আপনি চাইলে আপনার প্রয়োজন অনুযায়ী আইকন, রঙ বা সাইজ কাস্টমাইজ করতে পারবেন।
প্রশ্ন ৩: এই কোডগুলো কি শুধুমাত্র GeneratePress Premium Theme-এর জন্য কাজ করবে? উত্তর: মূলত এই কোডগুলো আমি GeneratePress Premium Theme ব্যবহার করে তৈরি করেছি। তবে অন্যান্য ওয়ার্ডপ্রেস থিমেও সামান্য পরিবর্তন করে ব্যবহার করা সম্ভব।
প্রশ্ন ৪: সোশ্যাল মিডিয়া বাটন কোথায় যুক্ত করা যাবে? উত্তর: আপনি চাইলে হেডার, ফুটার, সাইডবার বা পোস্টের শেষে যেকোনো জায়গায় কোডটি যুক্ত করতে পারবেন। CSS এবং HTML ঠিকভাবে বসালে সব জায়গাতেই কাজ করবে।
প্রশ্ন ৫: আমি কি নতুন সোশ্যাল মিডিয়া আইকন (যেমন TikTok বা LinkedIn) যুক্ত করতে পারব? উত্তর: অবশ্যই পারবেন। HTML কোডে নতুন <a> ট্যাগ এবং CSS কোডে আইকনের ডিজাইন যোগ করলেই নতুন সোশ্যাল মিডিয়া বাটন যুক্ত হবে।
উপসংহার
GeneratePress Premium Theme ব্যবহারকারীরা সহজেই HTML এবং CSS কোডের মাধ্যমে ওয়েবসাইটে সোশ্যাল মিডিয়া ফলো বাটন যুক্ত করতে পারেন। এর ফলে ভিজিটররা সরাসরি আপনার সোশ্যাল প্রোফাইলে যুক্ত হতে পারবে, আপনার ওয়েবসাইট আরও প্রফেশনাল দেখাবে এবং এনগেজমেন্টও বাড়বে।
👉 যদি কোড সেটআপ করার সময় কোনো সমস্যা হয় তবে মন্তব্য করে জানাতে পারেন। আর চাইলে আমার ইউটিউব ভিডিও দেখে নিন, সেখানে আরও ক্লিয়ারভাবে দেখানো হয়েছে।
