আসসালামু আলাইকুম আশা করছি সকলে ভালো আছে, আপনার যারা ব্লগ সাইট নিয়ে কাজ করছেন। আজকে জানতে পারবেন কিভাবে আপনাদের ওয়ার্ডপ্রেস ব্লগ সাইটে Social Follow Button যুক্ত করবেন সে বিষয়।
আমরা যেহেতু কোন প্লাগিন্স ব্যবহার করবো না সেহেতু আমরা দুটি মাধ্যম ব্যবহার করব HTML কোড এবং CSS কোডের জন্য।
HTML কোড সোশ্যাল ফলো বাটন তৈরির জন্য👇
<div class="web-insights"> <p class="fttl">সাথেই থাকুন!</p> <ul> <li><a href="#" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-paper-plane" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-quora" aria-hidden="true"></i></a></li> </ul> </div>
উপরের এই কোডটি কপি করে আপনার ওয়ার্ডপ্রেস এডমিন ড্যাশবোর্ডে পেস্ট করুন।
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 ssitbari Follow Buttons */
উপরের এই কোডটি অ্যাডিশনাল সিএসএস-এ যুক্ত করুন।
সোশ্যাল ফলো বাটন সঠিকভাবে আপনার ওয়ার্ডপ্রেস ব্লগ সাইটে তৈরি করার জন্য নিচের ভিডিওটি অবশ্যই অনুসরণ করুন 👇
আলহামদুলিল্লাহ উপরের সকল বিষয় যদি আপনার ঠিকঠাক ভাবে প্রদান করা হয়,তাহলে ইমেজে দেওয়া এরকম একটি সুন্দর ব্লগ সাইটের সোশ্যাল ফলো বাটন তৈরি করতে পারবেন।
আপনার জন্য আরো প্রয়োজনীয় পোস্ট সমূহ –
ওয়েবসাইটের জন্য Backlink Website List এবং ভিডিও টিউটোরিয়াল ফ্রি প্রফাইল ব্যাকলিংক ওয়েবসাইট লিস্ট ব্লগার ওয়েবসাইট পেজ স্পিড অপটিমাইজেশন এইচটিএমএল ফাইল ব্লগ ওয়েবসাইট তৈরি করে নিয়ে মাসে ৬০-৭০ হাজার টাকা আয় করুন
Related Posts:
