Home Tutorial

How to Create Blogger Template from scratch for your own

Ervan Repana
Ervan Repana
0 • 3 min read
Table of Contents
You want to be a blog design template, you can learn and you must know basic of Java script codes, html5 codes and CSS3 or PHP scripts for WordPress, blogger blogspot, blog  for the latest todays. Not be easy you must learn structure content of pages, need years you become uderstanding to be a master web designer for all that. You can learn from web or for teachers maybe you have had basics from school is easy to depelove your skill in web design. This time i want to explain maybe basic structures basic blogger template layout. Or if you doesn't understand you can buy blogger premium template or choose blogger theme default blogger blog that is responsive blogger template.
Common Basic Structured html on the web doc is the same in blogger is built with xml codes for blog design you can use css codes, java script, ajax, etc.
How to Create Blogger Template from scratch for your own
Basic structured blogger xml blog layout  :

<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<title>...<title>
<style='text/css'>
Place Css style & Java script here
</style>
<script type='text/java script'>
</script>
</head>

<body>
<script type='text/java script'>
You can place java script here
</script>
</body>

</html>
If your template lost and your template you can back up you can copy this and save file as extention xml and upload it. If you download template too in blogger dashboard theme file in extention .xml doc.
So structure basic template like below

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<title> <data:blog.pageTitle><title>
<b:skin><![CDATA[
*/ css here /*
]]>
<style='text/css'>
Custom Css style here
</style>
<script type='text/java script'>
</script>
</head>
<body>
<script type='text/java script'>
You can place java script,  codes here
</script>
</body>
</html>

Basic structure html in xml doc blogger with sidebar and footer like below

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html lang='en'>
<head>
<b:skin><![CDATA[
Related: loading
*/ css here /*
]]>
<style='text/css'>
Custom Css style here
</style>
<script type='text/java script'>
</script>
</head>
<div id='wrapper'>
  <div id='header' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
  <b:section class='section' id='header' maxwidgets='1'/>
    <b:widget id='Header1' locked='true' title='Blogtarget1 (Header)' type='Header' version='1'/>
</div>
</div>
<div class='clear'/>
<body>
<div id='content-wrapper' itemscope='itemscope' itemtype='https://schema.org/Blog' role='main'>
<div id='main-wrapper'>
 <b:section class='main' id='main'>
 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'/>
<div class='clear'/>

<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
   <b:section class='sidebar top section' id='sidebar top' showaddelement='yes'/>
     <b:widget id='PopularPosts1' locked='false' title='Trending Posts' type='PopularPosts'/>
<div class='clear'/>

</div>
</aside>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>
Copyrights ©Blogtarget1 2018.
<footer>
</div>
<script type='text/java script'>
You can place java script,  codes here
</script>
</body>
</html>

Its simple way blogger blog layout template xml doc in blogger you can set up css and custom css in sample layout blogger blog  and add with navigation, related post, share post and others. Thanks for reading guys. Keep working. Alarm me if i'm wrong.

Post a Comment