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.
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.
- Blog Ki Left Side Me Floating Social Media Share Buttons Kaise Add Kare
- Blog Post Ke Niche/Upar Social Share Buttan Kaise Lagate Hai
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.
- Facebook Instant Articles Kya Hai All Feature Details in Hindi
- Top 50 Blogging Quotes in Hindi – Successful Blogger
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.
Table of Contents
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.
- 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.
- 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.
- 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.
- 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.
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.
- SERPs Kya hai? SERP Performance Increase Karne Ki 5 Tips
- Apni English Writing Ko Behtar Kaise Banaye – Perfect English Kaise Likhe
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.
Dakeshwar shukla
Sir whatsup men sent karne ke liye kaise karen
Disqus comment ke alava koi dusra free comment box btaye jo saral ho
Shailendra Tiwari
Bahut badiya Jankari ha .. it’s helpful for my blog thank you dear thank you very much
alka saini
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
Jumedeen Khan
Blogger template >> edit HTML code par ja kar kar sakte ho. Change karne ke bad page refresh karke check kiya karo.
Mohd Irshad
Very nice post
Adarsh
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.
Jumedeen khan
Simple hai aap fully mobile friendly template use karo.
Manoj Singh
jume deen bhai blog ki post ko direct social media me tranfer kaise karege
Jumedeen Khan
Direct link share kar ke.
Yogesh Khetani
Perhaps you should get Hindi written website.
junaid siddiqui
bro menu option me contact us about us kese Add kare
….?????
or aap wapsite check kariye mene dusra template change karliya hai
Jumedeen Khan
Ye post padh kar kar sakte ho Blogger Menu Bar Ko Edit Kaise Kare Ki Jankari
ARIF RAZA
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
Jumedeen Khan
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.
md irfan
sir mera friend.ek site banvaya hai bharatdas.tk mai bhi apna site aisa bnana chahta hu please help me sir
Jumedeen Khan
Aap ye post padho Website Blog Kaise Banate Hai Online Paisa Kamane Ke Liye
Trilok Singh
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 .???
Jumedeen Khan
Bro mai jaisi bhi post likhta hu. Sab aapke samne hai. Bas jitna mujhse hota hai badiya keywords use karta hu.
Trilok Singh
maine aapke blog me ek dekha aapke bahut si post me url english me hai aur bahar heading hindi to isaka reason to nhi?
Jumedeen Khan
Iska reason is post me bta ya hai Anchor Text Kya Hai or Ye SEO Ke Liye Kyu Jaruri Hote Hai [SEO Guide]
Pramod Maurya
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
Jumedeen Khan
Dusro ki shayari copy karoge to copyrighting hogi. Aap apna content khud likho.
Trilok Singh
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.
jay
Whatsapp share button blog me kaise lagaye blogger blog me please bataye
Jumedeen Khan
Iske bare me aap google me search karo koi na koi post mil jayegi.
vijay panara
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
Jumedeen Khan
Aap browser ki history cookies delete karke browser me log in karke try karo.
Shibam Kar
Bohot accha trick hai. Mera ek question hai, apke jaisa WordPress mein ek blog banane mein kitna paisa lagega or monthly fee kitna hoga ?
Jumedeen Khan
Jyada nahi bas 1000-2000 monthly charnge lagta hai.
malik
bhai aapki help chaiye me ek music website banane ki soch raah hu , kyaa ap mujhe batayenge ki music website kaise income karte hai .
Jumedeen Khan
Mai aapki WordPress, blogspot blog banane me help kar sakta hu. Music site banane ke liye aap wapka par contact karo.
Sandeep Jinagal
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 :))
Narayan Soni
Sir Please Aap Mere Blog Me Visit Kar Dekhiye Ki Mera Blog Kesa He Or Mujhe Isme Or Kya Kya Improvement Karna Chahiye .
Jumedeen Khan
Badiya template hai. Nice look bro.
Umesh Chavan
Nice Jumdeen Bro mai yahi search kar raha tha .
jitender singh
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
Jumedeen Khan
Welcome bro.
jitender singh
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
Jumedeen Khan
Apnw blog ki theme me action.php file me ja kar iske link ko remove kar do.
prashant rathore
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
Jumedeen Khan
Aap blog ki sidebar widget, header widget or direct post me ads code paste karke ads laga sakte ho.
jitender singh
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
Jumedeen Khan
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.
Rakesh Kumar
awesome bro. I will add this icons on my blog
aaishakhan
sir Mike apki help chahiye
Jumedeen Khan
Bolo aapki kya help karu. Details me btana