Social media button widgets can help you get more traffic. Within a click, one can share your post story or follow you for more content. Everyone uses social media for one reason or the other, and to generate more traffic when you share your post on your social media profiles you attain more traffic easily.
Social media follow buttons to link your way to share the website URL for gaining more traffic easily. Most websites implement them so they can gain more followers which they can add to their traffic source when they ask them to view their posts. Mostly the people who will link to your social media are up to making good use of the content you will share from your blog and that’s the Page SEO optimization. If you don’t have push notifications or subscriptions that people can use to get direct confirmation upon upload of new content, then I think that the best way is to use social sharing tools such as Facebook and Twitter buttons.
Today I want to give out more than six social sharing button widgets to you so that you can use them in your blogger blog with easy integration of some HTML, CSS, and Javascript code easily into your template theme. Use the simple tutorial to add them and comment for any assistance.
How To Add Social Media Follow Buttons Widgets To Blogger
We are going to use some code written in CSS and HTML to add to your blogger template. All you have to do is that you will have to select the best Social Media Follow Buttons Widget For Blogger Website design you like and follow the process indicated below you will follow and add the code into the widget section or CSS code editing section. Enjoy. Bellow is the BEST social media widget button for blogger templates. Follow the steps below to know where you will paste your font awesome code used by the widgets.
Step 1. Log in to Blogger and choose your specific website to add the SEO code.
Step 2. Reach out to the left commands by navigating to them to the Template command
Step 3. Click on the template command and then locate the Edit HTML next to Customize.
Step 4. Click anywhere in your code and then click on Ctrl+F in Windows or CMD+F in Mac.
Step 5. In the search bar search for the <head> tag.
Step 6. After finding the Head Tag Copy all the code BELOW and Paste it BEFORE the head tag.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”/>
The code to add font awesome icons
1. Fine Colors Social Media Buttons widget For Blogger
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>POINT NOTE: You will have to replace the ” # “ character with your social media link URL for redirection from your template to the URL pages. This particular widget is an eye-catching one for your web page visitors.
It can generate lots of followers on Instagram, page followers on Facebook, and more subscribers for your Youtube channel. Do you want more followers? then use this as a sidebar widget for every page of your website and you will like the experience.
2. Block-style colorful social media widget
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>POINT NOTE: You will have to replace the ” # “ character with your social media link URL for redirection from your template to the URL pages.
Also, change the GREEN highlighted number to your social amount of followers so it can replace the customs number put in the code. After changing the number the social widget will change to the customer number and not exactly the number of followers you have on the social media platforms.
This social media is like a simple all-in-one place that is like ” hey you, just a simple click on each to show you love my article “I like it and I usually use this one at the end of an article to redirect my traffic to more posts in my social media platform and so I can prefer it.
3. Beautiful colorful social media widget
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>POINT NOTE: You will have to replace the ” # “ character with your social media link URL for redirection from your template to the URL pages.
Also, change the GREEN numbers in the code to the number of followers you have on the particular social media platform to match. In case you input any number the number is the one that is going to reflect in the widgets custom.
You guys are so privileged that I decided to give out this one. I have kept it for myself for sometimes and people commented on my blog to request me for this one until I said the time is now I give it away for FREE. This is one beautiful social media widget that can sky-rock your blog a lot more than others since is very appealing to the eye.
4. Best stylish social media widget
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> </div>POINT NOTE: You will have to replace the ” # “ character with your social media link URL for redirection from your template to the URL pages.
stylish social media icon. Made by Graham. Very clean and very convenient social media add-ons for especially those with large numbers following them on different social media platforms. This can help them make the audience notice that the blog is from a famous person and can learn from his experience as I see it. very appealing.
5. Stylish transparent social media widget
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>
POINT NOTE: You will have to replace the ” # “ character with your social media link URL for redirection from your template to the URL pages.
Some people would say this is the best social media widget for bloggers of all time, but that if you are using a white template theme that will be so compatible with it. For another color template, I think the upper social media widget would work best for your templates. Such people include the ones that rum gaming templates that have almost all colors.
Why Implement Social Media Follow Buttons On Websites?
1. The social media follow button widgets for bloggers assist in a great way to bring followers into your social life. Make people feel that many people also use your content in the blog by displaying the number of following you. Social media sharing follow buttons are there to make people follow you and then turn them to direct traffic that will increase your paid ads income. I advise you to look at the social media of the top big blogs. That surrounds us in our niche area and look at the following amount. Depict why they get so famous and a lot of traffic in their blogs. Sometimes after adding good content. it’s great to add some sharing buttons so people can share some love with you by adding some following activities.
2. Some websites are not user-friendly since they crash colors of social media button widgets. Make sure the social media icons are placed well within the template and they correspond. The color of your template makes users happier when they visit your site.
3. Social media buttons are one of the many template add-ons that make the template feel premium. Enhance the user experience when they load your blog. They also enhance the sharing of your posts to their traffic generating even more traffic for you. To add the ad-dons one has to input the HTML and CSS codes to the template to enable their transitions, hover on, and other better user experiences
Conclusions
In this post, I have attached different social media widget button designs that can improve your blog template. Users find social media buttons appealing since they can be able to follow up on your articles even in different environments that they use every day.
That`s it for the day guys, Thank You for viewing my post. Please Subscribe for more posts coming up. If you had any problem trying to add the above social media follow button widgets for a blogger blog then Contact Us for getting more directions.
