Free Social Media Button Codes

Yeay for another blog tips & tricks! Today I am going to give you Free Social Media Buttons. I decided to create this post for you who wants a click-able Social Media button in your blog. It does look fancy baby. So if you are not familiar with HTML. No worries, try to learn slowly and you will understand how easy and fun they are. So below are the codes for the social media button. You can paste this in your HTML Gadget section where you can find in you Edit Template section. What special about my social media button is that (echecheche) is that is hovers (change) when your cursor move on it. So it looks click-able and attract more people to click it.

HOW TO :
Go to your Dashboard, > look at the left section > Click Layout > Add Gadget > Search HTML > and paste all below codes.
* If you want to edit, paste in Word Document first, edit and then paste the edited codes by you in the HTML Gadget box.

ADDITIONAL NOTES :
You can delete any part that you don't want. For example if you don't want Blogloving section. Simple delete the whole paragraph of the codes. From <td> .... </td> <--- this is consider 1 whole section.

THE CODES :

<center>
<table cellspacing="0" cellpadding="0">
 <tr>

<td><a href=" YOUR FACEBOOK LINK " target="_self" ><img src=" http://i1327.photobucket.com/albums/u663/BySabrinart/7_zps339d1831.png " width="35" height="35" style="opacity:1.0; filter:alpha(opacity=100)"
title=" Facebook " onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" /></a></td>

<td><a href=" YOUR TWITTER LINK " target="_self" ><img src=" http://i1327.photobucket.com/albums/u663/BySabrinart/5_zpsda6df8af.png " width="35" height="35" style="opacity:1.0; filter:alpha(opacity=100)"
title=" Twitter " onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" /></a></td>

<td><a href=" YOUR YOUTUBE LINK " target="_self" ><img src=" http://i1327.photobucket.com/albums/u663/BySabrinart/8_zps1bfad36f.png " width="35" height="35" style="opacity:1.0; filter:alpha(opacity=100)"
title=" YouTube " onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" /></a></td>

<td><a href=" YOUR INSTAGRAM LINK" target="_self" ><img src=" http://i1327.photobucket.com/albums/u663/BySabrinart/1_zpsec678028.png " width="35" height="35" style="opacity:1.0; filter:alpha(opacity=100)"
title=" Instagram " onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" /></a></td>

<td><a href="YOUR GOOGLE PLUS LINK" target="_self" ><img src=" http://i1327.photobucket.com/albums/u663/BySabrinart/3_zps5366be6f.png " width="35" height="35" style="opacity:1.0; filter:alpha(opacity=100)"
title=" Google Plus" onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" /></a></td>

<td><a href="YOUR BLOGLOVIN LINK" target="_self" ><img src=" http://i1327.photobucket.com/albums/u663/BySabrinart/2_zps09c120e7.png " width="35" height="35" style="opacity:1.0; filter:alpha(opacity=100)"
title=" Bloglovin " onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" /></a></td>

<td><a href="YOUR PINTEREST LINK" target="_self" ><img src=" http://i1327.photobucket.com/albums/u663/BySabrinart/6_zpsb7940637.png " width="35" height="35" style="opacity:1.0; filter:alpha(opacity=100)"
title=" Pinterest" onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" /></a></td>

<td><a href=" YOUR CONTACT PAGE LINK " target="_self" ><img src=" http://i1327.photobucket.com/albums/u663/BySabrinart/4_zps84db4b29.png" width="35" height="35" style="opacity:1.0; filter:alpha(opacity=100)"
title=" Contact " onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" /></a></td>


</tr> </table><center/>

CHANGE :
YELLOW = This is where you paste your social media links. For example, Instagram (www.instagram.com/yourusername). You know the drill.

RED = change the number to your preferred size. If the size of the button don't fit well in your gadget, try to adjuct the numbers. smaller or bigger. Its up to you! Play around with it. If you wanna make it bigger, just increase the number to make it fit better or smaller or something like that. :)

PURPLE = This is the image direct link that i provide for you. Its a standard simple grey round social media button. But if you wanna create your own, sure you can. Just upload it in Photobucket or something and copy the Direct Image code and paste it in the purple section. Additional notes, PNG formats works nicer!

How it will look like :

If you still have questions, write down in the comment section below and I will reply ASAP! Happy beautify your blog! A pretty blog is a happy blogger!

SHARE:

Labels: Blogging Tips , Lifestyle , Tips and Tricks , Tips Tuesday