Adding Social Media

 I know there are quite a few people who want to add social media  buttons to their blog.
I thought I would write a tutorial on how to do this.
First of all, you can always find some freebie social media icons, if you are not into designing them yourself.  My next post, I will show you how to design some yourself.
These are step by step instructions with photos.

 Carrie has 34 colors, so you select a color perfect for your blog. She also gives you 3 different sizes in a zip format and numerous buttons to choose from. At Carrie's blog, click on the color text you want to download. For example, I chose Glitter red.

You will see the download file

 Click open the folder, Glitter red.

Next you will see 3 folders. There are 3 different sizes

to choose from. 48px is a good size.

When you click the 48px folder open, you will see about 22 buttons in there.  That's quite a collection. 

Most people use around 5 or 6. This is what I do:

Upload your social media icons to Blogger

Create a new post and title it- Social Media files-Don't delete-Don't publish!!  You want to keep this, but don't publish it.

In your post body, in HTML mode, click insert image  ( picture icon)

Select a file, Click Choose files. Find your Social media folder and hold down your Ctrl button on your keyboard to select more than 1 file. Click the ones you want.  I chose 6 and they are highlighted in blue.

Click open. When they are downloaded. All six should be highlighted.  Click Add selected. Make sure they are blue.

 Now, stay with me....just keep following my instructions.
Ok, you have your choice of buttons in your posts now.
I am using 6, so they all show up.
Click save as Draft!  Don't publish them! Set this window aside for now. If you click compose, you show see all of your social media buttons all lined up!
Go back to your layout and open a new Javascript gadget.

 Give it a name where it says title, such as...Connect with me
or stay connected!

 Click in the Content box and copy and paste this code below into the box.

      <a href="WebsiteAddressHere"><img src="ImageDirectLinkHere"/></a>

If you are using 6 social media buttons, then copy and paste this into the box 6 times.   Look at my example.

I copied it in there 6 times, because I chose 6 icons, bloglovin, facebook, pinterest, mail, rss and google+.
Now, where it says WebsiteAddressHere is where you paste your username for each social media item. Keep the "    "  Just paste your name in the "between" Do this for every item.  For example: I will use bloglovin so I will use my bloglovin ID to put where it says "WebsiteAddressHere"
Example:

 <a href="http://www.bloglovin.com/blog/4119083/life-and-linda"><img src="ImageDirectLinkHere" /></a>

Now, we need to add the social media button to where it says  "ImageDirectLinkHere"
Keep this Javascript gadget open and go back to your post you kept open or the social media buttons draft.

Click the HTML, instead of compose. The first one is Bloglovin
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiicH6iCooWadYrrtqWvP98LNgeHMaQcGXull8hm44i3Wzho7TB1w5Ag0kXqRPWaPV0GtmW1bzzpSgrofqrJmfsDkMnEg6FHrdG3l-_ANOz1e-Z0cbsduvME7MZ8oJNRomhchAvhPMASZo/s1600/bloglovin.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiicH6iCooWadYrrtqWvP98LNgeHMaQcGXull8hm44i3Wzho7TB1w5Ag0kXqRPWaPV0GtmW1bzzpSgrofqrJmfsDkMnEg6FHrdG3l-_ANOz1e-Z0cbsduvME7MZ8oJNRomhchAvhPMASZo/s320/bloglovin.png" /></a>

Copy  the blogloving social media button link and paste it where it says "ImageDirectLinkHere"
so now, it should look like:

<a href="http://www.bloglovin.com/blog/4119083/life-and-linda"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiicH6iCooWadYrrtqWvP98LNgeHMaQcGXull8hm44i3Wzho7TB1w5Ag0kXqRPWaPV0GtmW1bzzpSgrofqrJmfsDkMnEg6FHrdG3l-_ANOz1e-Z0cbsduvME7MZ8oJNRomhchAvhPMASZo/s1600/bloglovin.png" /></a>

The first green link points you to my bloglovin page and the yellow link points to my blogloving button.
See my example below:

 Do this for how many social media buttons you want.
If you do it this way, all of the buttons should line up horizontally.

Ok, let's see some social media buttons....I hope this tutorial helps.
Sorry it is so long, but I wanted to break it down with photos. 
For my personal blog, I am using the pink social media buttons

 If you want to see a video tutorial on this, watch BlogaholicsDesigns on youtube.

Sign up with your email address to receive the latest updates straight in your inbox.

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.