Need a long time, to create your own blogger template, a lot hours, days even weeks to produce a quality template, that's why the templates makers are not happy if credit link in the footer section of his work edited by user, so when you use the free or premium template, then do not delete the link credit from the creator of the template, you must appreciate the work of others if you want to be respected.
The Steps to create your own templates
- Creating Layout
The first step in creating a blog template determines the placement of the header, content, sidebar, and footer structures.Here is the layout of the template that will be created
 |
| Template Layout |
- Edit the Code
- Go to Template then choose Edit HTML
 |
| Edit HTML Button |
- Clear all code inside html editor, then insert this code
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><HTML><head> <b:if cond='data:blog.isMobile'><meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/><meta content='noindex,nofollow' name='robots'/></b:if><b:include data='blog' name='all-head-content'/><meta content='####################' name='google-site-verification'/><meta content='####################' name='msvalidate.01'/><meta content='####################' name='alexaVerifyID'/> <meta content='index, follow, noodp, noydir' name='robots'/> <meta content='your country id' name='geo.country'/> <meta content='your name' name='author'/> <meta content='1 days' name='revisit-after'/> <meta content='Your country' name='geo.placename'/> <meta content='blogger' name='generator'/> <meta content='general' name='rating'/> <meta content='index, follow, snipet' name='googlebot'/> <b:if cond='data:blog.pageType == "index"'> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='website' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta content='id_id' property='og:locale'/> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.metaDescription' property='og:description'/> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> <title><data:blog.pageTitle/></title> <meta content='Your blog keywoards' name='keywords'/> </b:if> <b:if cond='data:blog.pageType != "index"'> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='article' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta content='id_id' property='og:locale'/> <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.metaDescription' property='og:description'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> </b:if> <title><data:blog.pageName/> - <data:blog.title/></title> <meta expr:content='data:blog.pageName' name='keywords'/>
</b:if> */
<style type="text/css"><!-- /* <b:skin><![CDATA[
/* Name : Your template name Date : this date
Updated by : your name
*/#navbar-iframe{height:0;visibility:hidden;display:none;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
a:link,a:visited{color:#1BC7A5;text-decoration:none;margin-left:0px;margin-right:0px;}
a img{border-width:0;}
img{max-width:100%;vertical-align:middle;border:0;height:auto;}
.quickedit{display:none;}
.clear{clear:both;}
body{background:#eaeaea;margin:0;padding:0;font-family: calibri;color:#2c3e50;}
]]></b:skin> <style type='text/css'>
</style> </head> <body> <b:section class='main' id='main'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section> </body> </HTML>
- Create outside wrapper layout
- Insert the following Css above the code </style>
#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}- Then insert the following code under <body>
<div id='wrapper'>- then close with </div> above </body>
- Create Header Block and Banner Header Block
- Insert the following CSS code above </style> :
#header-wrapper{width:100%;overflow:hidden;}
#header{width:262px;overflow:hidden;float:left;} #header-ads{width:728px;overflow:hidden;float:right;} .header .widget{padding:10px;}- Insert the following code under <div id='wrapper'>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Your Blog Title' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header>
- Create Content and Sidebar Blocks
Content in the left side : float : left and sidebar in the right side : float : right- Insert the following CSS code above </style> :
#artikel-wrapper{float:left;width:724px;overflow:hidden}
#sidebar-wrapper{float:right;width:300px;overflow:hidden}
#sidebar{padding:5px}
.sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}- for the side bar, insert the following code above
<b:section class='main' id='main'>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
- for the content, insert the following code below the sidebar code
<aside id='artikel-wrapper'>
- close the content with
</aside>above the last </div> code
- Create Footer block
The last step we will create 3 column footer block :
- Insert the following CSS code above </style> :
- Insert the following CSS code above </style> :
#footer-wrapper{width:100%;clear:both}
.footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}
.footer{width:32%;padding:5px}
#footer-1{float:left}
#footer-2{float:left}
#footer-3{float:right}- Insert the following code above the last </div> code
<div class='clear'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer-1' showaddelement='yes'/>
<b:section class='footer' id='footer-2' showaddelement='yes'/>
<b:section class='footer' id='footer-3' showaddelement='yes'/>
</footer>
0 Response to " How to Make Blogger Template for Beginner "
Post a Comment