Hello Friends. You all are enjoying with my previous awesome posts. Today I designed a unique and simple Social Sharing button with awesome hover effects. Its looks simple or in black and white but on mover over its comes in its color and looks very attractive. I am trying to make this widget for last two days and Now, you can use it with your blog. I tried to minimize the designing coding and use Pinterest buttons with Facebook, Twitter, Google Plus and RSS buttons so its can load fast and does not effects on your blog preference. To Grab this just follows the simple steps.
How to Get these sharing buttons [For Blogger Users]
5. Change All Social Media links (Colored text) with yours.
This awesome widget is developed by IH and having all rights. If you want to share it with your reader, you have to give credits to IH by attaching a link back to this blog.
Need Help?
If you face any problem, feel free to ask, just do comment your view, I will try to give your reply in time.
- Go to Blogger > Design > Page Element
- Add a Gadget.
- Choose "HTML/JavaScript " Widget
- paste the following code in the Gadget area
<style type="text/css">#IH-social-v1 {width: 300px;height: 35px;margin: 0;padding: 0;list-style: none inside none;margin-left:-80px;}#IH-social-v1 li {float: right;padding: 0;margin: 5px;}#IH-social-v1 li a {width: 32px;height: 32px;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0G-aNJUuGNGIJBRoM9ijfXIW1YwRdLn0CTtdsTFeMuzjMSoMdltGSTn6EeDn9hQpsSqYc4WOdYrGG1mWXjFbX6x4C6HWISGPQrhPUGNlck0d10m3wf63lJJKAFgqA-I6HOX6hrK4JSqhv/s1600/cats2.jpg") 100% 0 no-repeat;display: block;transition-property: background-position;transition-duration: .2s;-o-transition-property: background-position;-o-transition-duration: .2s;-webkit-transition-property: background-position;-webkit-transition-duration: .2s;-moz-transition-property: background-position;-moz-transition-duration: .2s;}#IH-social-v1 #IH-pin {background-position: -160px 0;}#IH-social-v1 #IH-pin:hover {background-position: -160px 100%;}#IH-social-v1 #IH-facebook {background-position: 0px 0;}#IH-social-v1 #IH-facebook:hover {background-position: 0px 100%;}#IH-social-v1 #IH-twitter {background-position: -40px 0;}#pbt-social-v1 #pbt-twitter:hover {background-position: -40px 100%;}#pbt-social-v1 #pbt-gplus {background-position: -80px 0;}#pbt-social-v1 #pbt-gplus:hover {background-position: -80px 100%;}#pbt-social-v1 #pbt-rss {background-position: -120px 0;}#IH-social-v1 #IH-rss:hover {background-position: -120px 100%;}</style><div><ul id="IH-social-v1"><li><a id="IH-rss" href="http://feeds.feedburner.com/INFOZHELPER"></a></li><li><a id="IH-pin" href="http://pinterest.com/INFOZHELPER/"></a></li><li><a id="IH-gplus" href="https://plus.google.com/111188040805340254482"></a></li><li><a id="IH-twitter" href="http://twitter.com/INFOZHELPER"></a></li><li><a id="IH-facebook" href="http://www.facebook.com/INFOZHELPER"></a></li></ul><div>
5. Change All Social Media links (Colored text) with yours.
How to add these sharing button [For WordPress Users ]
- Go to Dashboard > Appearance > Widget
- Choose "text" widget.
- Paste the above code in the Widget area.
- Fix the position and save the widget.
Credits
This awesome widget is developed by IH and having all rights. If you want to share it with your reader, you have to give credits to IH by attaching a link back to this blog.
Need Help?
If you face any problem, feel free to ask, just do comment your view, I will try to give your reply in time.
post anything new
ReplyDelete