Top 5 latest Widgets Stylish Social Media Follow Buttons For Blogger

Hello दोस्तों आज हम Top 5 Widgets Social Media Follow Buttons For Blogger के बारे में जानेंगे. ये क्या है? इसका कैसे use किया जाता है और क्यों? और ये ब्लॉग और website के लिए क्यों जरुरी है? social media की बात करे तो यहाँ एक बहुत बढ़िया प्लेटफार्म है. जहां हम अपने ब्लॉग, वेबसाइट या कोई भी product को जनता के सामने प्रमोट कर सकते है. social media की सहायता से हम जनता को डायरेक्ट अपमे ब्रांड या कंपनी से जोड़ सखते है.

जिससे लोग सीधे हमारी website पर आ सखते है. और साझा किए गए किसी भी अपडेट के बारे में सूचना पा सकते है.जैसे हम पॉपुलर social media की बात करे तो फेसबुक, ट्विटर, गूगल+ सबसे पहले आते है. जहा लोग एक दुसरे से जुड़ने के लिए इन सब social media का use करते है. तो इस लिए यहाँ पर लोग अपने ब्रांड या ब्लॉग या फिर किसी भी product को प्रमोट कर सकते है. बिना कोई Investment किये. आप लोग एक ब्लॉगर है तो आपको पता ही होगा की जो ब्लॉग में ट्रैफिक आता है वो दो जगह से आता है. एक तो Search Engine से और दूसरा social media से आता है.

यदि आप अपने ब्लॉग या website में किसी customized social media विजेट को use करते है तो आपका ब्लॉग बहुत ही Attractive दिखाई देते है. तो यहाँ हमने आपके लिए कुछ customized social media विजेट लेकर आये है. जो आपके ब्लॉग को बहुत ही अच्छा look देगा. ये सरल विजेट HTML औरCSS के साथ डिज़ाइन किए गए हैं, ताकि आप इसे न केवल ब्लॉगर के लिए बल्कि WordPress सहित किसी अन्य सीएमएस के लिए भी उपयोग कर सकते हैं। इस समय, मैं आपको अपने ब्लॉग में ब्लॉगर के लिए इन सोशल मीडिया बटनों को जोड़ने की पूरी प्रक्रिया दिखाऊंगा।

I am going to provide some custom social media follow buttons for blogger. Actually, adding these widgets are pretty easy.

How To Add Social Media Follow Buttons In Blogger?

सबसे पहले, हमें अपने ब्लॉगर ब्लॉग पर Font Awesome icone set ऐड करना होगा। इसके बिना, आप किसी भी सोशल मीडिया आइकन को देखने में सक्षम नहीं होंगे। यह करने के लिए,

Login to your blogger account > Go to the Template section > Click on the “Edit HTML” > Find the ending </head> code of your template.

Code :

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

अब आपको इस code को सिम्पली कॉपी करना है और इसे </head> के पहले पेस्ट करना है. और फिरsave Template में click करे. जैसे आपको screenshot में बताया गया है.

So it’s time to add the social media widget.

1. आपको सबसे पहले layout Section में जाना है.
2. अब आपको Slide bar Section में जाना है. और वहा Add a Gadget में click करना है. (यहाँ social media Follow Button बहुत ही responsive है. ताकि आप अपने ब्लॉग में इसे कहीं भी जोड़ सकें लेकिन मैं आपको इसे साइडबार में जोड़ने की सलाह दूंगा)

3.अब एक pop up window ओपन होगी वहा आपको HTML/JavaScript को Select करना है.

4.अब आपको इस बॉक्स में code पेस्ट करना है. नीचे दिए गये कोई भी code जो आपको अच्छा लगे उसे अपने हिसाब से use कर सखते है.

Note :-  Highlight किए गए “#” को आप अपनी social  प्रोफ़ाइल या पेज URL के साथ बदल सकते है.

 5.अंत में, “Save” बटन पर क्लिक करें। अपने ब्लॉग पर जाएं और इसे पुनः लोड करें आप देखेंगे कि विजेट आपके ब्लॉग पर लाइव है।

List of Social Media Follow Buttons For Blogger:

हमने आपके लिए यहाँ कुछ बहुत attractive ओए awesome look वाले आइकॉन social media follow button लेकर आये है. आप इन social media follow button को अपने ब्लॉग में add कर सकते है. हमारा हमेशा यही प्रयास रहता है. की हम आपको हमेशा खुश रखे. इसलिए ये social media follow button हमने आपके लिए लेकर आये है. i hope ये आपको अच्छा लगे.

Widget Style 1

                  

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

Widget Style 2
                   

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

Widget Style 3

                              

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

Widget Style 4

                             

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

Widget Style 5

                              

<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>.


create post by www.technicalsardar.com real content .

Configuration:

आप इन codes को अपने हिसाब से Customized कर सखते है. बस  आपको जहा # दिख रहा है. वहा आपको अपने social media का लिंक add करना है. 

Final Word

i hope ये पोस्ट आपको अच्छी लगही होगी. यदि आपको यह पोस्ट अच्छी लगे तो आप इसे friend के साथ जरुर share करे. क्योंकि हम हमेशा आपके लिए इसी तरह की पोस्ट लेके आते रहे.

• About us
• Twitter
• Facebook
• Google+
• Latest Posts

GAURAV RAJPUT

He is a 18 years self-trained guy, a young part time blogger and Android expert from last five years. He is an Indian blogger and share useful content on this blog regularly, If you like his articles Then you can Share this blog on social media with your friends.

@YOUR-TWITTER-HANDLE

CEO & Editor, YOUR-SITE

Follow @YOUR-TWITTER-HANDLE

YOUR-NAME

+YOUR-GOOGLEPLUS-USERNAME

Latest posts by YOUR-NAME (see all)