Social shares are really a great way to get more readers and page/post views. There are many social subscription widgets out there, but today I am going to share a responsive metro style social share widget with you. It will increase not only your shares, views but will also look great on your site.
You may like it:
Show Me How
- Go to Blogger Dashboard > Layout
- Click on Add a Gadget
- Select HTML/JavaScript
- Paste following code and save it.
<style> .Mbt-Social-metro { width: 960px; float: left; margin: 0; padding: 1em 0;}.Mbt-Social-metro ul { margin: 0; padding: 0;}.Mbt-Social-metro ul li { list-style: none; list-style-type: none; padding: 0; text-transform: none; margin: 0; float: left; display: inline-block; width: 20%;}.Mbt-Social-metro ul li a { font-size: 80%; color: #fff!important; display: block;}.Mbt-Social-metro ul li a:hover { color: #000!important; background-color: #999; text-decoration: none;}idc-scoail ul li a, ul li a:hover { -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}.Mbt-Social-metro ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWrNqc0VAmBtoD7_DEt33fEabik8PeC4lthvMMuPT0MhkULscbrPK9xlZm-1F49vJJCUp1Rjd6UN-q2qp5ME6nqRI9oNuZKmFHuPYZvlQsEucJvxN7Bqnv9GSW3ZIwr44FuR3yYBiEbok/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 10px 50px;}.Mbt-Social-metro ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0135eBmPgPSwqGxjXQS_HeiKgUbEz3ho4qZaHJuvbJ16YsYo9kJlMcixoY2kbAtA-JZ9Crb1NyXfdotR16Hbt8Mnfr6p7nAke_p65qRspFYszZ-PkhVKPuB9DzLEQ0sGqzP3BWHjCFrjc/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 10px 50px;}.Mbt-Social-metro ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT92I90zSKo1Q0X-Lhyphenhyphenn06dfeCnbEA1EDW78gjvlEvjSipb6PMA4gN9JMzjBv4wp84yOtoSLzfcwaDfGGXDhIHKzwC5fmSsgzmmBUS5RW3Q7QXlFQ-ueIpeshKZHgz4Zwlc-HW0RTXv3M-/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 10px 50px;}.Mbt-Social-metro ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7OIt09gOB7sHT_JwE3R1FQs9tr54HJEBuu9L1ozc0bExiZj_8D1YZuYQHM9scR2vDdb6fuy5oycYtFrRv_BaRUglEJ2QMLvLxrnPD_UwuuDTcFki191UvSTeQ0t0J5StvYroEl7tQNxje/s1600/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 10px 50px;}.Mbt-Social-metro ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl9lQ10b6Zuiiod8MOsqm34RjozKFVcfwS6dSj5Fcr27kcjcdsnnnUPfWxSfdY608UDKevtT9MU7dk0JipTv1sIyOnhUX2012RQ4s6BhlN4DcIAhAWj1LukSaXeRxM2zX3J8I5Hu1PEcl_/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 10px 50px;}/* width of 768px */@media only screen and (min-width: 768px) and (max-width: 959px) { .Mbt-Social-metro ul li { width: 50%; };}/* width of 480px */@media only screen and (min-width: 480px) and (max-width: 767px) { .Mbt-Social-metro ul li { width: 50%; };}/* width of 320px */@media only screen and (max-width: 480px) { .Mbt-Social-metro ul li { width: 100%; };}</style><div class='Mbt-Social-metro'><ul><li><a class='rss' href='http://feeds.feedburner.com/mybloggingtips1'>Subscribe our Feed</a></li><li><a class='twitter' href='https://twitter.com/mybloggingtips'>Follow me on Twitter</a></li><li><a class='facebook' href='https://www.facebook.com/blogsmasala'>Find me on Facebook</a></li><li><a class='google' href='https://plus.google.com/ID here'>Join me on Google+</a></li><li><a class='linkedin' href='http://in.linkedin.com/in/mybloggingtips'>Connect with LinkedIn</a></li></ul></div>
Post a Comment Blogger Facebook
Please Do not Spam. Give us Positive feedback to make this blog more better.