Monday, March 13, 2017

Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]

Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]

Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan melanjutkan 3 posting saya sebelumnya yang berseri yaitu tentang Cara Lengkap Membuat Template Blogger Sendiri. Berikut ini lebih lengkapnya.

Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]
Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2]
Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3]

Nah, dalam posting ini yang akan saya bahas adalah kelanjutannya, sebelumnya saya sudah membahas sampai pada membungkus beberapa section dengan tag div. Tag div tersebut diberikan nilai ID tertentu dimana ID tersebut akan kita gunakan pada kode CSS. Jadi sekarang kita akan masuk pada pengaturan tampilan dengan menggunakan kode CSS.

Disini kita akan mengatur tampilan blog dari template yang telah dibuat dengan CSS, saya pisahkan dalam 2 bagian, bagian pertama adalah mengatur tampilan layout (Tata Letak) yaitu tampilan yang ini :

Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]

Dan yang kedua adalah mengatur tampilan keseluruhan dari halaman blog. Perlu sobat ketahui bahwa tampilan Layout/Tata Letak blog (seperti gambar diatas) diatur pada kode blog artinya tidak teratur secara otomatis sesuai tampilan blog jadi diperlukan kode CSS khusus untuk mengaturnya.

Mengatur tampilan Tata Letak/Layout

Untuk mengatur tampilan Layout yang terpenting sebenarnya hanya satu bagian kode CSS yang digunakan untuk mengaturnya secara keseluruhan apalagi jika sobat telah memahami penggunaan kode CSS maka akan semakin mudah mengaturnya. Kode tersebut adalah #layout. Misalnya untuk mengatur posisi header di layout cukup gunakan #layout #header-wrapper {...}, begitupun seterusnya untuk mengatur bagian lain, yang perlu sobat pahami disini adalah id/class yang digunakan untuk elemen-elemen yang ada dalam layout sama dengan id/class yang digunakan pada bagian HTML blog. Misal kode CSS untuk mengatur layout blog ini :

body#layout{padding:87px 10px 10px 10px}
#layout #Header{float:none}
#layout #main-wrapper-hadi{float:left;width:68%}
#layout #Sidebar,#layout #Posting{position:relative}
#layout #sidebar-hadi{float:right;width:32%}
#layout #footer-left,#layout #footer-center{float:left;margin:0;width:33.3%}
#layout #footer-right{float:right;margin:0;width:33.3%}
#layout #footer-hadi{margin:0;padding:0}
#layout #searchbox,#layout #copyright-hadi,#layout ul,#layout #profile-hadi{display:none!important}

Kode CSS diatas tidak akan mempengaruhi tampilan blog. Mengatur tampilan layout berguna agar pengguna mendapat gambaran tentang bagaimana posisi bagian-bagian dalam blog agar dapat menempatkan widget baru sesuai pada tempat yang di inginkan.

Mengatur tampilan halaman blog

Untuk mengatur tampilan halaman blog mungkin tidak saya jelaskan sangat jauh sebab untuk urusan tampilan sobat bisa mengaturnya lebih baik daripada saya tergantung selera dan keinginan sobat. Saya hanya akan menjelaskan tentang dasar pengaturannya. Seperti yang saya targetkan pada bagian 1 bahwa kita akan membuat template blog dengan tampilan seperti ini :


Sebelum itu saya ingin menyarankan kepada sobat untuk menggunakan browser dalam mengatur tampilan blog, entah itu Chrome ataupun Mozilla, sobat bisa memanfaatkan Inspeksi Elemen yang merupakan fitur dari kebanyakan browser. Pelajari lebih lanjut.

Inspect element by Google Chrome

Inspect element by Mozilla Firefox

Setelah itu anda dapat memanfaatkan fitur inspeksi elemen tersebut untuk mengatur tampilan blog sobat. Pertama-tama terlebih dahulu perlu diatur posisi tiap-tiap bagian yang telah dibuat sebelumnya. Terakhir kode HTML yang telah dibuat adalah sebagai 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>

Selanjutnya kita akan menggunakan kode CSS untuk mengatur posisi dan tampilannya, pertama-tama kita akan mengatur agar Header dan navmenu berada pada satu baris, kemudian karena Header dan navmenu berada dalam header-wrapper maka selanjutnya header-wrapper tersebut akan diberi warna background lalu diatur padding dan margin nya. Kode yang digunakan kurang lebih seperti berikut ini.

#Header,#navmenu {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

#header-wrapper {
    display: block;
    position: relative;
    margin: 0 auto;
}

#Header {
    float: left;
}

#navmenu {
    float: right;
}

Setelah itu coba perhatikan bagaimana tampilan blog sobat, tentunya ada kejanggalan yang terjadi, dimana objek yang berada di bawahnya merangkak keatas dan berada ditengah-tengah antara Header dan navmenu yang sudah berada dalam satu baris. Sehingga untuk mengatasinya kita perlu menambahkan objek <div class='clear'/> diatas penutup </div> yang ada diatas kode <div id='main-wrapper'>. Serta menambahkan kode CSS .clear{clear:both} diatas kode ]]></b:skin>.

<?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[
#Header,#navmenu {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

#header-wrapper {
    display: block;
    position: relative;
    margin: 0 auto;
}

#Header {
    float: left;
}

#navmenu {
    float: right;
}
.clear{clear:both}
]]></b:skin>
</head>
<body>
  <div id='header-wrapper'>
    <b:section id='Header' maxwidget='1' showaddelement='no'>
      ...
    </b:section>
    <nav id='navmenu'>
      ...
    </nav>
    <div class='clear'/>
  </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>

Perhatikan kode yang ditandai diatas, itulah kode yang saya maksud. Kemudian perhatikan, dengan adanya kode yang ditambahkan tadi header-wrapper dan main-wrapper jadi dapat dipisahkan karena ada kode <div class='clear'/> diantaranya. Selanjutnya kita lengkapi kode CSS tadi untuk memberi background pada header jadi kodenya menjadi seperti berikut ini.

#Header,#navmenu {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

#header-wrapper {
    display: block;
    position: relative;
    margin: 0 auto;
    background: #7195ab;
    padding: 5px 40px;
}

#Header {
    float: left;
}

#navmenu {
    float: right;
}

.clear {
    clear: both;
}

Untuk mengefisienkan posting ini, dengan asumsi bahwa sobat pembaca telah memahami bagaimana penggunaan properti kode CSS, artinya sobat sudah mengetahui cara penggunaan CSS, jadi untuk selanjutnya sobat tinggal meneruskan kode CSS yang sobat perlukan serta mencoba dan mencoba kode CSS seperti apa yang baiknya sobat gunakan untuk mengatur setiap bagian pada kode HTML yang telah sobat buat.

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 Comments