Cara Membuat Sendiri Template Blogger Yang Berkualitas - Bagian Kedua

Selamat berjumpa kembali sobat blogger dan pembaca sekalian. Sekarang anda berada pada bagian ke-2 dari artikel saya tentang cara membuat template bla... bla... bla...! Semoga anda telah membaca dan memahami bagian 1 dari artikel ini yang berjudul : Cara Membuat Sendiri Template Blogger Yang Berkualitas - Bagian Pertama


Kita kembali ke gambar di bawah ini, sob. Dan mari kita wujudkan kerangka luarnya ini. Hahaaa...!



Nomor 1 adalah outer-wrapper yang merupakan bungkus terluar dari template.
Nomor 2 adalah header-wrapper yang merupakan bagian teratas dari template.
Nomor 3 adalah navigation menu yang merupakan tempat bagi sekumpulan menu diletakkan.
Nomor 4 adalah content-wrapper yang merupakan bungkus bagi konten utama template (bidang merah)
Nomor 5 adalah sidebar  yang merupakan bilah sisi template. Di sini diletakkan sebelah kiri.
Nomor 6 adalah main yang merupakan bungkus bagi posting,
Nomor 7 adalah footer-wrapper yang merupakan bungkus kaki dari template,
Nomor 8 adalah credit-link yang merupakan tempat menyematkan beberapa link identitas.

Baik, mari kita bahas satu per satu. Saya berharap setelah anda menyelesaikan suatu tahapan maka jangan langsung menuju ke tahapan berikutnya. Lebih baik anda mengulangi tahapan yang telah selesai anda garap tersebut hingga benar-benar tertanam di benak. Cara belajar seperti ini agak lama tetapi mantap membekas. Jadi tidak mudah lupa.


Untuk memudahkan pembahasan, saya akan mendefinisikan pengistilahan yang nanti akan disebut berulang-ulang. Selengkapnya adalah :

<b:skin><![CDATA[*/
Kode-kode di sini disebut css skin
]]></b:skin>

<b:section class='main' id='main' showaddelement='yes'/>

Kode-kode di sini disebut section dan widget
</b:section>

<style>
Kode-kode di sini disebut css style
</style>

Css Skin saya pergunakan untuk mengatur tampilan versi Desktop. Css Style digunakan untuk mengatur tampilan versi Mobile. Dengan cara ini kita akan mudah memperbaiki template bila ada masalah. Juga memudahkan untuk modifikasi.

1. Membuat Outer-Wrapper



Anda telah membaca artikel saya pada bagian 1 dan mempraktekkannya? Jika sudah maka kita lanjutkan sekarang. 

Perhatikan kembali hasil pekerjaan anda pada bagian 1. Saat itu kita membuat pondasi template yang hasilnya adalah sebuah halaman kosong atau blank.

Di atas kode ]]></b:skin> letakkan kode css seperti ini :




Kemudian lengkapi kode ini : <b:section class='header' id='header' showaddelement='yes' /> menjadi :



Silahkan anda klik Simpan Template dan lihat hasilnya dengan cara klik Lihat Blog.


2. Membuat Header-Wrapper


Sebelum membuat header-wrapper ada satu hal yang harus anda perhatikan. Ingat, bahwa outer-wrapper merupakan bungkus terluar dari template yang akan kita buat. Dengan demikian semua bagian dari template yang akan ditampakkan ke pengunjung berada di dalamnya.

Untuk membuat Header-Wrapper anda perlu menambahkan kode pada css skin dan section. Selengkapnya kode-kode tersebut adalah :

Tambahkan kode ini pada css skin :

#header-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.5em;
display:block;
}

Dengan demikian struktur kode pada css skin berubah menjadi seperti ini :




Kemudian bungkuslah kode

<b:section class='header' id='header' showaddelement='yes' />  

dalam <div id='header'> ... </div>. 

Dengan demikian pada bagian section kodenya berubah menjadi seperti ini :





Silahkan anda klik Simpan Template dan lihat hasilnya dengan cara klik Lihat Blog.

Hadeuuuh, mulai pusing bro. Saya yang menulis artikel ini saja pusing, apalagi yang membaca. Atau jangan-jangan yang membaca malah tidak pusing. Haha.

Perjalanan kita masih jauh karena ini baru membahas dan mempraktekkan kerangkanya saja. Dan sampai di sini saya harapkan anda mengulang-ulangnya beberapa kali sampai paham benar karena mater-materi berikutnya akan lebih sulit.

3. Menyelesaikan Kerangka Yang Lain


Untuk kerangka-kerangka lain yang berukuran sama dengan header-wrapper adalah 

1. menu-wrapper
2. content-wrapper,
3. footer-wrapper,
4. credit-link.

Karena berukuran sama, maka anda bisa melakukan beberapa kali copas pada kode css yang ini :

#header-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}

Kemudian tinggal mengganti tulisan #header-wrapper menjadi #menu-wrapper, #content-wrapper, #footer-wrapper, dan #credit-link. Lalu semuanya ditambahkan ke css skin.

Selengkapnya menjadi seperti ini :

#outer-wrapper {
width:970px;
border:5px groove grey;
background:#DCDCDC;
margin:1em auto;
padding:0.5em;
display:block;
}
#header-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}
#menu-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}
#content-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
display:flex;
justify-content:space-around;
}
#footer-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}
#credit-link {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}

Setelah selesai pada bagian css skin, maka kita selesaikan bagian section. Caranya seperti ini :

Copy-Paste kode ini :

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>

Kemudian hasil copas tersebut dirubah nama-namanya. Selanjutnya ditambahkan pada bagian section. Hasilnya jadi seperti ini :

<div id='menu-wrapper'>
<b:section class='menu' id='menu' showaddelement='yes'/>
</div>

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>

<div id='content-wrapper'>
<b:section class='main' id='main' showaddelement='yes'/>
</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

<div id='credit-link'>
<b:section class='credit' id='credit' showaddelement='yes'/>
</div>

Silahkan anda klik Simpan Template dan lihat hasilnya dengan cara klik Lihat Blog.


Pembaca sekalian, bagi anda yang menemui kesulitan mengikuti turorial ini, bisa melihat langsung rangkuman sintaks yang merupakan gabungan dari artikel bagian 1 dan artikel bagian 2. Inilah rangkuman sintaks-nya yang bisa anda paste-kan langsung di template.



Jangan lupa untuk selalu  Simpan Template dan lihat hasilnya dengan cara klik Lihat Blog setiap kali selesai melakukan perubahan.

Sampai bertemu lagi di bagian 3.

IKLAN INI BUKAN BAGIAN DARI ARTIKEL

No comments: