Cara membuat template Blog sendiri.
Tutorial cara membuat template blog sendiri mulai dari nol sampai bisa dipasang diblog secara detail atau by step per step sangat jarang bisa ditemukan disebuah laman pencarian google, hal ini membuat banyak temen-temen yang ingin belajar membuat template blog sendiri kesulitan untuk praktek secara langsung mengapa saya bilang seperti itu karena saya pernah mengalami hal tersebut, jika pun ada hanya tutorial membuat template desain luarnya saja ketika ingin diterapkan didalam blog secara langsung akan terjadi error diberbagai script tag Html hingga Css nya.
Permasalahan semacam ini sebenarnya secara garis besar hanya dialami oleh pemula yang memang cenderung belum sepenuhnya menguasai tag Html dan Css secara penuh ditambah masih minimnya wawsan tentang pola atau struktur didalam membangun sebuah template website
Hingga artikel ini mulai ditulis didalam
javaone45 belum ada satupun website yang pernah saya temukan memberikan tutorial lengkap secara detail bagaimana cara membuat template mulai dari nol hingga benar-benar dapat diterapkan didalam blog. Oleh karena itu pada kesempatan kali ini mari kita coba mengulas bagaimana cara membuat sendiri template blog atau template website dengan desain yang kita inginkan berdasarkan pengalaman yang pernah saya alamai dimulai dari nol hingga bisa diterpakan didalam blog.
Pra-persiapan membuat template dari nol
- Pertama kita harus memahami apa itu XML
- Kedua kita harus memahami apa itu HTML ?
- Ketiga kita harus memahami apa itu CSS ?
Antara Html dan Css keduanya memiliki hubungan yang sangat erat didalam membangun sebuah template dengan kriteria yang kita inginkan.
XML
XML / Blog dengan platform Blogger dibangun menggunakan XML(Extensible Markup Language) yaitu bahasa markup (manipulasi) untuk keperluan umum yang disarankan oleh W3C (World Wide Web Consortium) untuk membuat dokumen markup untuk keperluan pertukaran data antar sistem yang beraneka ragam. Jadi dokumen yang dibuat menggunakan XML dapat dijalankan pada multi-platform OS seperti Windows, Linux, Macintosh, Android, dan lain-lain.
Berikut adalah 2 baris script paling atas pada template blogger yang menunjukkan bahwa template tersebut dibangun menggunakan XML.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
1.
2.
XML sendiri berfungsi mendefinisikan syntax penulisan kode-kode bahasa pemrograman menjadi tidak standar, yang dapat kita tentukan sendiri. Contohnya :
<penulis>Nama Penulis Blog</penulis>
1.
Fungsi "penulis" disini merupakan fungsi yang kita definisikan sendiri secara bebas namun tetap dengan aturan berlaku, yang mana jika dipanggil akan menampilkan nilai berupa Nama Penulis Blog.
XML hanya sebatas melakukan pendefinisian fungsi saja, untuk menampilkan fungsi tersebut harus dilakukan pemanggilan menggunakan bahasa pemrograman lain.Pemanggilan fungsi XML dalam template blogger dilakukan menggunakan HTML. Selain itu fungsi XML juga dapat diatur tampilannya menggunakan CSS. Baca selengkapnya tentang struktur Tag Html dan Css
Html (Hypertext Markup Language)
Secara umum HTML berfungsi untuk menampilkan fungsi-fungsi yang telah didefinisikan sebelumnya oleh XML. Struktur HTML sendiri terdiri dari 2 bagian yaitu bagian head (kepala) dan body (tubuh).
<HTML>
<head>
</head>
<body>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
Bagian head ini berisi pendeklarasian fungsi seperti meta, javascript, dan CSS. Fungsi-fungsi ini hanya disimpan saja dalam memori head, belum ditampilkan. Untuk menampilkan fungsi-fungsi di dalam memori head, dilakukan pemanggilan terhadap fungsi-fungsi tersebut pada bagian body.
Contoh HTML di bawah ini menyimpan CSS wrapper pada bagian head dan dipanggil pada bagian body untuk ditampilkan wrapper.
<HTML>
<head>
#wrapper {background: #fff; width: 90%; padding: 20px;margin:20px}
</head>
<body>
<div id='wrapper'>
isi konten
</div>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Perlu diketahui didalam tag Html terdapat banyak fungsi yang perlu dideklarasikan secara aturan baku dan secara bebas, lebih lengkap tentang tag Html bisa dibaca diartikel... Html adalah
Css (Cascading Style Sheet)
Pada dasarnya sebuah template blogger tersusun dari kumpulan fungsi-fungsi XML. CSS (Cascading Style Sheets) berfungsi untuk mengatur desain atau tampilan fungsi-fungsi tersebut yang telah dipanggil, Di dalam CSS tampilan (style) template blog didefinisikan dalam bentuk nilai yang diapit dalam kurung kurawa "{...}" atau bracket. untuk deklarasi tentang Css bisa dipelajari selengkapnya pada artikel
...... Stuktur Css yang terdiri dari Selector { Poperty : Value ; }•CSS_id {style-CSS-satu:nilaipertama;style-CSS-dua:nilaikedua;}
1.
Berikut ini adalah 3 cara penulisan CSS :
table {
width:100%;
margin:10px;
}
1.
2.
3.
4.
Yang pertama penulisan tanpa awalan tag apapun sebelum CSS table. Penulisan seperti ini akan mengatur tampilan semua tabel yang dibuat menggunakan pendeklarasian fungsi <table>.#keren{
width:100%;
margin:10px;
color:red;
}
1.
2.
3.
4.
5.
Yang kedua adalah penulisan CSS diawali dengan tagar (tanda pagar) "#" atau hashtag. CSS seperti ini dapat dipanggil dengan menyisipkan tag id pada fungsi. Contoh pemanggilannya :
<table id="keren"></table>
1.
Tagar biasanya digunakan untuk menandai bagian-bagian utama template blog..keren{
width:100%;
margin:10px;
color:red;
}
1.
2.
3.
4.
5.
Yang terakhir penulisan CSS yang diawali tanda titik "." atau dot, dapat dipanggil dengan menyisipkan tag class pada fungsi. Contoh pemanggilannya :
<table class="keren"></table>
1.
Tanda titik ini biasanya digunakan untuk menandai elemen-elemen di dalam bagian-bagian utama template blog.
Selanjutnya setelah kita memahami Pra-persiapan diatas maka kita akan memulai melakukan tahap utamanya yaitu membuat template blog dari nol , karena artikel terlalu panjang silahkan baca diartikel berikutnya ..... Tahap pertama setelah Pra-persiapan membuat template sendiri dari nol
