Social Media Follow Widget Blog Me Kaise Add karte hai [4 Style]

Agar aapka Blog/Website hai jispar New New user aate hai, or agar aap chahte hai jo aapki site par ek war aaye wo return bhi aapki site par aaye to unse aapko connect hona padega.. or Online connect rehne ka sabse best tarika hai Social Network sites jese Facebook, Twitter, Instagram, Youtube etc.

Agar aapne apni site me koi bhi Social Follow Widget add nahi kiya hai to koi cha kar bhi aaki site ko follow nahi kar sakte.. isliye agar aapko apne website ki following badani hai to aapko sabhi Social Media par apni site ka page banana hoga or uski link Apni Website me add karni hogi, Social Media Widget kaise add karte hai wahi ham iss post me sikhege.

Social Follow Widget Kya hai

Agar aapne pehle ye naam nahi suna to aapke mind me aa sakta hai ki ye Social Widget kya hai or isse kya hoga ya isko kaise use karte hai..

Me agar aapko Simple sabdo me batao to widget ham usko kehte hai jo website ka kisi hisse me kuch specific kaam karta hai.. Jese EMail Subscribe Widget, Social Follow Widget, Contact Us Widget, Recent Post Widget, Popular Post Widget, Recent Comment Widget etc..

Social Follow Widget ke Fayde

Agar aapki website hai to usme Social Widget to hona hi chahiye, taki user aapki site ko follow kar sake or aapse jude reh sake.. or jab bhi koi new post aap publish kare to Social Media par share kare.. jisse Social Media se Traffic aap Blog par la sake.

Agar aapke Social Media par page nahi hai to sabse pehle to aap sabhi Social Media sites par apne Website ke page bana lijiye, or usko pura setup kar lijiye.. uske baad aapko aage badna hai.

Janiye kaise banaye –

• Facebook Page Banaye
• Twitter Account Banaye
• Instagram Account banaye
• Youtube Channel Banaye
• RSS Feed Banaye Feedburner par

**Top 25 Social Network Websites List

Social Follow Button Widget Kaise Add kare

Website me Social Widget ko add karna bahut hi aasan hai, uski steps me aapse share kar raha hu, simple aap meri steps ko follow kare or Code ko copy karke apni website me Paste kar dijiye.

Note: Aapki website BLogger par ho ya WordPress par aapko same hi Steps follow karni hai, fir bhi agar aapko kahi dikkat aati hai to aap comment karke bhi puch sakte hai.

Add Social Follow Widget in Blogger Step by Step

Blogger me Social Following Widget aese add karte hai.

Step 1. Apne Blogger ke dashboard >> Layout >> Add Gadget par click kare

Step 2. Ab ek popup khulega usme aapko HTML/JavaScript widget select karna hai.

Step 3. Ab aapko Simple ye jo Widget Code hai isko Copy karke paste karna hai.

*Agar aapko nahi pata Blogger me HTML/Javascript Widget kaise Add karte hai to aap yaha dekh sakte hai, detail me share kiya hai.

jo Code hai, usme apni Social Page ki Links ko edit karke aap ko Save karna hai.. iss tarah aapka Widget BLog me add ho jayega.

Add Social Follow Widget in WordPress Step by Step

WordPress me Widget ko add karna bhi Blogger ki trha aasan hai, simple aap meri steps ko follow kare.

Step 1: WordPress me login karne ke baad apne Deshboard me jaye.

Step 2: Appearance >> Widgets par jaye

Step 3: Ab aapko jis bhi location me Widget add karna hai waha “+” ki button par click karke Custom HTML Widget ko select kare.

Step 4: Ab jo HTML Code hai usko Paste karke Update ki button par click kar dijiye, dhiyan rakhe ki aapko apni Social Media Page ki Link code me edit karni hai, uske baad update karna hai.

Social Media Follow Widget Code

To ab aap ye to jaan chuke hai Social Media Widget kaise add karte hai, to ab aap apni pasand ke design ko apne blog me add kar sakte hai.

Simple aapko jo niche code share kiye hai usko copy karke apne blog me add karna hai, dhiyan rakhe aapko sabhi code me apne Social Page ki link jarur update karna hai.

Note: Niche diye Widget Code me agar aapke blog par icon show nahi ho uss case me aapko ye code bhi widget code ke upar add karna hoga, jisse icon library aapke blog me add ho jayegi.

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Social Media Icons widget Style 1

<!-- HMH Social Widget Start -->
<style>
.HMH-social-follow{width:300px;padding:10px;margin:0}.HMH-social-follow .fa{font-size:18px;padding:16px;text-align:center;margin:5px 2px;width:20%;text-decoration:none;color:#fff}HMH-social-follow .fa:hover{opacity:.7}
.HMH-social-follow .fa-facebook{background:#3B5998}
.HMH-social-follow .fa-twitter{background:#55ACEE}
.HMH-social-follow .fa-linkedin{background:#007bb5}
.HMH-social-follow .fa-youtube{background:#b00}
.HMH-social-follow .fa-instagram{background:#125688}
.HMH-social-follow .fa-feed{background:#cb2027}
</style>
<div class="HMH-social-follow">
<a href="#" class="fa fa-facebook" target="_blank"></a>
<a href="#" class="fa fa-twitter" target="_blank"></a>
<a href="#" class="fa fa-instagram" target="_blank"></a>
<a href="#" class="fa fa-linkedin" target="_blank"></a>
<a href="#" class="fa fa-youtube" target="_blank"></a>
<a href="#" class="fa fa-feed" target="_blank"></a>
</div>
<!-- HMH Social Widget End -->

Note: Code ko aapko copy karke apni Blog Widget me add karna hai, paste karne ke baad # ki jagah apni Social Media Page ki link jarur add kare.

Social Media Icons widget Style 2

<!-- HMH Social Widget Start -->
<style>
ul.HMH-follow-buttons a:hover{color:#03c9a9}.HMH-follow-buttons.b-title li{text-align:center;background-color:#fff;width:31.5%;border:1px solid #eee}.HMH-follow-buttons.b-title a{text-transform:uppercase;text-decoration:none;margin:20px auto 0;font-size:10px}.HMH-follow-buttons li{display:inline-block;padding:0 0 7px;margin-bottom:3px!important}.HMH-follow-buttons li:last-child{border-bottom:1px solid #eee!important;padding-bottom:7px!important}.HMH-follow-buttons.b-title i{margin:0 auto 10px;display:block}.HMH-follow-buttons.style-1 i{height:32px;width:32px;line-height:32px;font-size:20px;margin:10px auto 0;text-align:center;color:#333}
</style>
<ul class='HMH-follow-buttons style-1 b-title'>
<li><a href='#'><i class="fa fa-facebook"></i>facebook</a></li>
<li><a href='#'><i class="fa fa-twitter"></i>twitter</a></li>
<li><a href='#'><i class="fa fa-instagram"></i>Instagram</a></li>
<li><a href='#'><i class="fa fa-youtube"></i>Youtube</a></li>
<li><a href='#'><i class="fa fa-linkedin"></i>linkedin</a></li>
<li><a href='#'><i class="fa fa-feed"></i>RSS</a></li>
</ul>
<!-- HMH Social Widget End -->

Note: Widget Code ko copy karke apne HTML Widget me paste kare, Social Link ko jarur add kare # ki jagha par.

Social Media Icons widget Style 3

<!-- HMH Social Widget Start -->
<style>
.HMH-social-buttons ul{padding-left:0;list-style:none}.HMH-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}.HMH-social-buttons ul li{margin-bottom:10px;width:100%}.HMH-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}.HMH-social-buttons li a.social-btn-facebook{background:#3b5998}.HMH-social-buttons li a.social-btn-twitter{background:#1da1f2}.HMH-social-buttons li a.social-btn-youtube{background:#cd201f}.HMH-social-buttons li a.social-btn-instagram{background:#405de6}.HMH-social-buttons li a.social-btn-linkedin{background:#007bb5}
</style>
<div class="HMH-social-buttons">
<ul class="sidebar-social clearfix">
<li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>
<li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li>
<li><a href="#" class="social-btn-linkedin">Follow on Linkedin <i class="fa fa-Linkedin"></i> </a></li>
<li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>
</ul>
</div>
<!-- HMH Social Widget End -->

Note: Code ko Website me add karne se pehle # ki jagha par apni Social Links jarur add kare.

Social Follow Widget Style 4

<!-- HMH Social Widget Start -->
<style>
.s-text strong,.social-counter{font-weight:900}.HMH-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.HMH-socials a span,.HMH-socials a:before{z-index:2;position:relative}.social-counter{position:absolute;font-size:14px;line-height:1;padding-top:4px}.s-text{float:right}.HMH-socials a:after{content:" ";height:100%;width:0;top:0;left:0;position:absolute;background:#252b42;z-index:1}.fa-facebook:before,.fa-subscribe:before,.fa-twitter:before{display:inline-block;width:16px;font-family:FontAwesome;margin-right:10px;padding-right:10px;font-size:18px;border-right:1px solid rgba(255,255,255,.3)}.fa-facebook{background:#1c3e67}.fa-facebook:before{content:"\f09a"}.fa-twitter{background:#28a6c5}.fa-twitter:before{content:"\f099"}.fa-subscribe{background:#d2002c}.fa-subscribe:before{content:"\f167"}
</style>
<div class="HMH-socials">
<a target="_blank" href="#" class="fa-facebook"><span class="social-counter">146,200</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a>
<a target="_blank" href="#" class="fa-twitter"><span class="social-counter">50,748</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a>
<a target="_blank" href="#" class="fa-subscribe"><span class="social-counter">33,175</span><span class="s-text">Subscribe us on <strong>YouTube</strong></span></a>
<div class="clear"></div>
</div>
<!-- HMH Social Widget End -->

Note: Widget ko add karne se pehle aapko Code me kuch edit karna hoge, jese aapko # ki jagha apni Social Links ko add karna hai or uske sath jo Follower number hai wo bhi aapko edit karke jitne aapke follower hai wo likhe.

At Last:

Ummid hai ab aapke BLog me bhi Social Follow Widget add ho gaya hoga, or usme aapko koi paresani nahi aai hogi.. agar abhi bhi aapka koi sawal hai ya aapko kahi kuch problem aa rahi hai to aap comment karke puch sakte hai.

Aapko ye jankari kesi lagi comment karke mujhe wo jarur bataye.

Happy Blogging!