Saturday 17 January 2015

Social Media design ICONS for your blog

 How to apply your cute social Media Icons to your Blog?

How to Apply your "Cute Design" Social Media Icons to your blog?

As a return blogger I would love to redesign my blog page to look more fresh and attractive, I am spending so much time looking for many ideas to make my layout design fit to my blog character.
Learning from other blogger is one of the way we can do, beside my basic grade photoshop class giving me a lot of help for me to create my own simple custom design.
This little cute social media icon is my next target, and I finally found they were not so difficult to do it by yourself.

These are 8 easy steps you can simply follow:

1. Go to your blog setting - choose Layout


2. Click on any of the Add a Gadget links to add a plugin. then choose html/ JavaScript


3. Ignore the Title and go ahead to fill the content

4. Copy and paste this code

<a href="LINK"> 
<img src="IMG LOCATION LINK" /> 
</a>  

Thanks to Davella that gave herself  to post long time ago her code, it's so helpfull and work easily.

5. Repeat a couple of time as much as how many social media you have,  

For me, I need 5 copies: Facebook, Twitter, Etsy, Instagram and Pinterest.

6. Change the LINK on your code

 <a href="LINK"> <img src="IMG LOCATION LINK" /> </a> 
with your social media link ie:https://www.facebook.com/lovelycreativeboutique

7. Then change the IMG LOCATION LINK code with your image link

<a href="LINK"> <img src="IMG LOCATION LINK" /> </a>

8. Upload those cute image and copy paste on IMG LOCATION LINK

You can use Flickr or Photobucket  to upload your own direct image links.

Save and Refresh.
If you want to modify with some custome bigger or smaller size button, you can add thise information behind the IMG Location Link add this size
"height="32" width="32", it will look like this:

for my Instagram
<a href="http://instagram.com/cin_vdmeer/"> <img
src="http://i1196.photobucket.com/albums/aa412/
MissIndieCreative/Instagram.png"height="32" width="32"/>
 </a>

Change 32 with 64 to appear bigger size.

If you are creative, have a design background & you lots of time, you can design these icon by you own. We are lucky, there are a lots of designers giving this social media icon for free. 
We can download it and use it for personal use, you can match it with whatever color and design to your blog. I have included here some cute icon that I like but you have a lot more fun to play with this icons for free, check out Vandelaydesign for more choices of Icons free download

1. Retro Style

2. Hand Stitched style


3. Girly Design
4. Cute SM design

Have fun and good luck!


No comments: