Monday, January 16, 2012

FAQ Blog Design 101: a tutorial



Are you ready for my longest post to date? I've been getting a lot of emails asking how I've created my blog layout, so I thought I'd go ahead and write up a very detailed tutorial on how to accomplish said task. It took me a really long time to gather all of this knowledge. Maybe it's because I'm a little slow when it comes to computers, but likely also because there aren't a lot of resources for it. I've picked up little tips here and there and somehow managed to put it all together into a comprehensive blog design. Whenever I get stuck, I usually do a Google search but often find that tutorials are out of date or use Photoshop (which I am completely dumbfounded by). I know you Photoshop wizzes are laughing at me, but I just could not figure it out! I'm trying to get my boyfriend's roommate to teach me how to use it,  but in the meantime I'll keep to my mediocre editing programs.

So I realize that my blog design is relatively elementary (there are so many that put mine to shame, like this one and this one), but it is a good place to start. 

Maybe you've considered blogging but are intimidated by all of the html mumbo jumbo? Or maybe you've been blogging and have yet to figure out how to do one or more of these? This is for you, hoping it saves you some time and frustration. 



...

This tutorial uses Picasa/Picnik and Photobucket. Picasa is a free download and it is free to make a Photobucket account. Also, I'm using Blogger as my domain. 

This tutorial will show you how to make 1) a header, 2) social media icons (facebook, twitter,etc.), 3) seperate pages and their hyperlinked tabs (about me, tutorials, etc.)



Header

Begin by selecting a picture that will be modified to be your header. I look for crisp, high quality shots that have room to add text. See how this shot has the solid fabric underneath the patchwork? That's where I'll be adding the text so that it can be seen well. Go ahead and do any pre-editing, such as upping contrast, exposure, etc. 


Crop the picture into a long rectangle. I like to keep my length over twice as long as the height. 


Click apply and make sure you're happy with the result.


Go to "Text" and start playing around with different fonts. One of my favorite things about Picasa is that I can download fonts on the web (like at Myfonts.com) and they are automatically downloaded to the program. 


When you're happy with font, size, orientation, etc. click "apply". 


Now if you want the rounded corners like I have in my header, click "edit in Picnik".


Go to "edit", "frames", "rounded edges".


Click "Apply" and "Save to Picasa".


Take a final look-see and make sure your pleased with the image. Click "Export". 


I exported mine at 950 pixels (for a final size of 950 x 364 pixels). You can go slightly larger or smaller. 


Go to your blogger account and go to the "Design" tab. Click edit at the header window. 


Upload your image.




Social Media Icons

This will show you how to make buttons for your facebook page, twitter, Pinterest, Bloglovin, etc., however you can use this same process to add any hyperlinked image to your sidebar. 

You'll need a base image to create your buttons. You can choose a picture that you have taken yourself, as I've done, or you can find an image from the web. 


Crop the photo to a perfect square. Look at the numbers at the left and try to keep them as close as possible. Mine is at 1109 x1110 here.


Click apply. Now click "Edit in Picnik".


Go to "Frames" and "Rounded Edges". Apply the maximum corner radius so that you have a perfect circle. 



Save to Picasa. For my facebook button I use a lower-case F in Corbel Bold. 


Export the button. Mine is at 60 pixels so that all three buttons can sit together in one line. (This may vary for different blog templates and sidebar dimensions. My right sidebar is set at 200 pixels)

Now if you want to use a different image for all of your buttons you'll need to repeat the above process. See how mine are all different images? They're actually all made from the same picture, just cropped in different places. 


For my subscribe button, I just use a period and two different sized parentheses, again in Corbel Bold. 



My Twitter "t" is in PicoBlackAl. 


Here is where Photobucket comes in. You can use other image hosting sites as well, but I've only ever used Photobucket. Create a free account and upload your buttons. Each image that you upload will be given an individual html code (see below). 


In another tab open your blogger account and go to "Design". Click "add a gadget" on your sidebar.


Scroll to "HTML/JavaScript" and hit that little plus sign. 



Now go back to your photobucket and grab those html codes. Copy and paste them in the order that you'd like them to appear. 


Hit "Rich Text" up in the corner. Your images should appear. Don't worry that they show up one by one rather than a neat row. They'll show up in a row on your blog as long as there's enough room. If one or more isn't next to the others, it's because your images are too large for your sidebar width. Export them at a smaller pixel size and try again. 

 Highlight a button and click the hyperlink button. 


Link to the proper place. Repeat for each button and save. 




Pages

If you haven't already, start by setting up your seperate pages. In Blogger go to "Posting", "Edit Pages". Click "New Page" and write up each just like you would a regular post. 


Click "Publish" and select "No gadget".  Click "view page". Copy and paste the url to a word document for later use. Repeat for each page.


Tabs

I like to start with a clean white rectangle for my tabs so that the final product looks like a stand-alone word. This is one of the reasons why I keep my blog background white. I just google "white rectangle" and import the image to Picasa.


Crop to a rectangle much like you would a header. 


Start with the word that is going to take up the most space. I started with the word "shop" because both the h and the p extend out and require more space. Size the word so that it is as big as possible without going out side the rectangle. Make sure that it is centered. 


Apply the text and export the image. I exported my tabs to 195 pixels (at maximum quality).  Again the size you need may vary according to your template and sidebar dimensions. 


Continue making tabs for each of your pages (using the same rectangle) and exporting each. Don't increase the size of the font, even if it could fill up the rectangle more. The idea is to keep all of your words at the same size and to be perfectly centered underneath each other. 


Upload all of your tabs to Photobucket or the likes. 


Go back to Blogger and in your "Design" tab click "add a gadget" in whichever sidebar you'd like the tabs to appear. 


Select "HTML/Javascript".


Back in Photobucket, copy the html code for each tab image and paste into the window. 


Hit "Rich text" so that the images appear. Highlight the image and hyperlink to the correct place (the urls you pasted into the word document earlier).


Repeat for each and click save. Preview all of your changes and if you're happy with them go ahead and save all. 


Give yourself a big pat on the back, you did it! I'm hoping every part of this tutorial was crystal clear but if not, shoot me an email and I may be able to answer your questions. 


(:

118 comments:

sahina. said...

OHH! This is so extremely helpful! Thank you so much :) I'm going to have to get going re-vamping my page ..

Leslie said...

Great post. I have been looking around for help with my blog. Thanks for helping everyone out.

kellyelizabeth said...

love the social button tutorials, definitely helped!! thank you so much!

Ashley said...

you're amazing! this is probably one of the easiest tutorials I have found online. Like you, I usually just type into google but it's so hard to find something I understand. This, I definitely understand. Looks like I'll be doing some editing to my layout this weekend :) Thanks!

Rebecca Heron said...

Thank you so much. I have been looking everywhere for how to make the buttons you used for facebook etc.! Time for a blog overhaul this weekend!
heronscrafts.blogspot.com

The Thrifty Fox said...

Awesome!!! I too have been searching for an easy to follow tutorial on sprucing up my blog. Thanks so much. Enjoying following your blog.

Amanda said...

Great tutorial!!

My mom designs my blog but it's good to "know" the steps.

Thanks for posting this!

www.mandavision.com

Sarah Rooftops said...

Great job!

Mine's long overdue a revamp but I spend all day at work doing this stuff and don't seem to have the motivation when I get home! Maybe this will prompt me to get around to it?!

Suzie said...

Oh my god, thank you so so much!!! I've been playing around with my blog for the past year and have taught myself a few things, but I've definitely been doing things the hard way!! Cannot wait to use your method. Thanks again!!

Loves2Sew said...

This is wonderful! Thank you for sharing, I can't wait to do some updates on my blog!!

Bonnie said...

If I could crawl through the computer and hug you...I would! Thank you! I use picnik...but the addition of picassa..genious!! makin' new social media icons!!! Yea!

By a Thread Bags said...

Thank you so much - I'm working on mine right now!!

{amy k.} said...

wow, what an awesome tutorial! easy and helpful! can't wait to give a go at it. for now, i will pin it until i have time to get to work! thank you so much!

srw said...

Thank you so much! I really appreciate the time you took to create this and it's incredibly helpful.

Melissa said...

Thank you!!! I needed this!

Erin Tame Designs said...

YAAAAY! Thank you so much!!!!

Allyson said...

What a great post! I'm pretty happy with my design, but this is always good to have in your back pocket. Thanks for sharing!

Allyson
http://cupcakescandycanes.blogspot.com

gemma said...

i love this,I was allways wondering how to make something like this thanks
http://submarinesandsewingmachines.blogspot.com/

Becky Holmes said...

WOW! Thank you so much for posting all of this information!!

tousled day said...

For a past few days (weeks), I've been thinking about all of this. It even came to mine mind to send you an e-mail and ask you what to do (you know, sweet verbena looks so neat). Thank you so, so, so much for this detail step by step.

Alejandra Gonzàlez said...

Ggracias!!

Claire Peucker said...

Thanks so much for posting this - it's going to be so helpful. Now I've just got to find some images to use :)

Rachel {polkadots and puppies} said...

You are SO sweet to take the time to do this, Katy. I know how crazy-time-consuming posts like these can be! You ROCK :)

Alissa Wilhoit said...

Thank you so much! Your posts are so relatable. I'm just starting with my blogging and thanks to your earlier post this year have garnered enough courage to get a serger! Way overdue, but it would probably still be a dream if not for seeing how lovely your project came out! Can't wait to see more in the future..

Li-Sha said...

you are a complete lifesaver. for like four years i've been trying to figure out blog design on my own or with google and i couldn't because all the tutorials were either dated, or i had to pay. thank you so much!

The Little Texan said...

This is absolutely amazing!! I am new to the blogging world and had someone do my design for me, however, with this tutorial I could've done it myself! I appreciate the detailed steps and pictures :)

http://thelittletexan.blogspot.com/

Lauren said...

thank you thank you thank you.
I've been wanting to not give in to find a 'blog designer', I want it to be me, now due to your tutorial I can do it. THANKS!!!

Chris said...

~Very fab tutorial~

Will you be joining the blackout?
http://operationsopa.blogspot.com/2012/01/how-to-join-blackout.html

Kelsey said...

Great tutorial it really helped me out! Thanks so much I will be using this to add the page titles and social media buttons to my blog!

Brierley + Clover said...

Thank you so much, you're a star!

WJMOM said...

Thank you so much! I am in desperate need of this info. :)

Coral said...

thank you so much for this post! it was really, really, helpful (especially to newbies like me). and i really love your blog, especially the diy's :)

Farm Diva said...

LOVE this post! Thanks!

Erica DeGraaf said...

Oh my goodness! This is perfect! I was honestly just about to start searching for how-to's on this subject, so thank you so much!

Erica
ericadegraaf.blogspot.com

Joanne Allen said...

Katy, Great Job! I am still getting my feet wet in the "design" aspect of blogging, have gotten books and have been combing the web for info and ideas. What you did for me is help me decide what I want to do with the "design" part---which is AwEsOmE! As soon as I saw your header and how you made it, a light went on. I am super excited! Anybody want to guess what I'll be working on this weekend?? again, I really appreciate the time and effort that went into your post!
Joanne

Kim said...

WOW. That WAS intense! But so helpful! Thanks girl!

Jennifer said...

Thanks for the post! Its nice to have everything in one place because I also just google it and hope it all comes together. I love reading your blog, you're very creative! I'm a fellow College Station blogger, Aggie, and teacher. It's fun to see your posts!

Jennifer
www.paisleypinkpolkadots.blogspot.com
www.lifewiththeluthers.blogspot.com

Gabrielle said...

This was very helpful for me!!
Thanks so much!

Follow Me:
http://mrs-reece.blogspot.com/

Erica said...

THANK YOU for this post. THANK YOU for personally responding to my question through email. what a sweetheart you are!

AnNa said...

thank you SO much! this helped me out tremendously!!!!

Alison said...

Thanks so much! I recently added pages to my sidebar, but I wanted them to be a little closer together. I never thought about putting them in the same gadget - smart! ;) I'm going to work on Social Media buttons also.
fun stuff.

Kayla said...

Thanks for posting such a detailed post. I have just started blogging and this will be very helpful to me. I love your blog and THANKS again for posting this :)

Wendy said...

Once again Katy, you have inspired me!!! I created a shop header for my etsy shop using your tute!! I am so very excited to finally have one that I love!! Keep on creating! oxox

Tabitha Betz said...

Thank you thank you thanks!!! I've been searching hi and low for this!!!

emmabella said...

Thanks so much for this great tutorial! I do seem to be having a problem though...When I get to the part to add a hyperlink to the image, it keeps telling me error 100 and won't let me enter the link. Any ideas on what I could be doing wrong??

patchiandothers said...

WOW!! :) I'm definitely going to do this ASAP

null said...

nice idea. thanks for sharing...

Cheap Pillows said...

That's really a great post!!!

Married Filing Jointly said...

Hi! Thank you so much for posting this. What a great blog! Question: I have created my subscribe picture/link but do not know where to go to get the address to plug in to subscribe to me. How can I go about doing this? Thanks again!

www.marriedfilingjointly.blogspot.com

Cristina Arrea Peralta said...

I've just started blogging and this helped me soooooo much! Thanks for the tutorial. I really like your layout, it's really easy to find everything. I have spent so much time trying to learn all the tricks of the trade haha, but I still feel a little lost when it comes to all the Internet mombo jumbo like you said, so thanks.

www.sweetandstitched.blogspot.com

Rita said...

This is so awesome! Thank you very much for sharing!

Amanda N said...

so, once i've created the tab pages, how do i make my post show up on those pages instead of on the "main" blog page?

thank you so much.

Katie @ My Darling Days said...

Oh.my.word. Thank you so so so so so much! I have wanting to make those social media buttons and couldn't figure out how people did that. This was so helpful! It must have taken you forever to put this together, but I am sure glad you did! Thanks again! :) *New Follower!

Michelle said...

OMG! I LOVE you for this!! Thank you so much! I figured out how to make a header, but could not figure out the buttons or the tabs! Thank you!!!!!

Enid said...

This my super, super new project!!! I'm very happy to find your Blog!!!

Thank you so much for this!!!

Enid

Enid said...

I just did it!!!! I'm so proud of me!!!

Here is my new renovated BLOG > http://prendasbyenid.blogspot.com/

Thank you so much, this is really wonderful!!!

CCW said...

Thank you SO much for this great toturial!! I've used a couple of times now, and bookmarked it to come back later when my blog need another renovation :-)

Thoug it's in danish, you are welcome to check in to see "your" work, ha ha.
http://twoacw.blogspot.com/

Janne, DK

WOW said...

Thank you so much. I are already looking everywhere for the way in which to create the buttons you utilized for facebook etc.! Time for just about any weblog overhaul this weekend!

Cheap Runescape Gold

The Staheli's said...

This is a great tutorial! I was able to do something like this in Photoshop Elements!:)

But i was wondering what Blogger Template do you use for your blog?

Jennifer said...

Katy, this has been an amazing resource! Thanks for taking the time to create this! It has been so helpful! You're an inspiration!

-Jennifer
killthemwithcraftiness.blogspot.com

Whitney said...

I haven't really used my picasa and didn't know it could do all this. Thanks to you I have a beautiful clear header and it didn't take me 50 tries to get the size right! Thanks!!

Vanessa Wittmer said...

I finally got up the courage to update and use my blog, using this tutorial! Now I LOVE it!! Thanks so much! :) Here it is, if you wanna see it!

xo, Vanes.

vanessawittmer.blogspot.com

Alisha Smith Watkins said...

You.are.amazing. I have been searching Google for cute social media icons and it led me here and I am so glad! Just the tutorial I have been looking for. Did I mention you are amazing?? Thank you!!

Mandi said...

This is such a helpful post. I feel much more confidient after reading this!

Lesley @ my lively mind said...

this is fantastic. you laid every thing out and it sounds so easy now. thanks a lot (:

MummaFox said...

I'm married to an IT analyst and he was struggling to understand setting up the icons for blogger. After reading this I'm going to sit down Tom. Arvo with a cup of tea and do this myself. Thank you for giving us the knowledge and advice. It's amazing how often our questions go unanswered. A thousand thank yous.I'll let you know how I go.
Thanks again.

PoppyFoxathome.blogspot.com

Laura said...

I can't thank you enough for this post. I recently switched over to Blogger. I was a bit baffled and perplexed. Thanks to your post, my blog is looking better every day. Thank you so much for taking the time to post pictures they helped immensely.

Ali said...

This is really useful! Thanks so much for the information. I just started my new Stampin Up blog and made the header in Picasa . I would have really struggled to figure this out without you! Keep up the blogging, your sewing projects are amazing and instructions are so clear.

Here's my site if you'd like to check it out:
http://yorkstampinfun.blogspot.co.uk/

x Ali

Eleanor said...

This was exceedingly helpful! I searched forever for tutorials on this, and this had all three in one place! Thank you!

Ellie
www.myshadowdays.blogspot.com

Allie said...

Finally! I found how-to help for blogging! Thank you for posting this! It has been very helpful! Also thanks to you, I am actually excited about dusting off my old sewing machine and learning how to sew!
Alexis
http://alexiskrista.blogspot.ca/

Brian Shea said...

This is SO SO SO helpful! Thank you!!!!!!! I don't use photoshop either, and love Picasa, so this is a perfect fit for me!

Makenzie said...

So glad I came across this post. I have been wanting to create my own buttons, but wasn't sure where to start. This post gives all the information needed!

Jazzy Al said...

This blog has helped me so much. Thanks! I'll be sure to post my blog when I finish it!

heatherC said...

Although google has managed to change things again I was able to follow this and make my page look more legit! Thank you soo much for this! Next - conquer the tabs!

Selena said...

i couldnt tell you how great this is, and how much easier you have made this processes ive been struggling for a few months now trying to get it just right and figure this out. thanks so much! you have an amazing blog!

Laurenne LoVullo said...

This post was amazing! I was able to follow it step by step. Thanks so much! Your tutorial on placemat pillow cases was also just what i needed for new throw pillows!

- J said...

This helped SO SO much! I've been wanting to make a blog (after months of looking at your's & a few others but not having the courage to do my own) and this was just what I needed to finally get started. Thank you :)

Mary Jo said...

Your social media button part was SO helpful! I've tried to do this so many times (and failed). Thanks so much! I'm your newest follower! :)

Megan said...

Thank you so much for this!!!!! I am so excited about how my new blog is turning out!! xoxoxoxo

Raquel and Nadia said...

Thx for posting this tutorial you can check put how I made my blog over here: http://blueskydiy.blogspot.com/

Ashlee said...

Ahhhh!! This is seriously what I've been looking for!!! I'm just starting my blog and I have put off posting the few write-ups I do have because , well.. my blog was ugly. I'm also not very computer literate or photoshop saavy. Thanks for saving the day!

Fancy That Notion said...

This post is extremely helpful! I only have one problem: when I complete all the steps for the "pages" and I go to my blog and click on the tabs, it just takes me to photobucket. Any suggestions? Thanks!

Tiffany said...

I long ago pinned the punkin muffins and who knew there was so much other goodness here! Great blog, can't wait to use this tutorial this weekend. My blog could use the love, I'm sure it thanks you.

Sara said...

Your tutorial was a life saver. I just spent all morning updating my blog and now it's looking fantastic. Thanks a bunch!

Rach said...

Wow, this was such a help!

Just a note though, picnic now longer exista, but Ribbet.com is exaclty the same! :)

xx

hellotherecapetown.blogspot.com

Haley Simpson said...

This is probably one of the most helpful things I have ever seen on the internet! Thank you! :)

Madi said...

Thank you so much Katy! This tutorial is extremely helpful... and now my blog looks tons better! Thank you so much!

-Madi
www.acreativeadventure.blogspot.com

esollero said...

How did you do it for Instagram? Thanks!!

K said...

I just found this post while googling for tips and tricks. I can't tell you how amazing and easy you made it. I have been working on my blog all day! I still have some rearranging to do, but it is SO SO SO much better now!!!

Jennifer Chapman said...

Thank you so much!! This tutorial has helped me customize my blog so much!
http://dintherough.blogspot.com/

Marcia V. said...

Very easy to follow and extremely helpful. Thanks.

Arslan Shamim said...

It is really easy and simple to understand. Good work

Amandadear said...

Thank you so much! You helped me get my blog a little closer to what I want! Thank you again! http://casseruoladolcedellavita.blogspot.com/

Sheila said...

HOLY COW. As a brand new blogger, I have no much enthusiam and so many post ideas but so little no how when it comes to the technical side. This is amazing. Thank you so much for taking the time to lay this all out :)

Alyssa said...

This was awesome! I'm a new blogger and I've managed to make a header and get some basic designs done on my own, but buttons and tabs were eluding me. Your blog inspires me and reassures me that I don't need to hire an expensive designer or have a self-hosted site to be an awesome, successful blog. Keep it up!!
p.s. Have you heard of picmonkey? I'ts an easy and free way to edit photos and create collages with out confusing photoshop. Check it out if you haven't already.

Norma Jean said...

Yours is the most user-friendly tutortial on blogging mechanics that I have seen. I am a new blogger, with minimum computer skills and with your excellect tutorial I think that even I can do it! Thank you! Thank you! Thank you!

website design said...

I really appreciate your writing skills and admire your effort. Its really worth to read the whole article.Thanks for sharing.
website design

Jessica Pridmore said...

Probably one of the best posts about this sort of thing I have read! Really easy to follow and so simple! I love that you are using free mediums as opposed to Photoshop. Can't wait to get home and play around with it all.

alittlebitofjess04.blogspot.com.au

Lisa said...

Thank you so much for writing this easy-to-follow and easy-to-understand tutorial. I've been wanting to do this for a long time on my blog, but haven't understood how until now. I followed your instructions and everything worked beautifully. Thank you again!

Paige O'Brien-Welker said...

Awesome, tutorial. Thanks so much for taking the time to teach us new bloggers a thing or two!

website design said...

I was looking for this inspirational blog for a long time.
Thank you and best of luck.
website design

HRM 531 Entire Course said...

No one can reject from the feature of this picture posted at this site, good work, keep it all the time. by HRM 531 Week 4

Web Developing Services said...

Adding social media icons would help to get more users to our website as well as business through social networks.
Website Design Companies | Web Design Companies

kamya chahuan said...

its great it is verfull for me....
visit http://tutorialterminal.blogspot.in/

Sherly K. Malone said...

WOW! incredible tutorial resources! This is the best list in the whole internet. Thank you very much for providing this useful resource together at one place! You rock!
Business Logo Design

Md. Minhaz Uddin said...

Nice post. click below
theme/skin pack for windows 7

Jammi Herry said...

Beautifully described tutorial!Thank you so much for sharing your all creative designing process..
Professional online logo design company

Terrie A said...
This comment has been removed by the author.
Terrie A said...

Hates off for the creative work you have done!I appreciate the effort you have put to make this tutorial which is beneficial for your followers and new visitors! Thanks!!
Cheapest Mobile Products

Suzanne Martin said...

The tutorial on how to design a blog page is one of the best I've ever seen. Very very impressed. THANK YOU for sharing.

Bill John said...

MISSION: PROVIDE ASSISTANCE GRANT FOR OVERCOMING THE WORLD SOCIAL WELFARE.
VISION: SCHOLARSHIP ASSISTANCE, WELFARE SOCIETY, THE PROMOTION ORGANISATION & CAPITAL COMPANY
http://www.okeynotes.com/group/106

CAESAR SHOP said...

Thank you for sharing in this article
I can learn a lot and could also be a reference
I hope to read the next your article updates

[-] Vimax Asli
[-] Pembesar Penis
[-] Agen Vimax Asli

myapotek acemaxs said...

berbagi informasi dan memberikan manfaat pada semua orang adalah kebaikan yang sangat berharga ;)
thks gan untuk tipsnya !
http://myapotekacemaxs.com/obat-herbal-lipoma-kulit-manggis/

instantannui said...

wow, awesome article post.Thanks Again. Really Great.

Click here:- Website design hawkes bay

jasmin jew said...

Exclusive information... thanks for sharing .

web designing training in Lucknow

Sri Sathvika said...

Nice tutorial. I like your post. Thanks for sharing this post.
SEO Training Institute in Chennai

rahul saini said...

I was looking for this inspirational blog for a long time.Exclusive information... thanks for sharing . http://www.logogoon.com/

Fds .tusher said...

Pretty section of content. I just stumbled upon your website and in accession capital to
assert that I acquire actually enjoyed account your blog posts.
Visit our php tutorial

Related Posts Plugin for WordPress, Blogger...