Membuat Template Blogspot Bagian 4 (Outer Wrapper)

Membuat Template Blogspot Bagian 4 (Outer Wrapper)

Saturday, July 28, 2012
Seperti yang dijanjikan Kang Onk untuk terus menyelsaikan pembuatan template sendiri, pada tutorial ini Kang Onk akan memberikan kode outer wrapper yang akan dibuat untuk template sendiri. Pada tutorial bagian 4 ini merupakan lanjutan dari sebelumnya yakni :

1. Template Bagian 1 Pola
2. Template Bagian 2 (Body Template)
3. Template Bagian 3 (Header Wrapper)

Pembahasan kali ini merupakan penggabungan kode dari Left Sidebar dan Righ Sidebar beserta Main Wrapper (yang berisi posting, comments, dan content-content lainnya) dalam menentukan lebar ditiap-tiap content. La, untuk itu sobat blogger yang setia mengunjungi blog KOD Tutor ini untuk lebih memahami apa yang dituliskan silakan lihat dulu artikel struktur dasar template yang pernah Kang Onk tuliskan.


Langkahnya adalah : 

1. Pada bagian 1 pembuatan template ini silakan sobat cari kode :

/* Outer-Wrapper
---------------------------------------- */
#outer-wrapper { /*code CSS outer-wrapper*/

      }

/* Headings
---------------------------------------- */

h2 {

    }

2. Lalu ganti dengan kode berikut :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
      width: 856px;
      margin: 0 auto;
      padding: 10px 0px;
      text-align: left;
      font: $bodyfont;
      }

#main-wrapper {
      width: 410px;
    margin: 0 10px 0;
      }

#left-sidebar-wrapper, #right-sidebar-wrapper {
    width: 180px;
    }

#main-wrapper, #left-sidebar-wrapper, #right-sidebar-wrapper {
      border: 1px solid $bordercolor;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
    }

#left-sidebar-wrapper, #main-wrapper {
      float: left;
    }

#right-sidebar-wrapper {
      float: right;
    }

.crosscol {
    text-align: center;
    margin: 10px;
    }

/* Headings
----------------------------------------------- */

h2 {
      margin:1.5em 0 .75em;
      font:$headerfont;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color:$sidebarcolor;
    }

3. Simpan Template dan lihat hasilnya, akaan tetapi masih terlihat polos alias tidak ada tampilan widget-widget yang terpasang.

Continued on the next article ( bag. 4 )