Simple and Elegant Social Media Widget for Blogger and Wordpress

Now, Bloggers are aware of the role of social media in making their blog popular. Almost all bloggers are using the social sharing widgets and social media following widgets to increase the social media presence of their blog.

If you are not using any social media widget on your blog then today I am here with a simple social media widget which you can add to your blogger as well as wordpress blog.

This simple and elegant looking social media widget will help you to grab more followers to your social profiles. The best thing about this widget is that you can add this simple media widget to your blogger/wordpress blog easily just by pasting the code given below to your widget section.

Now let’s proceed with the tutorial to add this social media widget to your blog.

For Blogger Blogs:

• Log in to your blogger account and click the drop down menu. 

• Select “Layout ” option from the list of options given at left side on your screen. 

• Now, you need to click “Add Gadget” and then select ‘HTML/ Javascript’.

• Paste the code given below.

• Save the HTML/Javascript widget.

For Wordpress Blogs:

• Log in to your Wordpress account and select Appearance > Widgets > Available Widgets.

• Drag 'Text widget' to the sidebar.

• Paste the code given below.

• Save the widget.

<style>
.ses-social-widget{background:#ffffff;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;
-webkit-transition:all .6s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
.ses-social-widget:hover{border:1px solid #269;background:#FFFEF9;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
.ses-social-widget a{text-decoration:none;font-weight:bold;font-size:14px;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.ses-social-widget a:hover{color:#269}
.ses-social-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>
<!-- Start Smart Blogger Tricks Simple Subscribe Widget - http://www.smartbloggertricks.com -->
<br />
<div class="ses-social-widget" style="margin-bottom: 10px; margin-top: 0px;">
<a href="http://feeds.feedburner.com/Smartbloggertricks"><img alt="RSS Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzjW5Zt4DaK4a8htIPd9l8WYXAIo62wCY-g0yu1hT1lx8CvBjbHbwWcPU3_Zi7RIkB9E7zI1Xwd_XaBmmiyX_ZT8R7Ri4fcY_3Xkmwz5tCWmc7dnhItn8GLQ-H8iA8rObGfNxIwKZbrDod/s1600/social-connect-rss.png" /></a><a href="http://feeds.feedburner.com/Smartbloggertricks">Subscribe to our RSS Feeds!</a>
</div>
<div class="ses-social-widget" style="margin-bottom: 10px;"> <a href="http://twitter.com/TechSBT"><img alt="Follow Us on Twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-YpwlyCv_dIrXrUWh828AkveRGBpHtq4SvUDluLVKJgzr_zI9Har7OcXaMcEZEpf81S8V75c7r4urY8c3WDrClbAAYku-eVqXPAj0A4m4VvShkkMKGENUuXw-E7l4Rz9eDNwkTd_Pt8v/s1600/social-connect-twitter.png" title="Follow Us on Twitter!" /></a><a href="http://twitter.com/TechSBT">Follow Us on Twitter!</a></div><div class="ses-social-widget" style="margin-bottom: 10px;"><a href="http://facebook.com/smartbloggertricks"><img alt="Be Our Fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSgnIODArgydpDklVHJKt7j4Kd4Rx7x82uoEeNtIcxVxFrRGtxSwdnXu4L9HOK77FGa7VlDqyxSFAyrheM3a8cahVqwEaNsKvsiOC7CE1Tc7hAsg3BCkd7DUiym-1wNrtWk6UOjZxZ39A2/s1600/social-connect-facebook.png' title='Be Our Fan" /></a><a href="http://facebook.com/smartbloggertricks">Follow us on Facebook!</a> </div>

Now, Replace 'http://facebook.com/smartbloggertricks' with your facebook page url, Replace 'http://twitter.com/TechSBT' with your twitter url and 'http://feeds.feedburner.com/Smartbloggertricks' with your feedburner's feed url.

You are done with the whole procedure of adding simple yet elegant social media widget to your blog.