Creating own blogger template from scratch

I always try to make my own blogger template. I try many times by searching but failed.

Here is basic code of my template. I save it & see my blog homepage is blank.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin>
  </b:skin>
</head>

<body>

  <b:section id='header' class='header' maxwidgets='' showaddelement='yes'>
  </b:section>

</body>
</html>




Now I decide look up of homepage. I like 2 columns.  I copy two column html layout from dynamic drive & make some changes for blogger.
css paste between <b:skin>  </b:skin>

Now I try to add some widgets to my template but get error message: widget must be in section. I can't understand but try again as below:


  <b:section id='Right1' class='sidebar' maxwidgets='' showaddelement='yes'>
 <b:widget id='HTML1' locked='false' title='Test HTML widget' type='HTML' />
  </b:section>

save & check. It works...!
I want to make a different type of home page, in which many columns, different layout of home & post.
I add css after </b:skin> code as below

This is for to show on homepage only:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Code here...
</b:if>
</style>

This is for to hide on homepage only:

<style type='text/css'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
Code here...
</b:if>
</style>

Posts is main feature in any blog. I add it by below code..

 <b:section id='main' class="main" maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
  </b:section>

Make some changes...
I want to add many things in small space so add tabs in sidebar...

Below is the code for adding tabs in blogger...


<script type='text/javascript'>
//<![CDATA[
function haakblog_oom(NBTID, id)
{
  var haakblog = document.getElementById(NBTID);
  var NBTs = haakblog.firstChild;
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
  var NBT = NBTs.firstChild;
  var i   = 0;
  do
  {
    if (NBT.tagName == "A")
    {
      i++;
      NBT.href      = "javascript:haakblog_ubah('"+NBTID+"', "+i+");";
      NBT.className = (i == id) ? "Active" : "";
      NBT.blur();
    }
  }
  while (NBT = NBT.nextSibling);
  var Halamans = haakblog.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function haakblog_ubah(NBTID, id) { haakblog_oom(NBTID, id);
}
function haakblog_inisial(NBTID) { haakblog_oom(NBTID,  1);
document.write('');}
//]]>
</script>
<style>
div.haakblog div.NBTs {
height: 24px;
overflow: hidden;
}
div.haakblog div.NBTs a:hover, div.haakblog div.NBTs a.Active {
background-color: #eee;
}
div.haakblog div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.haakblog div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.haakblog div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.haakblog div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
<form action="haakblog.html" method="get">
<div id="haakblog" class="haakblog">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2  Title</a> <a>Tab 3  Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
</div>
</div></form>

I want to add one feature in comments. Enable youtube videos, images, smiley, html...


Add below code just before </head>


<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://yourjavascript.com/30014513125/youtubevideoinbloggercomment.js' type='text/javascript'/>

Now search for
<div class='post-footer-line post-footer-line-3'>

Add below code below it...


<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons <a href="http://pjoshi235.blogspot.com">@</div></a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold; font-color:#000000;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDrutijenA8YjPFuHsvsr_Cu5qe3ExjhaPqegevi72UiA600XhpHGVhpDMybyTFXRcnyXl9rBoMTHFo21uA15mApMo7alxz3sOt2BWYa2wstbVE2A8CArL4qxReE9tNS8QrWsEQhvrRA/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMOysoVB1ANnhU5H7QwhkismFuaHCXvYL_h4o0xe4x6FW0OnAmGaKQIRmS2BM3IsNUhMAoHZQhKwUfng-XECE7qcssPxc5sL5W62X6pAaOwBV3vmbPFubMw3lMJoix3bYBkkGEqlcYG4/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQ2h73Cra9hDlAsBqaND1DfZeBfjArs0IEJuPCjoSPw2s-5n8l_lWRfJ1kjS-elREQXojfPtASRPSFcBDuU7TRyvLXUkrN1osVzgYpYcrLy3fFcs7BtoA-TEKvznwQZLD3xK3c8q2e_A/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8afAejsmhUE0A5G-ZWCSdhZergkBNXaeoV-ZToqcjg4eruRnU_T4tVg9k2YXT1OB5rgEI4yc8Tm3dOd66VWUYQeDfd1_hGNb_uNk5EKvhRuy3TxAgu8AEMWiD_In36jnsDO5ukeG3B4/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjil0EDcuKeTw4id92M8pzQvITRw9EWqB6RYAafh_ZB7RJ5YosxisvUIFqoCZhhjM_48pot34l0TloiJeZQS3M0T436tUHlxLA2mwEAAPji_jUeKrhPm0pTIp0emGEnCr472GAW9zoEg4c/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWLNTBFu5WPDgQ97lx5h3kweOQ2Gvr6AP86PAdjeTl0ZhJjXXVUeteoqlF2Ts5SVd9aTppVdNtKoMNxhO6iL2yCk5T2zpTf0Xa_5y14t7TIYk0wSO23Mi50STPKJus-juxcCQ1aLyYKGU/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5m9qwJloAyYJBgbaBVdlJ8-Wt7ou9NEGEX8132xlw2X5CLhK-wHA_Bim2FB5SpvPse8JD_k-QI2t3NbpKky17MG2OH43ap57GE4Cpm3xOxWFhuYxxvcjpcU9W7wQtRGNdBOIq8s1wkg/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaXU96ZYuYcehqpofU_HGdLVDF7PwVB1rpEVgkhTy1j98oDC-dPPH55nGIzQzyzwWuQMqfDNQrlwsW3rB3dx3VQSX5iLKmRXGi5TgO-L_a47Dtspdn112NI3JyieJ8qUet7XSYG_pC6Rc/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfN0nO7XivAgwL9mHlsG6bUnHRUkDJ6THHD_sh7negw-tiebEcUU77X2_nSI8cFmg5R7Fi1D0wfmz8iuNq6kuOZiacuKofXBdxHgnO0YB29x8pQ0LbjaJXHAouJK7zDQECWwpR1SxReiQ/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRhJtThyphenhyphentffTUNZYQxUVvmtawYh52NJxd8ihz-oXZIj97HfEBc0vtz_mi1fq7bxFk5VHf5IDDS63OLsDYM1WtuKwuBff9AIgul_IIxeHIeMr2-IQhoAcrwEbsZ_fgHkJ32krj4AndpXsA/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilRdmmlPEtGbOT9sziu-aRc-cVZa-kE4ZKoNQxq_bMMLFQszzX4_kZCfu6Qm-Tk3f9DSWxZSfdO2X0KozNTD7vu8ydx3qunV2uycrefwXz0-132OJ2sAhpQ3jBXRp0IPLc3PpZKWga2W8/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdxl8ByjcVmIJSUxKCy4m8iyKOyTvKhWaIyNhyphenhyphenp1NoK2EHF3uZqYIydLs2UlyXSDAoJ-xEqbrlXUPqTaPaa0Wuct41yZJUA1thP5LfOxSLHt5wB6I5cnlqV4psLfwOvqwmeLF-us3HUZs/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJO1PK9IENsru3LGZDY2m94lQwz6uUbrVL-vkywMze4Sa2734cOWbvc9Gms7JCL7Hse-jHaYsJ_Ucd0-QNbskiVg7wiMmqMby5DBZ87nWqULcAxMAUyGR9Jys9d6MjIlLz0ajfA0q2Bjg/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_FSjb8djPhJklay3YPXpqPjRvfcrCLkLTXQTaRO9jt7op3hwRYyzhuJLAA_TeSXQQlLjKwXvtcvqWlL9L2hcSfsfuLy3rxefXgS-Fi0adKMnJ9Q03e7HCicw-TSjO2Y5cuIUhWnkhq5A/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdgRoCeKQxhNAAtJBBYjCuhKhZEyVPHzNQqDaN2SFw8QBjuj4XLPaBp5UGquHoq22WK4PqDyVgfSVcdcFMcaVwyngVLNSstS8W0zYGSYQbCe7nWPwGku9dqWAetUqPDMBF0UY6sd-JsI/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexExYhaOb_1oZoQsoxwVkHHmqsb-96td_5utLtqOw4g5go1G6DcZnr74CaAV2Qtfi-wNUAof7V8voGXM7ZAXNBzutgdW5DR21RKUCXDrAQwIH_IqM8EONd-bjjQkb_EpfhkV_DcgpMVM/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib4BNReFPmTLHBReiq0c4KZ8BvZyDnGJSB4qh2hvBFZPXFGRUglxe7HKYq77SoJJ__zgRMqksIVeMnFYGdS0NIkcoYQ9a8IDWPqcE2UTVqobkN9O8_FwywmvZ6z7guf-UQTNRxNLHvsBw/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1O8r9LTGoNQDEbW70XHg-WRVJy12wk6qFwjiZr4mTKL9ss5SqyA2BmOvuZrJa8K4IjeTSn8_1DluNOO_x3WaSj0-Y6MKQLPlAOy4hP776NMwQKQj1I6gaRsYEAlaS9sut9mwYXVX1kw/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0nsMoq0nLZipxj5V_ksEwjFun7eeFyV0nl2RF1CemAWn7YV6Y38tujEP9g5nQ_2gOMEE78vY08qRQbQ3wxtvdAuKtGLG_KZreXVLCFwrly0WVpZU525hyphenhyphenWbv90GTENJ2LdwZKcf6UmDE/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWvaxYxbMZ5RixPSeKa-QsYMp_b1vI4edarL42_rcL3KM_Ux3ZYHhcC5iSaxuZVv7XXTZGFZlz7lQFfxyb1k74Lc7pnG-pPZhqX7pNCaScbunGmYOj56_axozN_dRqyg8mzNi0IjXNXxk/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZnEeU3DSEnGVkq3qOh9mKD4gbmuK-oSHR9Ki8afocQbaWLT3goKS23z6TNordVpWITZK8VfX2Czwzk-mk7BC6SYCQXd3cz4xp9o_kzhkV2ucfuGV7Oqy-IU6rUzxw-FyJDOVuzhOWG1Y/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-x-Aks-VDf2j23p-IgWAzumQeRV_rI33UpDDXoipY_2d7PeBQs7B6szffTc0OmZBXjRTigEcTYDVhmWjstenH-orrsSIoA5V5MkJPZhwbgyRdRrnoTKVrBherCoTX-siIpOnsZKt_80/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-ateVLgoDXu2x9skL3wZoQMV3BkCEKg91ZL_63D-pNsF9EX565nI6HEGrGVU91VzYtAoLNg8nUJV2O4EelP0JLDx0-vUUFyVO51dBmS4uFmzTsqgGdhRwCLFD82FNnDOtslmX6upABs/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7V4k7KGovBhtWVcvH5XMmO4LhCBiVA6EiR0Y6o5vw7SVTCBeWtv-AZirwHI6CGg2y9_o9zee-YLvlmnW8UKhLekX51h1Nj3NBlnZwF7fjkTfW1hjfM5R_FHRHne8MJ19R-W7o87G_Yg/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjH-VvP-kwNC-8LpRbv0o0VJTk4gpEXE0UGlj6TVq3LFkkrEcgSKPPcFW908HLX8yFVM4H1wVCYN-dbC7I6GU5po345JZ6XbK4ABLrR6mBOukVokh6rusTgvBhZxFG4YVgCYbV7v5-l3Y/s1600/give_heart.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDrutijenA8YjPFuHsvsr_Cu5qe3ExjhaPqegevi72UiA600XhpHGVhpDMybyTFXRcnyXl9rBoMTHFo21uA15mApMo7alxz3sOt2BWYa2wstbVE2A8CArL4qxReE9tNS8QrWsEQhvrRA/s1600/smile3.gif'/></div></a></span>
</div></b:if>

I can add more images as smiley...

Now go to bottom.
Add below code just before  </body>



<script src='http://yourjavascript.com/3544111646/youtubevideos.js' type='text/javascript'/>
<script src='http://yourjavascript.com/5611007145/pics-comments.js' type='text/javascript'/>
<script src='http://yourjavascript.com/0516141543/kolobok-threaded.js' type='text/javascript'/>
<script src='http://yourjavascript.com/4755111456/helplogger-blogspot-com-smileys.js' type='text/javascript'/> <noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>.</span></a></noscript>
<script src='http://yourjavascript.com/1465951181/nccode.js' type='text/javascript'/>


Add below code to change style of avatar image in comments...


.comments .avatar-image-container {
width: 40px;
height: 40px;
max-height: 40px;
margin:0px 10px 0 5px;
padding: 0px;
border: 4px solid #4D90F0;
border-radius:40px;
}

.comments .avatar-image-container img {
overflow:hidden;
width: 40px;
height: 40px;
max-width: 40px;
border:0 !important;
border-radius:40;
}

Credit:
- http://www.w3schools.com
- http://postoneeighth.blogspot.com
- http://www.dynamicdrive.com
- http://helplogger.blogspot.com
- http://www.haakblog.com
Space for special words or image