Template?

Sore.. Mimin mau bagi tutor nih. Mumpung gak ada kerjaan, masih nunggu tanggal 24-26 soalnya. Jadi sekarang hari terbebas mimin haha. Tapi tiap 2 hari sekali masuk. Mimin cuman mau bagi tutor simple saja.

Keahlian?

Pertama, kalian harus paham semua keadaan template. Jangan setengah-setengah ya, nanti kalo setengah-setengah, templatenya juga hasilnya setengah-setengah. Gak mau kan templatenya jadinya separo haha. Caranya? Pahami saja kode di editore template blogger. Usahakan pakai blog dummy saja, tapi udah ada juga post dummynya. Kalo templatenya simple sih, minim ada 1, menurut mimin. Tapi lebih banyak lebih enak kok. Kedua, kalian juga harus bisa CSS, minimal yang dasar-dasar saja semisal float, overflow, color, background, dll. Ketiga, yang semangat. Keempat, yang sabar. Kalo gak bisa tanya!

Mentahan HTML

Sudah ada sidebar widget, footer widget, header widget, blog1 widget.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
  <head>
    <title>
      <data:blog.pageTitle/>
    </title>
    &lt;style type=&#39;text/css&#39;&gt;/*&lt;!--<b:skin><![CDATA[]]></b:skin>&lt;/style&gt;
    <style type='text/css'>
      /*****
      CSS
      *****/
    </style>
  </head>
  <body expr:class='data:blog.pageType'>
    <div id='outer-wrapper'>
      <b:section class='headers' id='header-wrapper' preferred='yes'>
        <b:widget id='Header1' locked='true' title='Header' type='Header'/>
      </b:section>
      <div id='content-wrapper'>
        <b:section class='posts' id='main-wrapper' preferred='yes'>
          <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'></b:widget>
        </b:section>
        <b:section class='sidebars' id='sidebar-wrapper' preferred='yes'/>
      </div>
      <div id='footer-wrapper'>
        <b:section class='footers' id='footer1' preferred='yes'/>
        <b:section class='footers' id='footer2' preferred='yes'/>
        <b:section class='footers' id='footer3' preferred='yes'/>
      </div>
    </div>
  </body>
</html>

<style type='text/css'>/*<!--<b:skin><![CDATA[]]></b:skin></style>

CSS bawaan dari blogger, bundle.css dan authorization.css mimin non-aktifin, pake markup diatas, dan mimin pindah CSSnya dibagian /***** CSS *****/. Kenapa? Biar CSSnya gak bertumpuk-tumpuk dengan CSS yang akan dibuat kalian masing-masing. Nanti CSSnya yang spesifik, biar rapi.

CSS Reset

CSS Reset, berfungsi untuk mengurangi inkonsistensi browser yang dalam hal-hal seperti ketinggian garis default, margin dan ukuran font judul, dan sebagainya. Mimin ambil dari Eric Meyer v2.0.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License:none (public domain)
*/
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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
body {line-height: 1}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

CSS Framework

Framework CSS, untuk mengutamakan konsistensi tampilan artikel sebelum layout. Mimin ambil dari eksperimen www.dte.web.id/2013/05/fra....

/* ===============
   FRAMEWORK START
   =============== */
body {
  font:normal normal .8125em/1.4 Arial,Sans-Serif;
  background-color:white;
  color:#333;
}
strong,b {font-weight:bold}
cite,em,i {font-style:italic}
a {text-decoration:none}
a:hover {text-decoration:underline}
a img {border:none}
abbr,acronym {
  border-bottom:1px dotted;
  cursor:help;
}
sup,sub {
  vertical-align:baseline;
  position:relative;
  top:-.4em;
  font-size:86%;
}
sub {top:.4em}
small {font-size:86%}
kbd {
  font-size:80%;
  border:1px solid #999;
  padding:2px 5px;
  border-bottom-width:2px;
  border-radius:3px;
}
mark {
  background-color:#ffce00;
  color:black;
}
p,blockquote,pre,table,figure,hr,form,ol,ul,dl {margin:1.5em 0}
hr {
  height:1px;
  border:none;
  background-color:#666;
}
h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  line-height:normal;
  margin:1.5em 0 0;
}
h1 {font-size:200%}
h2 {font-size:180%}
h3 {font-size:160%}
h4 {font-size:140%}
h5 {font-size:120%}
h6 {font-size:100%}
ol,ul,dl {margin-left:3em}
ol {list-style:decimal outside}
ul {list-style:disc outside}
li {margin:.5em 0}
dt {font-weight:bold}
dd {margin:0 0 .5em 2em}
input,button,select,textarea {
  font:inherit;
  font-size:100%;
  line-height:normal;
  vertical-align:baseline;
}
textarea {
  display:block;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
pre,code {
  font-family:"Courier New",Courier,Monospace;
  color:inherit;
}
pre {
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
}
blockquote {
  margin-left:2em;
  margin-right:2em;
  border-left:4px solid #ccc;
  padding-left:1em;
  font-style:italic;
}
table[border="1"] th,table[border="1"] td,table[border="1"] caption {
  border:1px solid;
  padding:.5em 1em;
  text-align:left;
  vertical-align:top;
}
th {font-weight:bold}
table[border="1"] caption {
  border:none;
  font-style:italic;
}

CSS Layout

Setelah semua dasarnya terpasang, tinggal pasang CSS Layoutnya. CSS ini untuk mengatur element-element agar rapi. Tapi, CSS dibawah ini sudah saya tambahkan CSS bukan layout. Untuk merapikan saja. Silahkan lanjutkan sendiri..

div.blogger-clickTrap,span.widget-item-control {display:none}
#outer-wrapper {
  width:800px;
  margin:1.5em auto;
}
#header-wrapper {border:1px solid black}
#content-wrapper {overflow:hidden}
#main-wrapper {
  width:498px; /*** width asli dikurangi 2 kali width border ***/
  float:left;
  border-width:0px 1px 0px 1px;
  border-style:solid;
  border-color:black;
}
#main-wrapper .widget,#sidebar-wrapper .widget,#header-wrapper .widget,.footers .widget {padding:15px}
#sidebar-wrapper {
  width:299px; /*** width asli dikurangi 1 kali width border ***/
  float:left;
  border-width:0px 1px 1px 0px;
  border-style:solid;
  border-color:black;
}
#footer-wrapper {
  overflow:hidden;
  border:1px solid black;
}
.footers {float:left}
#footer1,#footer2 {
  width:248px;
  border-right:1px solid black;
  min-height:400px; /*** nilai min-height sesuai dengan height widget paling tinggi ***/
}
#footer3 {width:300px}

Hasil akhir:

Kalau mau tinggal nglanjutin, copas saja hasil akhirnya.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
  <head>
    <title>
      <data:blog.pageTitle/>
    </title>
    &lt;style type=&#39;text/css&#39;&gt;/*&lt;!--<b:skin><![CDATA[]]></b:skin>&lt;/style&gt;
    <style type='text/css'>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License:none (public domain)
*/
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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
body {line-height: 1}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ===============
   FRAMEWORK START
   =============== */
body {
  font:normal normal .8125em/1.4 Arial,Sans-Serif;
  background-color:white;
  color:#333;
}
strong,b {font-weight:bold}
cite,em,i {font-style:italic}
a {text-decoration:none}
a:hover {text-decoration:underline}
a img {border:none}
abbr,acronym {
  border-bottom:1px dotted;
  cursor:help;
}
sup,sub {
  vertical-align:baseline;
  position:relative;
  top:-.4em;
  font-size:86%;
}
sub {top:.4em}
small {font-size:86%}
kbd {
  font-size:80%;
  border:1px solid #999;
  padding:2px 5px;
  border-bottom-width:2px;
  border-radius:3px;
}
mark {
  background-color:#ffce00;
  color:black;
}
p,blockquote,pre,table,figure,hr,form,ol,ul,dl {margin:1.5em 0}
hr {
  height:1px;
  border:none;
  background-color:#666;
}
h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  line-height:normal;
  margin:1.5em 0 0;
}
h1 {font-size:200%}
h2 {font-size:180%}
h3 {font-size:160%}
h4 {font-size:140%}
h5 {font-size:120%}
h6 {font-size:100%}
ol,ul,dl {margin-left:3em}
ol {list-style:decimal outside}
ul {list-style:disc outside}
li {margin:.5em 0}
dt {font-weight:bold}
dd {margin:0 0 .5em 2em}
input,button,select,textarea {
  font:inherit;
  font-size:100%;
  line-height:normal;
  vertical-align:baseline;
}
textarea {
  display:block;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
pre,code {
  font-family:"Courier New",Courier,Monospace;
  color:inherit;
}
pre {
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
}
blockquote {
  margin-left:2em;
  margin-right:2em;
  border-left:4px solid #ccc;
  padding-left:1em;
  font-style:italic;
}
table[border="1"] th,table[border="1"] td,table[border="1"] caption {
  border:1px solid;
  padding:.5em 1em;
  text-align:left;
  vertical-align:top;
}
th {font-weight:bold}
table[border="1"] caption {
  border:none;
  font-style:italic;
}
/***
CSS LAYOUT
***/
div.blogger-clickTrap,span.widget-item-control {display:none}
#outer-wrapper {
  width:800px;
  margin:1.5em auto;
}
#header-wrapper {border:1px solid black}
#content-wrapper {overflow:hidden}
#main-wrapper {
  width:498px; /*** width asli dikurangi 2 kali width border ***/
  float:left;
  border-width:0px 1px 0px 1px;
  border-style:solid;
  border-color:black;
}
#main-wrapper .widget,#sidebar-wrapper .widget,#header-wrapper .widget,.footers .widget {padding:15px}
#sidebar-wrapper {
  width:299px; /*** width asli dikurangi 1 kali width border ***/
  float:left;
  border-width:0px 1px 1px 0px;
  border-style:solid;
  border-color:black;
}
#footer-wrapper {
  overflow:hidden;
  border:1px solid black;
}
.footers {float:left}
#footer1,#footer2 {
  width:248px;
  border-right:1px solid black;
  min-height:400px; /*** nilai min-height sesuai dengan height widget paling tinggi ***/
}
#footer3 {width:300px}
    </style>
  </head>
  <body expr:class='data:blog.pageType'>
    <div id='outer-wrapper'>
      <b:section class='headers' id='header-wrapper' preferred='yes'>
     <b:widget id='Header1' locked='true' title='Header' type='Header'/>
   </b:section>
      <div id='content-wrapper'>
          <b:section class='posts' id='main-wrapper' preferred='yes'>
            <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'></b:widget>
          </b:section>
          <b:section class='sidebars' id='sidebar-wrapper' preferred='yes'/>
      </div>
   <div id='footer-wrapper'>
        <b:section class='footers' id='footer1' preferred='yes'/>
        <b:section class='footers' id='footer2' preferred='yes'/>
        <b:section class='footers' id='footer3' preferred='yes'/>
      </div>
    </div>
  </body>
</html>

Demo

alamperwirap