Here’s some tips to do:
Start creating a custom template
Make a nice template is important for the success of your blog in terms of visits and return of money using AdSense. Before to start your custom template, writing code from zero, we suggest you to download a simple basic Blogger template, for example "Minima": then, copy and paste on your preferred HTML editor HTML source (remember to check "expand widget models" option) and remove everything is contained within b:skin tag. This is the only code which have to remain:
<b:skin> /*</b:skin>
...and, below the previous line, add this code into the <head> tag to create your custom CSS style. We suggest you to use the following CSS structure:
<style type="text/css">
/* -- 1. Standard HTML elements reset --*/
/* -- 2. Custom Page Elements --*/
/* -- 3. Redefine blogger standard elements --*/
/* -- 4. Other custom classes --*/
</style>
In this way CSS code will be simpler to manage and update.
At this point you can start writing HTML code, adding layer, sections and other elements to your template. When your template is ready, copy the code and paste it on Blogger Layout editor and save it
Create single custom pages on Blogger
When you're using Blogger you can create single custom pages like on WordPress. How do you do it? Simply creating a post which you will use like a web page for example adding links or in general contents organized for category. On our blog we created some pages (Blog Widget, Blog Tutorial, Blogger Template) and, for each page, we added a link on navigation bar:
This simply step make your blog have each page contains links organized for topic. When you have to modify the content of the pages you have simply modify the related post directly from Blogger Post editor.
Display some HTML elements only on home page
Sometimes it's usefult to display some page elements only on home page and not on each single post. To do it, you have to use Blogger <b:if> statement, adding the following code on your Blogger template:
<b:if cond='data:blog.pageType != "item"'>
In this way, if the current page isn't an "item" page (but for example it's your home page) , will be displayed all code within <b:if> tag.
<!-- ... HTML code if you want to display only on home page here... -->
</b:if>
Page title and meta tag description
For a better indexing of your blog on Google we suggest you to make these simple changes on your template. Change this line (blog title):
<title><data:blog.pageTitle/></title>
with the following code:
<b:if cond='data:blog.pageType != "item"'>
<title>My site | This is a short description</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
and add Meta tag description below the previous <b:if> statement.
<b:if cond='data:blog.pageType != "item"'>
<meta name="Description" content="Add here a short description of your site" />
</b:if>
Design custom categories section
By default, categories on Blogger are displayed on one column. If you want to modify the default layout showing labels on two columns instead one column, you have manage manually your labels using this simple trick: adding on your template, for each labels, a link like this:
<a href="http://yoursite.blogspot.com/search/label/Category Name?max-results=max numbers of posts to display">Category Name</a>
For example, to design our categories section we used this code:
<a href="http://1widget.blogspot.com/search/label/Blog%20Widget">Blog Widget</a>
<a href="http://1widget.blogspot.com/search/label/Blogger%20Template">Blogger Template</a>
We know, the process is not automatic and each time you add new categories, you have to udate your template manually... but this solutions renders more flexible template design.
Republish Feed RSS to manage recent entries and comments
Personally, we don't like Blogger default archive widget. So, on our template we used FeedBurner BuzzBoost service to add a section with recent entries and recent comments. If you have a FeedBurner account login, clik on "Publicize" tab and select "BuzzBoost" service.
Follow instructions on the page and copy and paste BuzzBoost code on your Blogger template, within a new layer with class property = "recentPost" (you can insert this layer, for example, within sidebar):
<div class="recentPost">
/* FeedBurner BuzzBoost Code*/
<script src="http://feeds.feedburner.com/your feed here?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/TopWidgetBlog"></a><br/>Powered by FeedBurner</p> </noscript>
</div>
To customize recent entries section add a CSS class (recentPost) using, for example, the following code:
.recentPost li{background:url(arrow image URL) no-repeat left top;
padding-left:14px;}
You can repeat the same process to add a new section which contains links to recent comments, simply changing the feed URL.
Add custom subtitle to your posts
If you want to add a subtitle to your Blogger post you can use a simple "trick" using CSS. On your Blogger template, create a custom class ".subtitle" (for example, we used this code for subtitles style):
.subtitle{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
color:#555555;
line-height:28px;
}
Now, when you add a new post, to add a subtitle, add a div layer with class property = "subtitle" before the post content:
<div class="subtitle">This is a subtitle</div>
Add social web buttons
Social web buttons are a extraordinary solution to share and make popular content you write on your blog. Delicious, StumbleUpon and Digg are we preferred social network which drive on our site a lot of traffic but also Mixx, Reddit, Yahoo Buzz!, DZone can help you to increase your visitors.
That's it!
Be Professional Design Layout Blogger.
And have fun...
Source: woork.blogspot.com/
0 comments:
Post a Comment