So I've been typing away on my laptop at the Blogging 101 eBook I've been trying to write & have gotten pretty far. However, I think life this July is going to get in the way so I don't know if I am going to meet the August 1 deadline I've set form myself, but I am going to try!
On the original Blogging 101 eBook post, I had a few blog design questions asked of me & I thought I'd include those here, in this post, as a free resource. The Blogging 101 eBook I'm working on will cover the 3 most important parts of blogging that I've discovered:
- Organization - blog layout, decluttering, keeping a blogging schedule, & blog calendars
- Design - choosing a premade theme, working with a designer, designing your own
- Networking- social media, link parties, sponsorships
Each of these chapters will give you a look into the elements of blogging that you may not think of when you start blogging. The purpose of this resource is to be a reference or starting point for those interested in getting into blogging seriously & sharing the things I've learned so far.
Today I thought I'd share another blog related DIY regarding designing an over all look for your blog. If you get the newsletter, I mentioned taking your blog from blah to booyah. That's not my proudest newsletter moment, but I hope with this post you'll get the idea!
The main tip I have aout creating a blog is to consider what you want your blog will be about & consider how this should be reflected in your design. This example design is a blog about my move to Michigan at the end of the month & what I will do/have done up there. So I named the blog My New Life & chose images that reflected travel. Consider what you're writing about & how that could be reflected in the design.
Choose a Template- The template I used for My New Life is the Simple Template because I feel it is the easiest to change & manipulate.
Patterned Background - For My New Life, I chose to use a free background that was included in the July Newsletter. Choosing a background is a great way to start finding the colors you'd like to have in your blog, in fact I would say to start here! That is where I got the idea to use a lot of pinks & purples in the design. Add the background to your blog by saving it to your computer then uploading it in the Template Designer in Blogger.
Picture Header - Since this blog is about moving, I decided to use an image reflecting our Michigan trip to show that My New Life would be documenting a place. To make this header, I used Picasa because I could use my own font. Picasa is free to download.
Crop your image to the size of your header (Picasa let's you preview!) & then add your text. Then you can save & upload it in the Layout section of your blog. Make sure you select instead of blog name and description before you upload it.
About Me Image - Having a picture that reflects you & your blog builds a stronger relationship with your readers. This image of walking seemed to reflect the traveling vibe too. For this image, I used picmokey to make it round & added transparent corners. You could use fonts in Picmonkey to add a message (something like Hi, I'm Moe or Click Here to Learn More) or you could add text in Picasa so that it matches your header.
Social Network Icons - If you blog, you're probably on a load of social networking platforms. I've created a really cool resource here on how to use Picmonkey to make social network icons for your blog. It's super simple & outlines all the coding.
Matching Colors & Styles - In the Template Designer you can choose fonts, styles, & colors for your blog. Choose a few fonts (up to 3 is a good number) for your blog. You've got one font for your header & about image, one font for your post body, & one for your date header and post title. Stay away from cursive fonts for your post body, use standard fonts there for easy readability. Use fonts that go well with your header font.
You may have to change a few things around to create a cohesive design but these are the things that go into a simple blog design.
To host the images for your blog (the about me image & the social network icons) you can use a free service like Photobucket or upload them to a new page on your blog (under Pages) that you keep hidden. That way you know where all your blog images are. then you can just copy & paste your image urls where you need them by viewing it in the HTML mode when you edit the page.
I hope this helped you out a bit with making your blog a bit more awesome & if you have any questions, shoot them my way!
so helpful! i love all the helpful blog design posts i have been seeing around lately - it is awesome to teach others like this. i am so bad at HTML/design tutorials because it's too ingrained in me that i would skip too many steps that seem obvious to me, but aren't (like cropping the photo to the right size like you did here) great job!
ReplyDeleteThis is super helpful! I've been looking for a good photo editing software for adding text to pictures. This post has just made my life so much easier! :D
ReplyDeleteThis was so helpful thank you so much! I'm definitely going to give this a shot after lunch. I've been searching and searching how to edit my blog to look all cute and such....and now you've showed me!
ReplyDeletewww.kaylagarland.blogspot.com
Just followed your blog too! I know how appreciated followers are :)
ReplyDeleteMeep sorry I don't want to be going comment crazy but I thought i'd show you my before and after from your help!
ReplyDeletebefore: http://i1053.photobucket.com/albums/s480/kbgarland3/Fullscreencapture711201251836PM.jpg
after:
http://i1053.photobucket.com/albums/s480/kbgarland3/Fullscreencapture711201254054PM.jpg
thanks again!
Hello,
ReplyDeleteI am trying to post a circle picture from following your steps with picmonkey. The PNG I saved to my desktop has no corners(transparent) but when I upload it to my blogger in a picture gadget there are corners. How do I fix this?
hmmmm....I'm not sure, I tried again & overlaid the image onto a photo to make sure the corners really were transparent in the PNG saved, & it worked for me. The only thing I could suggest is to try again? I do see a circle image on your blog, perhaps it worked?
DeleteI hope it will work for you!!