Part 2 How to Create Your Own Blogger Template - Knowing Blogger Element

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.

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.

How to Create Your Own Blogger Template - Knowing Blogger Element

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.
How to Create Your Own Blogger Template

Explanations:

  1. First, at the column "Title", enter a name of your first blog made with blogger platform.
  2. Second, create your blog url with your taste, you can create blog url with the your original names or your company names.
  3. Next, choose a standard blogger templates that is already provided by blogger.com to use for free.
  4. 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'>&#160;</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

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Part 2 How to Create Your Own Blogger Template - Knowing Blogger Element
Part 2 How to Create Your Own Blogger Template - Knowing Blogger Element
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
https://1.bp.blogspot.com/-Du2hT_jDco8/V2A9ypsvmqI/AAAAAAAACDU/VHmRPwJ_-mUAwVYsqFYdRZFOIaVHjDJmwCLcB/s320/create-blogger-template.jpg
https://1.bp.blogspot.com/-Du2hT_jDco8/V2A9ypsvmqI/AAAAAAAACDU/VHmRPwJ_-mUAwVYsqFYdRZFOIaVHjDJmwCLcB/s72-c/create-blogger-template.jpg
KODE AJAIB
https://www.kodeajaib.com/2016/06/how-to-create-your-own-blogger-templates-part-2.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/06/how-to-create-your-own-blogger-templates-part-2.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy