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...
1- You should not miss the resources from google account.
- 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 :D )
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:
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.
Weblogian.com
Blogspottutorial
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.
