Cara Membuat Tema Blog Sendiri untuk pemula

Made Wiguna bloggers - pernah gak sih kamu berpikir tentang pembuat tema buat sendiri? Dan kalau di pikir pikir rasanya pasti susah😅, ya memang susah sih kalau belum terbiasa. Sesuai judul nya kali ini saya akan membuat tutorial cara membuat tema blogspot sendiri. Pasti kan kamu sudah agak ngerti html ya karena yang di gunakan untuk membuat tema adalah html, css dan javascript

Saya sarankan untuk belajar dasar dasar html dan css untuk mempermudah proses pembuatan tema

Pertama tama silahkan siapkan sebuah teks editor, dan buat file baru bernama temaku.xml

Untuk membuat tema blog kita harus menggunakan format file .xml

Sekarang kita akan mulai proses pembuatan nya 😄👍

1
2
3
4
5
6
7
8


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' class='v2' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale'>
<head>
</head>
<body>
</body>
</html>

Kurang lebih seperti ini dasar tema blog, tapi saat ini masih belum bisa di gunakan karena tag nya belum lengkap.

Jika penasaran coba copy kode di atas lalu buka pengaturan blog –> tema –> edit tema, hapus semua kode dan paste kan kode di atas.
Selamat anda mendapatkan error 😂, jangan sedih lah Karen error :)

Saya jelaskan sedikit, Error tersebut muncul karena belum ada skin pada template kita. Skin yang dimaksud adalah tag b:skin yang dalam blogger digunakan untuk menyimpan kode CSS.

Berbeda dengan html biasa, pada template blogger kita disarankan meletakkan css di dalam tag b:skin

1
2
3


<b:skin><![CDATA[
  	//kode css disini
]]></b:skin>

Untuk itu tambahkan kode beikut didalam tag head, kemudian save

Jadi sekarang kode nya akan menjadi seperti ini

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' class='v2' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale'>
  <head>
  	<b:skin><![CDATA[
  	/* -----------------------------------------------
	Blogger Template Style
	Name:     MADEWGN Template
	Version:  1.0.0
	Designer: MADEWGN (made wigun)
	----------------------------------------------- */
	]]></b:skin>
  </head>
  <body>
  </body>
</html>

Silakan di save ya.

Lah? Kok error?

Error kali ini disebabkan oleh karenakan tidak ada satupun section di template yang dibuat. Paling tidak kita harus menambahkan 1 tag b:section pada struktur template kita.

Memanggil Bagian Postingan Blog

Section pertama yang bisa kita panggil yaitu bagian posting

1
2
3


<b:section class='main-content' id='main-content' name='Konten'>
  		<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'  visible='true'></b:widget>
</b:section>

Copy paste tag b:section dan b:widget postingan blog didalam tag body.

Selain itu ditambahkan juga tag kondisional kecuali halaman error karena nantinya halaman error akan kita tampilkan dengan isi yang berbeda.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' class='v2' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale'>
  <head>
  	<b:skin><![CDATA[
  	/* -----------------------------------------------
	Blogger Template Style
	Name:     MADEWGN Template
	Version:  1.0.0
	Designer: MADEWGN (made wigun)
	----------------------------------------------- */
	]]></b:skin>
  </head>
  <body>
<b:if cond='!data:view.isError'>
		<b:section class='main-content' id='main-content' name='Konten'>
  		<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'  visible='true'></b:widget>
	</b:section>
    </b:if>
  </body>
</html>

Simpan template maka didalam tag b:widget akan terisi kode otomatis dari blogger sendiri. Setelah itu coba view blog maka akan muncul

‘Subscribe to: Posts (Atom)’

saja. Dikarenakan kita belum memiliki postingan.

Tutorial pembuatan tema Blogspot nya belum selesai ya !

selanjutnya

Tutorial style untuk tema blogspot