10 tips help you design your own professional Blogger layout
Spread it!
Hi, today i will help you design your own professional Blogger layout, yep, really professional… If you are running Blogger as your own homepage. Whatever your blogger content is, your blogger must be friendly to visitors. The first, you already created your blog and you see that, layouts from Blogger Gallery is so boring, it’s not as your style. Ok, why didn’t design own layout for yourself with your style? Here we go…
- Picasa Web: It’s your images hosting. when you make an entry from blogger, all images in your post you uploaded will be store in your Picasa Web account. It’s really cool because you can use this account to store all images in layout designed for Blogger, please check my layout, all images i stored in my picasa web.
- Googlepages: When you design layout, you can create some javascipts and you dont have your own hosting to store it. No problems, just create your one page in Google Pages with your google account and upload all your javascipts file to it. Note: you can upload images, too. Because, sometime picasa web will not accept your image with some stupid reason, you can upload it, so, google page is cool to do. And… create your own favicon, upload it here, because picasa dont allow you to upload .ico file. But Picasa Web is still best solution to store your images in blogger.
2- Navigate the visitor with your layout menu:
By default, Blogger dont have any widget to create menu for your blogger layout, but it’s ok, you can edit source code of blogger, make it easy.
The normal menu code will be liked following:
<ul> <li class="item"><a href="your home page url" title="Your home adress" >Home</a></li> <li class="item"><a href="link 2" title="Title 2">Link 2</a></li> <li class="item"><a href="link 3" title="Title 3">Link 3</a></li> </ul>
and the css:
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
float: left;
}
ul li {
float: left;
display: block;
padding-left: 0px;
}
the property “float: left” of li tag to make your menu horizontal if you wana create your menu vertical, just remove this property.
Now, make your menu professionally, style it with corners and add some property to css style, example:
By default:
On hover:
The images you need are: sortnav_left.gif 
and sortnav_right.gif: 
The complete source code:
HTML:
<ul class="sortnav"> <li><a class="module-link" href="your home page url">Home</a></li> <li><a class="module-link" href="#">Link 2</a></li> <li><a class="module-link" href="#">Link 3</a></li> </ul>
and CSS:
ul.sortnav {
font-size:10px;
font-weight:bold;
text-align:right;
float: right;
}
ul.sortnav li {
*padding-top:0;
*padding-bottom:0;
float: left;
display: block; !important
padding: 0px;
margin-right: 10px;
}
.sortnav a.module-link:focus { color:#000; text-decoration:none; }
.sortnav li:hover {
background-image: url(images/sortnav_right.gif);
background-repeat: no-repeat;
background-position: right center;
color: #FFFFFF;
}
.sortnav a.module-link:hover {
color: #FFFFFF;
background-image: url(images/sortnav_left.gif);
background-repeat: no-repeat;
background-position: left center;
}
.sortnav a {
color:#282828;
outline:none;
padding-right: 12px;
padding-left: 12px;
padding-top: 5px;
padding-bottom: 5px;
display: block; !important
}
3- Style your Blogger Category:
There’re no category module for Blogger user, but you can use Label module instead, that’s ok!
Firstly, you should know that your Label Widget will rendered as unorder-list while added to your layout. From inside your blogger layout manager, you can choose what style your Label widget will display such as: Alphabetically or By Frequency. It’s up to you. And, if your Blogger Layout is 2 columns and the sidebar section with width more than 300px, you should make your Label display as 2 column, it’s cool.
How to do? just simple by adding into your css style with some code like:
#categories-widget ul li {
background: none;
float: left;
width: 40%;
margin-left: 22px;
padding-left: 0px;
}
Ok, now, your Label Widget look cooland professionally, right?
4- Custom search engine on your Blogger template:
Credit to Woork.
Your Blogger will be cool if you add the search engine form on your Blogger Layout. You only have to add these lines of code on your template changing the form action URL with the URL of your site:
<form action='http://yoursite.blogspot.com/search' method='get'> <input name='q' size='24' type='text'/> <input name='submit' type='submit' value='search'/> <input name='max-results' type='hidden' value='4'/> </form>
The input hidden field “max results” set the number of results you want to display on your page after a search.
<input name='max-results' type='hidden' value='4'/>
5- Remove Blogger Navbar:
Fortunately, hiding the blogger navbar from new blogger is also as simple as the old one. Just add the following lines anywhere in your Blogger template [enclosed by <style> tags] and the blogger banner will be gone forever.
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
6- Customize your Blog post body and your blogger comment block:
You look anywhere in your layout, but you cant find which part of post body should be style? It looks complicated? Dont worry, follow me…Here we go:
Firstly, make an entry, add some content, whatever you want…it’s just a test. Why did i talk you to post an entry? for what? Because when you had posted an entry, you can see that in the blog page, and? the complete source code that the blog post rendered will be easy to view by simply using your web browser with View Sources. And now, if you using Dreamweaver(that’s i recommended) to edit your layout, you have already create layout with basic HTML file, you copy all the source code of Blog post body to your layout you’re designing to style it. Which parts of source code need to copied? That are all code between…
<div class='widget Blog' id='Blog1'> .... </div>
Some css you should style to make your blog post comfortable and professionally:
Blog post inside, customize these below to style your post body and labels:
.date-header {
..
}
.post-title {
..
}
h3.post-title a {
..
}
.post a {
..
}
.post {
..
}
.post-body {
..
}
.post-footer {
..
}
.post-labels {
..
}
The comment and blog pager:
#blog-pager {
text-align: center;
}
#comments-block {
..
}
#comments h4 {
..
}
.comment-author {
..
}
.comment-right-post {
..
}
.comment-timestamp {
..
}
dd.comment-body {
..
}
dd.comment-footer {
..
}
h3.post-publisher {
..
}
You can re-arrange all parts inside your post body to make it look nice. Just stylesheet it with these css above. So, the default comment is so boring, take a look some comment part:
My comments:
Woork comment (My favorite in blogger):
and the original comment (i dont like that 
)
You dont need style it if you want your visitor look at your comment block 
. If you have any problems when you styling your comment block, ask me, i can help you.
7- Add social button to your blogger to increase traffic:
If you have a blog, the most simple way to increase your traffic is using Social Networks. There’re so many post about adding social button to your web page or blogger layout, i dont need to talk about this anymore, take some tutorial around the internet:
- Blogger Hack: add social buttons to increase your traffic (Woork again ^^)
- Use http://www.addthis.com/ to add all social site with one button.
- Adding Social Bookmarking Button in your blog
Ah, something important when you add social buttons to your blogger post is:
data:post.url : this is your blog post page url
data:post.title : this is your blog post title
and the code to add should be, example with Digg:
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title'><img alt='Digg it' border='0' src='link to digg icon'/></a>
And now, take a look some blogger user make social buttons.
And my Blogger (who did not comment after read will be kick ass, just kidding ^^)
So, it’s cool, right? adding social to increase your traffic because visitor is lazy =))
8- Customize all unorderlist in your blogger layout:
Some un-orderlist in your blogger layout are:
- Menu and Categories (Label Widget): i have talked above.
- Recent entries and recent comments: Using feedburner to make your blog feed. And when adding code from feedburner, it’s rendered as un-orderlist style.
- Twitter: if you use twitter to update your recent doing, it same as feedburner, render un-orderlist, too.
- And some list you want to use, style all.
The un-orderlist in my blogger was styled like that:
The css code:
.widget-inside ul {
margin: 0px;
}
.widget-inside li {
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: left 8px;
padding-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e5e5e5;
padding-top: 3px;
padding-bottom: 3px;
font-size: 11px;
}
.widget-inside ul li a {
color: #666666;
}
.widget-inside ul li a:hover {
color: #000000;
text-decoration: none;
}
9- Add email subscribe in your blogger layout:
It will increase your traffic and readers want RSS updates, they are easier to manage, to search and follow. And when readers wanted them, bloggers provide. In design, your email subscibe form should be large and easy to find and easy to enter ^^.
Some awesome email subscribe form you should take a look: 10 RSS Subscription Box Designs Dissected
10- Well-format your XHTML layout:
Sometime, when you edit or design your blogger layout, if everything ok, click on Save Template in blog layout manager, but it says:
Oh god, how can we know where the element missed in hold long code like that? So, so, so….what can we do now?? Dont worry, you’d better use any XML editor to fix this problem. Here is use XMLwriter to check if is well-formated.
Copy all your code, simply check the checkbox “Expand Widget Templates” and Ctrl + A, and copy all, open XMLwriter, create new document (XHTML document) then paste all code into, save it.
Then click:
The XMLwriter will see you where the error make your code not well-formated. Fix it, then update your blogger layout. It’s ok, stupid error from blogger will not appear again.
Bonus: complete resources for blogger:
I hope with my post, you can design your own professional blogger layout yourself, if you have any questions or helps, just let me know, i will help you all i can do. I love Blogger and you all.
27 User Comments
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
It’s great, keep doing good job!
Hi, thank for your entry, but i have problems with comment block. Can you write more about comment block. I like your comment block style, it’s clean.
It’s useful article.
Hi!
Very nice tips and on the blog I am currently in the process of creating, I have 7 out of the 10 things that you mentioned already! xD Some questions though:
1) Where did you get YOUR version of the Digg, Furl, etc. services widget?
Just interested, cause it looks so clean and nice!
2) I need help with my layout! In Mozilla it’s all great, but it’s Explorer that’s bothering me. Even though I know you can’t exactly change how browsers function, I’m sure you’ll at least be able to give me a few points on how to improve, since you seem good with all this code stuff.
Please?
My blog can be found here if you’d first like to take a look just for fun. Then if you (hopefully) decide to help me out a bit, please email me at dmytromuzychenko/at/gmail/dot/com and I’ll pester you with all the problems I’m having! xD
Thankies!
yep, that all are service widgets. You can find all in that service website. It’s easy to install.
So…I saw your blog in your blogger profile, it’s cool.
If you really need help.
Email me some informations you need, ok? or just level the message here… i will reply soon more than email, because i’m a lazy guy about checking email ^^
Sorry I haven’t replied in ages!
I’ll make it up by… asking you a random question of course! 
How did you get that “Don’t jut read and go, comment…” message right above the comment form?! Can you share the code please? 
As for the help I was asking earlier, it’s nothing serious – not really a problem, more of an “annoying thing” caused by IE. Instead of keeping my nice rounded corners of all the green boxes (for labels, archives, etc.) on the right side, it puts a rectangle underneath, which of course, ruins the whole thing! Can you see what I mean?
Also in IE (not in Firefox of course, where everything is perfect! ;D), see my header title, that says That Special Blog? IE cuts off the bottom half of the “p” and the “g” that overlap my tagline. While it might seem good that it cuts off the half that would’ve covered up my subtitle, it only makes things look choppier – and I already made sure that my subtitle is still readable with the overlapping.
So… any way to fix my green boxes and the title, since many people still use Internet Explorer? I know you don’t control the browser, but maybe a few code fixes? Let me know if you have any questions, need a screenshot for clarification, or the code I use for my layout! Thanks!
Ok, i got something, and maybe it will help you resolve your problems.
1. Rectangle underneath: you style wrong with your .widget-content selector. Just remove margin-bottom: 10px, it will be ok. Note: separate the widgets in your right sidebar by margin the #widget, not the .widget-content selector.
2. “IE cuts off the bottom half of the “p” and the “g” that overlap my tagline. ” because you’re styling the value of font-size = line-height value, you need to change the value of line-height larger greater than font-size, maybe 45px is ok.
And about my comment box, the panel you see is not in my comment box, you can get that by viewing source. And the full source code, i will release when i change the layout, it’ll not soon
About the tagline and the “g” and the “p” being cut off – which line-height are you talking about, since there’s so many of them! I searched for font-size and there’s a lot of them too! While experimenting I kinda messed a lot of things up, but luckily had the previous version backed up… So, help please?
For the widget-boxes – your code worked wonderfully, thanks!
With one little side-effect though – now there’s practically no space between each widget-box, both in Firefox and IE. Also, how do you change the .widget-content to #widget? Do you just replace one with the other? Cause I tried that and nothing worked! So I simply deleted the margin-bottom line but do not know how to change it to #widget yet. Does it affect my layotu a lot though? Is that where the problems are coming from? And why is it coded wrong?
Your help is much appreciated, thanks – I only hope you can help me once more!
@@David Fitzgerald: you’re welcomed. With your problems about: “g” and “p” was cut-off the bottom. You just need to change the value of line-height in these selectors: “#header-wrapper h1 a” and “#header-wrapper small.shadow”.
I changed nothing. You must understand that .widget-inside in your style is in #widget, your widgets are: about, label …. and .widget-inside is the content in widget. If you want to make space between widgets, you must change value in #widget, not in .widget-content.
I fixed the “g” and the “p” thanks for the tricks!
As for the sidebar widgets and the space between them – I can’t find #widget anywhere in my code! Is it even supposed to be in my code?
Add this to your code.
Uh… add what? There’s nothing there! xD
add #widget seletor:
#widget {
margin-bottom: … ;
}
It doesn’t work.
Wait, I was supposed to replace the “…” by something like “10px” right? Well, either way, I saw no difference unfortunately. Maybe I’m not putting the code in the right place? I tried putting right below the widget-content, then I put it together with other # values, but it didn’t help…
I also tried to put “margin-bottom: 10px” in the widget-content and that worked, but with the green rectangles reappearing in IE and filling up the space.
I had another question – you know how on the blog homepage or archives you don’t see the comments below the post until you click on the post’s permalink? All you see is the “0 comments” or “1 comments” link below the post, which would lead you to Blogger’s ugly comment form page.
I was wondering if there was any way I could make that link lead to the post’s permalink so that readers see the comments on the blog layout, not on Blogger’s form page? And if that’s possible, is it possible that the link would directly jump to the comment section below the post? Is there any way to add an ID tag to each of the comment sections and then link it via that link?
Do you get what I mean?
For that last question about having the comment link go directly to my post, I found the same theme in WordPress, where it actually works teh way I dream it to work in Blogger. Just click on the “0 comments” link on one of the posts and you’ll see that you’re directly taken to the comment section below the blog post. Is this possible to achieve in Blogger?
Link: http://wp-themes.designdisease.com/testrun/?theme=ChristmasDays
Log in to you Blogger control panel, In Comment settings: Comment Form Placement, choose Embedded below post.
Great, it worked! Except my old red comment link is still there, right above Blogger’s comment form!
Is there any way to either remove that link, or replace Blogger’s black comment link with my red one?
And… sorry to bother you so soon, but what about the spacing between the widgets?
Just remove it, can you search somewhere in your layout?
About space between widgets, i’m sorry, i got a mistake. Not #widget, it’s a class selector, not a id selector.
.sidebar .widget {
…
}
Heh-he. I think you mean:
.sidebar .widget {
margin-bottom: … ;
}
But anyways, thank you so much! After 13 comments about this problem, you’ve finally solved it! It works perfectly!
Which is why I kind of feel bad asking you for more, but, thing is, I can’t find the code that controls the red comment link! There’s so much code and it doesn’t give me anything if I just search for “Post a comment” – even when I check the Expand Widget Templates…
Also, IE is back at it’s old tricks – making stuff more ugly than it is in Firefox. This time it took Blogger’s black text that says “Post a comment” right above the comment form, and made it like ten times bigger. Which is kind of annoying me… any help? Or is it impossible to change Blogger’s comment form or any of it’s text?
Remove that by search somewhere in your layout code: <data:postCommentMsg/>
Because it's not a text, you cannt find it by search: "Post a Comment". It's a label, you can edit this label in your Post Body Section(where you can display adsense in each post) …
Okay, I deleted that part from one block of code and its not there anymore (thankfully), but do you how I can delete all the code that I don’t need anymore, without messing up my layout? Just so it doesn’t take up space and slow things down.
The rest of the old comment form is an example, and I don’t just how much of it I can delete without messing other things up!
There was also a Christmas countdown at the top in the original layout, which I managed to delete, but again, I can tell there’s still some left over code from the countdown – I just don’t know exactly how much code!
Can you help with that? Or should I just leave it and forget about it? I don’t know, I just like being neat – it’s like having a bad-formed HTML file, with lots of repeating divs and stuff like that. Could you take a look at my code and tell me what I should delete?
The countdown I mentioned – you can see it on the Demo of the layout, right here: http://blogy-navideno.blogspot.com. The demo is in Spanish, but you can still tell: it’s the part that says “Esta finalmente aquí!”.
Thanks so much for everything else you did. My layout would be crap without you! xD
Hi there,
Everything dynamic and very positively!
Thanks
AlexAxe
Hello,
Can i take a one small photo from your site?
Thanks
Zoran
Super post, Need to mark it on Digg
I have already seen it somethere…
Rufor
Yup, You have seen it on my old blogspot prlamnguyen.blogspot.com. Sorry about that!
As a webmaster , I’m extremely glad to see that someone brought up this topic.
All too many people out there just don’t grasp the concept of what all is needed in our field, and I think also we’re all too often underrated
or taken for granted. Never the less I’m very glad to see that you feel the same way I do , thanks so much for your blog!