Layouts By Laina

How to make a blog layout

2010-06-11T20:11:00.000-07:00

I have an announcment. I'm retiring. I'm not making layouts anymore, I'm afraid. I just don't have the time. I wish I did, but I just don't.

BUT.

I'm going to teach you guys how! And I sound like an infomercial

Anyways. If you like the new blogger designs, great for you. They're pretty and I'm sure they make things easier for some people. However, I don't like the html. So we're going to be working from a minima template.

Find your blog html by going to your dashboard, clicking design, and then clicking "Edit HTML".

If you already have a blog layout, DON'T change ANYTHING without making a backup copy of your html. You can either save it in a word document or by clicking "Download Full Template" at the top of the HTML tab.

You can work from your original layout, but I'll be going from a minima template. If you want to make your blog a minima template, just choose that option at the bottom of your "Edit html" page. Later in this post I'll explain how to add your widgets to a layout's html so you don't lose them.

The first step is to pick a background picture. I'll be using this picture. Because I want to. Now you're going to start by finding this in your html:

You'll want it to read

body {
background: url (http://i476.photobucket.com/albums/rr128/Laina1312/Backgrounds/background1py0.gif);

Make SURE that you don't delete the semi-colon or it just won't take. Use your own url, obviously. I use photobucket to host my pictures, but you can use any site that gives you a direct url. Just make sure that it won't be deleted or taken down or moved because if it does, you'll lose your background.

By now, your blog will look something like this if you preview it:

ALWAYS preview before you save, in case something looks funny.

So this is good. Now we're going to make it three columns.

Start by finding something that looks like this:

Now, you're going to want to change it to look like this:

(If that's a bit small, just open it in a new tab to see it better.)

Make sure to adjust your outer-wrapper so that the number is larger than your sidebars and main wrapper combined. I usually make it 1000px. It's easier and less of a hassle to make it smaller later.

Now, find this.

See the things that say "widget id"? You can add those to any layout and you won't lose your widgets! Alternatively, you can save individual widgets on your computer and add them back in later.

Now, you're going to want to change that to this:

I'm just using a second profile widget in this case because it's easy. This would now be the time to put in your widget ids so you don't lose your html. But if you're just starting with a minima, you can just use a second profile widget, too, and just put widgets in the normal way later.

Also here, if you're working from the minima html, you can change the title to match your blog's. It's a small thing and doesn't make a whole heck of a difference, but if you want to, you can.

And now PREVIEW and your blog now has three columns! If it looks okay, you can save it now. (I like to save it periodically in case something happens, like an internet crash or loss of power or something. Just like a word document.)

Now, to add background colours and such.

One of the tricks I use is a colour palette generator. I use this site. Save a copy of your background picture to your computer, upload it, and then create a palette. Mine looks like this:

I'll be using #e0d6c0 wheatfield. If you don't like any of these colours, you can go to any website with HTML color codes, such as this one.

Go to this part of your html:

Under the sidebar-wrapper you're going to add in

background-color: #e0d6c0;

Once again, make sure you don't forget or accidentally delete the semi-colon. I normally use the same colour on both sidebars and the main wrapper. You can do the same or use a different one for each, your choice!!

(Alternately, you can use a picture for the background of the sidebars much the same way using a picture for the background of the blog. Just put in "background:url(URLofyourchoice);" minus the quotation marks, obviously.)

Now, if you preview things, your blog will look something like this:

Don't panic. This is okay. Right now this is more to test that the colours look good than anything. Looks good to me, so let's move on!

Find your main wrapper. It'll look something like this:

You can increase the width if you'd like now. I'm going to make mine 500px. Now, I added this

margin-left: 30px;
margin-right: 30px;
padding: 7px;
border: 2px solid #a8816b;

It doesn't matter where you add things as long as they're under the main-wrapper part and before the second }.

"Padding" adds small spaces between your text and the outsides of your posts and makes your blog look less cramped and more professional, and the margins will keep your sidebars away from your main post. For more info on borders, check out this post.

Now add the padding and border part to both your sidebars. You can make the borders and colour or size you like, of course.

Preview.

See how the right sidebar has dropped? This happens because the outer-wrapper is too small. It's easily fixed, though, promise!! Just change the number to something a little larger. Mine is 1014.

Now preview again once you've changed the number. Once your sidebar is high enough, you can save. You're done in the html tab!

Time to move on to that nifty little tab called "Blogger Template Designer". It looks like this:

Go to the "Advanced" part. This is basically the part of blogger that used to be fonts and colours.

I always change the background colour to something near the background image colour so that if someone's is loading slowly, they're not jarred by a pure white or jet black background.

Then, we'll change the text colour to black.
The link colour we'll make... a light brown.
Since we'll be using a photo header, we'll just skip the Blog Title Color and Blog Description.
For the Post Title Color I'm going to use a dark purple colour.
I'm going to change the Border Color to #a8816b since that's the colour of the borders of our main posts and sidebars and I think it'll match nicely.
I'm also going to match the Sidebar Title Color to the Post Title Color.
The Sidebar Text Colour I'll make black for easy readability (is that a word?).
The Visited Link colour I'm going to make dark brown.
Then I don't usually play with the fonts, but you guys can if you want. I personally find Georgia the easiest to read online, but change it if you want to.

Now save all these things by clicking "apply to blog" - the bright orange button in the right corner (I couldn't find it at first).

And know what? We're done!!!!

That's how you

I'll have a post up as soon as possible on how to make a header and apply it, and maybe how to make/apply menu buttons, but that's really it. You just saw me make this. Now go make your own!

Peace and cookies,
Laina

Update

2009-12-27T17:43:00.000-08:00

You may have noticed I've been awfully quiet lately on this blog. I had some computer and internet issues for months. They're mostly resolved now, but come January, I will be starting a new school program and I'm not sure how busy that'll keep me, so I'm kinda sad to say that, except for maybe once in a while as a favour, I won't really be making layouts anymore. I will, of course, post again if I change my mind, but for now, this is what's happening.

Laina

Questions

2009-10-10T09:57:00.000-07:00

Question One: Does anyone want this layout? The person I made it for decided not to use it and it's just sitting in my dashboard collecting dust. It can, of course, be customized so no gadgets will be lost and if desired, a header can be made for it. Just email me. (Laina1312@gmail.com)

Question Two: Does anyone want this header? The person it was made for decided to go with something else as well. It can be made wider and will obviously be sized down. Email me if you want it and we'll talk fonts.

Question Three: I have one, two, three, four, five, six, seven, eight menu buttons that I made for my own blog and then decided I didn't like and never used. The font and what it says can be changed on all of them if desired. Any and all of them are up for grabs.

FAQ

2009-10-09T10:36:00.000-07:00

These are questions I get asked pretty often/imagine you might wonder.

Q. How much does this cost?
A. Nothing! This is just a hobby of mine. It started with me talking to a friend who wanted a custom layout and was having troubles finding one so I offered to make her one and did so. Then, because I was bored (oh, how so many things start with that) and it was fun, I wanted to make more. And I ran out of friends who wanted new layouts. So I posted about it on my blog and a few months later, it's become what you see now. However, this is still and probably always will be just a hobby and something I do for fun. Therefore, there's no charge.

Q. How long will it take?
A. That depends. It depends on what you want, how complicated it is, how I'm feeling, how busy my book blog (which is my main blog and my top priority) is, how busy my life is and how many other people are in front of you, among a few other things... in general, the entire process should never take more than a few weeks, but there's no guarantee. Remember, this is just a hobby of mine and won't take over my life. But usually I'm only working on a couple layouts at a time tops, so it's really not a huge timespan between start and end.

Q. Will I lose my gadgets? What about my posts and followers?
A. Nope! I customize them so you won't lose any gadgets and I cannot affect your posts and followers. The only reason you might is if you added a gadget between sending your html to me and me completing the layout. That can be avoided by emailing me your new html if you add gadgets after the original email.

Q. Can you make me a wordpress theme?
A. I'm afraid not. Wordpress uses CSS, not html, and I know nothing about CSS.

Q. I like my header. Can I keep it when you make me a layout?
A. Of course! I'll just make sure that it fits and looks okay when I make your layout. You don't even need to send it to me, just tell me you want to keep it.

Q. I like my layout. Will you make me just a header?
A. Sure! Just let me know the general size and shape you want it to be along with the other header questions in this post.

Q. Can you make me menu buttons?
A. That I can. I'll just need your html and the general idea you want for it.

Q. Why do you need my html for a menu bar?
A. While a menu bar is a series of images, there are things you need to tweak in the html. I also like to have it to make sure the buttons look good with your layout and header. If you have a background like from cutest blog on the block, copy and paste the html from that gadget into an email and send it to me.

Q. You told me to go to your photobucket album and I chose a picture and then when I picked one, you told me it wouldn't work. What happened?
A. I'm human. To find all those backgrounds, I just search certain terms and save like crazy. I don't test them all. Sometimes things won't work. There are funny lines, things look weird. It sucks, but there's nothing I can do besides ask you to try to pick another picture.

Q. I love your photobucket pictures! Can I use one?
A. Knock yourself out. Most of them are just pictures that I've found online, with a few of very bad quality pictures I've taken. But if you want a bird pen header, you go right ahead and do that. The exception to this is other headers and menu buttons. Please don't use those, as they are other peoples'. Basically, if it has a blog name on it, it's not up for grabs.

Q. What else do you do?
A. I can make layouts, headers, menu buttons, all seperate or together, and icons. Like if you want to have a single picture to use for profiles and such, we can do that. It's photo editing and pretty simple. Just ask!

Q. Do you need my html?
A. If I'm making you a layout or html, yes. Please don't ask me this too often, I state it multiple times and depending on my mood, I might get a little testy. I'd actually rather ask you for it than have you ask me if I need because, yes, I do. If you forgot, I don't mind, just don't ask me because I'll probably assume you didn't read my instructions. Which you should.

Q. How do I use your buttons?
A. It's easy! Just go to your blogger dashboard, go to your layout page, and open a new html gadget. Then copy and paste the html from the little box under the button you like and paste it there. Then save and that's it!

Q. Did you make the buttons? Can you make me some?
A. Yes I did! Sure I can, I just need a picture. Remember that it will end up being pretty small. I tend to not make them more than 150px wide so that they fit in most sidebars, so tons of details might not work so well. Don't forget to tell me what kind of font you want and what you want it to say.

(If anyone has any questions they think I should add, let me know!)

The sixteenth layout I made

2009-10-09T09:28:00.000-07:00

was for Kaelisa of and for her blog The Bran Chick. She's currently using it and is awesome in general, so go check her out!

This layout was a challenge, but a good one. The reason it was a challenge was because she asked me to try to make it look like this site. The hardest thing about that is that that blog is based in wordpress and I know nothing about wordpress. I don't understand it, I don't really like it, I'm not good with it. But I'm willing to give anything a try and this is what I came up with! What do you all think?

You can check out the test blog here.

The fifteenth layout I made

2009-10-09T09:17:00.000-07:00

was for Lindsay of and for Just Another Book Addict. She's currently using it, so go check her out!

This one I quite like. It's just really cute and young and I think it suits Lindsay really well. On her blog, her menu buttons went a tiny bit different than on mine and I'm not sure why (these things happen sometimes, it's weird but there's nothing you can do about it) so I made her a double menu bar. :) If she ever decided to want four more buttons, I could see if maybe increasing the header wrapper just 1 or 2px would make a difference without messing up the way it looks, but I think she's okay with the way it looks. I hope so anyways!

You can check out the test site here.

The fourteenth layout I made

2009-10-09T09:06:00.001-07:00

was for Sandy of and for Pirate Penguin's Reads. She's using it and is awesome in general, so go check her out!

If you'd believe it, this was the only penguin pattern I found, so it's really lucky she liked it. In the picture here, you can see the screwdriver because this is a picture of the test blog, but obviously that's only there for me. I really had fun with her header, the penguin on it was just so cute. And her menu buttons were really fun because we used different stickers for each button.

You can check out the test site here.

Attention!!

2009-08-22T02:27:00.000-07:00

Layouts by Laina has gotten a makeover. It now has a new layout (seems appropiate, hey?), a new header and buttons that you can grab!! Look below and in the sidebar to see them.

The thirteenth layout I made

2009-08-09T23:29:00.000-07:00

was for Yan of and for Books By Their Cover. Go check it out there, because she's using it and her blog rocks!

Yan's layout was a bit of work but definitely worth it. Her header was completely different from anything I'd made before, featuring four different pictures and I wasn't sure how to do that at first, but thanks to a friend, I figured out that picnik.com would work perfectly. So I combined the four pictures, and then used photobucket to add the white border and writing. Then I tried a completely different background, even matching up the backgrounds of the sidebars and main posts, before realizing it didn't look right, so I went back to my photobucket album and this one popped out at me. It was a little different, a little crazy (in a good way), but it seemed very Yan. Just very very unique. Then I made her menu buttons (my first!) and I think it all turned out nicely.

You can check out the test site here.

The twelfth layout I made

2009-08-09T23:18:00.000-07:00

was for Sharon of and for Sharon Loves Books and Cats. She's totally awesome and using it right now, so go check out her blog to see it in action!

Sharon wanted to freshen up her blog but she didn't want a huge change. So I stayed in the same colour palatte, but I chose something that was a little funky, a little retro, and really cool that seemed to fit Sharon really well. With the header, I just faded the edges to black a tiny bit, nothing major, but it really made the writing pop.

You can check out the test site here.

The eleventh layout I made

2009-08-09T23:13:00.001-07:00

was for Erica of and for The Book Cellar. She's using it right now, so go check out her awesome blog!

Erica's layout was so much fun. She chose a few pictures she liked for a header and told me to go wild, basically. So I made her a header with two different choices of fonts and then I decided that red would look gorgeous with it and tested a couple different backgrounds. There was one I really liked, but it wasn't quite right, so I upped the contrast and made it a tiny bit darker, plus a little bit of cosmetic work and tada!

You can check out the test site here.

The tenth layout I made

2009-08-09T22:59:00.000-07:00

was for Kristin of and for her blog Feed Your Imagination. She's awesome and currently using it, so go check it out there, too!!

A picture of the test:

This was another difficult one. The original background image that Kristin chose gave it some really weird lines, so I had to crop it and resize it. And then I had some troubles with finding the right colour to use for the background of the sidebars and post area, so I ended up using another picture... and you can see how well it turned out!

You can check out the test site here.

The ninth layout I made

2009-07-12T12:39:00.000-07:00

was for Pizza of and for Pizza's Book Discussion, and he's currently using it, so go check it out!

A picture of the test:

This one was a bit difficult, as he (reasonably) didn't want anything girly, but I think the end result was quite nice. To make the header, I found the little chef picture, cropped it because it had a border that I didn't need, tripled it, lined them up, coloured in the other two to provide a space for the text, added the stickers to add some texture, used a photobucket tool to do the black fading thing, and added the text.

You can check out the test blog here.

The eight layout I made

2009-07-12T12:19:00.000-07:00

was for Taschima of and for Bloody Bookaholic, and she's awesome and using it, so go check it out!

A picture of the test:

Taschima already had her header and buttons, I just made the layout to match the header and used the menu buttons to make sure it wasn't deleted on her blog by accident.

You can check out the test blog here.

the seventh layout I made

2009-06-19T01:04:00.000-07:00

was for J.J. (aka luckygirl1112) from and for Random Musings. She's currently using it, so go check it out!

A picture of the test:

I was bored, so I put a few extra things into hers, just little things like I made the borders dotted instead of solid, made the header border thicker than usual, put each gadget in its own box, and a couple other things. She found her header picture, which is a great help, and was lovely in indulging my random background tests (pirates, for one, pirates!) and also putting up with me being dumb and accidently marking a bunch of emails spam, which included losing on email with her blog stuff. I'm a genius, huh? :P

Anyways, you can see the test blog here.

The sixth layout I made

2009-06-19T00:26:00.000-07:00

was for Ashley of Ashley's Bookshelf. She's currently using it, so go check out her blog!

A picture of the test blog:

Hers was a bit different from the other layouts I've made. I made her outer wrapper wider, along with the main posts and sidebars as her old template was wider and I figured she was used to that, plus it looks nice with the header. Ashley also had a good hand in making this, as she found both the background picture and she made the header herself! I just added the borders.

You can check out the test blog here.

The fifth layout I made

2009-06-19T00:18:00.000-07:00

was for Samantha of and for Harlequin Twilight's Book Blog. She's currently using it, so yay!

Picture of the test:

This is another one I am particularly fond of. It's just gorgeous, thanks to Samantha's lovely picks for the background and header pictures.

You can check out the test site here.

The fourth layout I made

2009-06-19T00:12:00.000-07:00

was for Neveen from and for Princess Neve Book Reviews. She used it briefly and then decided not to.

A picture of the test:

You can also check out the test site here. This is, at the current time, the only blog I've made with a menu bar as they're a bit complicated and hard to make for people.

The third layout I made

2009-06-19T00:00:00.000-07:00

was for Ashley for YA Blog Newsletter, mostly because I was superbored and wanted to make a layout for something and she was kind enough to let me do it. She's currently using it, which is very neat indeed.

A picture of the test:

I'm quite fond of the header here. I took the original picture, shrunk it a bit, put borders around it, tripled it, flipped one of them, greyed out the middle one, added the text and a "sticker" from photobucket, the little heart.

And you can check out the test site here.

The second layout I made

2009-06-18T23:52:00.000-07:00

was for... hmm, let me check, I can't quite remember... Lexi! Of course. :) Lexi is currently using it at her blog, anotherpageisused... , which is really neat for me.

This was it (click to enlarge):

Isn't it cute? Lexi deserves credit for this one, because she helped make it, picking out both the background and the header. If you're curious, you can check out the test blog site here.

The first layout I made

2009-06-18T23:44:00.000-07:00

was for Amanda at Reviewabook123.blogspot.com. She decided not to use it (because she liked her current template, which is lovely, isn't it? And she changes it too much anyways. J/k), but I don't mind in the least.

Here's a picture for you to see of it (click to enlarge, because as this is a basic minima template, it's not that wide):

And you can check it out here.

The point of this blog and how to get a layout made for you

2009-06-09T10:29:00.000-07:00

I mostly made this blog so I'd have example Minima template HTML as all my blogs are customized to some point, but I figure I may as well use it to put all my stuff in one place and explain how you can ask me to make you one if you want to.

I customized my own blog Laina Has Too Much Spare Time, and then the others I've done are in the other posts on this blog.

If you want me to make you one, you can email me the answers to the following questions and as soon as I have time, I'll get to work on it (currently I have no life and not much to do, but that probably won't always be the case :P And I'll do the people who come first and get back to me first, first):

1. Do you have a picture in mind for the background? A colour you want, pattern, dark, bright, stars, hearts, that kind of thing? I have a few pictures in my photobucket album if you want to flip through that to get an idea. It's here: http://s476.photobucket.com/albums/rr128/Laina1312/ and the guest password is pancakes. Edit: I now have a small album of backgrounds I'm building up, here: http://s476.photobucket.com/albums/rr128/Laina1312/Backgrounds/ Same password. Remember, not all of the pictures in my albums will work as backgrounds. Sometimes there are weird lines and stuff. I am human. I can't help this. Also, do you want two columns or three?

2. Do you have a picture you want for the header or an idea of something you want in the header? If not, I suggest checking out this site: http://laylasphotoblog.blogspot.com/ It has gorgeous pictures, and it might inspire you. If you find one you like, do you want just the picture with writing on it, or do you want the writing to the side of it in a box of its own? Do you want it framed? What kind of font do you want the writing in? I mostly use photobucket to edit the pictures, so they don't have a ton of fonts, but they have some really nice ones. (Obviously if you have a header you love already, I would be glad to use that.) Edit: I'm using picnik a ton now and they have great fonts. If you ask me, I can send you a picture with them all on it. Also, please remember that pictures need to be a certain size to be good header pictures. Tiny pictures won't work. I'm sorry, but there's nothing I can do about that.

3. To make it easier for me, would you mind copying and pasting all the html from your blog (from where it says Edit HTML) into an email? A seperate email than the one you use to answer the questions is best, and make sure you get all of it. Because mine are custom, I start with a minima template and add to it, instead of just adding a gadget of a layout to it, and then I'll use your html to customize it so that you don't lose any of your gadgets. Don't forget to remove any backgrounds gadgets you already have, like from cutest blogger on the block, before sending. You can add it again after you send the email, just be sure to remove it before I send you back the final instructions to get your layout.

4. Do you want any special features? I can't promise these, but I can attempt them. They can include things like a menu bar, blog posts on the left or right and both sidebars on one side, that kind of thing. I can't promise them, but I can try.

New notes on menu buttons: They're images that link to posts. Because of this, I need to know what you want them to say so I know how many there will be. Otherwise I'll end up having to resize six or seven pictures at some point and I will cry.

That's all, I think.
Peace and cookies,
Laina

Oh, and my email address is Laina1312@gmail.com