Bling Out Your Blog ~ How To Create and Install Social Media Icons

Howdy!

**Update: It's been a while since I wrote this post, so it's possible that some (or all) of the links to free social media icon sets that I have provided below, might or might not still be available. If they are no longer viable, I apologize, but it's pretty simple to find other sites that do have them. Just do a search for "free downloadable social media icon sets" (without the quotation marks, of course) and you'll find tons of them. Now... My anti-virus softwear has a feature that lets me know right on the search results page, if a site is safe for me to visit or not, but if yours doesn't do that for you and you are wary of just clicking on any old link, you can follow the advice provided by one of my favorite go-to sites for all things interwebs, C|Net.

You can view the C|Net Video HERE

Welcome to the newest installment of my tutorial series; "Bling Out Your Blog"!

Please note: These instructions are for Blogger (blogspot) hosted blogs only. I'm not familiar with the inner workings of Wordpress, Typepad or other blog hosting sites, but I'm sure if you do a search, you can easily find someone who can help you.

Also, I'm not a web designer. I've learned most of what I know from my fellow bloggers or trial and error. I'm certainly open to questions about my tutorials, but please know that if you ask highly technical questions about code etc., I probably won't be able to answer them for you.

So... Why is it a good thing to install a social media icon bar on your blog?

Most popular social media services have a "follow" widget that you can install in your sidebar, which is OK and they work... for the most part. But, studies have shown that having all of your links to social media in one tidy little space, makes new readers more likely to follow you on those sites. (I'm working on one for this blog at the moment)

OK. Let's get to it, shall we?

First, you need to find an icon set that you like. There are hundreds of sites out there that offer free downloads of a myriad of icon sets. You can find everything from simple, basic icons to highly customized graphics. Keep in mind that you will need to unzip most of them once they're downloaded to your computer. If you don't have WinZip, there are instructions for unzipping compacted files without it HERE (Note: If you have an old, expired version of WinZip on your computer, you will need to uninstall it before trying these methods)

If you don't know where or how to find icon sets, here's a link to a Pinterest board that I found with pins of different sites that offer them. I can't vouch for the authenticity of every single site listed on this board, but I found several good sites and if you have a Pinterest account, I'm sure you already know how to check the website or source of a pin. ( Fair warning: I went through a lot of them before I found the right ones for me - There are so many, it can become a bit of a distraction. lol) You can also find a plethora of sites by doing a general web search for "free social media icons". And of course, there are also sites that offer full sets of icons for a just few bucks, if you don't mind paying for them. Many of these sites will even customize them to match your blog design and will also work up the codes that you need for a little more. It's totally up to you.

Here are a few sites that I found just by doing a Google search:

Find these HERE

Find these HERE

I also found this Etsy shop that does really cute hand drawn sets for about $5 or $6 (US) per set.

Find these HERE

Or, this one on Etsy for $6.50 (US)

Find these HERE

Once you've found the icons you wish to use and have downloaded them to your computer, you need to upload them to a host site, like Photobucket, Picasa (or whatever you use) and take care of any editing that needs to be done. ie., resizing them to fit your blog layout. (many sets are offered in several sizes already, so you might not have to edit them at all, but you still need a place to host them)

The size that I use here on SOTKT is 64px and the size that I use over on my other blog,  Go Ahead Take A Bite is 48px, but you can choose whatever size will fit best in the location you choose to put them. The two sizes that I listed above simply wouldn't fit in my sidebar, so I ended up putting it above the "Blog Posts" area in my layout. Didn't know that you could put stuff there? Neither did I, until one night, (out of pure frustration) I decided to try it. Whattayaknow? It worked!

Of course, you can always resize your side bar in the template designer. If you don't know how to do this, you can find the instructions that were included in a previous tutorial, HERE.

Next, you need to gather up the URL's (the www. address) for the social media sites that you want to represent, in a work space. I have a test blog that I keep private and use for editing and trying out different apps and layouts for my public blogs, but you can use Notepad, Word, Google Docs, etc. You just need a space where you can copy and paste things together, before placing your finished icons in your blog layout.

To keep a new (or make an existing) Blogger blog private:

• Go to your Blogger Dashboard
• Choose "Settings" 
• In the Basic section, scroll down to "Permissions"
• To the right of where it says "Blog Readers" click "edit"
• Choose "only blog authors"
• Then click "Save Changes"

Now, back to the icon tutorial...

Once you have all of the icons in your host site and all of the corresponding URL's gathered together, this is the way you would lay them out in your work space. (You can copy my examples and paste them into your work space. Just be sure to delete the highlighted parts, so those areas can be filled in with your own data)

<a href="your Twitter URL"><img src="direct link code to your twitter icon" /></a>

<a href="your Facebook URL"><img src="direct link code to facebook icon"/></a>

And so on... Just follow this same format for each of your social media accounts, then group the links together, end to end, without spaces.  Like this:

<a href ********** <a/><a href **********<a/>

Now, you can add the entire block as a text/html gadget to your blog layout. Et, voila! You have a personalized social media follow bar!

If you find that your icons look or fit better with a space between them, you can add a space by typing <br/> after each link. If you want them to be centered in their location, add <center> immediately before and directly after the entire block of code. (this is also how you would do these things when editing the html code in your blog posts)

For instructions on finding the URL for your Blogger (blogspot) RSS feed: Click HERE.

If you have a Facebook page for your blog, just go to the main or home page and copy and paste the URL that's located in the address bar. This is also called the permalink address.

For Bloglovin', Pinterest, LinkedIn, Twitter, etc. you just do the same.

I do not use a social media icon for email subscriptions. I've found that it's much easier to keep track of my subs by using the available (Feedburner) Blogger widget for email subscriptions in my sidebar.

There's a cute little video called "RSS in Plain English" that explains what an RSS subscription is: HERE.

I hope that I've explained this so that it's understandable. If you have problems or questions of any kind, please let me know and I'll do my best to help in any way that I can.

Your comments and suggestions would be very helpful in putting together future tutorials and if you have any specific requests, I'd be happy to oblige, as long as I know how to do it! :~)

Be Well!
(and have fun!)

Mary

Follow me on social media! Or Subscribe To Spilled On The Kitchen Table

You can have new posts from Spilled On The Kitchen Table sent right to your inbox! Just enter your email address below:


Delivered by FeedBurner
(Don't forget to check your email for your subscription confirmation. Just click the link in the email, confirm your subscription and you're all set!) We will never send advertising or provide your email address to any other blogs or businesses.

Bling Out Your Blog ~ How To Resize Your Photos In Blogger

(this is the first in a series for those of us without a web design degree, on how to work with HTML code and the Blogger Template Editor  ~ all tutorials will be for Blogger hosted blogs. It's not a bad idea to print this out, before you start.)

How To Resize Your Photos In Blogger

Hiya, Folks!

Welcome to my very first tutorial! You might have noticed some header and layout changes around here since your last visit. Don't worry... you're in the right place. (Please bear with me... It's a work in progress.)

I thought I'd start with one of the things that eluded and frustrated me the most when I began blogging; how to make the photos that I posted larger. Especially the photos on my food blog.

Not just a tiny bit larger. I wanted BIG. I kept seeing all of these gorgeous photos, jumping off the pages on my favorite food and DIY blogs and no matter how I worded my google queries, I just couldn't find the answer I was looking for.

Most of the hits that I got, simply explained how to use the regular "small, medium and large" options in the blogger editor. Um, duh! ~ I already knew that. Some of them explained how to enlarge photos in Photoshop or Paint. That's all well and good, but... 1) I didn't have Photoshop or Paint and 2) They didn't have sites like PicMonkey and iPiccy where you could just click on pre-loaded options and get the results you wanted. (if they existed, I wasn't aware of them)

I wish I could remember where it was that I finally found the information I was looking for, but I know it was another blogger who was kindly sharing her photo tips and secrets. Thank you unknown, kind blogger, wherever you are!

Before you begin, you'll want to decide whether to keep your blog at it's current dimensions, or change things like the width and layout. In case you don't know how or where to change/set the dimensions for your blog, these are the (simple) steps:

Go to "dashboard"

Select "template"

Next, select "customize"

Then, select "adjust widths"

A preview of your blog will pop up below the work area, so you'll be able to see the changes as you make them. You just slide the bar(s) to the left or right to achieve the desired width of each section of your blog. My layout here, is a 3 column layout and my dimensions are as follows:

Entire blog = 1180px

Left sidebar = 210px

Right sidebar = 210px

My other blog (click HERE to see the how it looks) is a 2 column layout and the dimensions are:

Entire blog = 1240px

Side Bar = 340px

Tip: Make sure to check the preview below the editing space, before you apply any changes to the blog. Make sure that your text and photos still fit into the main body and that your widgets, etc. fit into the side bar(s).

Once you're happy with the layout, click "apply to blog" at the top right of the page. The changes will not take place, until you do.

Next, choose "back to blogger".

You can go do that now, if you'd like.  I'll wait for you. ;~)

OK. Back to photo resizing...

Step 1. Upload your photo(s) to your post as you normally would.

This is what my photo looks like without changing the size. It's perfectly fine at this size, but it's lacking the "WOW" factor that I want.

Step 2.  Go to the top bar in your post editor and choose "HTML".  (Ok... I know it's scary if you've never done this before, but trust me... It's a piece of cake. Uh Huh... Really. It is.)

Don't worry.... It's OK. Go on... click that button! You can do it!! 

This is the screen that will come up:

Look for the HTML code for the photo(s) you want to enlarge. The code will begin with <a href and it will end with </a> The numbers that I've circled are the numbers you'll be changing. Blogger usually sets the height at "240" and the width at "320"

Step 3.  Change the height to "475", the width to "620" and the other number thingy, (whatever it is) to "s620". **see note below

If the main body of your blog is more narrow than mine, you'll need to play around with the height and width numbers. You might want to try: height "340" width "520"

Step 4. Click back to "Compose" to go back to the editing page.

This is what my photo looks like now!  Yay!!!

Why did I choose the proportions that I did? Well, simply put, the  blog where I found the information, said these were good numbers to start with. So, I did. And, I liked it. And it fit my blog layout. You can certainly play around with it as much as you like. If you screw it up, don't panic. Just go back to compose mode, delete that particular photo and start over.

**I have no idea what that number is for, but the blog that I learned this from said to change it, so I do. I think it has something to do with the clarity of the enlarged photo. It's the same number configuration as the width of the photo, so I just change it to reflect that.  (if anyone out there knows what it really does or why it's there, please feel free to educate me. I'd honestly like to know.)

OK... Now, you can go back to compose mode, do your spellchecking, add your labels and anything else that you would normally do before  clicking that "publish" button. 

~~~~~~~~~~~~

Finally, If you have a photo that you've uploaded from another source and it doesn't have a defined height and/or width indicated in the body of the code, there's an easy way to fix that as well.

The end of the code line for the photo will look like this:

.JPG"  /></a>     OR it might be,       .PNG" /></a>

Right after the .JPG" and before the /></a>   type in the following:

height="475"width="620" 

You'll use whatever dimensions you've decided on.

So, to summarize: All of the original code stays the same, until you get to the end. The last bit of the code should look like this:

 blah, blah, blah original photo info .JPG" height="475"width="620" /></a>

Remember: Always "save" and "preview" to check the look of your changes before publishing your post. 

So... I hope this was helpful. Please excuse the horrible job I did of drawing the arrows and circles on my example pages. At the time I took those screen captures, I only had the snipping tool that comes with the computer and it's very basic. I'll try to pretty them up in the future.

I'd really love to get your honest feedback about this tutorial, so please leave a comment with any/all critiques, suggestions and/or questions. I'd also love to hear about what you'd like to see in future tutorials.

I'm shooting for Wednesdays as a posting day for these tutorials.

My next tutorial will be:

"How To Make A Grab Button For Your Blog"