editing |
Baiklah kita masuk ke cara membuat template.
Pertama mari kita bahas cara Manual membuat template blog
Untuk membuat dasar layout atau tetaletak blogger sesuai definisinya Google anda setidaknya harus memahami namespace xlmns berikut yang terdiri dari tiga tipe:
- xmlns:b – ‘b’ ditetapkan untuk mengakses elemen elemen blogger
- xmlns:data – ditetapkan untuk menentukan darimana data blog berasal
- xmlns:expr – Menghitung atau mengkalkulasikan ekspresi atau pengekspresian untuk atribut blog.
Jadi anda harus menulis file main.xml blogger sebagai berikut, yakni
SINTAKS UNTUK BASIS LAYOUTNYA:
SINTAKS UNTUK BASIS LAYOUTNYA:
<?xml version="1.0" encoding="UTF-8" ?>Aturan diatas mengacu pada perubahan layout versi ke-3 blogger, sedangkan pada layout versi ke dua xmlns tersebut formatnya adalah sbb:
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='fancy.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' 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'>
<?xml version="1.0" encoding="UTF-8" ?>Dan dilanjutkan dengan formasi berikut (sama saja)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Dan menurut bloggerhelp yang dapat kita baca pada panduan blogger, sebuah template blogger terdiri dari beberapa "section" seperti:
<title><data:blog.pageTitle/></title>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>
- Header
- Konten
- Footer
- Sidebar.
SECTION
Anda harus menggunakan widget untuk mendefinisikan konten pada setiap sectionnya, dimana anda tidak dibenarkan menggunakan HTML ke dalam sebuah section, akan tetapi di izinkan menggunakan HTML disekitar section, dibawahnya, diatasnya.
Anda harus menggunakan widget untuk mendefinisikan konten pada setiap sectionnya, dimana anda tidak dibenarkan menggunakan HTML ke dalam sebuah section, akan tetapi di izinkan menggunakan HTML disekitar section, dibawahnya, diatasnya.
Format section yang benar akan tampak sebagai berikut:
<b:section id=’ ‘ class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../> </b:section>
Akan salah jika anda menyisipkan HTML sebagai mana contoh berikut:
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<h1>Content heading</h1> <div>Content</div> </b:section>
Ini semua sudah diajarkan dari laman bloggerhelp oleh Google. Jadi menggunakan editor HTML blogger buat membuat template adalah "sah sah" saja. Kalau ada yang bilang itu melanggar aturan Google berarti dia belum baca laman ini.
ATTRIBUT SECTION
Mari kita lanjutkan, masih melalui rangkuman bloggerhelp Google:
Anda juga perlu menetapkan atribut berikut ke dalam suatu section, dan ingat hanya ID atribut yang benar benar dibutuhkan sedangkan atribut lainnya hanyalah optional.
- id –Nama section harus unik mengandung huruf dan angka saja
- class –Terdiri dari class-class yang sama seperti: Navbar, header, footer dan sidebar. Sekalipun nantinya anda memutuskan mengganti template.
- maxwidgets – Batas widget yang dapat anda tambahkan ke dalam section
- showaddelement – Ini akan menentukan pilihan nilai Yes atau No secara default. Ini dibangun untuk menentukan elemen halaman di tampilkan sebagai "tambahkan sebuah elemen halaman" pada layout blog.
- growth – Itu bisa di tetapkan dalam bentuk 'horisontal atau vertikal' sebagai default. Ini menetapkan apakah widget di susun dari sisi ke sisi atau diletakan ke dalam section
Sintaks untuk menambahkan section
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents --> </b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes"> </b:section> <b:section id='main' class='main' maxwidgets="1" showaddelement="no"> <!-- Section contents --> </b:section>
<b:section id='footer' class='footer' showaddelement="no"> <!-- Section contents --> </b:section>
Widget
Widget adalah bagian utama dan penting yang menampilkan data real bagi sebuah section. Dia berfungsi bagai laci terbuka. Section di tetapkan hanya sebagai elemen layout. Secara default beberapa jenis widget telah tersedia secara default di dalam blog dan anda dapat sewaktu waktu mengeditnya.
Atribut Widget
Dan widget memiliki atribut atribut yang sangat banyak diluar pilihan mana yang kita ambil nantinya hanya ID dan jenis yang dibutuhkan sedangkan yang lain hanyalah opsional.
- id – Hanya bisa terdiri dari huruf dan angka. Setiap widget wajib memiliki ID yang unik. ID hanya dapat diganti dengan menghapus widget tersebut.
- type – Tipe widget di dalam daftar dibawah ini saja yang valid untuk dipergunakan:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
Pada widget juga terdapat fungsi fungsi sebagai berikut:
- locked – Bisa memiliki sebuah nilai ‘yes’ or ‘no’ (dalam bahasa Inggris). Secara default adalah ‘no’. Apabila "No" berarti anda tidak bisa menghapus dan memindahkan widget. namun anda bisa merubahnya menjadi "Yes" melalui editor HTML blogger.
- title – Di tampilkan sebagai judul widget, namun tidak di tentukan, andalah yang nantinya menuliskannya, misal menulis judul "popular posts"
- mobile – Berbentuk nilai 'Yes' atau 'No' itu akan menentukan apakah widget akan ditampilkan pada layar mobil atau tidak. Namun fungsi ini sudah dihilangkan pada template terbaru dengan layout versi ke-3 seperti contempo, emporio, soho dan notable.
Sintaks Widget
Widget berada didalam sebuah section. Sintaks yang ditambahkan ke dalam sebuah section akan terlihat sebagai berikut:
Widget berada didalam sebuah section. Sintaks yang ditambahkan ke dalam sebuah section akan terlihat sebagai berikut:
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes"> <b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/> <b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/> <b:widget id='Label1' type='Label' locked='false' />
</b:section>
Sebenarnya membuat template menggunakan HTML CSS juga dapat kita lakukan dengan syarat:
Anda bisa menlanjutkan belajar sendiri setelah membaca artikel ini melalui:
Blogger Help
Artikelnya sangat lengkap dan dari sumber langsung Blogger Google. Anda dapat memilih sesuai dengan bahasa anda. Aku belajar membuat template disini dari sumbernya langsung yang aman dan terpercaya...
Salam Anissa..
- Memiliki pengatahuan dasar komputer
- Memiliki pengatahuan HTML yang baik
- Memiliki pengatahuan CSS yang bagus
Anda bisa menlanjutkan belajar sendiri setelah membaca artikel ini melalui:
Blogger Help
Artikelnya sangat lengkap dan dari sumber langsung Blogger Google. Anda dapat memilih sesuai dengan bahasa anda. Aku belajar membuat template disini dari sumbernya langsung yang aman dan terpercaya...
Salam Anissa..
www.editblogtema.net
Duh kalo sudah kode begini asli roaming hehehe. Lanjutkan mas, kami jadi pengguna aja
BalasHapusEh, lebih sulit fisika cuaca lho... Klo koding kan cuma bahasa
Hapus