Cara Membuat Tema Blog Sendiri dari Dasar
Hai, kali ini saya akan membahas mengenai cara membuat tema blog sendiri dari nol. yang harus kamu tahu, tema HTML terdiri dari kerangka Head dan Body. sebelum kita lanjut, maka saya akan sedikit membahas mengenai Head dan Body.
<Head> adalah tempat untuk membuat <title> blog kita, css, style, b:skin dan lain lain. Nah ibaratnya Head itu adalah warna dan bentuk dasar dari sebuah pintu, belum ada bentuk kotak kotak seperti pintu biasanya/ masih dalam bentuk pintu yang datar dan kosong dari kotak kotak.
<Body> adalah tempat untuk memasukkan kode, content kita juga tersedia dalam body. Jika Head adalah warnanya pintu, maka Body adalah bentuk dari sebuah pintu, apakah itu kotak lurus/bulat/segi lima dan bahkan juga termasuk bagian bagian dari sebuah pintu.
Ketika kamu sudah tau apa itu Head dan Body, maka silahkan mencoba membuat sebuah HTML blog pribadi secara sederhana terlebih dahulu.
<! DOCTYPE html>
<html>
<head>
<title>ISI JUDUL BLOG KAMU DISINI</title>
<style>
body{
background: white;
font-family: arial;
}
</style>
</head>
<html>
<head>
<title>ISI JUDUL BLOG KAMU DISINI</title>
<style>
body{
background: white;
font-family: arial;
}
</style>
</head>
Ketika kamu langsung menekan save hanya sampai di code <head> </head> saja, maka kamu akan mendapatkan pesan " There should be on and only one skin in the theme, and we found:0 "
Yang artinya tema kamu belum memiliki <b:skin> . silahkan masukkan kode berikut tepat dibawah </style>
<b:skin><![CDATA[
body{
background: white;
}
]]></b:skin>
body{
background: white;
}
]]></b:skin>
Dan ketika kamu menekan save lagi ketika barus selesai dalam tahap <head>. Maka kamu akan mendapatkan pesan error lagi " The Theme Must include a "<body>" tag ". Artinya kamu baru berhasil untuk membuat Headnya saja. Berikut code bodynya dan silahkan disave tepat dibawah </head>.
<body>
<h1> ISI Judul Blogmu </h1>
<p> ISI Deskripsi Blogmu disini </p>
</body>
</html>
<h1> ISI Judul Blogmu </h1>
<p> ISI Deskripsi Blogmu disini </p>
</body>
</html>
Ketika kamu sudah menyelesaikan kodenya dari <DOCTYPE HTML> hingga </html> dan silahkan kamu save. Namun ternyata pekerjaan kamu belum selesai, selanjutnya silahkan menambahkan code <b:section> di dalam bidang <body> terserah dimana saja yang penting masih di dalam <body> </body>. Berikut kode untuk <b:sectionnya>
1. <b:section> untuk main-blog
<aside id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
</aside>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
</aside>
2. <b:section> untuk Sidebar
<aside id='sidebar-wrapper'>
<b:section class='sidebar common-widget' id='sidebar' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
</b:widget>
</b:section>
</aside>
<b:section class='sidebar common-widget' id='sidebar' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
</b:widget>
</b:section>
</aside>
Nah dari contoh dan penjelasannya maka akan terbentuk kerangka :
<!DOCTYPE html>
<html>
<head>
<title>Tulis Judul Blogmu Disini</title>
<style>
body{
background: white;
font-family: arial;
}
</style>
<b:skin><![CDATA[
body{
background: white
}
]]></b:skin>
</head>
<body>
<header> Judul Blogmu</header>
<p>Isi deskripsi Blogmu disini </p>
<aside id='sidebar-wrapper'>
<b:section class='sidebar common-widget' id='sidebar' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
</b:widget>
</b:section>
</aside>
</body>
</html>
<html>
<head>
<title>Tulis Judul Blogmu Disini</title>
<style>
body{
background: white;
font-family: arial;
}
</style>
<b:skin><![CDATA[
body{
background: white
}
]]></b:skin>
</head>
<body>
<header> Judul Blogmu</header>
<p>Isi deskripsi Blogmu disini </p>
<aside id='sidebar-wrapper'>
<b:section class='sidebar common-widget' id='sidebar' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
</b:widget>
</b:section>
</aside>
</body>
</html>
Itulah cara membuat tema blog sendiri dari nol versi PenggemarKoding, semoga bermanfaat dan selamat mencoba!. Di artikel selanjutnya, kita akan membuat header, content wrapper, sidebar wrapper, dan footer dengan CSS.
s: penggemarkoding.blogspot.com
0 Response to "Cara Membuat Tema Blog Sendiri dari Dasar"
Post a Comment