Top Best Number One Social Icons Widget: Aaj main aapko SMI blog ke sidebar top par show hone wale sidebar social media follow icon buttons ke bare me btane wala hu. Aap apni website ya blog meeasily same social follow button add kar sakte ho. Iske liye aapko only apni site ki sidebar widgets me niche diya hua code add karna hai. I sure ye sabhi platform like WorsPress, Blogger, Joomla and other all blogs par work karega. Sabse achhi bat ye hai ki ye social icon very fast loading hai or aapki site speed par inse koi effect nahi padega second ye itne attractive hai ki aapko jyada se jyada log social networking sites par follow karenge.
Is sidebar social media widget ki coding mujhse lagbhag 1000 se bhi jyada readers request kar chuke hai so aaj main is social follow buttons with icon ki coding aa sabhi ke sath share kar raha hu taki aap sabhi apni site or blog par is type ke social follow buttons add kar sako.
ye font awesome method se develop kiye gaye sidebar social button hai isi tarah aap baki sabhi social media ke liye icon button add kar sakte ho. I hope iske bad un sabhi readers ko mujhse ya kisi or se SMI blog ke social media icon ke bare me puchna nahi padega.
Website Blog Ke Liye Number One Sidebar Social Media Follow Buttons With Icon
Iske liye aapko koi steps follow karne ki jarruat nahi hai bas niche di gayi coding ko ditect apne blog ki widget me add kar de aapke blog par social media icon widget work karegi.
- WordPress: Go to your blog dashboard >> Appearance >> Widgets and select Text widget or paste bleow code.
- Blogspot: Go to blog dashboard >> Layout >> click on Add a widget and select HTML/JavaScript widget and paste this code.
and baki sites me bhi aap isi tarah widget me ye code paste kar add kar sakte ho.
<style>
.sidebar-social{font-size:13px;height:250px}.sidebar-social .icon a{display:block;color:#fff;text-decoration: none;padding:12px}.sidebar-social .icon{margin:1% .5%;width:49%;height:45px;float:left;text-align:center;background-color:#111;border-radius:10px}.sidebar-social .icon.facebook{background-color:#3b5998}.sidebar-social .icon.twitter{background-color:#00aced}.sidebar-social .icon.pinterest{background-color:#cb2027}.sidebar-social .icon.instagram{background-color:#bc2a8d}.sidebar-social .icon.google{background-color:#dd4b39}.sidebar-social .icon.linkedin{background-color:#007bb6}.sidebar-social .icon.flickr{background-color:#ff0084}.sidebar-social .icon.YouTube{background-color:#b00}.sidebar-social .icon.rss{background-color:#ea8914}.sidebar-social .icon.tumblr{background-color:#32506d}.sidebar-social .icon:hover{background-color:#222}.link{float:right}
</style>
<div class="sidebar-social">
<div class="icon facebook">
<a href="https://www.facebook.com/jumedeenkhan" target="_blank" title="Follow on facebook">
<i class="fa fa-facebook"></i> 10,370 Likes</a></div>
<div class="icon twitter">
<a href="https://twitter.com/SupportMeIndia" target="_blank" title="Follow on twitter">
<i class="fa fa-twitter"></i> 225 Followers</a></div>
<div class="icon pinterest">
<a href="https://in.pinterest.com/jumedeenkhan/" target="_blank" title="Follow on pinterest">
<i class="fa fa-pinterest"></i> 100 Followers</a></div>
<div class="icon instagram">
<a href="https://www.instagram.com/jumedeenkhan/" target="_blank" title="Follow on instagram">
<i class="fa fa-instagram"></i> 270 Followers</a></div>
<div class="icon google">
<a href="https://plus.google.com/+jumedeenkhan" target="_blank" title="Follow on google+">
<i class="fa fa-google-plus"></i> 330 Subscribers</a></div>
<div class="icon linkedin">
<a href="https://www.linkedin.com/in/jumedeenkhan" target="_blank" title="Follow on linkedin">
<i class="fa fa-linkedin"></i> 80 Followers</a></div>
<div class="icon flickr">
<a href="https://www.flickr.com/photos/jumedeenkhan/" target="_blank" title="Follow on flicker">
<i class="fa fa-flickr"></i> 22 Followers</a></div>
<div class="icon YouTube">
<a href="https://www.YouTube.com/user/JUMEDEENKHAN" target="_blank" title="Subscribe on YouTube">
<i class="fa fa-youtube"></i> 235 Subscribers</a></div>
<div class="icon rss">
<a href="https://feeds.feedburner.com/supportmeindia" target="_blank" title="Subscribe blog feed">
<i class="fa fa-rss"></i> 11,513 Followers</a></div>
<div class="icon tumblr">
<a href="https://jumedeenkhan.tumblr.com/" target="_blank" title="Follow on tumblr">
<i class="fa fa-tumblr"></i> 10 Followers</a></div>
</div>
<div><a href="https://www.supportmeindia.com/smi-sidebar-social-follow-media-icon-widgets/" target="blank" class="link">get this widget</a></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
Is code me se meri social profile link ki jagah apni social profile ka link URL change kar le taki user aapko social media par follow kar sake.
I hope ab kisi ko bhi mujhse ya kisi or se is tarah ke social media code ke liye request nahi karna padega or aap sabhi pane blog par same SMI blog ki tarah social media follow icons wale follow buttons add kar sakoge.
Agar aapko ye post pasand aaye to ise sidebar social media par other blogger ke sath share jarur kare.
Thank you so much.
the code is working very fine. I was searching for a lot on the web for a working code. you really solve my problem.
Sir Isme Na To Icon Aa Rahe Hain Or Sir Jese Mai Is Par Apne Mouse Ke Corsor Ko Lekar Jaa Rha Hun To Isme Line Jesi Aa Rahi Hai Jese Normal Link Par Mouse Ke Cursor Ko Le Jane Ke Bad Aati Hai PleaseSir Btaye Is Line Ko Remove Kese Kare Or Icon Kese Aayenge Please Sir And Thanks In Advance.
Icon dikhane ke liye aap font awesome icon stylesheet link add karo aur underline remove karne ke liye ye css code use karo.
.sidebar-social .icon a{text-decoration: none!important;}Sir mai mai dino se internet par social icon font ki css dundh rha hun par agar css mil bhi rahi hai to koi benifit nahi ho rha hai kiunki mujhe pta hi nahi chal paa rha hai ki css add kese karun kanha karun
Dear is post me css code already add hai.
मैं अपने social media widget में follower और likes करने वालो की संख्या दिखाना चाहता हूँ ...कैसे होगा
Iske liye aap follower count script ya plugin use kare.
Sir main main pahle se yehi wala social follow Lagaye the pahle sahi that but usme main border-radius:10px se 0px kar diya Sab wrong ho gya hai.
Pura code phir se Laga Raha hai tab bhi year hi ho Raha hai.
Please check karke bataye sahi kaise Hogan.
Abhi aapke blog me social follow button sahi se work kar rahe hai.
Kal ka Backup restore kiye hai. Tab sahi hua hai aapke email per screen shot bhej Raha hu