Hello Blogger fans, In this session i am came with 3 style social media icons widget. This tutorial help you adding a free social media icons in blogger. The best social media buttons for blogger i shared in this blogger tutorial. Some friends requested me that, how to add social media icons widget in blogger. That's why today i am came with 3 awesome style and fontawesome social network icons widget for blogspot blogger. By using these social media icons widget you may increase your blog's look. If you looking for a social media widget for blogger , then this tutorial for you. Social icons and social media icons is play an important role on every blog. It help you to make connection with your visitors.
This is an easiest way to promote your social media links with your targeted visitors. If you make widget in top with these social icons, then a user see these social icons easily. If you can connect your targeted users with your social links, like: Facebook, Twitter, Google plus, pinterest, linkedin, and many others social media icons, then you can easily increase your visitors.This is an easiest way to promote your social media links with your targeted users. Social share is a important part of Onpage SEO. So you have must need share your content on your social media. If a huge number of people connected with your social media, then your blog traffic will increase.
Social Icons Blogger Widgets
Importance of social media icons and their position on website or blog is huge. From my opinion, in sidebar of blog and top header is the best position to place social media icons. But today i shared sidebar widgets. In another tutorial i will share how to put social icons on top header.
Social media widget for blogger is a most important for every blogspot blog. Install social media buttons for blogger free. I am sure that, this tutorial may help you for increase you social media likes and follows. Social media share widget for blogger play an important role in every blog.
Now lets star the tutorial.
Note: Before starting this tutorial, please take a backup of your template for safety
Style 1: Social icons with text counter
This is a beautiful and responsive fontawesome social media icons for blogspot blogger. By using this fontawesome social icon you can add Facebook, Twitter, Pinterest, Instagram, Google Plus, Linkedin, Flickr and Vine social icons on blogger sidebar. In this widget most interesting thing is, you can add social counter with your own like facebook like, twitter followers, pinterest people, instagram followers, google plus people, linkedin fans, flickr followers and vine people. Hope will you like this widget.
To add this widget on your blog firstly go to
Blogger Dashboard >
Template >
Edit HTML and find past below
CSS Code before
</style> tag.
/*================= CSS Social Icons Widget by msdesignbd.com =====================*/
.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:" ";display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}
Save Template.Now go to
Layout >
Add a gadget >
HTML/Javascript and below HTML and
Save widget. <div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
<span class="app_count">7845</span> <span class="app_type">Fans</span> </a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
<span class="app_count">32</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
<span class="app_count">4774</span> <span class="app_type">People</span> </a></div>
<div class="app_social instagram">
<a href="https://www.instagram.com/" target="_blank">
<span class="app_icon"><i class="fa fa-instagram"></i></span>
<span class="app_count">65684</span> <span class="app_type">Followers</span> </a></div>
<div class="app_social google">
<a href="https://www.google.com/" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
<span class="app_count">65684</span> <span class="app_type">People</span> </a></div>
<div class="app_social linkedin">
<a href="https://www.linkedin.com/" target="_blank">
<span class="app_icon"><i class="fa fa-linkedin"></i></span>
<span class="app_count">65684</span> <span class="app_type">Fans</span> </a></div>
<div class="app_social flickr">
<a href="https://www.flickr.com/" target="_blank">
<span class="app_icon"><i class="fa fa-flickr"></i></span>
<span class="app_count">44</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social vine">
<a href="https://www.vine.com/" target="_blank">
<span class="app_icon"><i class="fa fa-vine"></i></span> <span class="app_count">574</span> <span class="app_type">People</span> </a></div>
</div>
Customization: USER_Name: Its your social media links. Change all
USER_Name with your social media links.
app_count: This is social media counter. Change all count number with your own social count.
Style 2: Responsive Social Metro Style Icons.
Metro style icons are most popular nowadays. This style look awesome. This
metro style social media icons widget created using fontawesome icons and css with hover effect. Metro style widget is most popular in wordpress. I have seen many wordpress blog user metro style social network icons using wordpress plugins. But blogger users can't do it. That's why i shared this
beautiful metro style social icons widget for blogger. To Setup this metro style widget on your blog, follow below steps.
To add this widget on your blog firstly go to
Blogger Dashboard >
Template >
Edit HTML and find past below
CSS Code before
</style> tag.
/*============== CSS Metro style Social Icons Widget by msdesignbd.com ==============*/
#social-wrapper{background:#000;height:400px;width:50%;margin:auto}
#social-wrapper a{float:left;text-align:center;color:#FFF;font-size:45px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;height:50%}
#social-wrapper i{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
#social-wrapper a:hover{background:#888}
#social-wrapper .fb{background:#3b5998}
#social-wrapper .tw{background:#4099FF}
#social-wrapper .yt{background:#e52d27}
#social-wrapper .gp{background:#D34836}
#social-wrapper .fb{width:75%}
#social-wrapper .gp{width:25%}
#social-wrapper .tw,#social-wrapper .yt{width:50%}
.cnir{position:fixed;right:10px;bottom:5px;color:#888;text-decoration:none}
@media screen and (max-width: 1000px) {
#social-wrapper .fb{width:100%}
#social-wrapper .tw, #social-wrapper .yt, #social-wrapper .gp{width:33.3333333333%}
}
@media screen and (max-width: 650px) {
#social-wrapper .tw, #social-wrapper .yt,#social-wrapper .gp, #social-wrapper .fb{width:50%}
}
@media screen and (max-width: 300px) {
#social-wrapper .tw, #social-wrapper .yt, #social-wrapper .gp, #social-wrapper .fb{width:100%;height:25%}
}
Save Template.Now go to
Layout >
Add a gadget >
HTML/Javascript and below HTML and
Save widget. <div id="social-wrapper">
<a class="fb" href="https://facebook.com/USER_NAME" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="gp" href="https://plus.google.com/USER_NAME" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a class="yt" href="https://youtube.com/USER_NAME" target="_blank">
<i class="fa fa-youtube"></i>
</a>
<a class="tw" href="https://twitter.com/USER_NAME" target="_blank">
<i class="fa fa-twitter"></i>
</a></div>
Customization:Change all
USER_NAME with your social media links.
Style 3: Simple Social Media Icons with hover effect
This is a simple one line social icons widget for blogger that first time used on our magazine blogger template. If you looking for a simple css and hover effect
social networks icon for website of blog, then this widget is for you. This widget also created using font awesome icons and css. In this widget you can display 4 icon and these are, Facebook icon, Twitter icon, Pinterest icon and Google plus icon. This social icons widget is perfect for all blog style blog. Because this widget will look beautiful on all blog style blogger template. You can try our first blog style blogger template:
Palki Ultimate - Blog Style Free Blogger TemplateTo add this widget on your blog firstly go to
Blogger Dashboard >
Template >
Edit HTML and find past below
CSS Code before
</style> tag.
.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:" ";display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff!important;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}
Save Template.Now go to
Layout >
Add a gadget >
HTML/Javascript and below HTML and
Save widget. <div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
</a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
</a></div>
<div class="app_social google">
<a href="https://www.google.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
</a></div>
</div>
Customization:Change all
USER_NAME with your own social media links.
That's it. Hope the 3 style social icons widget will be fine for you. If you found any problems, the inform me on comment section. I will solve. Thanks.
Code source: Internet
