Blogger tutorials for Beginners : how to make Your Own Blogger Template from zero for beginners? Part 2 of creating blogger templates is Knowing Blogger Element Templates
Create a Blogger/Blogspot Template is very boring jobs, it's because platforms using in a blogger Templates is HTML/XML and I am not familiar with it. For me it was rather complicated in comparison with any .NET Programming Languages. However, I will show you how to create Blogger/blogspot templates with XML/HTML version in some parts, so that in the guide is not confusing and easily understood by anyone following this tutorial. For the first part of this tutorials we have already at previews postings, please read Part 1 How to Create Your Own Blogger Template.
To continued, we will create a blogger templates and show you how to Knowing about element/patterns in a blogger templates.
Let's doing this tutorial live on bloggers an make it easier to understand.
When it is finished, save your new blogger templates and go to add new posts. Create your first posting on our new blogger. and please let me know what happen when you open your home page (your blog URL).
For Next Lessons I'll post about how to make templates for Blogger/Blogspot and build it from scratch, perhaps I need to prepare it in advance because it is so easy to be understood for step by step. What we learn next lesson : About Body Block and Outer Wrapper, Header, Sidebar Block, Main Wrapper, Post and comment box, Footer, and Refinement.
See you on Next Lessons.
To continued, we will create a blogger templates and show you how to Knowing about element/patterns in a blogger templates.
Knowing Blogger Element/Patterns
Before starting to create the Blogger templates, first we must have a pattern or picture what kind of templates we will make, well here we will create a blogger template with 2 columns, details element like Header, Main-wrapper, Sidebar Block and Footer Block.Let's doing this tutorial live on bloggers an make it easier to understand.
Create a Blog Account (Blogger.com)
To make a blog using blogger.com you can register with your email (Recommended : gmail.com). Please register to blogger and create a new blog. just follow the picture below.
Explanations:
- First, at the column "Title", enter a name of your first blog made with blogger platform.
- Second, create your blog url with your taste, you can create blog url with the your original names or your company names.
- Next, choose a standard blogger templates that is already provided by blogger.com to use for free.
- Lastly, if all has finished, please click create blog! and you have a first blog and please access it with www.yourBloggerUrl.blogspot.com
Create Your Own Blogger Template
Let's edit blogger default templates, go to "Template Menu" and Click "Costumize", Please remove all default templates source code before, then create simple templates using write this line code :
<?xml version="1.0" encoding="UTF-8" ?>
<!--XML (Extensibel Markup Language)-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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>
<title><data:blog.pageTitle/></title>
<!--judul blog-->
<b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Templates Style
Name : Newbie To Blogger
Designer: Harison Matondang
URL : http://www,hc-kr.com/
-----------------------------------------------
*/
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<!-- Open Outer Wrapper Block-->
<div id='header-wrapper'>
<!-- Open Header Block-->
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='www.Hc-Kr.Com' type='Header'/>
</b:section>
</div>
<!--Header is Ended Here-->
<div id='main-wrapper'>
<!-- Open main-wrapper Block for our post, comment or widgets -->
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<!--Main wrapper ended-->
<div class='clear'> </div>
<div class='clear'/>
<div id='sidebar-wrapper'>
<!-- Open sidebar Block -->
<b:section class='sidebar' id='sidebar-1' showaddelement='yes'/>
</div>
<!--sidebar ended here-->
<div id='footer-wrapper'>
<!-- Open Footer Block-->
<b:section class='footer' id='footer-1' showaddelement='yes'/>
</div>
<!--bagian footer end-->
</div>
<!-- End Of Outer Wrapper Block -->
</body>
</html>
When it is finished, save your new blogger templates and go to add new posts. Create your first posting on our new blogger. and please let me know what happen when you open your home page (your blog URL).
For Next Lessons I'll post about how to make templates for Blogger/Blogspot and build it from scratch, perhaps I need to prepare it in advance because it is so easy to be understood for step by step. What we learn next lesson : About Body Block and Outer Wrapper, Header, Sidebar Block, Main Wrapper, Post and comment box, Footer, and Refinement.
See you on Next Lessons.
COMMENTS