Elemen utama Template Blog
Elemen utama dalam template / tema blog maupun website adalah sebagai berikut :
Untuk pemula sangat disarankan untuk memahami elemen dalam template secara bertahap.
Karena selain elemen utama, didalamnya juga terdapat elemen lain dan juga kode-kode lainnya semisal script dsb.
Sebagai awalan, pahami terlebih dahulu elemen utamanya.
Agar lebih mudah memahami setiap elemen utama dalam template dan urutannya, klik tanda panah dibawah ini.
- <html>
- <head>
- <meta charset='UTF-8'/>
- <meta content='width=device-width' name='viewport'/>
- <meta name='' property=''/>
- <link href='' rel=''/>
- <b:skin> CSS </b:skin>
- </head>
- <body>
- <header>
- <b:section>
- <b:widget>Blog title</b:widget>
- <b:widget>Search form</b:widget>
- <b:widget>Nav Menu</b:widget>
- </b:section>
- </header>
- <main>
- <b:section>
- <b:widget>Blog post</b:widget>
- <b:widget>Widget</b:widget>(opsional)
- </b:section>
- </main>
- <aside>
- <b:section>
- <b:widget>Popular post</b:widget>
- <b:widget>Labels</b:widget>
- <b:widget>Widget</b:widget>(optional)
- </b:section>
- </aside>
- <footer>
- <b:section>
- <b:widget>Atribusi</b:widget>
- </b:section>
- </footer>
- </body>
- </html>
- <head>
Atau jika ditampilkan dalam kode HTML adalah sebagai berikut:
<html>
<head>
<!-- Meta -->
<meta charset='UTF-8'/>
<meta content='width=device-width' name='viewport'/>
<meta name='' property=''/>
<link href='' rel=''/>
<b:skin> CSS </b:skin>
</head>
<!-- Badan halaman -->
<body>
<header><!-- Blog title -->
<b:section id='' class='' name='Header'>
<b:widget>Blog-name (judul blog)<b:widget/>
<b:widget>Search (pencarian)<b:widget/>
<b:widget>Top-nav (menu navigasi)<b:widget/>
</b:section>
</header>
<main><!-- Utama -->
<b:section id='' class='' name='Blog1'>
<b:widget>Blog1 (postingan)<b:widget/>
<b:widget>HTML1 (opsional)<b:widget/>
</b:section>
</main>
<aside><!-- Bilah samping -->
<b:section id='' class='' name='PopularPosts'>
<b:widget>PopularPost (postingan populer)<b:widget/>
<b:widget>Labels (label)<b:widget/>
<b:widget>Archive (arsip)<b:widget/>
<b:widget>HTML2 (opsional)<b:widget/>
</b:section>
</aside>
</body>
<footer><!-- Atribusi -->
<b:section id='' class='' name='Attribution'>
<b:widget>Atribution(atribusi blog)<b:widget/>
</b:section>
</footer>
<script type='text/javascript'>
//
</script>
</html>
Jika sudah paham elemen utama beserta urutannya,akan lebih mudah dalam mempelajari tahap selanjutnya yaitu memahami elemen yang berada didalam elemen utama tersebut.
HTML |
Head |
Body |
Footer |
Header |
Main |
Aside |
Footer |
Section |
Section |
Widget Blog |
Widget HTML |
Widget Popular post |
Widget Label |