Cara Membuat Template Blog Sendiri Dari Nol Di Blogspot

Pernah gak sih kamu kepikiran untuk Membuat Template Blog sendiri?, Awal-awal saya memulai menjadi seorang blogger saya tidak terlalu peduli template siapa yang saya gunakan. Sampai akhirnya ada rasa ingin Membuat Template Blog Sendiri Dari Nol.

Template Blogspot dibuat dengan HTML dan CSS, Berbeda dengan wordpress yang menggunakan bahasa pemrograman PHP. Kali ini kita akan belajar membuat template blog blogger sendiri yang responsive HTML 5.

sebelum memulai membuat template blog ada baiknya kamu memahami sedikit tentang HTML dan CSS, Kenapa?. Memang kamu bisa membaca kode CSS asli dari Blogspot yang Bejibun numpuk jadi 1 bukan deret ke bawah.

contohnya kaya gini

Kode CSS untuk membuat template blog
Contoh Kode CSS bawaan

Gimana udah nyerah? Jangan dong itu cuma sebagian aja. sebenernya ini tidak termasuk dalam dunia percodingan karena HTML ini bukan bahasa pemrograman. Saya lupa itu apa, kalian bisa cari di google. karena pembahasan kita adalah membuat template blogger.

Saat kalian mencari di google tentang Template Blog Gratis dan Keren maka akan banyak bahkan sampai ribuan template blogger yang ada dan tersebar. Tetapi jika menggunakan template orang lain rasanya Kurang pas di hati.

berbeda jika menggunakan template buatan sendiri, kamu bakal lebih leluasa untuk mengutak-atik bentuk dan tampilannya tanpa takut adanya copyright.

baiklah langsung saja kita mulai jadi bagaimana Cara Membuat Template Blog Sendiri? sebenarnya saya belum berhasil mengembangkan template blog tetapi saya sudah tau struktur dan tata letak dari templatenya.

kalau kamu mau lihat contoh template blog yang saya buat sendiri, bisa cek disini.

ini adalah susunan CSS yang saya buat

cara membuat template blogger sendiri
Kode CSS penyusun template Blog

Lebih nyaman dipandang bukan?, saya sarankan kalian menyusunnya deret kebawah biar gak pusing. Sebenernya ada cara mudah membuat template blog sendiri yaitu menggunakan Bootstrap kalian cukup copy paste kode saja dan jadi deh. cuma ya tampilannya gitu.

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol!

Langsung saja kita ke pembahasan bagaimana cara membuat template blogger sendiri mulai dari Nol. ada beberapa tahap membuat template blogger yaitu:

  • Memiliki desain yang mudah diatur
  • Mudah menambah dan mengurangi fitur
  • Ringan, fast loading
  • Tampilan responsive pada berbagai ukuran layar
  • Valid HTML5
  • SEO Friendly

Saya akan memberikan panduang membuat template blog sendiri yang mudah dipahami sehingga ketika blog yang kamu pakai atau kamu pasangi template buatan sendiri mengalami BUG atau Error kamu bisa tau dimana kesalahannya.

Jika kamu adalah seorang yang benar-benar pemula dalam membuat template blog sendiri saya sarankan untuk membaca artikel ini sampai habis, baru kalian lanjutkan seri berikutnya setelah kalian paham dengan struktur atau kerangka template blog HTML yang akan saya berikan.

Tutorial Cara Membuat Template Blog Sendiri Mulai Dari Nol ini kita bagi menjadi beberapa Seri supaya tidak kepanjangan.

  1. Pemahan
  2. Membuat Blog Ringan, Valid HTML5, dan SEO Friendly
  3. Struktur dasar Template Blogspot
  4. Desain Menu Navigasi
  5. Desain Header
  6. Merapikan Postingan
  7. Membuat kolom komentar
  8. Desain Sidebar
  9. Desain Footer
  10. Custom Font
  11. Responsive

Mulai Membuat Template Blog Sendiri Dari Nol

Baik supaya tidak terlalu lama kalian menyimak, kita akan langsung ke inti dari membuat template blog.

berhubung kita sedang belajar cobalah untuk membuat blog baru di blogspot. kemudian masuk ke menu tema, Edit HTML dan hapus semua kode dengan cara CTRL+A kemudian Delete dan jadi kosong seperti ini.

edit html template blog sendiri
Bagian HTML

Membuat Struktur Blog

Struktur blog terdiri dari kode HTML yang berisi <head> dan <body>, bisa juga ditambah footer.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
</head>
<body>
</body>
</HTML>

silahkan kalian copy strukturnya dan tempelkan di menu html tadi dan coba di save.

error html

dan ternyata ERROR!

kenapa bisa error? coba perhatikan There Should be one and only one skin in theme, and we founf: <b>0<b>. Ya karena kita belum mengatur skin atau style yang berperan penting untuk mengatur bentuk template blog yang kita buat.

Menambahkan Kode CSS pada Template Blog Sendiri

Caranya adalah kita menambahkan kode untuk meletakkan CSS di Blog silahkan salin Kode atau kalau kalian pengen hafal bisa ketik sendiri.

<b:skin><![CDATA[
   /*CSS di sini...*/
]]></b:skin>

letakkan kodenya pada bagian <head>…</head> kemudian coba save ulang.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
 <head>
  <b:skin><![CDATA[
body {
    background-color: #fff;
    background-position: center center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
a:link {
    font-family: Helvetica; 
    font-size: 15px; 
    color:#3094db;
}
a:hover {
    color: #4d4544;
    }
a {
    color: #3094db;
    }
]]></b:skin>
</head>
<body>
</body>
</HTML>

Dan Hasilnya ERROR Lagi! kali ini dengan kode yang berbeda yaitu We did not find any section in your theme. A theme must have at least one b:section tag.

Menambahkan Tag <b:section> di blog

Error terjadi karena kita belum menambahkan Section atau bagian pada <body> di blog kita, Kode CSS diatas hanya tersimpan dibagian <head> supaya bisa tampil kita harus memanggil kode tersebut dengan tag <b:section>

berikut adalah contoh tag nya

<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>

Jadi Struktur atau Kerangka template Blog kita menjadi seperti ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[
body {
background-color: #fff;
background-position: center center;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
a:link {
font-family: Helvetica;
font-size: 15px;
color:#3094db;
}
a:hover {
color: #4d4544;
}
a {
color: #3094db;
}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</body>
</HTML>

Save dan berhasil kali ini tidak ada yang error. sekarang coba simpan templatenya dan lihat tampilan blognya, tampilannya seperti ini.

cara buat template blog sendiri
tampilan sementara template kita

sekarang coba perhatikan pada bagian tab browser yang kamu pakai untuk membuka template blog yang sudah kamu buat tadi. Disitu tertulis URL blog, Padahal seharusnya judul situs.

cara supaya tab browser menampilkan judul situs
Tampilan tab browser

Menambahkan Tag Title pada Template Blog

Cara supata judul situs kita muncul di tab browser adalah dengan menambahkan Tag title dibawah ini

<title><data:blog.title/></title>

Letakkan tag title di bagian <head> lalu simpan, jadi Kode HTML Blog kita jadi seperti ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[
body {
background-color: #fff;
background-position: center center;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
a:link {
font-family: Helvetica;
font-size: 15px;
color:#3094db;
}
a:hover {
color: #4d4544;
}
a {
color: #3094db;
}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</body>
</HTML>

sekarang coba cek lagi tab browser kamu, seharusnya sudah berubah seperti ini.

Gabut ngeblog kenapa jadi News Ruang Digital? Karena itu adalah calon blog yang akan saya beri Sub-Domain dari Ruang-digital.my.id.

selamat kamu telah menyelesaikan sesi pertama dari panduan membuat template blog sendiri mulai dari nol!

Jadi bagaimana apa kalian sudah paham sedikit mengenai cara membuat template blog sendiri? atau kamu sudah sangat siap untuk mendesain template blog sesuai keinginan?

kalau sudah siap mari kita lanjutkan sesi ke-2 cara membuat blog blogger sendiri mulai dari nol: Membuat Blog Ringan, Valid HTML5, dan SEO Friendly

Tinggalkan komentar