7 Quick Takes - Blog Tutorials

Happy Friday! Linking up with Jen over at Conversion Diary like normal people do (I have been inconsistent for months so I guess I do not fall in the normal category).

My blog design had started to feel the way a dress I wore the other day felt. Great in the fitting room, but with some problems that I just ignored, ill-fitting during the day so I was always adjusting it and then by the end of the day, I just wanted it off. However, there were a few problems: this is a blog for fun so I didn't want to spend any money hiring a designer, and I had (have) no graphic design or programming knowledge whatsoever. Fortunately, there are many kind people out there on the triple w who do have that knowledge and are generous enough to post tutorials for free. My blog does not even begin to look like it was designed by a graphic designer at all, but I am now pretty happy with it since it is simpler and more organized than before. I'll still be changing it as I find the time to do so now that I know I can find a tutorial for almost anything.  I wanted to share some of the links that I found very helpful in tweaking my blog design.

1.

Free Social Media Icons. I didn't like the icons that Instagram and Twitter offered on their websites, but I had them on my blog because I had no clue how to design new ones or install them. Carrie at Carrie Loves Design offers 19 social media icons in 30 colors! I didn't even know that there were 19 forms of social media. I downloaded the icons in the color Confetti. Scoot on over there and grab some! 

Source

Source

2.

How to Install Social Media Icons. I used this tutorial from Brandi Girl Blog to install the icons from #1. It really was so simple because Brandi spelled it out so easily.

3.

Customizing Your Tabs and Gadget Titles. I finally have an about page after writing on this blog for seven and a half months. I couldn't figure out how to make the tabs transparent even though I kept clicking "transparent" for the tab background in the Blogger designer so I just didn't have any tabs. I'm sure there is some easy fix, but as I have stated a million times in this 7 Quick Takes, I have no programming knowledge. I found a tutorial on how to customize your tab and gadget titles at Third Grade in the First State and went with that route. It is a very detailed tutorial, which is great! I used Paint to create the images for my tabs because I'm seven years old (okay maybe I'm ten since I've moved on from just using the spray paint feature).

4.

Create a Rollover Image Effect (Change Image on Mouseover).  So, I had tabs like any normal blogger. I noticed that a lot of blogs have tabs that change color or images with you mouse over them. Would I be able to do that myself?! No, but I was able to google. I found a tutorial by Helplogger and voila black-to-gray-black-to-gray. (You can go ahead and try it out just to give me a virtual pat on the back for copying and pasting some html and image links. Thanks so much.).

5.

Transform a Blogger Label Into a Page.  Do you want to have a tab that your readers can click on and find all of your posts that were labeled "sewing" or "sorry if my posts are boring for a bit - you can join my middle finger and blame anonymous" (Leave it to Grace to come up with the best label created ever)? There were many tutorials available thanks to, you guessed it, Sir Google. I'm betting that most people had figured out how to do this one since I see them everywhere, but if you haven't, here you go. 

Oh, and if your labels have spaces in them, go ahead and type them in that way in the html. You don't need to put any hyphens in between the words.

6.

How to Put a Gadget Above Your Header.  I wanted my new-with-a-hover page tabs above my header, and the tutorial from Blogger Hints and Tips was easy to follow. 

7.

Sumopaint. There is a 0% chance of purchasing the almost $700 Photoshop CS6 in the Harrington Family Spending Forecast. Not only is it crazy expensive, I have no time to learn how to use it well enough to justify spending that much if we even had the power to do so. I once tried to use it in the basement of Lafortune, the school student center, to design our wedding invitations and spent about an hour trying to figure it out before I went running to Word and PowerPoint. I wanted to make the background of my new header image transparent, but Paint and PowerPoint were failing me. Enter Sumopaint, a free image editor that is very similar to Photoshop. I still had to look up a lot of other tutorials on Sumopaint until I was able to get the look I wanted, but it was freeeeeeeeeeeee.

There you have it! Seven helpful links for tweaking your blog design. I'm sure most of you are rolling your eyes at me and thinking, "Get in the twenty-first century, Katrina! Don't you know HTML?!" My apologies, but my computer classes in grade school and high school pretty much only made me able to type without looking at the keyboard. I hope that I was able to point someone in the right link direction ... if there is someone as clueless as I am out there. 

Head on over to Jen's for more quick takes! 

And because what's a blog post written by me without a superfluous photo of Ryan?

Posts from this week: 
- 20 Weeks with Krakens
- What I Wore For My Sunday Best
- No Trick Pony
- I'm Not Touching It!
- The Chicken Salad Story