5 Easy Ways to Update Your Blog Design

I spent much of my Sunday updating my blog design. And because I believe there shouldn’t be any “secrets” in design and that we should share our ideas with others, I decided to share with you all some of my updates and how I achieved them. Many years in design I learned that this isn’t always the consensus. For some reason the field of design believes that we have to keep our ideas secret because heaven forbid someone steal them. Obiviously I have my own views on this, but I am from the school that we learn from others and there is nothing wrong with being inspired by another designer. No two people think the same so one design concept could be played out two entirely different ways and that is the beauty of design!

Anyway, you may have noticed some of the changes… Or maybe you didn’t. But here they are:

1. Creating a Custom Background Using PicMonkey

I’ve always wanted a cute background but I never really knew how. And finding a pre-made background that is your color scheme…? Near impossible. I came across this tutorial on Pinterest  that walks you through step by step how to make a custom background. I will admit, it took some time BUT I ended up with a cute and personalized background that matched all my colors! I had never even heard of PicMonkey and I ended up using the software to create all sorts of other neat things like headers for my widgets which I will describe later in this post. Basically PicMonkey is a free photo editing/design software that is online! I love this idea because sometimes I need to edit photos on my Mac at work (which has yet to have the Adobe package loaded on it). PLUS the Adobe package is EXPENSIVE! And for someone who isn’t going to use it all the time, it doesn’t make sense to purchase it! PicMonkey is a great alternative, sometimes it’s a bit awkward to use but I recommend giving it a try! Make a custom background for your blog!

2. Creating a Custom Font of MY OWN Handwriting

Now I know this one won’t be for everyone BUT I have wanted a font with my own handwriting for a LONG time and never really came across how to do that. Well thanks to Pinterest again, I found writing-fonts.com. And making a font out of your handwriting is SUPER simple. You just print out their template, write down all the letters and symbols, scan it, and voila! Your handwriting becomes a font! I was telling my farmer it’s actually kind of creepy. I can type letters that now look EXACTLY like I hand wrote them. How WELL it converts your handwriting is amazing. I am super excited to utilize this more and more on my blog, but due to the fact I am running a wordpress.com blog my ability to use custom fonts is really limited. You can however spy my handwriting up there in the header 😉 And here it is below dropped into a business card I had designed:

Also on a side note: why I write in all caps. For those of you who may not have realized, I graduated from college with a degree in Interior Design. I came onto the scene where hand drafting was still being taught rather than AutoCAD programs. Luckily, our curriculum changed so I got the best of both worlds. But I did spend MANY hours and page after page of architectural lettering (which required your verticals to be completely vertical, your horizontals to be slanted, and using guidelines). Eventually I just decided to start writing much like I did for my class and it stuck. So yes, I write in all caps and I have been told that I write like an architect. And I take that as a compliment!

3. I Made Custom Title Headers for my Widgets

So I made this awesome handwriting font, but couldn’t use it on my blog. How did I get around this…? Well I cheated the system (sorry WordPress)! I did this by creating these headers using PicMonkey. 

Basically it’s just a banner overlay on top of another banner overlay in PicMonkey and then put a .jpeg of the title on top of that. I typed the title with the font of my choice and saved it as a .jpeg. So how did I get these into my blog…? Well I use HTML coding. I added a simple plain text widget into the sidebar I wanted to add this title to and I copied this code into the text box:

<img src=”IMAGE URL” alt=”ALT TEXT” width=”195” height=”55″>

What you are going to have to do to put your image url in there as well as some alternate text (a title is a good alternate text). You’re also going to have to figure out a good size. I left the size I used for mine just in case that works for your blog too. How do we get our image url? Well I upload my image to Media Library on my blog and then click on Edit Image. It takes me to this screen and as you can see the file URL is below. Simply copy and paste the URL into your code.

So when you go into managing my widgets. Above my about me widget, there is a text widget with this code. Above my social media buttons, there is a text widget with this code. On top of all my widgets, I basically uploaded an image using the font of my choice as a header instead of wordpress using it’s own font to title my widgets. Be sure that if you are going to do this that you don’t put a title on any of your widgets, leave the title field blank! Is that clear as mud?

4. I Made My Own Social Media Buttons (Which Match My Blog Colors)

Also thanks to Pinterest, I came across this website which has ready made icons for your social media uses! AND she has a variety of colors too! I downloaded the color I needed and then much like the headers above I HTML coded them into my sidebar.

Aren’t they cute!? So this time instead of using a code that simply uploads the photo onto the page, I ALSO need it to DIRECT a reader somewhere after they click on it. For example, when you click on the Facebook icon I need it to take them to my Facebook fan page. Or my Twitter feed.

So I used this code:

<a href=”LINK URL“><img src=”IMAGE URL” width=”50” height=”50” alt=”ALT TEXT” /></a>

So much like the code above, you need the IMAGE URL as well as some ALT TEXT and the SIZE. When you download the Icons from the website above they will be 72 X 72. But that large of a size didn’t work with my sidebar so I changed their size to 50 X 50. Also we have added something to front of the code: a LINK URL. Basically just put in the url that you want to send them to when they click it. For me, my twitter URL would be: http://www.twitter.com/jenlynndewey/

5. I Created My Own Facebook Collage Cover Photo, EASY!

Using PicMonkey’s collage function, I was able to very quickly and very easily create a new cover photo for my Facebook fan page that is already the correct dimensions and everything! I also used this tutorial for some ideas and a step-by-step guide on how to do this. PicMonkey also features collages for your Pinterest, Instagram, and many other social media sites.  I was also able to load my logo into PicMonkey as an overlay and use it in my cover photo as well.

So there you go. Using PicMonkey, some HTML coding, and a little time, there are 5 easy ways you can update your blog design to be  a little more customized, match your color scheme, and in the end make your blog look more professional. If you have any questions or my descriptions aren’t in depth enough for you, don’t hesitate to Contact Me or leave a comment below! Good luck and I hope to see many of my friends utilizing these resources in the next few weeks!

Related articles

• Lessons Learned from a Blog Overhaul with FARMnWIFE
• The Beauty of Social Media
• Pre-Wedding Haul.. Our Big Fat Montana Wedding
• Rumchata Cupcakes meets My Drunk North Dakota Kitchen.