Free Social Media Button Codes

13 comments

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:
Next PostNewer Post Previous PostOlder Post Home

13 comments

  1. thanks for sharing this tutorial Sab, you're truly an angel! it has been ages since i wanted to do this type of social media buttons but i just cant find the time to tinker with it XD

    ReplyDelete
    Replies
    1. Your welcome! yay glad it helped! <3

      Delete
    2. heyya sab! mieza dah siap buat social media button at my bloh tapi pakai cheat sikit la tak macam sab ajar sebab mieza malas gila nak upload kat flickr/photobucket XD tapi next time kalau ada masa untuk betulkan, i'll definitely do it as you taught up there ^_^

      Delete
    3. hehe its ok, kalau u nk just tampal above code saja. tak payah upload apa2.. glad you like it!

      Delete
  2. Great tips Sabrina, thanks for sharing it. Truly appreciate your effort all this time in sharing your knowledge on blogging. In Shaa Allah will use and apply it on my blog, thanks again dear.

    ReplyDelete
  3. wahhh! great tips sabrina. kita dah masukkan dalam blog.yeyy!

    ReplyDelete
  4. i think ive commented before but jz to let u know now im using this in my blog muehehe! tq sab for this simple n clean buttons :DD

    ReplyDelete
  5. Thank you pretty Sabrina for the code and pictures. Really awesome. I have put them in my blog. Check em out :)

    http://ainulaqma.blogspot.com/

    ReplyDelete

CUSTOM BLOGGER TEMPLATES BY pipdig