Monday, March 4, 2019

Membuat Template Blogger Part 6 ( Lebih Lanjut Kode Template Bagian Body )

Lebih Lanjut Kode Template Bagian Body

Dalam tutorial ini akan dijelaskan lebih lanjut tentang beberapa perintah khusus yang biasanya ada di bagian body.


Lihat contoh kode berikut ini:


Secara default, setiap blok harus dibungkus dengan tag div dan tag b:section. Setiap tag div dan b:section dinamai (identifikasi) dengan menggunakan perintah id. Perintah tersebut juga dapat diklasifikasikan lebih lanjut kedalam 'class' menggunakan perintah class. Identifikasi dan klasifikasi ini sangat berguna ketika mengatur model/propertinya dengan kode CSS. 

Didalam kode CSS, perintah id ditunjukkan dengan menggunakan simbol # symbol dan perintah class ditunjukkan dengan menggunakan simbol . Sebagai contoh, dikode CSS terdapat #main-wrapper {...} atau .sidebar {...} yang mana kode ini digunakan untuk mengatur model di main-wrapper dan sidebar.

Semua blok yang dibungkus menggunakan tag b:section adalah widgets (juga bisa dinamakan Page Element). Untuk contoh, didalam Header ada widget dengan nama Header1. Perhatikan, bahwa widget ini berisi kode maxwidgets='1' showaddelement='no'. Kode maxwidgets='1' berarti bahwa jumlah widget maksimum di header-wrapper adalah 1. Berarti kita tidak dapat menambah widget dengan Page Element dan menempatkan widget tersebut dibawah atau diatas Header. Kode showaddelement='no' berarti bahwa tombol Add a Page Element tidak ditampilkan dibagian Header. 


Di dalam main-wrapper, kita hanya bisa memberi kode showaddelement='no' yang mana berarti bahwa tombol Add a Page Element tidak boleh ditambahkan disini, tetapi kita dapat meletakkan widget diatas atau dibawah Blog Posts didalam main-wrapper. Di sidebar-wrapper, terdapat kode preferred='yes'. Perintah ini akan membuat tombol Add a Page Element agar kita dapat menambahkan widgets. Jumlah widgets yang dapat ditambahkan tidak ada batasnya. Selain itu kita juga dapat menarik atau menggeser widgets untuk diletakkan kedalam wrapper/pembungkus lain dalam jumlah yang tidak terbatas juga. 

Di footer-wrapper, tidak ada kode perintah id. Ini berarti bahwa tidak ada tombol Add a Page Element akan tetapi kita dapat menarik dan meletakkan widget kedalam bagian Footer. Tutorial selanjutnya tentang membuat template 3 kolom.

Membuat Template 3 Kolom
Salah satu keinginan yang paling besar ketika kita menjadi seorang blogger dan mengelola
website atau blog/website kita sebelumnya telah menggunakan template yang standard (2
kolom), pasti kita mempunyai keinginan untuk menggunakan template 3 kolom di dalam website kita. 

Dalam tutorial ini akan dijelaskan bagaimana membuat template 3 kolom secara sederhana
dan tidak perlu untuk mahir dalam memprogram menggunakan bahasa HTML atau CSS.
Untuk memahami tutorial ini, diharapkan sebelumnya untuk mengerti tutorial 8 dan tutorial 9, yang mana telah menjelaskan dasar-dasar dari kode di bagian Body.
Untuk mengubah atau menambah sidebar, yang dilakukan hanyalah mengutak-atik kode XML di Blogger langsung dari halaman EDIT HTML dan tidak perlu mengaktifkan Expand Template Widget.

Menambahkan Sidebar Membuat Template 3 Kolom
Kita akan pelajari kode-kode template, yang akan dituliskan dibawah. Kode disetiap template, mungkin akan tidak sama, tetapi variasi tidak akan begitu jauh.


Contoh Kode Template 2 Kolom


Kode diatas merupakan kode template 2 kolom di dalam wrapper/pembungkus yang namanya content-wrapper dimana di dalamnya terdiri dari main-wrapper (yang berisi Blog Posts) dan sidebar-wrapper.

Untuk membuat sidebar baru, yang perlu dilakukan adalah masuk ke halaman EDIT HTML
tanpa mengaktifkan EXPAND TEMPLATE WIDGET, kemudian paste kode blok yang ada di
sidebar-wrapper (kode yang tampil diatas dan berwarna merah) sebelum atau sesudah blok mainwrapper.

Sebagai contoh, untuk membuat kolom Sidebar-Main-Sidebar/S-M-S (ada 2 kolom
yang berada disamping kiri-kanan sebagai sidebar dan kolom main ada ditengah), maka letakkan kode sidebar-wrapper tersebut sebelum main-wrapper. Perhatikan pada contoh dibawah, bahwa id dari sidebar-wrapper adalah sidebar1 dan sidebar2.

Catatan: 
Ketika membuat sidebar kita harus memastikan bahwa lebar kedua kolom Sidebars dan
Main akan cocok berada di content-wrapper dan kode CSS nya juga harus dipastikan bahwa
sidebars akan terletak disamping kiri dan kanan. Beberapa kesalahan umum adalah letak
Sidebars akan berada di bawah blok Main.

Contoh Kode Tamplate 3 Kolom S-M-S



Mengubah Lokasi Sidebar
Jika ingin mengubah lokasi sidebar dengan konfigurasi Main-Sidebar-Sidebar (M-S-S), yang perlu dilakukan adalah menempatkan kode sidebar-wrapper dimana ingin ditampilkan. Caranya, yaitu dengan masuk ke halaman EDIT HTML tanpa mengaktifkan EXPAND WIDGET TEMPLATES dan potong (cut) kode 1 dari sidebar-wrapper dan letakkan diantara main-wrapper dan sidebar2. Dan hasilnya terlihat seperti kode dibawah.


Contoh Kode Tamplate 3 Kolom M-S-S


Sekarang kita sudah tahu, bagaimana caranya membuat dan mengubah lokasi dari sidebar
dengan cara yang sangat sederhana, walaupun tidak mengerti maksud dari kode-kode HTML nya.

Baiklah sobat, sampai disini dulu ya, nanti kita akan lanjutkan lagi ke tahap selanjutnya tentang Membuat Template Blogger Part 7 ( Memulai Membuat Template Blog ).

Semoga bermanfaat.

Terima kasih


Salam,
www.sundaku.com


Related Posts

Membuat Template Blogger Part 6 ( Lebih Lanjut Kode Template Bagian Body )
4/ 5
Oleh

Subscribe via email

Suka posting di atas? Silakan berlangganan posting terbaru langsung melalui email.