Horizontal Social Sharing Widget With Hover Effect For Blogger

In previous tutorial we have learn how to floating social sharing
button while today we will add new widget that has amazing effects It has horizontal sharing button.It has beautiful green color with social media icons while when you have mouse hover on them,button become colorful and it looks awesome.

Now i will tell you some thing about this widget.It has six sharing media button.first one is facebook, which is most popular.Twitter,instagram, pinterest, linkedin, google plus.But you can remove any one if you not like to add.

How to add horizontal social sharing widget

It widget is very simple to add.just in one step.Login to blogger and go to layout.Add a gadget of Html/javascriptPaste given below code there.
<style> /* ######### horizontal social sharing Widget by 5gblogger.blogspot.com ##########*/ .socialLinks{text-align:center;margin:50px 0 0}.socialLinks a{display:inline-block;margin:0 .5em;-webkit-transition-property:all !important;-moz-transition-property:all !important;-o-transition-property:all;transition-property:all !important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;border:2px solid #8fb73e}.socialLinks a:hover{-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px}.socialLinks span{display:none}.fTwitter{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -655px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:1px -1083px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook:hover{background-color:#369;border-color:#fff;background-position:1px -1141px}.fTwitter:hover{background-color:#28aae1;border-color:#fff;background-position:0 -718px}.fInstagram:hover{background-color:#517fa4;border-color:#fff;background-position:0 -597px}.fPintrest:hover{background-color:#cc2127;border-color:#fff;background-position:0 -285px}.fLinkedIn:hover{background-color:#007fb1;border-color:#fff;background-position:0 -860px}.fDribbble:hover{background-color:#ea4c89;border-color:#fff;background-position:0 -52px}.fGoogle:hover{background-color:#e46044;border-color:#fff;background-position:0 -395px}.fInstagram{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -527px;background-repeat:no-repeat;height:62px;width:62px}.fPintrest{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -226px;background-repeat:no-repeat;height:62px;width:62px}.fLinkedIn{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -790px;background-repeat:no-repeat;height:62px;width:62px}.fDribbble{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 11px;background-repeat:no-repeat;height:62px;width:62px}.fGoogle{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);background-position:0 -343px;background-repeat:no-repeat;height:62px;width:62px} </style><div class="socialLinks"><a href="http://5gblogger.blogspot.com/feeds/posts/facebook page id" class="fFacebook transition"><span>Facebook</span></a><a href="http://5gblogger.blogspot.com/feeds/posts/twitter id" class="fTwitter transition"><span>Twitter</span></a><a href="http://5gblogger.blogspot.com/feeds/posts/instagram account id" class="fInstagram transition"><span>Instagram</span></a><a href="http://5gblogger.blogspot.com/feeds/posts/pintreset id" class="fPintrest transition"><span>Pinterest</span></a><a href="http://5gblogger.blogspot.com/feeds/posts/linkedin id" class="fLinkedIn transition"><span>LinkedIn</span></a><a href="http://5gblogger.blogspot.com/feeds/posts/plus google id" class="fGoogle transition"><span>G+</span></a> </div>
Note:you have to do some changes in above piece of code before saving.

 At the bottom you have to 

 Change facebook page id with your FB Page
 Change twitter id with your Twitter ID
 change instagram account id with your Instagram  ID
 change pinterest id with yor Pinterest ID or board
 Change linkedin id with LinkedIn Username id
 change plus google with your Google Plus profile or page id

Now place this gadget below main blog post section by drag it.