Web Page and Blog design: Blogspot theme design

Blogspot theme desigh - Convert HTML to Blogger XML

Make your own developed Blogger/Blogspot theme or template and the problem is the informations in the web about this theme are very rare, so how to convert HTML to Blogger template or XML theme and it is some times a compicated procedure

How to make Blogger template?

You are waiting to convert your HTML template into Blogger XML Template or Theme. Really it is the awesome feeling to install own converted and designed theme to Blogger. I am familiar with Blogger since 3 years. Actually, blog and blogging were started to me by Blogger platform. Searching new free Blogger template from here and there and installing new template was one kind of passion. I would think, how others can design as much beautiful template.

Lets trying to learn how Blogger XML code work. Initially, I could customize some changes like adding the new widget, changing some code etc. Whatever, one day I have taken a decision to learn Blogger XML Theme. As a result, I searched on Google for the conversion HTML to Blogger. Seeing the results I was hopeless but wasn’t so disappointed. There is no above trying.

Finally, I have made my own designed and developed Blogger theme. This site is developed and designed by me and you may know it is powered by Blogger.

Whatever, I am so talkative. Actually, I want to help others who want to know and learn how to convert HTML to Blogger XML easily and really it is so easy to convert than other Content Management System (CMS) such as Wordpress, Drupal, Magento etc.

It will take less than half hour to convert your HTML file into Blogger template.If you feel bored to convert and want to create your own Blogger template from scratch then marathon article will give your full guideline to create professional Blogger template.

So be conscious from the beginning and copy the necessary code from here for future.

Before starting the conversion of Blogger Theme, you need to know the following basic concept:

Blogger doesn’t support more than one file or any directory. So make a single HTML file where you have to put all code. That means, you can’t put CSS, JavaScript code in different folder or file, you have to put all code into one file.
Blogger supports the only XML to convert. So you have to rename your HTML file (with .html extension) into XML (with .xml extension). But it is not required to know the advance concept about XML. You can start without any knowledge about it.
Don’t afraid to see them as much complex code in other Blogger template. You will be happy to know that most of the codes are generated by Blogger automatically after installing the template.

Starting to Convert your HTML Template into Blogger XML Theme

Before starting the conversion, backup your HTML file to others.

Open your code editor (Personally I use Sublime Text 3) and paste your HTML code here and save as themename.xml (rename what you want but with .xml extension).

Cut the all code till <head> tag to above and paste the following code.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html class='no-js'
 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'
 xmlns:og='http://ogp.me/ns#'>
 <!-- <![endif]-->
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>

Find </head> tag and add the following code just before it.

<b:skin><![CDATA[
/**PUT YOUR ALL CSS HERE**/
]]></b:skin>

Body Customization: Probably you have seen the layout dashboard like below. There are Favicon, Header, Main, Sidebar, Footer section. It will be shown if we make it, otherwise, it will not be shown.

Favicon is created automatically. So we have to create others.

But we need to know the differences between section and widget in Blogger.

In blogger we have sections and winggets in that sections for example:

<b:section class='navbar' id='navbar' maxwidgets='4' name='Navbar' showaddelement='yes'>
  <b:widget id='HTML5' locked='false' mobile='no' title='.' type='HTML' version='1'>

   windget content .....

  </b:widget>
</b:section>

The section is the scope or area where one or more widget can be placed. To add widget we need not add in code, we need to add just section.

To know more details about the differences between section and widget read this article.

And read this to know the similarity between section and widget.

How to Create Section Blogger

To create a section you need to write the following code.
<b:section></b:section>
But it is not enough to show section in Blogger dashboard layout. You have to define the name, unique class, id, how many widgets you want to add to this section. To do this you have to write this with more attribution like below.

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

</b:section>

You have to put section code within specific div. But remove all image, anchor, text, header before pasting.

Header: It is required to keep a header section in Blogger theme. Blog name/Logo is shown here. So create header section within your logo div.
Put the following code within your logo div.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

  <b:widget id='Header1' locked='true' title='' type='Header'>

  </b:widget>

</b:section>

Main: Now find the div area where you want to show post, article.
Now put the following code within the article or main div.

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'>
</b:widget></b:section>

Learn What is Widget and how to use?

Sidebar: Put the following code within sidebar div.

<b:section class='sidebar' id='sidebar' preferred='yes'></b:section>

Footer: Similarly Main and Sidebar do for Footer. Put the following code within footer div.

<b:section class='footer' id='footer' preferred='yes'></b:section>

If you need to add more section, you can add.

Now you are ready to install your first own developed Blogger Theme. Upload your XML theme and see what changes.

Let's start designing Blog Template!

First, open your Text Editor from your Computer. You can also use Notepad++, Sublime Text Editor, Geany, Bracket, Atom, Visual Studio Code etc.

If you can design in Photoshop, Gimp or any Photo Editing Software, it would be better to design of your Blog in PSD file.

Now, we have to determine the layout of Blog, we want to make our Blog template to look at. Generally, a blog template has two type page:

Blog Home Page - Where all posts (with jump break) are available.
Blog Article/Post Page - Where we see the full article or post.

So if we have to design three several HTML templates, though both of all have some similar layouts: Header, Header Navigation Menu Bar, Post Wrapper, Footer.

The Basic Layout of Blog

1. Header Layout: In header layout, you can put header menu, the logo of your blog, search section, social menu, banner ads (728X90).

2. Header Navigation Menu Bar: It should be placed just after the Header Layout. You can make it fixed top menu after scroll. Your navigation menu bar must be user-friendly. It is highly recommended by Google if you want to display AdSense Ads.

3. Post Wrapper: It is the layout of displaying post or article. In Homepage of Blog, it shows several posts with jump break, but in Article Page, it shows only a post with full length. If you want to display any Ads, you can do it here.

4. Sidebar: A blog can have one or two sidebars even no sidebar. In sidebar layout, you can put several widgets: Recent Posts, Popular Posts, Ads, Search Bar, Tags, Archives etc. The ratio of the width of Post Wrapper & Sidebar should be 7:3.

5. Footer: Footer is the layout at the bottom of the blog. You can divide it into several sections. Footer can contain widgets like Sidebar Layout. You will have been seeing many of blogs don't have a larget footer.

Layout Idea of Blog Template

If you want to choose the different layout of your blog, you can get this idea from anywhere. I have found some awesome blog layout idea on Pinterest.

Designing Blog Home Page

A blog home page should have the following layouts:

Header
Navigation Menu Bar
Post Wrapper
Sidebar
Footer

Download Sample Blog Home Page HTML Template

Designing Blog Article Page

A blog article page should have the similar layouts of the home page. But at the end of the post, You can integrate 'Similar Posts', 'Author Box', 'Ads', 'Comments Section' etc.

Download Sample Blog Article Page HTML Template.

Responsive HTML Template
To make supportable your HTML template for all devices (Laptop, Tab, Smartphone etc), you must build responsive template. Without this reason, you should emphasize on RWD(Responsive Web Design) because it is highly recommended by Search Engine to rank up your Blog.

Read, Why RWD is important for SEO. - Search Engine Journal.

You can make responsive Blog HTML template with using CSS Framework easily. Not only for RWD, CSS Framework will help you to build your HTML template very fast and professional.

Some most popular CSS Frameworks are Bootstrap, Foundation, W3CSS, Cascade etc.

If you don't want to make your Blog responsive without using CSS Framework for some reasons (Slow loading one of the reason), you can do it with using media query in your CSS.

We have already used this process (You will see this in downloaded HTML File).

Use the following Media Query within your CSS Code to make responsive Design.

@media (min-width: 1281px) {
  
  /*CSS For this device*/
  
}
@media (min-width: 1025px) and (max-width: 1280px) {
  
  /*CSS For this device*/
  
}
@media (min-width: 768px) and (max-width: 1024px) {
  
  /*CSS For this device*/
  
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /*CSS For this device*/
  
}
@media (min-width: 481px) and (max-width: 767px) {
  
  /*CSS For this device*/
  
}
@media (min-width: 320px) and (max-width: 480px) {
  /*CSS For this device*/
  
}

Finaly:
We have a Basic blogger blogspot code who can use IN the HTML theme to CONVERT it to BLOGGER blogspot XML template:

<html lang="en">
<!-- Head Area -->

   <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!--The above 3 meta tags *must* come first in the head any other head content must come *after*

these tags-->
    <title>My First Blogger Theme</title>
<!-- Bootstrap HTML5 Area -->
    <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"

crossorigin="anonymous"/>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"

      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"

crossorigin="anonymous">

</script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<!-- b:skin Area -->
   <b:skin><![CDATA[

    /**PUT YOUR ALL CSS HERE**/
    ]]></b:skin>
  </head>
<!-- Body Area -->

<body>
    <div class="header-wrapper">
      <div class="container">
        <div class="brand">
          <!--Put Header Section Here-->
          
        </div> 
      </div>
    </div>
    <div class="content-wrapper">
      <div class="container">
        <div class="row">
          <div class="col-md-9">
            <div class="post-wrapper">
              <!--Put Main Section Here-->
              
            </div>
          </div>
          <div class="col-md-3">
            <div class="sidebar-wrapper">
              <!--Put Sidebar Section Here-->
              
            </div>
          </div>
        </div>  
      </div>
    </div>
<!-- footer Area in body -->

    <div class="footer-wrapper">
      <div class="container">
        <p>Powered by <a href="http://www.blogger.com">Blogger</a></p>
      </div>
    </div>
<!-- jquery load script if needed -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </body>
</html>

What Next?

The design of this template is like as:

We have said to show the post we created, it needs a section. Creating a section on Blogger theme is very easy.

Create Responsive Blogger Template from Scratch

Alternative method using TemplateToaster but is very fixed !!!

Rules of creating section in Blogger:

1. Each section has the starting tag and ending tag. Starting tag is <b:section> and ending tag is </b:section>. After publishing post if you inspect section from browser with Inspect element, you will see a div class instead of section. But in Blogger HTML Editor the sections are not changed to div class.

2. Each section must have an unique class and id. Naming the class and id of one section to another section is illegal. Since section is converted into div, the class and id of section are remain in div as attributes. So we can customize the design of section by this class and id.

3.You are not allowed to nested of section. Under a section, creating another section is not valid.

4. You can insert only the given attributes.
5. It would be better to create section under a div.

Attributes of section tag:

The given char will show why, how you will use attributes within section tags.

Attributes	Values	Required/Optional	Refers to
id	Unique name. Only letters and numbers are allowed. Example: header, navbar, sidebar, footer etc.	Required	Determining and customizing section with id.
class	Same as id.	Optional	Determining and customizing section with class.
maxwidgets	In numbers. Example: 1, 2, 3, 10 etc.	Optional	How much widgets we want to keep within this section.
showaddelement	Values of this are in Boolean. Yes and No.	Optional	If yes then the section will allow to add gadgets as widget, otherwise none.
growth	horizontal and vertical.	Optional	If vertical then section will be arranged side-by-side. Othewise stacked.

What is widget in Blogger?

We can call it Blogger plug-in. If we want to insert or install external gadgets then widget can create the scope to plug-in Blogger section. By default Popular posts, Search Bar, Email Subscription, Link List, Images, Text, Labels, HTML/CSS/JavaScript Code etc. are available on Blogger as gadgets.

Rules of widget:

1. You can use starting and ending tag in declaring widget. Starting tag is <b:widget> and ending tag is </b:widget>. Or you can use only single closing tag as <b:widget/> . After publishing post if you inspect widget from browser with Inspect element, you will see a div class instead of widget. But in Blogger HTML Editor the widget are not changed to div class.

2. Each widget must have an unique id and a type attributes. Naming the class and id of one section to another section is illegal. Since widget is converted into div, the id of widget are remain in div as attributes. So we can customize the design of widget by this id.

3. You are not allowed to nested of widget. Under a widget, creating another widget is not valid.

4. You can insert only the given attributes.
5. You must have to create widget within create section.
6. You are not allowed to insert HTML within widget.

Attributes of widget tag:

Attributes	Values	Required/Optional	Refers to
id	Unique name. Only letters and numbers are allowed. Example: header, navbar, sidebar, footer etc.	Required	Determining and customizing section with id.
type	Header, Blog, Profile, PageList, AdSense, Attribution, HTML	Required	Define the type of widget.
locked	yes, no	Optional	If yes then you can't delete or move this widget.
title	Put any title name. Example: Tools, Advertisement, Lists etc.	Optional	Show the title of this widget.
pageType	all, archive, main, item, static, all	Optional	Define the page type of widget.
mobile	yes, no, default	Optional	If yes, then the widget will be shown on mobile device.

Differences between Section and Widget in Blogger

Section	Widget
Section is independent area.	Dependent Page Elements that depends on Section.
Each Section can hold single or multiple widgets.	Widget can't hold section.
Section can't be added dynamically.	Widget can be added from Page Elements Tab (Add a Gadget)
Section has no attribute to control displaying or hiding on mobile devices.	Widget has an attribute to control displaying or hiding on mobile devices.
Section has no title attribute to display or hide any title.	Widget has title attribute to display or hide the name of title.
Section allows to add inner HTML directly.	Widget doesn't allow to add inner HTML directly.

Similarity between Section and Widget in Blogger

Section	Widget
Section can't hold another section.	Widget also can't another widget.
In published blog Section tag is replaced with a new div.	Widget is also replaced with a new div.
Each Section has unique id.	Each Widget has unique id.
Section has no attribute to control displaying or hiding on mobile devices.	Widget has an attribute to control displaying or hiding on mobile devices.
Section has no title attribute to display or hide any title.	Widget has title attribute to display or hide the name of title.
Section allows to add inner HTML directly.	Widget doesn't allow to add inner HTML directly.

Advantages of naming the class of section:

1. Though it is optional to name the class of section, we should add it because, the naming will help Blogger to determine how to transfer blog content when changing theme.

2. The native name of classes are ‘navbar’ for navigation menu, ‘header’ for header section, ‘main’ for post section, ‘sidebar’ for sidebar section where we put popular post, recent post, labels etc. and ‘footer’ for footer section of blog.
Now create new sections and widgets, where you want to put this. Without header & blog widget, I do recommend, create all section but it would be better to no create widgets in editor, since you can add widgets from Dashboard → Layout.

How to Make Blogger Mobile Responsive Menu

You can make top bar responsive navigation menu for Blogger theme as you have done on raw HTML template. Using static Navigation menu in Blogger is the best way to avoid many problems. Though you can use ‘Pages’, ‘Link list’ gadget to insert link dynamically into your menu, it will be difficult for drop down menu.

So you don’t need to dynamic data as you did and will do for others layout on Blogger. If you use Bootstrap Framework, then you can use navebar from here Or you can check the actionable article about responsive menu from w3schools.

Put the codes into your XML theme, where you want to show navigation menu bar. After creating Mobile responsive menu just paste the targeting URLs into anchor tags. Example:

<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>

But you can dynamic homepage URL into <li></li> tag as <li><a expr:href='data:blog.homepageUrl >Homepage</a></li>

Making Dynamic Blogger

Since the basic structure of Blogger Theme are:

1. Header

2. Blog

3. Sidebar

4. Footer

we should make this dynamic so that we don’t need code again.

1. Making a Dynamic Header:

Put the following code in header div.

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

2. Making Dynamic Blog Post:

Put the following code in post div.

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

3. Making Dynamic Sidebar:

Put the following code in sidebar div.

<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
</b:section>

4. Making a Dynamic Footer:

Put the following code in footer div.

<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
</b:section>

Uses of Dynamic Default Data in Blogger

Blogger offers some default data tags by which we can call specific data to show. Example: If we want to the name of author of published post in every post, then we can use <data:post.author/> .

Use this after the following tags.

<div class='post-footer-line post-footer-line-1'>

Similarly, there are many Blogger data tags to show specific data in published Blog. This Blogger Data Tags will work only in Blog widget.

Blogger Data Tags	What Show
`<data:post.dateHeader/>`	The post's date as header.
`<data:title/>`	The blog's title.
`<data:description/>`	The blog's description.
`<data:olderPageTitle/>`	Title of the older page of posts.
`<data:newerPageTitle/>`	Title of the newer page of posts.
`<data:commentLabel/>`	Number of Comments.
`<data:authorLabel/>`	It will show "posted by".
`<data:post.title />`	The post's title.
`<data:post.body/>`	The post's content.
`<data:post.author/>`	The post's author name.
`<data:post.url/>`	The post' url link.
`<data:post.timestamp/>`	The post's date and time.
`<data:label.name/>`	The post's label.

You can get more Blogger Data Tags from Blogger Support.

What is dynamic anchor tag in Blogger?

Dynamic Anchor In Blogger is converted to general anchor text with URL. Example: If the URL of homepage be http://www.compromath.com then the following tag will be converted <a expr:href='data:blog.homepageUrl >Homepage</a> to
<a href="http://www.compromath.com">Homepage</a>

Some dynamic anchor tags for Blogger Theme

Dynamic Anchor URL	What Show
`<a expr:href='data:blog.homepageUrl >Homepage</a>`	A text with homepage’s URL
`<a expr:href='data:post.url'>Read More</a>`	Read More Text with Post’s URL
`<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a>`	Label Name with Label’s URL
`<a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>`	Newer Post Text with Newer Post URL
`<a expr:href='data:post.olderLinkUrl'><data:post.newerLinkText/></a>`	Older Post Text with Older Post URL
`<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>`	Author’s name with URL
`<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>`	Comment Text to comment with URL

Advanced More Dynamic Operation: Show/Hide, Custom Design, Landing page depending on page type and URL

If we want to hide sidebar in Homepage but want to show in post, page we have published or if we want to show separate and new design of body when the URL of blog is http:www.compromath.com/p/contact.html, then it has access to do it with using conditional tags. Using conditional tags, we can use additional HTML, CSS, JavaScript as we want and this make Blogger more dynamic.

Hide Sidebar and make Squeeze page for homepage but post, page.

You can put the code before </head> tag or after <body> tag.

<b:if cond='data:blog.pageType == "index"'>
<style>
.sidebar{display:none;}
.post-wrapper{width:100%}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static"'>
<style>
.sidebar{display:block;}
</style>
</b:if>
</b:if>

Learn more dynamic conditional tags for Blogger. By this conditional tags you can target specific URL, Page etc.

#Making Dynamic Title Tag

Now let’s go to make dynamic your Blog title tag. It is combinational of Blogger Data Tags and Conditional Tags.

Replace your <title></title> tag with the following codes.

<b:if cond='data:blog.pageType == "index"'>
<title>Blogger, Code and Ubuntu Platform - <data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>

Replace Blogger, Code and Ubuntu Platform with your desired title name for your blog.

#Custom Design Blogger Templates with CSS

We have already finished 80% of Blogger Theme Development. The rest 20% is about custom designing with CSS.
Before editing the design you should learn how to edit Blogger template.

Finding all class & id of div, section, nav etc is so difficult, bored, time-wasting by manually. But I will tell you the tricks to collect all class and id with default CSS within few seconds.

1. Copy all the free CSS code for Blogger from the link.

2. Paste on to beatify or formatting.

3. After formatted copy the all CSS and paste on any HTML/CSS editor.

4. Modify CSS class and id if any have bad formatted.

5. Paste on your Blogger Theme within <b:skin> [[ /******CSS ******/ ]]></b:skin>.
6. Save your theme.
7. Next customize your CSS with inspector tools from browser.

Tips for Bootstrap: You can insert CSS class into specific HTML element. Suppose if you want to insert Bootstrap label into <data:post.author/>, then wrap this elements with span and insert label class as below:

<span class='label label-success'><data:post.author/></span> 
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>

Tips for Font-Awesome: You can insert Font Awesome icon as below.

<span class='label label-success'><i class='fa fa-user'/><data:post.author/></span>

More Blogger Theme Customization

#How to arrange Author, Labels, Date up and down from post body?

1. First go to Blogger Dashboard → Layout → Blog Posts → Edit and you will see an pop window.
2. From ‘Post Page Options’ check the button what you want to show and uncheck the option you want to hide.
3. After scrolling down you will get ‘Arrange Items’. Drag your selected item up and down to set.
4. Save.

If it doesn’t work then move related code from Blogger Editor by manually.

#How to add jump break in Blogger posts:

See this article about how to add jump break / read more button on Blogger.

#How to customize date header Blogger:

Add the following CSS to Blogger Theme as according to your customization.
.date-header{}

#How to show/hide labels on Blogger:

Add the following CSS to Blogger Theme

.post-labels{display:none;visibility:hidden} to hide and
.post-labels{display:block;} to show.

#How to remove date and time from Blogger post:

Put the CSS Into your Blogger Theme.
.post-timestamp{display:none;visibility:hidden}

#How to add date and time in Blogger:

Go to Blogger Dashboard → Layout → Blog Posts → Edit → Post Page Options
Check the date option you want to show.

Or

Use the following code in your Blogger theme after <div class='post-footer-line post-footer-line-1'>

<span class='post-timestamp'>
 <b:if cond='data:top.showTimestamp'>
   <data:top.timestampLabel/>
   <b:if cond='data:post.url'>
     <meta expr:content='data:post.url.canonical' itemprop='url'/>
     <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>

<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/>

</abbr></a>
   </b:if>
 </b:if>
</span>

# How to create a blogger blogspot template using bootstrap

Part 1

Part 2

#How to change author name in Blogger:

Find for <data:post.author/> from your Blogger HTML editor and replace with your desired name with p tag. Example: <p>Elliyas</p>

#How to remove author name from Blogger posts:

Put the CSS Into your Blogger Theme.

.post-author vcard {display:none;visibility:hidden}

Creating professional Blogger theme depends on how do you know code, how do you inspect element, stylesheet, how is your concept, idea to design. Though this tutorial provides the guideline to create Blogger theme professionally, your attempt & patient will define how much skilled you will be next.

Spesial Thanks to Elliyas Ahmed for the great job about blogger blogspot template design

The technologies and requirements have also changed and user habits such as the use of smartphone and social networks choose (facebook, twitter, etc.) should not ignore these changes, instead use them for the benefit of enterprise your

3 STEPS TO CONVERT ANY WORDPRESS THEME INTO BLOGGER XML TEMPLATE

Firstly, You have to upload your WP Theme in public IP. If your selected WordPress theme is already uploaded in website that can access through INTERNET, then skip this step.
Convert your WP Theme into HTML. You can convert any WP Theme to HTML by using HTTRACK! Actually, HTTRACK downloads any website in HTML format. It doesn't download any Server scripting language.
Then convert HTML Template to Blogger. We will use XML dynamic code instead of PHP.

If you need more help for conditional Tag, dynamic title, blog title, post body, search page, menus, label, category etc you can follow this mega Tutorial - Blogger Theme Development Tutorial, that will teach you how to create Blogger template.

Resource

Videos

https://www.youtube.com/channel/UCCDjoOPSNiuLJX06HirPjOA

https://www.youtube.com/watch?v=2Qwi8-sNL6A

HOT https://www.youtube.com/watch?v=CrSC1ZA9j0M

Reblog:

http://htmledit.squarefree.com/
https://www.compromath.com/2017/04/convert-html-to-blogger-xml-template-theme.html
https://www.compromath.com/2017/07/create-blogger-template.html#difference
https://www.compromath.com/2017/04/convert-html-to-blogger-xml-template-theme.html

https://www.youtube.com/watch?v=xImAlKa6jsQ

https://www.youtube.com/watch?v=Wd33WS2jU7o

https://www.youtube.com/watch?v=Ii_T4cchzEA

http://completepcguide.blogspot.com/2013/09/how-to-run-html5-or-any-templates-on-blogger.html

https://www.compromath.com/2019/09/convert-wordpress-theme-to-blogger-xml.html

http://books.gigatux.nl/mirror/googlepedia/ch23lev1sec13.html

https://medium.com/@mrnerd9/how-to-make-your-own-blogger-templates-48b4d75ec7a2

https://htmltoxmlparserfor.blogspot.com/

HOT http://bloggertricking.blogspot.com/2016/09/how-to-convert-blogger-template-into.html

HOT https://www.techrbun.com/make-blogger-full-width/

HOT https://www.problogbooster.com/2013/07/how-to-build-responsive-blogger.html

Tools & links & Themes to convert

http://hilite.me/

https://colorlib.com/wp/best-free-tumblr-themes/

https://www.youtube.com/watch?v=RLfNda1McsM

https://colorlib.com/wp/parallax-website-templates/

https://preview.themeforest.net/

https://mashable.com/2008/05/17/70-plus-new-and-beautiful-blogger-templates/?europe=true

HOT http://www.responsinator.com/

More information here


Facebook @istogrami Visit us on facebook if you want to receive updates and news about improving your website and online marketing techniques through your website !!!	ISTOGRAMI Our website in WIX platform proposed by us for those considering to set up e-shop or reservation system, fast and safe continuously upgradeable platform Amazingly issues with the latest technology at your service.	Istogrami Portfolio We set up on the platform Google wonderful websites and blog, Online magazines and Newspapers, Fast secure server, easy SEO, Custom Domain mames and all the tools of the Google readily available at your service. !!!	Web Templates 365 Our webside with threads (Templates) are available in platform Google the proposed ones are available in Wordpress platform, here you see the Live Demo of topics to choose what you like

NEW !!! You can actively participate in the wordpress911 team to ask and answer questions to upload articles and videos register » Here

Links: You can download the best WordPress Woocommerce templates HERE

13 comments:

lemon hasanFebruary 6, 2019 at 5:36 AM
Ssc result 2019
We appreciate you sharing excellent information. Your site is really cool.
I’m impressed by the details which you’ve put on this site.
It reveals how effectively you recognize this subject.
Job circular
Bookmarked this web page, will come back for more articles.
You, buddy, ROCK! I found simply the information I already searched everywhere and
simply couldn’t run into. What a perfect website.

BiswabhusanAugust 28, 2019 at 7:42 AM
Excellent Job! Thanks to Admin for Sharing such useful information related to Health Benefits. I bookmarked this Link and Shared in Facebook. Keep Sharing such good Articles. Additionally, Sharing some useful links below.

Convert PSD To HTML Using CSS Framework Bootstrap
Hire a dedicated Social Media Marketing Manager
Give live to your Business letters. Use the power of HTML Templates
Keyword Targeted On Page SEO Optimization
Be your Own Boss - Get Started with your Own Blog
james johnOctober 16, 2019 at 5:37 AM
The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
website development
UnknownNovember 4, 2019 at 10:54 AM
Given article is very helpful and very useful for my admin, and pardon me permission to share articles here hopefully helped:
Erp In Chennai
IT Infrastructure Services
ERP software company in India
Mobile Application Development Company in India
ERP in India
Web development company in chennai
Vainavi TechnologiesNovember 25, 2019 at 6:35 AM
I am really impressed with your blog article, such great & useful knowledge you mentioned here. Your post is very informative. I have read all your posts and all are very informative. Thanks for sharing and keep it up like this.
Website Designer In Nashik
Facebook Marketing in Nashik
SEO Agency In Nashik
SEO Experts in Nashik

Brandon WilliamDecember 14, 2019 at 6:54 AM
Thanks for sharing this useful post. If you happen to run a well-liked web site then the probabilities are that lots of people will wish to add movies. This could put severe pressure on the servers of no matter on-line video conversion service you employ. If you want to learn more click please here MP3 to М4А
Biswajit DasDecember 16, 2019 at 6:11 PM
Nice article. It's very helpful to me. Thank you for share with us. If you want to Check your website is mobile friendly or not with responsive web design checker online tool.
Halal ITJanuary 23, 2020 at 11:59 AM
This is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.

Website Design and Development Company
Website Design Company
Website Development Company
Wordpress Customization comapany
SEO Company
digital marketing company
Brandon WilliamFebruary 5, 2020 at 3:36 PM
Regardless of the benefits of the FLAC format, there are some conditions the place you'd wish to convert it to a different audio codec. For instance, on cell units measurement nonetheless issues, and you'll put almost twice as many MP3 information as FLAC information on a conveyable music participant. If you want to learn more about this topic please visit onlineconvertfree.com
Gerard ParsonsMarch 14, 2020 at 3:27 PM
Actually, there are also free audio books online. You just have to know where to look. Plus, we can listen to it anywhere we want to. onlineconvertfree.com
Gerard ParsonsMarch 14, 2020 at 3:27 PM
Actually, there are also free audio books online. You just have to know where to look. Plus, we can listen to it anywhere we want to. onlineconvertfree.com
best fitbit for womenApril 19, 2020 at 4:33 PM
Thank you for your good article. I like this content for its depth information. web design company

best fitbit for womenApril 19, 2020 at 4:33 PM
Thank you for your good article. I like this content for its depth information. web design company

Slide show

Pages

Blogspot theme design - Convert HTML to Blogger XML