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.

 

9 comments:

Post a Comment

Back to Top