Support Me India

Blog Me Font Awesome Social Media Follow Icon Kaise Add Kare

by: ,

Internet par aysi koi website or blog nahi hoga. Jis par social media follow button add naho. Its really impossible. Yakinan har ek site par facebook, google plus, twiiter, pinterest, instagram and other koi na koi social icon add hote hai. To chaliye kyu na aap bhi aaj apne blog par font awesome social media follow icon add kar lijiye.

Add Font Awesome Social Follow Icon in your blog

Maine apni pichli post Social Follow Buttan Widget Blogger Me Kaise Add Kare post me bhi blogger me social media foolow button add karne ki jankari di hai. Usme aapko different color ke social follow button ki information milegi.

Is post me mai aapko simple social icon add karne ke bare me bta raha hu. Iska screenshot aa pupar feature image me dekh sakte hai. Yaha mai aapko jo social icon ki coding bta raha hu use aap blogger blog, WordPress blog, joomla and other kisi bhi platform par bane blog ya website me use kar sakte ho. Ye har site par work karega.

Website me social media icon add karke aap apne reader se social sites par bhi contact kar sakte ho or apni new post ko unke sath share kar sakte ho. Isse log aapko socila media par follow karenge or aapko social media sites se quality traffic bhi milega. Iske bare me maine Social Media Sites Se Adhik Traffic Pane Ke Top 5 Clever Ways post me details se btaya hai. Aap ek bar is article ko jarur padhiye.

Font Awesome Kya Hai or Iske Social Icon Kyu Use Karne Chahiye?

Font awesome aapko site par ayse social icon add karne ko deti hai jisme aapko image use karne ki jarurat nahi hoti hai. Fon awesome sirf aapko icon deti hai uske pas CSS pwer nahi hoti hai. So aapko social icon khud design karne hote hai. Aap chahe jaise font awesome social icon ka color, style, size and other setting kar sakte ho. Font awesome icon ko use karne ke kuch fayde aapko yaha bta raha hu.

  1. Fast Loading: Aapne pahle bhi agar apni site par social icon use kiye honge to aapne dekha hoga ki wo icon images ke hote hai or images load hone me jyada time leti hai. Isliye images social icon se site ki loading speed kam ho jati hai. So font awesome social icon iska solution hai. Isme image ki jarurat nahi hoti hai.
  2. Large Connection Icon: Aap font awesome social icon hi nahi balki inke sath or bhi bahut sare icon use kar sakte ho. Isme aapko 100+ icon se bhi jyada icon milenge jaise aapko WordPress ka icon use karna hai to aao fa fa-wordpress use kar sakte ho. Isi tarah aapko jiska bhi icon add karna hai to aap <i><class=”fa fa-iconname></i> coding use kar sakte ho.
  3. Custom CSS Support: Font awesome ki sabse achi bat ye hai ki aap iske icon ko chahe jaise design kar sakte ho. Aap uska background, color, style, size sab kuch change kar sakte ho. Bas iske liye aapko CSS coding ki jankari honi chahiye.
  4. Free: Mostly ayse social icon premium hote hai. But aap font awesome icon ko free me use kar sakte ho.

Ab aap jaru apni site par font awesome social icon add karna pasand karoge. So chaliye ab aage bat kartye hai blog me social icon add karne ki.

Blog Me Font Awesome Social Media Follow Icon Kaise Add Karte Hai

Font awesome social icon ko blog me add karna bahut simple hai. Iske aapke pas 2 option hai. First aap apni site ya blog me direct html widget me ye code paste kar sakte hai. Second option me aapko blog ke <head> ke niche code paste karna hoga. Mai yaha aapko second options yani direct widget add karne ke bare me details se bta raha hu. Aapko jo simple lage wo use kar sakte ho.

1. Simple Icon: Default background:

<style>
#smisocialicons {
text-align: left;
}
#smisocialicons a {
color: #font-color;
display: inline-block;
font-size: 16px;
width: 20px;
height: 20px;
line-height: 20px;
margin: 0 1px 6px;
}
</style>
<div id="smisocialicons">
<a href="https://www.facebook.com/JUMEDEENKHAN/" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="https://plus.google.com/+SupportMeIndia/posts" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="https://twitter.com/SupportMeIndiakhan" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="https://in.pinterest.com/jumedeenkhan/" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="https://www.instagram.com/jumedeenkhan/" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="https://www.YouTube.com/user/JUMEDEENKHAN" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a> 
<a href="https://jumedeenkhan.tumblr.com/" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="https://feeds.feedburner.com/supportmeindia" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

2. Awesome Background Social Icon:

<style>
#smisocialicons {
text-align: center;
}
#smisocialicons a {
background: #ae141f;
color: #fff;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 8px;
}
#smiicons a:hover{
background: #hover-color;
}
</style>
<div id="smisocialicons">
<a href="https://www.facebook.com/JUMEDEENKHAN/" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="https://plus.google.com/+SupportMeIndia/posts" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="https://twitter.com/SupportMeIndiakhan" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="https://in.pinterest.com/jumedeenkhan/" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="https://www.instagram.com/jumedeenkhan/" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="https://www.YouTube.com/user/JUMEDEENKHAN" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a> 
<a href="https://jumedeenkhan.tumblr.com/" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="https://feeds.feedburner.com/supportmeindia" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Code ko apne blog me paste karne se pahle usme se meri social id url ki jagah apni social id url add kar le. Maine jo id change karni hai use highlight kiya hai.

WordPress: Agar aap WordPress user hai to ye step follow kare.

WordPress dashboard >> appearance >> widgets >> Select Text >> Choose widget location par ja kar code paste kare.

Blogspot: Or agar aap blogger user hai to ye step follow kare.

Blogger dashboard >> layout >> add a widget >> HTML/Javascript par ja kar code paste kare.

Now, ab aapko ek kaam or karna hai. Upar diye code me se apni social profile ke URL add kare or social icon ka background color change kare. Sath hi height or width code me 30 ki jagah aap apne hisab se size set kar sakte ho.

I hope aapko ye article pasand aayega. So agar aapko ye icon sach me pasand aaye to is post ko social media par share jarur kare. Sath hi apna 2 minute ka time de kar post ke bare me comment me 2 lines jarur likhe.

Related Posts for You

Reader Interactions

Comments (46)

  1. Sir whatsup men sent karne ke liye kaise karen
    Disqus comment ke alava koi dusra free comment box btaye jo saral ho

  2. Bahut badiya Jankari ha .. it’s helpful for my blog thank you dear thank you very much

  3. sir meri template pr social media image di hui hai usko kaise change kar sakte hai jo html coding di hui hai document section me weha pr link or apne blog ka name dalne pr bhi image or template name change nahi ho pa rehe hai unko kaise change kar sakte hai

    • Blogger template >> edit HTML code par ja kar kar sakte ho. Change karne ke bad page refresh karke check kiya karo.

  4. Very nice post

  5. sir mere blog ki jo layout hai mobile pe wo puri full screen nai aati mera mtlb hai ki jaise aapki blog jo hai mobile phone me open krne pe site container are totally stretched hota hai phone ke corner tak. i also want ki mere v blog ki layout aisi ho mobile pe. So please help me ki ye kaise hoga.

    • Simple hai aap fully mobile friendly template use karo.

  6. jume deen bhai blog ki post ko direct social media me tranfer kaise karege

    • Direct link share kar ke.

  7. Perhaps you should get Hindi written website.

  8. bro menu option me contact us about us kese Add kare

    ….?????

    or aap wapsite check kariye mene dusra template change karliya hai

  9. sir muje ye bataiye Agar google se koi pic leke phir uska background change karke agar blog me lagaya jaye to kya wo copiright hoga? aap meri site par dekhna mene background change karke Aur aditing karke laga rakhi h
    sir ek Aur bat facebook aur google plus ke elawa esa koi social network h jaha se blog ke liye visitor ziyada se ziyada mil sake

    • Agar aap kisi or ki image use karoge to usme copyrighting ka dar to hoga hi behtar hoga aap khud ki image use karo. Social media bahut hai. pinterest, linkedin and other.

  10. sir mera friend.ek site banvaya hai bharatdas.tk mai bhi apna site aisa bnana chahta hu please help me sir

  11. Mujhe ye samajh nhi aa rha ki aapke blog me CPC kaise itni achi mil rahi jabki mere me 0.02 se uppar nhi ja rahi hai q .???

    • Bro mai jaisi bhi post likhta hu. Sab aapke samne hai. Bas jitna mujhse hota hai badiya keywords use karta hu.

  12. bro mai ek blog banaya hu to usme shayri dalna chahta hu to ager shayri kahi se copy kar ke apne blog me dalu to koi problem to nhi hogi kyoki mai shayri khud to bana nhi sakta aur maine dekha hai ki ek hi shayri kai website me mil jati hai

    • Dusro ki shayari copy karoge to copyrighting hogi. Aap apna content khud likho.

    • Hello pramod aap kar sakte hai .. mil jayegi … content uppper do pragraph me dalna har waqt jyada se jyada .. its chalenge … AdSense kya sab kuchh milega.

  13. Whatsapp share button blog me kaise lagaye blogger blog me please bataye

    • Iske bare me aap google me search karo koi na koi post mil jayegi.

  14. sir mai apne Post ko Google+ mai share karta hu to nahi ho rahi hai Sorry, your post could not be shared. Please try again aisa likha huva aata hai maine bahot try kiya but nahi ho raha hai kaya problem hai batavo

    • Aap browser ki history cookies delete karke browser me log in karke try karo.

  15. Bohot accha trick hai. Mera ek question hai, apke jaisa WordPress mein ek blog banane mein kitna paisa lagega or monthly fee kitna hoga ?

    • Jyada nahi bas 1000-2000 monthly charnge lagta hai.

  16. bhai aapki help chaiye me ek music website banane ki soch raah hu , kyaa ap mujhe batayenge ki music website kaise income karte hai .

    • Mai aapki WordPress, blogspot blog banane me help kar sakta hu. Music site banane ke liye aap wapka par contact karo.

    • M here bro kaisi website bnani hai.
      1 . Php mein ya fir WordPress par.
      Better Php rhegi.
      2. For income Google absense + Uc union best hai. Agar uc union na use karo toh bhi best hai.

      For more info Comment here. I will comment back ASAP :))

  17. Sir Please Aap Mere Blog Me Visit Kar Dekhiye Ki Mera Blog Kesa He Or Mujhe Isme Or Kya Kya Improvement Karna Chahiye .

    • Badiya template hai. Nice look bro.

  18. Nice Jumdeen Bro mai yahi search kar raha tha .

  19. akhir kar apne aapne pic chnage kar hi di sir aap toh bade smart ho nice looking SiRRRRRR
    ok thanx sir anyway your looking soo good broooo

    • Welcome bro.

  20. sir niche WordPress mein last mein mere tamplate main Proudly powered by WordPress aa raha hai isko kasie remove karo theme editor mai jaa kr

    • Apnw blog ki theme me action.php file me ja kar iske link ko remove kar do.

  21. hlo sir, blog par kaha par or kis type se AdSense lagayenge tab income hoti hai kyuki blogger hai jo per day k 1500 visitors aate hai or AdSense bhi hai but unke icome hi nahi hoti hai asha kyu

    • Aap blog ki sidebar widget, header widget or direct post me ads code paste karke ads laga sakte ho.

  22. Sir kiya aap bata saktey hai ki mera tamplate thik hai ya nhi aur kiya yeh tamplate fast loading tamplate hai bhi ya nhi kyu ki Mai soch raha tha isko ab change naa hi karu ager aap final kr do ki thik hai toh mai ishe hi rahene deta hu verna koi aur dekhunga

    • badiya template design hai. maine check kiya ha ifast laoding ahi 3 second me open ho raha hai. Change mat karo bas iski hi ache se setting kar lo.

  23. awesome bro. I will add this icons on my blog

  24. sir Mike apki help chahiye

    • Bolo aapki kya help karu. Details me btana