After a long time finally I created Social Icons with Hover Effect for your blog and website. You can add this widget to both platforms blogger and wordpress. So, Today I'm going to teach you that how to add Social Icons with Hover Effect widget to your blog.
Adding Social Icons with Hover Effect to Your Blog
- Blogger Users: Login to your Blogger Account >> Navigate to Your Blog >> Layout >> Add a Gadget >> HTML/JavaScript
- WordPress Users: Open your WordPress Blog's Panel >> Appearance >> Widgets >> Add a Text Widget
- Now Copy the mentioned below code and paste it into Widget Box.
<style>
.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/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);background-position:0 -655px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);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/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);background-position:0 -527px;background-repeat:no-repeat;height:62px;width:62px}.fPintrest{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);background-position:0 -226px;background-repeat:no-repeat;height:62px;width:62px}.fLinkedIn{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);background-position:0 -790px;background-repeat:no-repeat;height:62px;width:62px}.fDribbble{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);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="https://facebook.com/Rafaytutorials" class="fFacebook transition"><span>Facebook</span></a>
<a href="https://twitter.com/Rafaytutorials" class="fTwitter transition"><span>Twitter</span></a>
<a href="http://instagram.com/Rafaytutorials" class="fInstagram transition"><span>Instagram</span></a>
<a href="http://pinterest.com/Rafaytutorials" class="fPintrest transition"><span>Pintrest</span></a>
<a href="http://www.linkedin.com/Rafaytutorials" class="fLinkedIn transition"><span>LinkedIn</span></a>
<a href="http://dribbble.com/Rafaytutorials" class="fDribbble transition"><span>Dribbble</span></a>
<a href="https://plus.google.com/+Rafaytutorials1" class="fGoogle transition"><span>G+</span></a>
</div>
- Replace Rafaytutorials with your Social Networks usernames.
- If you want to remove any social icon then remove it from <a to </a>.
That's all! You're done! :-)
I hope that you guys will like this Social Icons with Hover Effect for Your Blog. If you have any confusions just feel free to ask me in comments. I'm there for you guys! :-)
Post a Comment