Skyrocket Your Blog Traffic!
Join our newsletter to get guides which will help you boost your blog traffic for free!



Awesome Social Icons Plugin V2 For Blogger !

Nitishk Gupta 11/03/2015 No Comment
Options
Post Font

Arial
Oswald
Roboto (Default)
No Disturb Mode
social-icons-plugin-blogger

Recently i shared you Social Icons Plugin which was quite good in look and attractive also but many of subscribers requested another version which could be more responsive as well as attractive too , therefore i created another version for you.The base CSS is kept same but new effects are added which look quite good than the first one.
So let's talk about this widget below-



Do You Need This Widget ?

Of course yes ! you need this to increase your followers on social media. This widget is in the basic widget series which i recently started and gave many widgets in it. No doubt there are thousands of social widget available today but it completely depends on you in selecting them. 
Try to select one which looks awesome and in responsive as well as matches your blog color also.

What's New ?

  • The Widget is re-designed  To Avoid Misplacement Errors
  • Added New CSS-3 Effects In The Widget
  • More Responsiveness
  • Simple Color Scheme
So these were some of the features of the widget and you must be excited to grab this widget huh ?
So let's start adding this widget in blogger -

Note- I am explaining this widget therefore the final code will be stated in last. The explanation has been done only for you so that you can code your own widgets in future rather than just  copying and pasting the widget.

Adding The Widget In Blogger -

Note- If you find any problem in understanding this widget refer here.

1- First go to blogger dashboard 
2- Go to Layout
3- Select An Appropriate place for widget (Best- Sidebar Or Footer)
4- Click Add A Gadget And Then click HTML/JAVA SCRIPT

Now the coding part comes- 

1- First let's add the basic structure for our widget -

<!--MBA Social Box-->
<style>
.</style>
<div class='mbasocial'>
<a href='#'><i class='fa fa-facebook'></i></a><a href='#'><i class='fa fa-twitter'></i></a><a href='#'><i class='fa fa-google-plus'></i></a><a href='#'><i class='fa fa-pinterest'></i></a><a href='#'><i class='fa fa-rss'></i></a>
</div>
<!--Ends-->

2- Now after customizing the links lets add the styling part -

<!--MBA Social Box-->
<style>
.mbasocial .fa {color:#007abe; font-size:30px; background:white;padding:10px;box-shadow:1px 1px 4px 1px black;transition:1s;margin:4px;}
.mbasocial .fa:hover {background:#007abe;transition:none;box-shadow:1px 1px 10px 1px black;transition:.5s;color:white;transform:translateY(-2px);}
</style>
<div class='mbasocial'>
<a href='#'><i class='fa fa-facebook'></i></a><a href='#'><i class='fa fa-twitter'></i></a><a href='#'><i class='fa fa-google-plus'></i></a><a href='#'><i class='fa fa-pinterest'></i></a><a href='#'><i class='fa fa-rss'></i></a>
</div>
<!--Ends-->

Now the style tags are completed


So the final code will be -

<!--MBA Social Box--><style>.mbasocial .fa {color:#007abe; font-size:30px; background:white;padding:10px;box-shadow:1px 1px 4px 1px black;transition:1s;margin:4px;}.mbasocial .fa:hover {background: #007abe;color:white;box-shadow:1px 1px 10px 1px black;transition:.5s;transform:translateY(-2px);}</style><div class='mbasocial'><a href='#'><i class='fa fa-facebook'></i></a><a href='#'><i class='fa fa-twitter'></i></a><a href='#'><i class='fa fa-google-plus'></i></a><a href='#'><i class='fa fa-pinterest'></i></a><a href='#'><i class='fa fa-rss'></i></a></div><!--Ends-->

Replace # with social profile links and finally save the widget.

Need Any Help ?

So this was the second version of social icons plugin. Hope you like it and share with your friends.
By the way if you find any problem in understanding or installing this widget let me give a chance to help you through comments and do subscribe us for daily updates with special gifts !
Happy Blogging :)



Skyrocket Your Blog Traffic!

Join our newletter to get guides which will help you boost your blog traffic for free!

Nitishk Gupta
Hi, I Am Nitishk Gupta, a blogger and web developer. I am an addicted blogger who wants to share each and everything I have learned so far in my 4 years journey. Feel free to send me friend request or follow me. Thanks!

No comments:

Post a Comment

Powered by Blogger.