2

A fresher perspective

The Penciling template redraws the usual blogger templates in a more natural way. May be, this is as natural as it can get.

This design features hand drawn lines and doodles for most of the template elements. Furthermore, there are painted colors! Despite the simplicity, this template is also full featured. Unless you want to get too serious in your blog, Penciling will just suit you.

So here's the Penciling template, to all those people for whom life is a creamy cup of chocolate drink. :)



You may want to see a test post

If you have a problem with installing the template, or if you want to know some tips and tricks, see the Quick Reference:
1. Installation
2. Essentials and Best practices
3. Customization 


Liked it? Didn't like it? Do give your feedback. Drop me a line here



10

This is a test post

This is a normal paragraph.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat pellentesque mauris et elementum. Ut vel eros at augue dignissim mollis.
Curae: This is a link.
Maecenas tempus viverra eros. Vivamus nec leo est. Sed non magna nec orci tempor lobortis at in ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
This is a blockquote.
You can easily quote text by clicking the quote button in blogger's text editor. Have fun!
Vestibulum vel leo eu enim pellentesque posuere. Nulla adipiscing rhoncus sagittis. Etiam ullamcorper, lectus eget eleifend egestas, massa nulla adipiscing libero, et iaculis sem mi in sapien. Nulla faucibus ultrices dictum. Nunc vulputate risus ac ligula scelerisque vel mattis quam fringilla. Sed posuere fermentum libero, quis posuere orci fermentum aliquet. Suspendisse ut viverra dui. Vivamus aliquet enim eget felis sagittis ullamcorper. Nam lobortis turpis id odio sollicitudin placerat.

This is how an image looks like:


Praesent sit amet mauris lectus. Mauris mattis, neque quis congue iaculis, nulla augue consectetur mi, a vulputate justo enim a lacus. Sed sapien ante, ultrices in rutrum eget, volutpat id mauris. Nullam sem leo, rhoncus sit amet fringilla et, eleifend sed libero. Praesent adipiscing pretium sem, ut laoreet metus gravida nec.

See the comments to this post to find how the comments look like.

9

Quick Reference

Installation
First download the Penciling template.
Go to your Blogger Dashboard. Click the Design link for your blog.


In the design section, go to Edit HTML tab.
Here, you can see an option to upload a new template.


From here, upload the Penciling.xml file that you've just downloaded.
Now save the template, and you're done!


Essentials and Best practices
Date format
The date widget on top left top of the posts will display correctly only if the date is set in the correct format.
Go to Settings --> Formatting
Here, change the Date Header Format to Saturday, June 12, 2010


Comment form placement
This template includes the et Smiley set, which enables you to have cute smileys in your posts. It also features a Smiley panel, which appears under the comment form and serves as a handy smiley reference for your visitors.

This panel will display only if the comment form is embedded below the post. To do this, go to Settings --> Comments
Make sure that Comment Form Placement is set to Embedded below post.


Extra suggestions
* When you have lesser number of sidebar items, limit the number of posts per page to 2 or 3. (The Blogger default is 7 posts per page).
For this, go to Settings --> Formatting
* For best viewing (and happy browsing), STOP using Internet Explorer, and get started with Firefox or Chrome! :D

Customization 
Editing horizontal navigation bar
To edit the navigation bar links, you should change a bit of template code.
Go to Design --> Edit HTML in Blogger dashboard.
In the browser, search for (Ctrl + F) the part saying:
Pencil Navbar

By default you'll be able to see the following code
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>About Me</a></li>

You wouldn't need to edit the first link, which is the Home page link.
The red color shows the link to be given. The green color shows the displayed text. Edit these parts according to your needs.

You can add even more links in the format
<li><a href='link'>Display text</a></li>

Adding a header background image
You can always upload your custom background image for the header by going to Design --> Page Elements and editing the header element.
In order to get best results use an image of dimensions 840x160
You can make a custom blog header image in this dimension and upload over the existing title.
Here's an example of a custom header image used with Penciling template:
You can download a blank white image of this dimension here.

 
Back to Top