Part 1 - Mengenal Fungsi XML, CSS, dan HTML pada Template Blog

Belajar Cara Membuat Template Blogger Sendiri Mulai dari Nol with Fian Fain

Hai sobat Fian, dalam postingan ini saya akan belajar membuat template blogger sendiri mulai dari nol. Sebenarnya ini adalah impian saya sejak dulu, tetapi karena belum mahir dengan koding, jadi saya masih menggunakan template orang lain, apalagi saya sampai membeli template VioMagz buatan mas Sugeng, karena emang keren dan saya tertarik, alhasil saya membeli templatenya, hehe makasih ya mas Sugeng, saya sangat mengapresiasi hasil karyamu.

Nah karena sering ngutak-ngatik template yang saya pakai (VioMagz) saya malah jadi tertarik untuk mencoba hal ekstrim yaitu buat template sendiri pakai koding. Ya itung-itung nyicil biar nanti bisa buat website yang pakai hosting sendiri (di luar blogger.com) trus bisa jadi Web Development (Aamiin) wkwkwk.

Hal pertama yang harus dimiliki dalam pembelajaran ini yaitu niat dan . Tanpa mereka tujuanmu seperti tidak terarah dan kurang menyenangkan (alay banget). :v

Hal kedua yang harus dimiliki yaitu text editor. Bebas sih mau pakai notepad bawaan bisa. Tapi saran saya sih pakai Notepad++ , bisa search di google atau direct lewat link berikut juga bisa Downlaod Page for Notepad++.

Baik sob, sebelum memulai pelajaran pada hari ini, marilah kita niat dan berdoa dahulu sesuai keyakinan masing-masing, berdoa dimulai...[after pray] Berdoa selesai.

Demikian postingan ini tentang.... Ehh belum selesai ya sob wkwkwk, langsung saja kita mulai belajarnya. Cuss Ngengg...

XML

Template di Blogger itu menggunakan XML (Extensible Markup Language) yang merupakan bahasa markup (manupulasi) untuk keperluan umum yang disarankan oleh W3C (World Wide Web Consortium) untuk membuat dokumen markup untuk keperluan pertukaran data antar sistem yang beraneka ragam.

Dokumen yang dibuat menggunakan ekstensi XML ini dapat dijalankan di multi-platform OS seperti Windows, Linux, Macintosh, Android, dll. Masuk pada template blogger, ada 2 baris script yang wajib ada pada template blogger yaitu sebagai berikut.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html>

Script tersebut menunjukkan bahwa template yang dibuat itu menggunakan XML. XML sendiri berfungsi mendefinisikan syntax penulisan kode-kode bahasa pemrograman menjadi tidak standar (bisa sesuai keinginan sendiri). Contohnya sebagai berikut.

<penulis>Nama Penulis Blog</penulis>

Fungsi penulis tersebut jika dipanggil akan menampilkan nilai / hasil berupa Nama Penulis Blog. XML hanya sebatas teman (pancen kabeh salahku bukak ati nggo sliramu.....) *Eh :v

XML hanya sebatas melakukan pendefinisian fungsi saja, untuk menampilkan atau menjalankan fungsi tersebut harus dilakukan pemanggilan menggunakan bahasa pemrograman lain. Tetapi dalam blogger, pemanggilan fungsi XML menggunakan HTML, dan untuk mengatur tampilan fungsi XML tersebut bisa menggunakan CSS.

CSS

CSS singkatan dari Cascading Style Sheets memiliki fungsi untuk mengatur desain atau tampilan fungsi-fungsi pada XML. CSS bukan termasuk bahasa pemrograman sob, ia tugasnya hanya sebagai pengatur tempilan saja supaya lebih bagus dan terstruktur.

Pada CSS, tampilan template blog didefinisikan dalam bentuk nilai yang diapit tanda / simbol kurung kurawa "{..}" atau bracket. Jadi kerangka sederhana CSS kurang lebih seperti ini.

.CSS_id {style-CSS-pertama: nilaipertama;style-CSS-kedua: nilaikedua;}

Ada beberapa cara penulisan CSS sob, untuk detailnya sebagai berikut.

Penulisan yang pertama ini CSS nya tanpa awalan tag apapun sebelum CSS table. Pada penulisan ini CSS akan mengatur tampilan semua tabel yang dibuat jika menggunakan fungsi <table>.
table { // tanpa ada awalan

width: 100%; margin: 10px;

}

Penulisan yang kedua ini CSS nya menggunakan awalan hastag / tagar (tanda pagar) yaitu simbolnya "#". CSS seperti ini akan memanggil atau menampilkan fungsi XML yang terdapat tag id nya.Jika dalam fungsi XML sebagai berikut,
<table id='fianfain'></table>
maka untuk penulisan CSS nya adalah sebagai berikut.
#fianfain { // menggunakan hastag

width: 100%;

margin: 10px;

color: blue;

}
*Tagar sering digunakan untuk menandai bagian-bagian utama pada template blog.

Penulisan yang ketiga ini CSS nya menggunakan awalan dot / tanda titik yaitu simbolnya ".". CSS seperti ini akan memanggil atau menampilkan fungsi XML yang terdapat tag class nya. Jika dalam fungsi XML sebagai berikut,
<table class='fianfain'></table>
maka untuk penulisan CSS nya adalah sebagai berikut.
.fianfain { // menggunakan titik

width: 100%;

margin: 10px;

color: green;

}
*Tanda titik sering digunakan untuk menandai elemen-elemen di dalam bagian-bagian utama template blog.

HTML

HTML singkatan dariHyperText Markup Language berfungsi untuk menampilkan fungsi-fungsi yang telah didefinisikan sebelumnya oleh fungsi XML.

Struktur HTML hanya terdiri dari 2 bagian saja, yaitu bagian head (kepala) dan body (tubuh). Gambaran struknya adalah sebagai berikut.

<html> <head> // untuk fungsi meta, javascript, CSS. </head> <body> // untuk memanggil fungsi yang telah diletakkan pada bagian head </body> <html>

Pada bagian head berisi pendeklarasian fungsi-fungsi seperti meta, javascript, dan CSS. Seluruh fungsi yang ada di bagian head disimpan dalam memori head dan belum ditampilkan.

Bagian body digunakan untuk menampilkan fungsi-fungsi di dalam head, jadi apabila sobat ingin menampilkan fungsi yang ada di dalam head, sobat harus melakukan pemanggilan terhadap fungsi-fungsi tersebut di bagian body ini.

<html> <head> #table { width: 100%; margin: 10px; color: green; } </head> <body> <div id='table'>  </div> </body> </html>

Yakk demikian postingan ini tentang Belajar Membuat Template Blogger | Part 1 - Mengenal Fungsi XML, CSS, dan HTML. Semoga bisa bermanfaat ya sob. Kalau kalian ingin bertanya atau masih ada kebingungan, jangan sungkan untuk berkomentar di postingan ini ya sob. Atau kalian juga bisa membuat contact form di link berikut KLIK DISINI.

Terima kasih sobat Fian~ :) Lanjut Part 2 - [coming soon]