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.
EmoticonClick to see the code!
To insert emoticon you must added at least one space before the code.