CARA MEMBUAT TEMPLATE BLOG DARI SUMBERNYA LANGSUNG

byAnissa Auliasari -
editing template blogger
editing
Bingung juga sih tadinya memilih mau nulis dimana akhirnya setelah menimbang ya disini di editblogtemalah jenis artikel ini akan menemukan pembacanya, tidak mungkin di blog personal gado gado seperti SBSS Anissa yang personal.

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:
<?xml version="1.0" encoding="UTF-8" ?>
<!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'> 
 Aturan diatas mengacu pada perubahan layout versi ke-3 blogger, sedangkan pada layout versi ke dua xmlns tersebut formatnya adalah sbb:
<?xml version="1.0" encoding="UTF-8" ?>
<!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'> 
Dan dilanjutkan dengan formasi berikut (sama saja)
<head>
<title><data:blog.pageTitle/></title>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>
Dan menurut bloggerhelp yang dapat kita baca pada panduan blogger, sebuah template blogger terdiri dari beberapa "section" seperti:
  • 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.

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:
  1. BlogArchive
  2. Blog
  3. Feed
  4. Header
  5. HTML
  6. SingleImage
  7. LinkList
  8. List
  9. Logo
  10. BlogProfile
  11. Navbar
  12. VideoBar
  13. 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:
<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:
  • Memiliki pengatahuan dasar komputer
  • Memiliki pengatahuan HTML yang baik
  • Memiliki pengatahuan CSS yang bagus
Kita akan lanjutkan dengan cara membuat template sendiri yang lebih sederhana bagi pemula pada tulisan berikutnya....

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
Tags

2 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Bang DayAgustus 27, 2019

    Duh kalo sudah kode begini asli roaming hehehe. Lanjutkan mas, kami jadi pengguna aja

    BalasHapus
    Balasan
    1. sufyan YaanAgustus 31, 2019

      Eh, lebih sulit fisika cuaca lho... Klo koding kan cuma bahasa

      Hapus
Lebih baru Lebih lama

Formulir Kontak