Responsive Blogger Template Tutorial 1

Responsive Template View

Many blogger when the make a blog, they want to edit the basic template with their own and it happen to me too.

But now it doesn't matter because we can create our template without HTML, CSS or Web Design, skill.

Today, everything so easy as long you want to try it. I am not expert in HTMl or CSS Code, but i try make this article can help somebody like me as newbie blogger.

Ok lets start...

We want to create a blogger template like this :

Blogger template layout

Below The Basic Template code :

<?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:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
  <meta content='width=device-width, initial-scale=1' name='viewport'/>
  <link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'/>
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : you can edit
Author : edit with yours
Date : you can edit too
----------------------------------------------- */
]]></b:skin>
  </head>
<body>
<b:section id='header' class='header' maxwidgets="1" showaddelement="yes">

</b:section>

</body>
</html>

Copy the code above and paste into your blog (i believe you have understand how to change the template)
If there is no error message, that is mean you have create the blank template and ready to customized.

Next Lesson we will create the menu above the header. Ok

Responsive Blogger Template Tutorial 1

Thursday, June 9, 2016

Responsive Blogger Template Tutorial 1-Navbar

No comments:

Post a Comment