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/AVvXsEiN3rlfQNBPp9fAtJrkgekQcSlG7ydIWgdM50tTXPjmRdAeTD6IerA7sdwX523muDyOKAdUgxix0yeTjK23XSfCxi2M50vLr9L5GSJGsIGqUEjazeOHsZeG9hMRfTgcqZnqnTvs1UbkEksv/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/AVvXsEhyERWJV2DDF4tey54zp0uUKQQ6l41BmpXwmlBQvzyhXl7ogvBEAp-hkvOvrVHbpuiXAHM45RcoQL0xBrneKR81PvDKVqX5k6Ybph4GQQXhRaVXjjZ8YgyKwakiFwEjGVv_Dce2V9OtGYkR/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/AVvXsEiVJA8Vu3AGHrY-e9sgmSWPvURsOKXLmVtLOypFI0F1uMb4PuDZNUwURV9YaHeRpVr0ZWvVeKCw9eQatZRZ1Lk5HwYuT29I7_oFyQVMYhJukArev1jZKnW7soVg_LcNYMfPQI_dXtLRXgQi/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.
0 comments