How to Create Blogger Template from Scratch

Friday, October 17, 2014

How to Create Blogger Template from Scratch

Posted by Unknown | 2:35 AM | 2 comments

We always talking about blogger or blogging, today we discussed that how to create a blogger template from scratch. Its need some skill to create it

Skill Required to create a Blogger Template

1. You should know about blogger.com

2. You must have command on HTML, CSS, XML & Javascript.

3. Good in Designing and Creating. Like: Photoshop because it used in some CSS

Step 1. Preparing Blog for Testing

It is common thing that before creating any blogger template you'll make the demo blog for that template. So, create a blog and publish more than 10+ posts on it. There should be one image, all heading, 4-5 text paragraphs, numbered list, bullet list and quote in every post.

Step 2. Basic Structure of Blogger Template

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<b:include data='blog' name='all-head-content'/>

<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>

<b:skin><![CDATA[

body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></b:skin>

</head>
<body>

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

</body>
</html>

Step 3. Header Widget

For Creating a header for your Blog Paste the following below code under <body> tag any where you want to display header.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>

Step 4. Blog Content or Post Area

Now Time to Creating a Blog Content or Post Area. Open the Blogger HTML Editor and Paste the Below code

<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> </b:widget>
</b:section>

Step 5. Creating Custom Widget

There is nothing special then <b:section> tags in the above coding. Class and ID tags are empty where you can add your own custom names to call the CSS for that section. You can use class and ID to call CSS and beauty that gadgets section by adding any width, height, padding, margin etc. Another tag, maxwidgets='' is also in which you write any maximum number like 10 so that section wouldn't contain more than 10 widgets. If you want to show "Add a Gadget" in layout option in dashboard then remain the yes in the showaddelement tag otherwise replace it with no.

<b:section class='' id='' maxwidgets='' showaddelement='yes'>

</b:section>

Note: This only include Blogger Template Tags. <b:skin> or CSS not included in this post

2 comments

UnknownOctober 17, 2014 at 9:37 AM
You're Welcome
ReplyDelete
Replies
Pandu Aji WirawanNovember 5, 2014 at 9:29 PM
thanks for this article
ReplyDelete
Replies

Add comment

71% of Users Run Latest Version of Browsers

Netgear Wants to Connect New Televisions

Dubai Faces Environmental Issues After Growth

Questions Linger as Shrimp Season Opens

Finding New Ways to Fill the Tank

Red Sox Exercise $12.5 Million Option on Ortiz

Running Backs Shift, but Bond Holds Tight

New Report: Toxic Metals Tied to Prison Work

China Said to Resume Shipping Rare Minerals

Coal Industry Spending to Sway Next Congress

Japan’s Auto Parts Makers Try to Anticipate Shift to Electric Cars

Rescue May Redeem a Troubled Past for Chilean City

Rum Battle in Caribbean Leaves Tax Hangover

Friday, October 17, 2014