Thursday, October 20, 2011

Social Media Subscribe Bar for Blogger


I have been trying to figure out how to make one of these

for WEEKS!

I tried many, many codes and websites and none of them seemed to work.

Finally!  Finally! I combined and deleted and found one that worked:

<div id="social icons">
<a href="your first link url"><img src="Your Image DIRECT LINK URL" width="45" height="45" alt="RSS"/></a>
<a href="your second link url "><img src="Your Image DIRECT LINK URL" width="45" height="45" alt="Twitter"/></a>
<a href="your third link url"><img src="Your Image DIRECT LINK URL" width="45" height="45" alt="Contact"/></a>
<a href="your fourth link url"><img src="Your Image DIRECT LINK URL" width="45" height="45" alt="Facebook"/></a></div>

Obviously, if you want to add more buttons, like Google+ and Pinterest or Tumblr or Flickr, just copy
<a href="page url"><img src="Your Image DIRECT LINK URL" width="45" height="45"


If you want your buttons bigger or smaller, adjust the numbers after height and width.

For those of you that need a wee bit more help...

First, find your icons that you want to use, there are a lot of free sites that offer icons.  Just Google Free Social Media Icons.

I uploaded the icons into Photobucket.

Next, open your rss feed in a tab, your Twitter profile in a tab, your contact page in a tab, your facebook in a tab, etc.


make sure you have Photobucket open in a tab, too.

Make sure you have your blog dashboard open in a tab. Click on Layout.

Click on 'Add a Gadget'

A box opens, 
scroll down until you come to Html...click on that.


Now copy the code from the top of this post and paste in the content box.


Depending on the size of your screen, you may be able to move the html box to the side and 


I find this the easiest way to do it, but you don't have to do it that way.

Now, decide which link you want to be first, 

 click on the tab for that link.

Copy the URL.

Now, delete the words first link url between the " " and paste the url you copied between the quotes.
*make sure you have quotes around your url.

Now, click on your photobucket tab, and click on the DIRECT LINK url.

Now click inside the " " around Your Image, delete the words Your Image DIRECT LINK URL and
replace them with the actual Direct Link you just copied.
*make sure you have quotes around your photo url.

Now, repeat until you have all of the buttons you want.

That's it.

Hit Save.

And it should be there.

If you have any problems, 
please feel free to email me
ourlifeinwords {at} gmail.com