Sunday, November 20, 2016

Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3]

Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3]

Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan melanjutkan pembahasan dari Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1] dan Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2]. Pada posting seri ketiga ini saya mungkin akan membahas lebih singkat dari yang sebelumnya karena poin pembahasannya adalah membuat penyesuaian sebelum mengatur tampilan template blog menggunakan CSS, jadi disini kita belum menggunakan CSS.

Penyesuaian yang kita perlukan disini adalah membungkus seluruh section dan bagian-bagian utama dalam tag tertentu, misalnya kita menggunakan tag <div>. Jadi sections yang telah kita buat ditempatkan dalam tag tertentu kemudian kita beri nilai ID untuk tag tersebut yang akan kita gunakan untuk mengaturnya nanti dalam kode CSS. Kode terakhir yang telah kita buat adalah.

<body>
  <b:section id='Header' maxwidget='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1' visible='true'>
      <!-- TERDAPAT KODE PANJANG DISINI -->
    </b:widget>
  </b:section>
  <nav id='navmenu'>
    <ul id='menu'>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Sitemap</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
  <b:section class='main' id='Posting' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>
      <!-- TERDAPAT KODE PANJANG DISINI -->
    </b:widget>
  </b:section>
  <b:section id='Sidebar'/>
  <b:section id='Footer'/>
  <!-- COPYRIGHT JIKA PERLU -->
</body>

Pertama kita letakkan header dan menu dalam satu tag. Tuliskan kode <div id='header-wrapper'> diatas section header dan beri penutup </div> dibawah penutup </nav>. Jadi kode pada bagian tersebut akan menjadi.

<body>
  <div id='header-wrapper'>
    <b:section id='Header' maxwidget='1' showaddelement='no'>
      ...
    </b:section>
    <nav id='navmenu'>
      ...
    </nav>
  </div>
  ...
</body>

Kemudian selanjutnya bungkus pula section posting dengan div dan beri ID main-wrapper, lalu lanjut ke sidebar (sidebar-wrapper) dan footer (footer-wrapper). Sehingga kode akhir yang kita miliki sampai saat ini menjadi seperti berikut.

<body>
  <div id='header-wrapper'>
    <b:section id='Header' maxwidget='1' showaddelement='no'>
      ...
    </b:section>
    <nav id='navmenu'>
      ...
    </nav>
  </div>
  <div id='main-wrapper'>
    <b:section class='main' id='Posting' showaddelement='no'>
      ...
    </b:section>
  </div>
  <div id='sidebar-wrapper'>
    <b:section id='Sidebar'/>
  </div>
  <div id='footer-wrapper'>
    <b:section id='Footer'/>
    <!-- COPYRIGHT JIKA PERLU -->
  </div>
</body>

Selebihnya jika sobat merasa perlu membungkus lagi bagian-bagian yang lebih kecil sobat bisa melakukannya dengan memberi nilai ID yang berbeda. Dengan begini sobat sudah siap melangkah ke tahap mengatur tampilannya dengan menggunakan CSS sebab penyesuaian yang saya maksud telah selesai dilakukan. Namun perlu sobat ingat, jika nantinya diperlukan pemberian penyesuaian lagi mungkin tag div bisa ditambah ditengah jalan tergantung kebutuhan. Silakan baca lanjutannya pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4].

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.
Disqus Comment
Parse Tool