How to add Social Media Icons to your Blogger website

I've a Twitter account with a lot of follower, a Facebook page and a g+ page, now I want to connect my blogspot to my Social Media Pages: how to?

STEP # 0 - Be organized

When you have to make a cake, the best thing is to prepare all the ingredients before you begin.
In this case we do not need much, but I suggest you keep a text editor, notepad or textedit possibly be able to save the text with no formatting (. Txt).
Copy links of your social pages in this document, with order, one for line:

http://www.twitter.com/mytwitter

http://www.facebook,com/Myfbpage Ecc.

You also need to have the image files of your favorite social media, but here we are already moving in step # 1

STEP # 1 - You need icons.

Need icons of your social media, image files, if possible png, and you have three solutions:
• Draw yourself icons (if you are familiar with graphics softwares such as Illustrator or Photoshop)
• Find them in the web
• Buy them from one of our collections: http://wp.me/pW01G-Ka , or from some imagestock site.

Social Media Icons Collection

STEP # 2 - Upload to your blogspot icon images

Now you need to have an url of your images, there are a lot of way for this, one is to upload them in a post of your blog. From your Blogger dashboard create a new post, title it something as "My social icons" and if you want add to the title "…don't delete". Upload in this post your icons as photos and save as draft (you don't have to publish this post!)

STEP # 3 - Getting your image url

This is the most complicated step for someone who is completely unfamiliar of html code. Do not panic, everyone can succeed with little concentration. In your post, click the HTML button in the upper left to see the HTML code of your article, now looks for the url of the images that you have uploaded, something similar to

<img src="http://blogspot.com/000000/twitter.png">

What you need is to copy the full URL from http:// ... to twitter.png excluding the quotation marks when it is closed.
Now you can paste it on your notepad or textedit
 Repeat for all the icons that you need. To avoid mistakes, you can try to enter the url in the address bar of your browser and see if the image is loaded.

Note
If you could not find the code you have another way to go. Publish the Post with icons and go to frontend to see it. Rightclick with mouse over each image and copy the image Url, of course to paste your text document. Then remember to Unpublish the post and save it as draft.

STEP # 4 - HTML AGAIN! You are becoming a Code GURU

If you have passed step #3 you're ready for the #4, let's go!

Copy and paste in your text document these lines of code

<a href=“my-link”>

<img scr=“my-icon-image”>

</a>

repeating as many times as you need to post the icons

At this point you just need to copy the link you have on your text document within html tags, be sure that each link corresponds to its icon.
In the first line with the url of the page, in the second row with the <img scr … will paste the url of the image.

The urls must be included in quotation marks “http://www.mypage …”
(Misplaced or mismatched quotation marks are one of the single most common coding errors in HTML.)
Example:

<a href=“https://www.twitter.com/mytwitter”>

<img src=“http://myblog.files.wordpress.com/2014/03/fb.png” />

</a>

STEP # 5 - Create your gadget

Go to your Blogger dashboard and click "Layout" on left column. When the Layouty page is open, choos where you want publish your gadget. Click on your "Add Gadget" box and choose the "HTML/Java script gadget"
In the gadget windows insert a title, something as "Follow us" Then copy from your text document your code with social url and image and paste in the gadget field. Save and…
Done!
Go to the front end to see how gadget is working.

STEP# 6 – More style!

You may not be satisfied, the icons are too big, attached to each other and you want to add margins, here is an html a bit ‘more complex that will help you have a little’ order in your widget.

Briefly, you can increase or decrease margins between the icons changing the css parameter margin-left, or you can set the icon size by changing the html size in pixels, both width and height, it is recommended that you don’t set these parameters to a higher number of pixels than the image actually measure to not lose the quality of the image, for example:
if an icon real size is 78px x 78px, you can set 50px X 50px, but it is not advisable to display it 100px X 100px.

for example:

<a href=“https://www.facebook.com/my-page” target=”blank” style=”display:block; width:60px; height:60px; float:left;margin-right:5px; margin-bottom:10px;”>

<img src=“http://mioblog.files.wordpress.com/2014/03/fb.png” width=”60px” height=”60px” />

</a>

<a href=“https://www.twitter.com/my-twitter” target=”blank” style=”display:block; width:60px; height:60px; float:left;margin-right:5px; margin-bottom:10px;” >

<img src=“http://mioblog.files.wordpress.com/2014/03/twitter.png” width=”60px” height=”60px”/ >

</a>

<a href=“https://www.googleplus.com/my-page” target=”blank” style=”display:block; width:60px; height:60px; float:left;margin-right:5px; margin-bottom:10px;”>

<img src=“http://my.files.wordpress.com/2014/03/googleplus.png” width=”60px” height=”60px” />

</a>

You can copy the HTML code above and paste it into your widget, taking care to replace the links that need to go to your pages and URLs of your images / icon.