Tuesday, November 17, 2015

3 Style Social Media Icons Widget for Blogger

3 Style Social Media Icons Widget for Blogger

Social Media icons widget for blogger free

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. 

css social media icons widget for blogger

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:&quot; &quot;;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 Template


To 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:&quot; &quot;;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
Previous Post
Next Post

post written by:

MS Design provides high quality premium and free blogger templates. Pick some hand made blogger widgets as well as. TemplateMark.com is unlimited source of free blogger templates

20 comments:

  1. i am facing problem with blue apk. its not showing featured apps and featured games on homepage, what should i do?

    ReplyDelete
  2. nice blog m using this trick on my blog > www.about2pc.com

    ReplyDelete
  3. Your article is Very well examined and well presented. And thank you for all.
    For more about It.

    http://blogsnucleus.blogspot.com/2016/05/smart-social-media-widget-for-blogger.html

    ReplyDelete
  4. how to add youtube and rss and tumbler in style1

    ReplyDelete
  5. Very Nice, its good!...

    Thanks Mr. MS Design BD, I'm now using it on my blog ^_^

    ReplyDelete

  6. Did you know that businesses all around the world are hiring people just like you to help manage their social media accounts such as Facebook, Twitter, and YouTube?
    There is a lot of money in it, and the best part is that you don’t need any qualifications, prior experience or specialized skills. All you need is a few spare hours per week, a computer with an internet connection and a good knowledge of how to use Facebook, Twitter or YouTube.

    https://clicktrix.com?david6854

    ReplyDelete
  7. Just wanted to let you know about a great opportunity I have just come across. This company is looking for experienced social media users for positions that pay really well.

    I thought you might be interested. You can get all the details here: https://socialsalerep.com?hyden5213

    ReplyDelete
  8. I thought I should let you know about this company I came across. Right now, they are actively hiring people who know how to use Facebook, Twitter, Pinterest or Instagram.

    If you fit the profile, then you can make great money doing this, as is explained here:

    https://socialsalerep.com?hyden4539


    ReplyDelete