इस पोस्ट में, मैं आपको दिखाऊंगा कि अपने Blogger blog में social follow button कैसे add करे. Social media icon आपके readers को आपके social pages और profiles को follow करने की अनुमति देता है. यहां आपको सबसे लोकप्रिय social icon सेवाएं मिलती हैं जैसे Facebook, twitter, Instagram आदि.

💻Table of Content


ये social follow widgets HTML और CSS के साथ design किए गए हैं, जो 100% responsive हैं. Blogger custom templates भी social follow buttons के साथ आते हैं. लेकिन अगर आप उन्हें पसंद नहीं करते हैं, तो आप ब्लॉगर के लिए इन widgets का इस्तेमाल कर सकते हैं.

Blogger में social follow button कैसे add करे

अपने Blogger ब्लॉग के अंदर responsive और beautiful social media widget add करने के लिए नीचे दिए गए process को फॉलो करें.

Step 1: सबसे पहले अपने Blogger account में Login करें और Theme menu में जाएँ. यहां Edit HTML button पर क्लिक करें.


Step 2: HTML code में कहीं भी क्लिक करें और Ctrl + F दबाएं. फिर एक search box खुलेगा, यहां आप “</head>” type करें और enter press करें. अब नीचे दिए गए code को copy करें और </head> code से ठीक पहले paste करें. Save theme बटन पर क्लिक करें.
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>

Step 3: अब blogger के “Layout” section पर जाएँ. Sidebar section में “Add a Gadget” पर क्लिक करें.

Step 4: अब जो popup open होगा, उसके नीचे scroll करें और “HTML / JavaScript” gadget पर क्लिक करें.

Step 5: अब नीचे दी गई सूची में से Blogger के लिए अपना social media Widget code (Style 1, 2, 3 और 4) चुनें और code को content box में paste करें.
अंत में, “Save” बटन पर क्लिक करें. “save arrangements” पर क्लिक करें. You’re done, अपने blog पर जाएँ और इसे पुनः load करें. आप देखेंगे कि widget आपके blog पर live है

Widget 1

<div class="trendy_counters"><ul class="sc_vertical"><li class="count-twitter"><a data-color-hover="#1d9bf0" style="background-color: rgb(29, 155, 240); padding: 10px;" class="icon" href="https://twitter.com/applepoint021"><span class="fab fa-twitter" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">1</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li><li class="count-facebook"><a data-color-hover="#5E80BF" style="background-color:#3B5998; padding:10px;" class="icon" href="https://www.facebook.com/groups/762578768014845"><span class="fab fa-facebook-f" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">5</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">likes</span></span></a></li><li class="count-youtube"><a data-color-hover="#90030c" style="background-color:#bf2626; padding:10px;" class="icon" href="https://www.youtube.com/channel/UCe5RSklsPSwB60LKQ04_r5A"><span class="fab fa-youtube" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">99</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">subscribers</span></span></a></li></ul></div>
<style>
.trendy_counters:after {
clear: both;
content: '';
display: block;
}
.trendy_counters ul {
list-style: none;
margin: 0;
padding: 0;
clear: both;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
}
.trendy_counters ul li a {
padding: 10px;
}
.trendy-counters-per-row-2 ul li {
width: 50%;
float: left;
}
.trendy-counters-per-row-3 ul li {
width: 33.333%;
float: left;
}
.trendy-counters-per-row-4 ul li {
width: 25%;
float: left;
}
.sc_vertical a, .sc_vertical span:not(.fa) {
display: block;
text-align: center
}
.sc_horizontal a {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
.sc_horizontal span {
margin-right: 3px;
}
.show-labels-No .label {
display: none !important;
}
.trendy-counters-icons-order {
padding: 10px;
background: #f6f6f6;
}
.trendy-counters-icons-order div {
background: #eaeaea;
display: inline-block;
margin-right: 5px;
padding: 10px;
}
.trendy-counters-icons-order div:hover {
cursor: move;
}
mark.yes {
padding: 5px;
background: #81d742;
color: #fff
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
width: 33%;
float: left;
padding: 0;
}
</style>

Widget 2

<style> 
ul.applepoint021-social-share{padding:0;margin:0;overflow:hidden}ul.applepoint021-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}ul.applepoint021-social-share li a{text-decoration:none;display:inline-block;float:left;color:#fff;height:40px;width:40px;text-align:center;font-size:14px;line-height:40px;margin-right:16px;position:relative;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}ul.applepoint021-social-share li a:after{height:0;width:0;top:50%;left:100%;content:'';margin-top:-4px;position:absolute}ul.applepoint021-social-share li a.facebook{background:#436feb}ul.applepoint021-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.applepoint021-social-share li a.twitter{background:#43c9eb}ul.applepoint021-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.applepoint021-social-share li a.youtube{background:#bf2526}ul.applepoint021-social-share li a.youtube:after{border:4px solid #bf2526;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.applepoint021-social-share li a.pinterest{background:#b00}ul.applepoint021-social-share li a.pinterest:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.applepoint021-social-share li a:hover{opacity:.7}ul.applepoint021-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}ul.applepoint021-social-share li span.scount-number{margin-top:5px;color:#333}ul.applepoint021-social-share li:nth-child(2n){margin-right:0} </style> 
<ul class="applepoint021-social-share"> 
<li> <a href="https://twitter.com/applepoint021" class="twitter"><i class="fab fa-twitter"></i></a> <span class="scount-number">39,505</span> <span>Followers</span></li> 
<li> <a href="https://www.facebook.com/groups/762578768014845" class="facebook"><i class="fab fa-facebook-f"></i></a> <span class="scount-number">44,143</span> <span>Fans</span></li> 
<li> <a href="https://www.youtube.com/channel/UCe5RSklsPSwB60LKQ04_r5A" class="youtube"><i class="fab fa-youtube"></i></a> <span class="scount-number">25,203</span> <span>Followers</span></li> 
<li> <a href="https://in.pinterest.com/applepoint021" class="pinterest"><i class="fab fa-pinterest-p"></i></a><span class="scount-number">7,456</span> <span>Subscribers</span></li> 
</ul>

Widget 3

<style> 
.applepoint021-social-buttons ul{padding-left:0;list-style:none}.applepoint021-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}.applepoint021-social-buttons ul li{margin-bottom:10px;width:100%}.applepoint021-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1}.applepoint021-social-buttons li a.social-btn-facebook{background:#3b5998}.applepoint021-social-buttons li a.social-btn-twitter{background:#1da1f2}.applepoint021-social-buttons li a.social-btn-youtube{background:#cd201f}.applepoint021-social-buttons li a.social-btn-instagram{background:#405de6}.applepoint021-social-buttons li a.social-btn-google{background:#dd4b39} 
</style> 
<div class="applepoint021-social-buttons"> 
<ul class="sidebar-social clearfix">
<li><a href="https://www.facebook.com/groups/762578768014845" class="social-btn-facebook">Like on Facebook <i class="fab fa-facebook-f"></i> </a></li> 
<li><a href="https://twitter.com/applepoint021" class="social-btn-twitter">Follow on Twitter <i class="fab fa-twitter"></i> </a></li> 
<li><a href="#" class="social-btn-google">Follow on Google+ <i class="fab fa-google-plus-g"></i> </a></li> 
<li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fab fa-instagram"></i> </a></li> 
<li><a href="https://www.youtube.com/channel/UCe5RSklsPSwB60LKQ04_r5A" class="social-btn-youtube">Subscribe on Youtube <i class="fab fa-youtube"></i> </a></li>
</ul> </div><div><a href="https://oyepandeyji.com/keyboard-in-hindi/"><span style="color: white;">Keyboad in Hindi</span></a></div>