Blog Design Technique & Tips

[ElectricAlyce]

I don't know if this is the right place to ask, but since everyone is giving out blog advice and stuff, I don't see how it'd hurt..

Does anyone know the HTML code, or how to make your blogspot entries wider? Thanks in advance, seriously!

First of all, thanks ^^
Secondly, that isn't html but css (the code that controls the layout). It's hard to know without seeing your blog-layout-code, but my bet is:

You have something like this:

#container {
width: 500px;
etc
}

#content {
width: 300px;
etc
}

#sidebar {
width: 200px;
etc
}

(the names and numbers will probably not be what I wrote, depends on the layout). What you need to do is to first increase the container-width with how many more pixels you want the entries to be. And so if you want 100 pixels more then you first change (in the example above) #container width to 600, then you need to add the extra 100 pixels to the #content, so it will read 400. If you can't find what I'm talking about then feel free to send me a PM and I'll look

 

[fashionfille]

First of all, thanks ^^
Secondly, that isn't html but css (the code that controls the layout). It's hard to know without seeing your blog-layout-code, but my bet is:

You have something like this:

#container {
width: 500px;
etc
}

#content {
width: 300px;
etc
}

#sidebar {
width: 200px;
etc
}

(the names and numbers will probably not be what I wrote, depends on the layout). What you need to do is to first increase the container-width with how many more pixels you want the entries to be. And so if you want 100 pixels more then you first change (in the example above) #container width to 600, then you need to add the extra 100 pixels to the #content, so it will read 400. If you can't find what I'm talking about then feel free to send me a PM and I'll look

i need help with the same thing, but i couldn't find what you were talking about!

 

[ElectricAlyce]

Ok, to help 100% I'll need to see the html/css of your layout, but I picked out an old blogspot-account I had, and according to that css, this would be the change:

Original

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}​

a "wrapper" is what wraps around each element, ie. the box everything is inside. So outer wrapper is the outer "perimiter", the whole thing. main-wrapper is the main content with your post and sidebar-wrapper is... yep, the sidebar. So, you'll gonna have to change what I put in bold above. So to have 100 px more content the new code would be:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 760px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 510px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}​

But as I said, I can't explain a hundred per cent unless you post your complete html/css, either here, the blog design thread or send me a pm

 

[fashionfille]

Ok, to help 100% I'll need to see the html/css of your layout, but I picked out an old blogspot-account I had, and according to that css, this would be the change:

Original

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}​

a "wrapper" is what wraps around each element, ie. the box everything is inside. So outer wrapper is the outer "perimiter", the whole thing. main-wrapper is the main content with your post and sidebar-wrapper is... yep, the sidebar. So, you'll gonna have to change what I put in bold above. So to have 100 px more content the new code would be:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 760px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 510px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}​

But as I said, I can't explain a hundred per cent unless you post your complete html/css, either here, the blog design thread or send me a pm

that was really helpful! I expanded mine 300 px. My only issue now is that it's off center! is there a way to fix that? this is my new html:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 960px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 710px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

and my link, to look at how it looks, is: http://fashfille.blogspot.com/

electric alyce, you are SO helpful! i realllly appreciate all you have done for me and the other users.

 

[ElectricAlyce]

Not a hundred percent shure, but I think it might be the fact that you havent "filled" your entire outer-wrapper. Your main-wrapper + your sidebar-wrapper should fit the outer-wrapper (I'm so glad I don't have to say this out loud, wrapperwrapperwrapper) perfectly. So in your case you have 710 + 220 which is 930, and your outer-wrapper is 960, so you have 30 px dead space that can f**k up the "centering". So try to write 930 instead of 960 and see what happens.

And no worries, I know it so I might as well share it

 

[gius]

So I can't remember if you requested the critique for your blog here, electricalyce
or in the other thread about blogs in C&E
So I'd like to do the same for you

I think your blog looks very clean
I like the layout in blocks
I think it's great when the text doesn't go from the beginning of the entry to the end
Rather it is not so wide..
like the posts with the pictures... the block of text is much narrower

I think it is slightly too bare though
Too "just black and white"
It might help to have maybe a textured background... one with lines going across to move your eye across the page easier

If you look at http://www.marni.com you can see they have a subtle background design too
I would like to do the same for my blog
Sadly blogspot is such a pain to edit ...

 

[ElectricAlyce]

Yeah, I did, so thanks alot
I'll give the background texture some serious concideration and look into how long the lines of text should be

 

[indie]

My blog design looks like a mess right now Gosh...

 

[capt.charly]

Nooo, i like your blog as it is !!

My blog design looks like a mess right now Gosh...

 

[ElectricAlyce]

My blog design looks like a mess right now Gosh...

I'd trade the yellow for something else, but beside that it's purdynesque!

 

[Sharper2002]

I thought I'd add my blog in here for a critique. Also, I have a wordpress.com blog, but it looks like I can't add in the digg and delicious tags and whatnot?

 

[verymoni]

Ok, to help 100% I'll need to see the html/css of your layout, but I picked out an old blogspot-account I had, and according to that css, this would be the change:

(...)

​

But as I said, I can't explain a hundred per cent unless you post your complete html/css, either here, the blog design thread or send me a pm

I can't believe I just managed to do it. It had been two years and every tutorial I read was impossible to figure out.
Thank you so much.
I'll change my layout now that I can make entries larger.

I also have another question:
The separation between the entry and the sidebar is now narrower, how can I fix it?

Thanks again!

 

[Bengt]

I just redesigned my newly started personal blog.. What do you guys think?

http://bengtblog.blogspot.com

 

[waxy]

Just curious, what are the digg and delicious tabs for?

 

[Gleam]

I'm so glad I stumbled across this thread. I thought I was pretty computer savvy... good knowledge of HTML and FLASH under my belt... wow, that's of little to no help with setting up my website. I just bought a domain name and am STILL trying to figure out how the hell I install or upload the Wordpress opensource program. I'm totally baffled.

 

[ElectricAlyce]

I'm so glad I stumbled across this thread. I thought I was pretty computer savvy... good knowledge of HTML and FLASH under my belt... wow, that's of little to no help with setting up my website. I just bought a domain name and am STILL trying to figure out how the hell I install or upload the Wordpress opensource program. I'm totally baffled.

Did you follow the "famous 5-min install"? Where did the trouble appear?

 

[gius]

I redesigned my blog finally
It's easier than I thought..
on blogger..
The options for colouring your text and sizing,etc are all at the top and then they edit the bottom codes for you... I was playing with both...

I notice my blog is different on a Mac and PC (?)
the text is nice on a PC, but easier to read on a Mac..

Some of my old posts suffered a little because the width/height have changed and warped the post margins ^^ Some of the text is cut off. Does anyone know how to fix this? In a word doc for example, you can choose "text wrap" but I can't find a code for this...

 

[Carrme]

When I signed up for Blogspot last week my template had my profile and archives all on the side.
I am really sure I didn't press anything but now they are showing up at the bottom of my page and everything (like blog,italic and photos) are inserted with those codes.
ex. <a>shjkehkhdaksjjohnlenno <<l

know what I mean? why is this happening?

my blog is www.melcarrey.blogspot.com if it helps. Im having fun with it otherwise. Great place to express myself

 

[gius]

^ oh you made it too wide
did you edit the size of the sections.. like widen the column for the profile and the column for the blog posts?

If they are too big together, the profile column will get pushed to the bottom

 

[Carrme]

well I didn't do it on purpose that is why I'm so confused.
I had some wine... but I remember everything lol (joke)

so do you have advice on what I can do?