Wednesday, 18 April 2018

Blogger Blog ke Liye 5+ Social Media Follow Widgets

aaj hum jaanenge ki Blogger Blog me Social Media Follow buttons widget kaise add karte hai. social media follow button humare blog ke liye bahut zaroori hota hai. Social Media Widget Add karne se aapke visitors aapse connected reh sakte hai. Jab bhi aap apne blog par koi bhi new post publish karte hai to aap use social media par share kar sakte hai jisse wo saari updates aapke visitors ko milti rahegi. Social Media widget add karne se humare blog ka design bhi accha dikhta hai aur isse visitor aapke Blog par aana pasand karte hai.

social media follow widget for blogger blog


Blogger Blog me Social Media Follow Buttons kaise Add kare

sabse pehle ye code aapko apne blog ke html me <head> section me add karna hai. aap neeche diye gaye photo me dekh sakte hai ki maine kis tarah se code add kiya hai.

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



1. ab aapke blog ke "layout" me jaaye.

2. uske baad "Add A Gadget" par click kare.

3. ab "html/javascript" select kare.

 ab dosto maine neeche jo codes diye hai unme se aapko jo bhi widget pasand ho uska code leke aapko "html/javascript" ke box me paste kar dena hai aur "save" par click karna hai.

Blogger ke liye 5+ Social Media Follow Widgets



<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>
</div>





Code-:

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



Code-:

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


Code-:

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


Code-:

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


Changes-:

dosto inme se jo bhi widget aapko pasand ho uska code le ke aap apne blog me paste kar sakte hai. Lekin yaad rakhiye inn codes me jaha par aapko "#" dikhega waha par aapko khud ka social media link daal dena hai. 

Last Words-:

To dosto aaj humne Dekha ki Blogger ke liye Social Media Follow button kaise add karte hai. maine jo steps bataye hai unhe dhyan se follow kijiye. aur agar aapko iss article ke baare me kuch bhi sawal puchne hai to aap neeche comment kar sakte hai. Dhanyawad!

2 comments: