Top 5+ Stylish Social Media Button Icons For Website

0
146 views

How to add stylish social media buttons on website Using css javascript. Kya aapko pata blog me social media buttons bootstrap types ke follow button kaise add kare iske bare me janenge

Blog me stylish social media buttons ya social media follow button add karne ke bahut fayde hai Ishe aapke website ka design Aur followers increase hote hai to chaliye jante hai social media follow button kaise add kare

social media buttons icons

Waise To blogger templates me Phale se social media buttons add hote hai. Lekin kisiko template ka design Acha hote huwe bhi. template me social media follow buttons best na hone par template ko reject kar dete hai.

Par kya aap jante hai Template customize karke aap blog me Stylish social media buttons bole to share button , stylish follow button add kar sakte hai. To is post me aapko Top 5 best stylish social media follow buttons Design codes dunga Aur jante hai kaise add kare.

Benefits of social media Follow button Add on Website

1.  Social media follow buttons ko blog me add karne se  Facebook, Twitter, instagram, Ke followers increase kiya ja skate hai.
2.  Social media follow buttons ko add karne se blog ke traffic ko bhi increase kiya ja skate hai. Follower ko new post publish karte hai.  notification mil jayega. Aur wo post ko read karenge.
3. Blog design ko best banega.
4.  Social media per aapka blog website promotion bhi ho jayega.

How to Add Social Media Follow Button on Blogger Website

Social media follow button blog me add karne ke liye post ko carefully read kare.

1. Sabse Phale blogger dashboard me layout per click kare.
2. Ab  Sidebar me Add Gadget per click kare.

 

3. Ab New window me HTMl/Javascript per click kare.

Step 2.
  1. Ab widget ka title enter kare

2. Aur Niche wale box me social media follow buttons codes ko paste kar de.

🔵 Blog me html code kaise Add kare.

Top 5 Stylish Social Media Follow Button Design For Websites

In stylish social media follow button me jo bhi apke blog ke liye suitable lagey use aap add kar sakte hai Ye sabhi stylish social media follow buttons design bahut hi Attractive hai

1/. Round Cercle Social Media Follow Button

Follow Us button code:- 

<style> */https://www.99techspot.in.*/ .rr-mod.module-rightrail-social-widget{margin:0 0 10px 0 !important;}#rr-social-widget-chiclets div{width:40px;height:32px;display:inline-block;margin:0 4px 0 0;}#rr-social-widget-chiclets a{width:32px;height:32px;display:block;background:url(https://3.bp.blogspot.com/-xl5U9JSHLTM/UNxNmOxJ9qI/AAAAAAAAB6Q/cuSzXh2aD-M/s1600/rr-social-icons.png) no-repeat;}@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:4/3), only screen and (min–moz-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5){#rr-social-widget-chiclets a{background-image:url(https://3.bp.blogspot.com/-xl5U9JSHLTM/UNxNmOxJ9qI/AAAAAAAAB6Q/cuSzXh2aD-M/s1600/rr-social-icons.png);background-size:248px 32px;}}#rr-social-widget-chiclets-facebook a{background-position:0 0;}#rr-social-widget-chiclets-twitter a{background-position:-36px 0;}#rr-social-widget-chiclets-googleplus a{background-position:-72px 0;}#rr-social-widget-chiclets-linkedin a{background-position:-108px 0;}#rr-social-widget-chiclets-stumbleupon a{background-position:-144px 0;}#rr-social-widget-chiclets-youtube a{background-position:-180px 0;}#rr-social-widget-chiclets-rss a{background-position:-216px 0;} </style>
<div class=”rr-mod module-rightrail-social-widget” id=”module-rightrail-social-widget”>
<div class=”configuration-neighbor”>
<div id=”rr-social-widget-chiclets”>
<div id=”rr-social-widget-chiclets-facebook”>
<a href=”https://www.facebook.com/suppotrtmeindia” rel=”nofollow” target=”_blank” onclick=”s_objectID=’rr_sm_icons_facebook’;”></a></div>
<div id=”rr-social-widget-chiclets-twitter”>
<a href=”://www.twitter.com/ohmhelp” rel=”nofollow” target=”_blank” onclick=”s_objectID=’rr_sm_icons_twitter’;”></a></div>
<div id=”rr-social-widget-chiclets-googleplus”>
<a href=”https://plus.google.com/+99techspot.in” rel=”nofollow” target=”_blank” onclick=”s_objectID=’rr_sm_icons_googleplus’;”></a></div>
<div id=”rr-social-widget-chiclets-linkedin”>
<a href=”https://www.linkedin.com/99techspot.in” rel=”nofollow” target=”_blank” onclick=”s_objectID=’rr_sm_icons_linkedin’;”></a></div>
<div id=”rr-social-widget-chiclets-stumbleupon”>
<a href=”https://www.STUMBLEUPON.com/99techspot.in” rel=”nofollow” target=”_blank” onclick=”s_objectID=’rr_sm_icons_stumbleupon’;”></a></div>
<div id=”rr-social-widget-chiclets-youtube”>
<a href=”https://www.YouTube.com/ohmhelp” rel=”nofollow” target=”_blank” onclick=”s_objectID=’rr_sm_icons_YouTube’;”></a></div>
<div id=”rr-social-widget-chiclets-rss”>
<a href=”https://feedburner.google.com/fb/a/mailverify?uri=99techspot.in” rel=”nofollow” target=”_blank” onclick=”s_objectID=’rr_sm_icons_rss’;”></a></div>
</div>
</div>
</div>

Customization.

    🔵 Social Media Link me 99techspot Ke jagah apne social sites links add kare.

2/. Stylish Social Media Follow Button

Social media follow button 1

Follow Us button code:- 

<style>
.to-social-follow{width:300px;padding:10px;margin:0}.to-social-follow .fa{font-size:18px;padding:16px;text-align:center;margin:5px 2px;width:20%;text-decoration:none;color:#fff}.to-social-follow .fa:hover{opacity:.7}.to-social-follow .fa-facebook{background:#3B5998}.to-social-follow .fa-twitter{background:#55ACEE}.to-social-follow .fa-google{background:#dd4b39}.to-social-follow .fa-linkedin{background:#007bb5}.to-social-follow .fa-youtube{background:#b00}.to-social-follow .fa-instagram{background:#125688}.to-social-follow .fa-pinterest{background:#cb2027}
</style>
<div class=”to-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-google” 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-pinterest” target=”_blank”></a>


Customization.

1. Blog me follow us button code ko apne social sites profiles add kare  jagah per For expl:-(https://facebook.com/99techspot.in)
2. Aur Widget save Kar de.

 

3/. Havor Effect Social Media Follow button

Social media follow button 2
Follow Us button code:- 

<style>
ul.techornate-follow-buttons a:hover{color:#03c9a9}.techornate-follow-buttons.b-title li{text-align:center;background-color:#fff;width:31.5%;border:1px solid #eee}.techornate-follow-buttons.b-title a{text-transform:uppercase;text-decoration:none;margin:20px auto 0;font-size:10px}.techornate-follow-buttons li{display:inline-block;padding:0 0 7px;margin-bottom:3px!important}.techornate-follow-buttons li:last-child{border-bottom:1px solid #eee!important;padding-bottom:7px!important}.techornate-follow-buttons.b-title i{margin:0 auto 10px;display:block}.techornate-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=’techornate-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-google”></i>google +</a></li>
<li><a href=’#’><i class=”fa fa-pinterest”></i>pinterest</a></li>
<li><a href=’#’><i class=”fa fa-linkedin”></i>linkedin</a></li>
<li><a href=’#’><i class=”fa fa-instagram”></i>instagram</a></li>
</ul>

4/. Plan Social Media Follow Buttons

Social media follow button 3
Follow us button Code

<style>
.techornate-social-buttons ul{padding-left:0;list-style:none}.techornate-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}.techornate-social-buttons ul li{margin-bottom:10px;width:100%}.techornate-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}.techornate-social-buttons li a.social-btn-facebook{background:#3b5998}.techornate-social-buttons li a.social-btn-twitter{background:#1da1f2}.techornate-social-buttons li a.social-btn-youtube{background:#cd201f}.techornate-social-buttons li a.social-btn-instagram{background:#405de6}.techornate-social-buttons li a.social-btn-google{background:#dd4b39}
</style>
<div class=”techornate-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-google”>Follow on Google+ <i class=”fa fa-google”></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>

 

5. Unique Social Media Buttons

Social media follow button 4
Follow us button Code

 <style>
.s-text strong,.social-counter{font-weight:900}.techornate-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.techornate-socials a span,.techornate-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}.techornate-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=”techornate-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>

Customization:-
# ke Jagah per aapne social site ke url add kare.

 

6/. Attractive Social Media Follow button

Social media follow button 5
Follow us button Code;-

<style>
ul.techornate-social-share{padding:0;margin:0;overflow:hidden}ul.techornate-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}ul.techornate-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.techornate-social-share li a:after{height:0;width:0;top:50%;left:100%;content:”;margin-top:-4px;position:absolute}ul.techornate-social-share li a.facebook{background:#436feb}ul.techornate-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.twitter{background:#43c9eb}ul.techornate-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.google{background:#f14133}ul.techornate-social-share li a.google:after{border:4px solid #f14133;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.youtube{background:#b00}ul.techornate-social-share li a.youtube:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a:hover{opacity:.7}ul.techornate-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}ul.techornate-social-share li span.scount-number{margin-top:5px;color:#333}ul.techornate-social-share li:nth-child(2n){margin-right:0}
</style>
<ul class=”techornate-social-share”>
<li> <a href=”#” class=”facebook”><i class=”fa fa-facebook”></i></a> <span class=”scount-number”>44,143</span> <span>Fans</span></li>
<li> <a href=”#” class=”twitter”><i class=”fa fa-twitter”></i></a> <span class=”scount-number”>39,505</span> <span>Followers</span></li>
<li> <a href=”#” class=”google”><i class=”fa fa-google-plus”></i></a> <span class=”scount-number”>25,203</span> <span>Followers</span></li>
<li> <a href=”#” class=”youtube”><i class=”fa fa-youtube”></i></a><span class=”scount-number”>7,456</span> <span>Subscribers</span></li>
</ul>

Customization:-
 # ke Jagah per aapne social site ke url add kare.
To ye te 5 + stylish Social media buttons ya social media follow button jo ki apke blog ko perfect look de sakte hai. I hope you Apko jankari mil gayei Hogi blog me stylish social media follow button kaise add kare.
Agar aapko Social media Follow button add karne me koi bhi problem aa rahi to hame comment karke puch sakte hai. Aur agar aapko ye stylish Social media Follow button Design Pasand aaye to Is post ko Apne Friends ke sath jarur share kare

Popular posts

LEAVE A REPLY

Please enter your comment!
Please enter your name here