Sunday, November 20, 2016

Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2]

Cara Lengkap Membuat Template Blogger Sendiri

Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan melanjutkan pembahasan dari posting sebelumnya yaitu pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]. Pada bagian kedua ini saya akan fokus membahas tentang bagaimana cara menambahkan bagian-bagian lain pada template blogger buatan sendiri ini, bagian lain yang saya maksud adalah header, sidebar, serta footer. Sebenarnya tanpa sidebar template blog juga bisa dikatakan lengkap sebab beberapa template ada yang memiliki tampilan tanpa sidebar. Tetapi kita akan membuat yang secara umumnya saja jadi untuk modifikasi lainnya yang berhubungan dengan tampilan akan saya bahas pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3]. Selain itu saya juga belum menambahkan menu, menu blog bisa kita atur belakangan.

Baiklah, tujuan kita adalah menambahkan bagian-bagian lain pada template blogger buatan sendiri ini. Sekarang kita telah sampai pada section yang berisi widget untuk menampilkan posting blog. Jadi di blog hanya tampil posting-posting blog (kalau ada). Pertama kita akan menambahkan header untuk blog. Header dalam hal ini berisi judul blog beserta deskripsi blog. Berikut ini kemajuan terakhir dari kode blog yang kita buat.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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 charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

<!-- SEO Title Tag -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>Archive untuk <data:blog.pageTitle/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Halaman Tidak Ditemukan | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
</b:if>
</b:if>

<b:skin><![CDATA[

]]></b:skin>
</head>
<body>
  <b:section class='main' id='Posting'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>
      <!-- TERDAPAT KODE PANJANG DISINI -->
    </b:widget>
  </b:section>
</body>
</html>

Pertama-tama tambahkan atribut showaddelement='no' pada tag <b:section> sehingga hasilnya menjadi <b:section class='main' id='Posting' showaddelement='no'>, hal ini bertujuan agar pada section tersebut tidak ada tombol tambah gadget/widget. Setelah itu jangan simpan dulu, selanjutnya kita akan menambahkan section baru diatasnya. Tambahkan kode <b:section id='Header' maxwidget='1' showaddelement='no'> diatas tag section sebelumnya, jadi dalam body terdiri dari kode seperti berikut.

<body>
  <b:section id='Header' maxwidget='1' showaddelement='no'/>
  <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>
</body>

Kemudian tambahkan section baru untuk sidebar dibawah section posting. Sehingga sekarang kita memiliki 3 section didalam tag body. Hasilnya seperti berikut ini.

<body>
  <b:section id='Header' maxwidget='1' showaddelement='no'/>
  <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'/>
</body>

Nah, selanjutnya kita akan menambahkan judul blog dan deskripsi blog pada bagian section Header. Sama seperti sebelumnya, hapus penutup pada section Header kemudian tambahkan kode berikut dibawah section Header.

<b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1'>
        <b:includable id='main'>
          <b:if cond='data:useImage'>
            <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
              <!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
              <b:if cond='data:mobile'>
                <div id='header-inner'>
                  <div class='titlewrapper' style='background: transparent'>
                    <b:include name='title'/>
                  </div>
                  <b:include name='description'/>
                </div>
                <b:else/>
                <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
                  <div class='titlewrapper' style='background: transparent'>
                    <b:include name='title'/>
                  </div>
                  <b:include name='description'/>
                </div>
              </b:if>
              <b:else/>
              <!--Show the image only-->
              <div id='header-inner'>
                <a expr:href='data:blog.homepageUrl' style='display: block'>
                  <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
                </a>
                <!--Show the description-->
                <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
                  <b:include name='description'/>
                </b:if>
              </div>
            </b:if>
            <b:else/>
            <!--No header image -->
            <div id='header-inner'>
              <div class='titlewrapper'>
                <b:include name='title'/>
              </div>
              <b:include name='description'/>
            </div>
          </b:if>
        </b:includable>
        <b:includable id='description'>
          <div class='descriptionwrapper'>
            <p class='description'><span><data:description/></span></p>
          </div>
        </b:includable>
        <b:includable id='title'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <h1 class='title'>
                <div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div>
                <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
                  <span itemprop='headline'><data:title/></span>
                </a>
              </h1>
              <b:else/>
              <h2 class='title'>
                <div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div>
                <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
                  <span itemprop='name'><data:title/></span>
                </a>
              </h2>
            </b:if>
            <b:else/>
            <h2 class='title'>
              <div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div>
              <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
                <span itemprop='name'><data:title/></span>
              </a>
            </h2>
          </b:if>
        </b:includable>
      </b:widget>

Sehingga hasil dari kode yang kita buat sejauh ini adalah seperti berikut ini.

<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 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'/>
</body>

Nah, sekarang kita sudah memasang beberapa komponen di blog, diatanranya header, main, dan sidebar. Seperti yang saya bahas pada posting bagian pertama kita akan membuat 5 komponen, sehingga kita tinggal menambahkan 2 komponen yang kurang, yaitu footer dan menu.

Nah, untuk menambahkan footer, ini sama saja saat menambahkan header dan sidebar, kita menggunakan section. Kenapa menggunakan section? Hal ini karena kita akan mengatur pada bagian footer dapat ditambahkan widget. Sobat bisa mengaturnya sendiri nanti pada template yang berbeda jika ingin memasang elemen tertentu pada bagian footer namun disini kita akan mencoba membuat bagian footer dapat diisi dengan widget/gadget.

Jadi selanjutnya tambahkan lagi section dibawah section sidebar, beri nilai ID "footer" kemudian biarkan dibawahnya tetap kosong seperti pada section sidebar. Jadi sekarang kode yang kita miliki adalah seperti berikut ini.

<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>
  <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'/>
</body>

Kemudian dibawahnya sobat bisa menambahkan copyright agar terlihat lebih formal dan dapat menunjukkan identitas pembuat template blog tersebut. Ada beberapa hal yang perlu sobat ketahui dalam pembuatan copyright, silakan pelajari lebih lanjut.

Selanjutnya kita akan menambahkan menu pada bagian atas blog. Berdasarkan gambaran yang saya berikan pada bagian pertama, kita akan membuat menu yang sejajar dengan judul dan deskripsi blog. Jadi penempatannya kita akan letakkan berdekatan dengan section header. Jadi letakkan kode berikut dibawah section header atau tepat diatas section posting.

<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>

Sehingga jadinya kode yang kita miliki sekarang adalah seperti berikut ini.

<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>

Sekarang kode yang kita buat bisa dibilang sudah memiliki komponen yang lengkap berdasarkan target yang saya berikan pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1], namun selanjutnya kita akan masuk pada bagian pra mengatur tampilan komponen yang telah kita buat tersebut, jadi kita akan membuat penyesuaian sebelum mengatur tampilannya menggunakan CSS. Silakan baca pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3].

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