Theme Blogger Bootstrap (6); Agar Support HTML5

Teman-teman pernahkah mendapati video di internet tidak bisa diputar kecuali harus install Flash Player? Jika hari ini masih mendapati website yang mempersyaratkan hal tersebut berarti masih setia dengan teknologi lama. Karena dengan kehadiran HTML5 semua hal itu sudah tidak butuhkan lagi.

Makanya Adobe Flash dan SwishMax saat ini hampir sudah tidak terdengar lagi bukan. Meskipun tidak terkait secara langsung tapi pengembangan HTML tetap berpengaruh. Iya betul, HTML5 sejatinya adalah pengembangan dari HTML. Versi baru ini tentunya disertai dengan banyak perbaikan.

Tidak cukup sampai di sini, HTML5 juga mempunyai kelebihan yang sepatutnya menjadi perhatian. Diantaranya adalah mendukung pembuatan website yang responsive, penanganan error yang lebih baik, syntax yang lebih serderhana serta dukungan untuk grafik berbasis vektor dan konten audio/video.

Nah, bagaimana caranya agar theme yang kita buat ini mendukung HTML5? Sebagai seorang web developer meskipun pemula dan menggunakan mesin blogger harus tahu ini. Tidak menutup kemungkinan kan suatu saat berkembang kemudian membuat web apps dengan hosting sendiri?

Yups, HTML5 memberi kemudahan untuk tujuan tersebut. Namun sebelum membahas lebih jauh kita coba tahap dasar dulu dengan platform gratisan. Bagi teman-teman yang berminat silahkan simak bahasan kali ini tentang theme blogger agar support HTML5.

Theme Blogger Bootstrap (6); Agar Support HTML5

HTML5 adalah HTML versi kelima yang dikembangkan oleh World Wide Web Consortium (W3C). Versi ini merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah.

Dan untuk menyiapkan theme blogger agar support HTML5 sangat mudah. Berikut ini cara membuat theme blogger yang kita buat agar support HTML5.

1.Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Tambahkan tag berikut ini ke dalam template, tepatnya setelah tag <?xml version="1.0" encoding="UTF-8" ?> pada baris awal.

<!DOCTYPE html>

4. Simpan template.

5. Contoh penerapan jika menggunakan theme pelajaran sebelumnya maka akan terlihat seperti ini.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <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> <link crossorigin='anonymous' href='https://pagecdn.io/lib/bootstrap/5.2.0/css/bootstrap.min.css' integrity='sha256-7ZWbZUAi97rkirk4DcEp4GWDPkWpRMcNaEyXGsNXjLg=' rel='stylesheet'/> <link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css' rel='stylesheet'/> <b:skin><![CDATA[]]></b:skin> </head> <body>  <div class='container'> <ul class='nav nav-tabs navbar-light bg-primary bg-gradient'> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-house-door-fill'/> Home</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-android2'/> Android</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-bootstrap-fill'/> Bootstrap</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-list-columns-reverse'/> Daftar Isi</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle text-dark' data-bs-toggle='dropdown' href='#' role='button'><i class='bi bi-cloud-arrow-down-fill'/> Download</a> <ul class='dropdown-menu'> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-filetype-xml'/> Script Blogger</a></li> <li><a class='dropdown-item text-dark' href='#'><i class='bi bi-filetype-pdf'/> E-book PDF</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='#'><i class='bi bi-filetype-mp3'/> MP3</a></li> <li><a class='dropdown-item text-dark' href='#'><i class='bi bi-camera-video-off'/> Video</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='#'>Theme ini</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-chat-dots-fill'/> Opini</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle text-dark' data-bs-toggle='dropdown' href='#' role='button'><i class='bi bi-tencent-qq'/> Linux</a> <ul class='dropdown-menu'> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-ubuntu'/> Ubuntu</a></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com'>Linux Mint</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-printer-fill'/> Printer</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-currency-dollar'/> Receh</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com'><i class='bi bi-windows'/> Windows</a></li> </ul> </div>   <div class='container'> <ul class='nav nav-tabs navbar-light bg-primary'> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Home</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Android</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Bootstrap</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Daftar Isi</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle text-dark' data-bs-toggle='dropdown' href='#' role='button'> Download</a> <ul class='dropdown-menu'> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'> Script Blogger</a></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'> E-book PDF</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'>MP3</a></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'>Video</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'>Theme ini</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Opini</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle text-dark' data-bs-toggle='dropdown' href='#' role='button'> Linux</a> <ul class='dropdown-menu'> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'> Ubuntu</a></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'> Linux Mint</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Printer</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Receh</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Windows</a></li> </ul> </div>  <b:section class='main' id='main' showaddelement='yes'/> <script crossorigin='anonymous' integrity='sha256-wMCQIK229gKxbUg3QWa544ypI4OoFlC2qQl8Q8xD8x8=' src='https://pagecdn.io/lib/bootstrap/5.2.0/js/bootstrap.bundle.min.js'/> </body> </html>

Kesimpulan

Inilah sekelumit awal bincang-bincang kita tentang HTML5. Dalam dunia blogger kita juga harus mengenalnya. Karena theme blogger premium yang tersebar di luar sana juga mendukung HTML5. Sekian tutorial hari ini tentang cara membuat theme blogger sendiri agar support HTML5.

Selamat mencoba.

Theme Blogger Bootstrap (6); Agar Support HTML5

Theme Blogger Bootstrap (6); Agar Support HTML5

Kesimpulan

Tidak ada komentar:

Posting Komentar

Memuat...

Nama Domain Murah

Yusuf