Mengenal atribute pada HTML Tema Blog
Assalamualaikum, sobat ...
Barangkali ini hanya sebatas catatan mengenai belajar membuat template blogger versi sendiri. Catatan ini hanya sebatas catatan orang awam yang sedang belajar bagaimana dan seperti apa bahasa kode xml template blogger itu.
Jadi ceritanya, saya menganalisis beberapa template blog yang saya punya. Baik itu saya download dari versi gratisan, versi default blogger, dan versi premium yang saya beli.
Hampir semua blog yang saya miliki telah saya uji coba menggunakan beberapa versi template itu. Tujuannya memang karena ingin mengetahui saja seluk beluknya.
Menyadari bahwa dengan menggunakan template ada sedikit pengaruhnya, saya mencoba membandingkan kelebihan dan kekurangan masing-masing template. Tujuannya untuk mengambil kesimpulan template mana yang paling cocok untuk saya.
Ya, semua template memiliki kelebihannya masing-masing. Seperti ada yang memiliki struktur skema yang benar-benar lengkap, kecepatan loading page yang cepat, dan diagnosa terhadap Search Engine Optimation atau SEO.
Untuk yang terakhir, SEO, banyak faktor lainnya sih selain masalah template. Meski banyak senior atau developer template blog menyebutkan bahwa template tidak terlalu berpengaruh terhadap SEO, tapi saya meyakini bahwa ada pengaruhnya.
Misalnya mengenai kecepatan page view dan struktur skema pada template blogger yang digunakan. Menurut saya, kecepatan dan skema ini penting untuk membantu mesin pencari memahami struktur konten/artikel. Misalnya apakah konten yang dimaksud itu sebagai postingan, sebagai kategori postingan (breadcrumbs), sebagai pengenal tanda tabel, dan lain-lain.
Jika dikenali oleh mesin pencari, saya pikir akan memudahkan konten nangkring di halaman utama mesin pencarian dengan kata kunci yang ditargetkan.
Nah, disinilah saya memulai mencoba menganalisis keseluruhan kode template blogger. Bagaimana struktur bakunya, definisinya, prasyarat atribusinya dan lain-lain.
Melalui catatan ini, saya mencoba merangkum sesuai dengan pemahaman saya saja. Jika dalam penyajiannya masih kurang memuaskan, maka seperti yang saya bilang saya hanya orang awam. Bukan developer tema blog.
Oke mulai saja pada bagian yang pertama:
Pada catatan ini lebih kepada pengertian atau pemahaman mengenai atribut xml dan html saja ya. Pertama, pada atribut xml.
Hampir semua template blogger masih menggunakan versi xml 1.0. Saya sendiri kurang memahami perbedaan versi ini. Tapi, setelah saya telusuri saya menemukan versi xml terbaru adalah versi 1.1. Mungkin untuk tema blogger masih menggunakan versi 1.0. Untuk versi terbaru, mungkin digunakan pada tema web yang membutuhkan server selain blogger.
Pada kode yang berwarna merah, hijau, dan biru pada atribut html. Disini saya memahaminya sebagai berikut:
Di dalam html terdapat beberapa atribut. Berdasarkan contoh di atas, atributnya ada beberapa tipe (mungkin disebut tipe kali ya ... atau apa aja deh). Di antaranya:
O ya, hampir lupa. Kode di atas adalah kode yang didapat dari hasil render sebuah blog. Maksudnya, kode di atas adalah kode yang dapat dilihat di console web (tekan Ctrl+Shift+i) pada element.
Sedangkan untuk membuatkan kode untuk template, maka digunakan bahasa kode yang lain lagi. Misalnya kode untuk memunculkan nilai dir, biasanya developer template menggunakan kode:
Defatult gadget biasanya diterapkan oleh pembuat tema dengan pengaturan otomatis di dashboard bukan pada edit HTML, tapi pada sesuaikan. Sehingga, ketika ada pengaturan tampilan blog hanya mengarah pada tab menyesuaikan, tanpa harus mengubah kode-kode seperti pada edit template dengan kode HTML
Atribut b: defaultwidgetversion digunakan untuk menentukan versi gadget yang digunakan. Ada 2 versi gadget: "1" dan "2". Ketika versi gadget tidak disebutkan, versi gadget adalah 1. Setiap versi memiliki kode XML default dan kamus data yang berbeda yang digunakan. Gadget versi "1" berfungsi dengan versi tata letak "1" dan "2", sedangkan versi "2" gadget hanya berfungsi dengan versi tata letak "3".
Adapaun pasangannya: Atribut b: defaultwidgetversion digunakan untuk menentukan versi gadget yang digunakan. Ada 2 versi gadget: "1" dan "2". Ketika versi gadget tidak disebutkan, versi gadget adalah 1. Setiap versi memiliki kode XML default dan kamus data yang berbeda yang digunakan. Gadget versi "1" berfungsi dengan versi tata letak "1" dan "2", sedangkan versi "2" gadget hanya berfungsi dengan versi tata letak "3".
Bagi yang menerapkan atribut template versi kode 3 di atas, meminimalis css widget dapat diatur di atribut htmlnya.
Blogger memiliki nilai css bawaan yaitu:
Nah, pada versi kode 3, pengaturan meminmalisir versi ini dapat dilakukan dengan mengatur nilai b:css-nya.
Berikut kode /Sintak-nya <html b:css='false'>
Nilai defaultnya adalah true yang berarti widget css akan diload oleh browser. Ketika nilainya false makan css ini tidak diload atau mungkin nilainya diminimalize css.
Adapun kode sintaknya:
<html b:js='false'>
Kode-kode versi terbaru ada di template buatan Mas Sugeng yang saya pakai ini.
Ada juga para pembuat tema blog yang meminimize javascript dengan menambahkan nilai atribut class dengan tambahan kode ... no-js rwd .... Contohnya pada tema yang didesain oleh Arlina. Syntak lengkapnya:
<HTML expr:class='data:blog.languageDirection + " no-js rwd " + data:blog.pageType' ...
Bila diperhatikan, atribut yang digunakan oleh desain template arlina belum menggunakan versi terbaru dan menggunakan metode lain.
Nah, itu adalah beberapa pemahaman saya mengenai atribut dasar dari tema blog. Semoga ada kesempatan untuk mempelajari kode xml lainnya. Semoga bermanfaat.
Barangkali ini hanya sebatas catatan mengenai belajar membuat template blogger versi sendiri. Catatan ini hanya sebatas catatan orang awam yang sedang belajar bagaimana dan seperti apa bahasa kode xml template blogger itu.
Jadi ceritanya, saya menganalisis beberapa template blog yang saya punya. Baik itu saya download dari versi gratisan, versi default blogger, dan versi premium yang saya beli.
Hampir semua blog yang saya miliki telah saya uji coba menggunakan beberapa versi template itu. Tujuannya memang karena ingin mengetahui saja seluk beluknya.
Menyadari bahwa dengan menggunakan template ada sedikit pengaruhnya, saya mencoba membandingkan kelebihan dan kekurangan masing-masing template. Tujuannya untuk mengambil kesimpulan template mana yang paling cocok untuk saya.
Ya, semua template memiliki kelebihannya masing-masing. Seperti ada yang memiliki struktur skema yang benar-benar lengkap, kecepatan loading page yang cepat, dan diagnosa terhadap Search Engine Optimation atau SEO.
Untuk yang terakhir, SEO, banyak faktor lainnya sih selain masalah template. Meski banyak senior atau developer template blog menyebutkan bahwa template tidak terlalu berpengaruh terhadap SEO, tapi saya meyakini bahwa ada pengaruhnya.
Misalnya mengenai kecepatan page view dan struktur skema pada template blogger yang digunakan. Menurut saya, kecepatan dan skema ini penting untuk membantu mesin pencari memahami struktur konten/artikel. Misalnya apakah konten yang dimaksud itu sebagai postingan, sebagai kategori postingan (breadcrumbs), sebagai pengenal tanda tabel, dan lain-lain.
Jika dikenali oleh mesin pencari, saya pikir akan memudahkan konten nangkring di halaman utama mesin pencarian dengan kata kunci yang ditargetkan.
Nah, disinilah saya memulai mencoba menganalisis keseluruhan kode template blogger. Bagaimana struktur bakunya, definisinya, prasyarat atribusinya dan lain-lain.
Melalui catatan ini, saya mencoba merangkum sesuai dengan pemahaman saya saja. Jika dalam penyajiannya masih kurang memuaskan, maka seperti yang saya bilang saya hanya orang awam. Bukan developer tema blog.
Oke mulai saja pada bagian yang pertama:
Struktur Utama Template (berdasarkan versi terbaru)
<html dir="ltr" lang="en-GB"
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>
<title>Judul</title>
<favicon>gambar Favicon</favicon>
</head>
<body>
Berisi kode yang dapat dilihat dari blog. Misalnya postingan
</body>
</html>
Pada catatan ini lebih kepada pengertian atau pemahaman mengenai atribut xml dan html saja ya. Pertama, pada atribut xml.
<?xml version="1.0" encoding="UTF-8" ?>
Hampir semua template blogger masih menggunakan versi xml 1.0. Saya sendiri kurang memahami perbedaan versi ini. Tapi, setelah saya telusuri saya menemukan versi xml terbaru adalah versi 1.1. Mungkin untuk tema blogger masih menggunakan versi 1.0. Untuk versi terbaru, mungkin digunakan pada tema web yang membutuhkan server selain blogger.
Pada kode yang berwarna merah, hijau, dan biru pada atribut html. Disini saya memahaminya sebagai berikut:
Di dalam html terdapat beberapa atribut. Berdasarkan contoh di atas, atributnya ada beberapa tipe (mungkin disebut tipe kali ya ... atau apa aja deh). Di antaranya:
- dir
dir ini biasanya mempengaruhi gaya penulisan teks html. LTR pada kode di atas menunjukkan penulisan dari kiri ke kanan (left to Right). - lang
lang ini menunjukkan bahasa yang digunakan oleh blogger dalam menggunakan bahasa dasbordnya. Bagi blogger pasti paham, dalam pengaturan bahasa biasanya menggunakan bahasa Indonesia atau bahasa Inggris. Bagi yang sering bermitra dengan AdSense biasanya menggunakan lang dalam bahasa inggris. Kodenya biasanya en-gb atau kode untuk bahasa inggris united kingdom. - versi xmlns
Atribut xmlns menentukan namespace xml untuk dokumen.Atribut diperlukan dalam XHTML, tidak valid dalam HTML 4.01, dan opsional dalam HTML5. Meski tidak dituliskan spesifikasi xmlns, nilai defaultnya adalah "xmlns = http: //www.w3.org/1999/xhtml", dan akan ditambahkan ke tag sendiri, meskipun tidak dimasukkan ke dalam atribut html.
Sementara itu, untuk blogger, biasanya ada jenis xmlns. Dari kode di atas, ada xmlns untuk blogger (xmlns:b), xmlns untuk data (xmlns:data), dan xmlns untuk mengambil dari bawaan template dashbor yang digunakan blogger (xmnls:expr).
O ya, hampir lupa. Kode di atas adalah kode yang didapat dari hasil render sebuah blog. Maksudnya, kode di atas adalah kode yang dapat dilihat di console web (tekan Ctrl+Shift+i) pada element.
Sedangkan untuk membuatkan kode untuk template, maka digunakan bahasa kode yang lain lagi. Misalnya kode untuk memunculkan nilai dir, biasanya developer template menggunakan kode:
...
expr:dir='data:blog.languageDirection'
...
Atribut dalam HTML tema BLogger
Umumnya, atribut dalam html blogger adalah:- b:layoutsVersion atau b:version
- b:defaultwidgetversion
- b:css
- b:js
Versi Layout (b:layoutVersion / b:version
Atribut b: version atau b: layoutsVersion menentukan versi Layouts. Nilai harus "2" atau "3". Jika salah satu dari atribut ini tidak disebutkan, nomor versi akan menjadi "1". Setiap versi memiliki karakteristiknya sendiri. Misalnya, dalam versi "3" opsi tampilan seluler dinonaktifkan karena dirancang untuk template Responsif yang berfungsi pada tampilan seluler dan desktop.Versi defatult gadget
gadget di sini menunjukkan adanya kode xml bawaan dari gadget. Jika dilihat dari templat bawaan, misalnya templat contempo, mereka menggunakan default gadget versi terbaru dengan versi 3.Defatult gadget biasanya diterapkan oleh pembuat tema dengan pengaturan otomatis di dashboard bukan pada edit HTML, tapi pada sesuaikan. Sehingga, ketika ada pengaturan tampilan blog hanya mengarah pada tab menyesuaikan, tanpa harus mengubah kode-kode seperti pada edit template dengan kode HTML
Atribut b: defaultwidgetversion digunakan untuk menentukan versi gadget yang digunakan. Ada 2 versi gadget: "1" dan "2". Ketika versi gadget tidak disebutkan, versi gadget adalah 1. Setiap versi memiliki kode XML default dan kamus data yang berbeda yang digunakan. Gadget versi "1" berfungsi dengan versi tata letak "1" dan "2", sedangkan versi "2" gadget hanya berfungsi dengan versi tata letak "3".
Adapaun pasangannya: Atribut b: defaultwidgetversion digunakan untuk menentukan versi gadget yang digunakan. Ada 2 versi gadget: "1" dan "2". Ketika versi gadget tidak disebutkan, versi gadget adalah 1. Setiap versi memiliki kode XML default dan kamus data yang berbeda yang digunakan. Gadget versi "1" berfungsi dengan versi tata letak "1" dan "2", sedangkan versi "2" gadget hanya berfungsi dengan versi tata letak "3".
kode 1:
<html>
Penjelasan: Jika hanya menampilkan template seperti kode di atas, artinya versi layout yang Layout dan widget yang digunakan adalah Versi 1.
Kode 2:
<html b:version=" 2 ">,
Penjelasan: Jika menampilakn versi ini, artinya Layout Version yang ke-2 & Gadget Versi 1. Di sini widgetnya tidak lagi berlaku widget versi 1.
Kode 3:
< html b:layoutsVersion="3" b:defaultwidgetversion="2">
Penjelasan: atribut html pada kode ini adalah versi terbaru.
dimanna Layout yang diterapkan dalam Versi 3 dan Gadget Versi 2.
Versi kode 3, ini sudah diterapkan oleh template buatan Mas Sugeng. Dimana dalam pengaturan kode html pengaturan template tidak dilakukan dengan cara edit html, melainkan denga cara mengatur nilainya di dashboard disesuaikan
b:css yang bernilai benar atau salah
Bagi blogger, pasti pernah mengalami yang namanya mengatu kecepatan blog dengan cara meminimalis css widget bundle, benar tidak?Bagi yang menerapkan atribut template versi kode 3 di atas, meminimalis css widget dapat diatur di atribut htmlnya.
Blogger memiliki nilai css bawaan yaitu:
- authorization.css, dan
- idBlog-css_bundle_version.css, contohnya: 'https://www.blogger.com/static/v1/widgets/1234567890-widget_css_bundle.css'
Nah, pada versi kode 3, pengaturan meminmalisir versi ini dapat dilakukan dengan mengatur nilai b:css-nya.
Berikut kode /Sintak-nya <html b:css='false'>
Nilai defaultnya adalah true yang berarti widget css akan diload oleh browser. Ketika nilainya false makan css ini tidak diload atau mungkin nilainya diminimalize css.
b:js => javascript widget bawaan blog
Di dalam blog biasanya ada javascript bawaan blogger. Misalnya javascript mengenai widget. Ada 2 jenis javascript yang diketahui di dalam blog, yaitu:- inline rearrange widget javascript
- id-widget.js
Adapun kode sintaknya:
<html b:js='false'>
Kode-kode versi terbaru ada di template buatan Mas Sugeng yang saya pakai ini.
Ada juga para pembuat tema blog yang meminimize javascript dengan menambahkan nilai atribut class dengan tambahan kode ... no-js rwd .... Contohnya pada tema yang didesain oleh Arlina. Syntak lengkapnya:
<HTML expr:class='data:blog.languageDirection + " no-js rwd " + data:blog.pageType' ...
Bila diperhatikan, atribut yang digunakan oleh desain template arlina belum menggunakan versi terbaru dan menggunakan metode lain.
Nah, itu adalah beberapa pemahaman saya mengenai atribut dasar dari tema blog. Semoga ada kesempatan untuk mempelajari kode xml lainnya. Semoga bermanfaat.
Post a Comment for "Mengenal atribute pada HTML Tema Blog"
Silakan berkomentar dengan bijak. Komentar Anda tidak segera muncul karena diatur moderasi komentar. Komentar Anda akan muncul setelah kami menyetujuinya. Komentar dengan mencantumkan link aktif, unsur sara, ataupun yang melanggar TOS kami tidak akan dipublikasikan. Terima kasih