Meskipun dengan cara otodidak dari nol itu bukan halangan. Dipermudah lagi dengan banyaknya script dan widget yang tersebar di internet. Tentu ini keuntungan tambahan bagi Anda yang mau memanfaatkan.
Hal selanjutnya yang dilakukan pemula kemudian memodifikasi template bawaan. Bisa juga dengan membeli theme premium namun diedit sedikit. Pengalaman ini pernah saya lakukan sendiri. Tinggal copas script yang diinginkan maka theme default berubah.
Lalu, mengapa harus mengacak-acak template default? Kenapa tidak membuat template sendiri dari nol? Pertanyaan ini mungkin pernah terlintas dalam benak Anda. Akan tetapi mungkin muncul pertanyaan lain:"Darimana kita memulainya?" Oleh karena itu, artikel ini berusaha mencari jawabannya; Bagaimana cara membuat template blogger sendiri?
Sebelum Membuat Theme Blogger
Ini disebabkan; Ketika pengguna membuka halaman web, mesin blogger lalu mengurai file tempalate (ekstensi XML) dan mengembalikan data yang diambil dari server database agar ditampilkan oleh browser dalam bentuk HTML.
Perbandingan Antara XML dan HTML
Berikut ini sedikit penjelasan perbedaan antara format XML dan HTML. XML kependekan dari Extensible Markup Language yaitu bahasa markup yang diciptakan oleh World Wide Web Consortium (W3C). XML merupakan lanjutan dari HTML dan disarankan oleh W3C untuk kepentingan umum.
Format ini memudahkan fungsi pertukaran
data antar sistem yang beraneka ragam.
Sedangkan HTML adalah format dokumen internet yang sudah dikenal lebih dulu. HTML diperkenalkan oleh Tim Berners-Lee yang kemudian mendirikan World Wide Web Consortium. HTML singkatan dari HyperText Markup Language yaitu bahasa markup standar untuk membuat halaman web agar bisa ditampilkan oleh browser.
Baik HTML maupun XML bisa disisipi CSS, PHP dan Javascript.
Perbedaannya:"HTML didesain untuk menampilkan data kepada user lewat peramban internet. Sedangkan XML menyederhanakan penyimpanan dan pengiriman data antar server yang berbeda-beda".
Cara Membuat Theme Blogspot dari Awal
Selanjutnya, ini pokok bahasan bagaimana caranya membuat template dengan platform Blogger. Berikut ini rangkumannya yang bermuara pada 3 (tiga) metode.
1. Dengan Cara Manual
Cara ini adalah cara yang paling susah terutama bagi pemula yang belajar komputer secara otodidak dari nol. Menekuni cara ini sah-sah saja dan dituntut kesabaran ekstra. Selain itu, penguasaan terhadap bahasa pemograman berbasis web seperti HTML, CSS, PHP, Javascript dan lain-lain mutlak diperlukan.
2. Dengan Menggunakan Framework
Contoh framework yang dikenal blogger adalah Bootstrap; sebuah library framework HTML, CSS dan Javascript yang dikembangkan oleh developer Twitter. Bootstrap ini dibuat khusus untuk pengembangan front-end sebuah website guna mempercepat dan mempermudah pengembangan situs web.
3. Dengan Menggunakan Software Berbayar
Cara terakhir adalah pilihan yang tepat bagi Anda yang menginginkan kecepatan dalam mencapai hasil yang maksimal. Apalagi jika tidak dibekali dengan bahasa pemograman yang memadai. Padahal, keahlian tersebut kebutuhan mendasar yang diperlukan untuk membuat sebuah website.
Software tersebut misalnya Dreamweaver. Jika produk dari Adobe tersebut terlalu mahal, Artisteer dan TemplateToaster bisa menjadi pilihan. Sebelum membeli software silahkan mencoba gratis trial-nya dalam beberapa hari kedepan. Sekarang, metode apakah yang Anda pilih?
Membuat Theme Blogger dengan Cara Manual
Pada artikel kali ini kita akan mencoba belajar membuat theme blogger dengan cara manual. Namun bukan artinya mengetikan kode-kode layaknya seseorang membuat alur cerita pada sebuah novel.
Cara manual di sini tetap menggunakan script tapi bermodalkan copas. Karena literatur yang jadi sumber referensi sangat banyak. Sehingga lebih mirip permainan merangkai puzzle.
Theme Blogger Sendiri "Halo Gaes"
Meskipun demikian, metode ini tetap membutuhkan pengetahuan bahasa script. Berikut adalah syntax dasarnya terlebih dahulu agar sesuatu yang kompleks itu terlihat mudah dari kesederhanaannya. Setidaknya untuk saat ini bagi saya yang belajar IT secara otodidak.
Berikut ini syntax dasar html yang pasti Anda kenal.
<html>
<head>
</head>
<body>
</body>
</html>
Ini baris kode html dasar yang paling sederhana. Silahkan copas baris kode di atas ke dalam template blogger Anda. Sehingga, baris kode semula dengan template bawaan seperti terlihat di bawah ini:
Setelah copas dengan kode HTML paling basic diatas menjadi seperti ini:
Silahkan klik Save untuk menyimpan perubahan pada template blogger. Maka akan tampil notifikasi error:"There should be one and only one skin in the theme, and we found: <b>0<//b>"
Mengapa? Karena template blogger itu seharusnya terdiri atas kode XHTML dan elemen Blogger.
Pemberitahuan error tadi mengingatkan agar menambahkan "skin" dalam theme/template yang sedang Anda buat. Oleh karena itu coba tambahkan baris kode berikut:
<b:skin><![CDATA[
/****CSS CODE*****/
]]></b:skin>
Kode di atas diletakan tepat di antara tag <head> dan </head>. Kemudian klik Save untuk menyimpan perubahan.
Setelah itu ada pemberitahuan error lagi:"We did not find any section in your theme. A theme must have at least one b:section tag".
Mengapa? Ternyata salah satu elemen blogger yang bernama "section" ini wajib harus ada dalam template setidaknya 1 elemen. Oleh karenanya, coba tambahkan elemen section berikut:
<b:section class='main' id='main' showaddelement='yes'></b:section>
Kode di atas diletakan di antara tag pembuka <body> dan tag penutup </body>. Kemudian klik Save untuk menyimpan perubahan maka terlihat notifikasi "Update successfully". Ini menunjukan bahwa Anda sudah berhasil membuat template sendiri dari nol.
Baris kode template Anda pada saat ini masih sedikit:
<html>
<head>
<b:skin><![CDATA[
/****CSS CODE*****/
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'></b:section>
</body>
</html>
Sedangkan tampilan layar akan terlihat sebagai berikut:
Tampilannya masih kosong mlongpong padang glendang gaes? Padahal, nulis kodenya sudah beberapa baris.
Iya, sekarang saatnya mengatakan kepada dunia:"Hello World" atau "Halo Gaes" dengan menambahkan script berikut:
<p>Hello World</p> atau <p>Halo Gaes</p> (Silahkan pilih salah satu)
Kode di atas diletakan sebelum body dengan tag penutup (</body>) dan sesudah section dengan tag penutup (</b:section>). Jangan lupa klik Save untuk menyimpan. Silahkan refresh ulang browser Anda sehingga terlihat seperti ini:
Program "Hello World"sudah berhasil dijalankan di template Anda. Lalu, bagaimana dengan syntax dasar xml yang sebenarnya tertera pada template? Untuk mengetahuinya, silahkan keluar terlebih dahulu dari mode edit HTML. Lalu masuk ke mode edit HTML kembali. Bisa juga dengan men-download template baru Anda melalui Theme > Customize > Backup. Setelah itu buka file xml hasil download tadi dengan teks editor; Notepad, Bluefish dan lain-lain sebagaimana terlihat pada gambar:
Diketahui, baris kode yang dibuat tadi ada tambahan otomatis dari Blogger yaitu:
<?xml version="1.0" encoding="UTF-8" ?>
<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'>
Sehingga syntax tata letak dasar pada template blogger yang baru saja dibuat sepenuhnya adalah sebagai berikut:
<?xml version="1.0" encoding="UTF-8" ?>
<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>
<b:skin><![CDATA[
/****CSS CODE*****/
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'/>
<p>Hello World</p>
</body>
</html>
Theme blogger paling sederhana dengan menyertakan "hello word" di atas bisa juga didownload di sini. Sengaja saya arsipkan di Google Drive sebagai arsip yang bisa jadi diperlukan entah kapan harinya.
Sampai tahap ini kita semakin menyadari apa yang harus dipersiapkan untuk memulai mengembangkan template blogger buatan sendiri dari nol.
Setidaknya, menguasai HTML, PHP dan CSS adalah keharusan. Lebih baik lagi jika menguasai Javascript, XML, jQuery dan Bootstrap.
Dan w3schools sudah menyediakan kursus ilmu-ilmu tersebut secara gratis.
Sekian tutorial kali ini tentang cara membuat template blogger sendiri.
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar