Tutorial Cara Membuat Template Blog Sendiri Untuk Pemula Terlengkap

panduan cara membuat template blog sendiri untuk pemula

Panduan Cara Membuat Template Blog Sendiri Untuk Pemula 

 

Tak sedikit orang ingin belajar cara membuat template blog sendiri.

Ya, salah satunya anda.

Sebenarnya template blog khususnya untuk platform Blogger sudah sangat banyak diluar sana.

Coba saja search di google dengan keyword “template blogger” maka anda akan menemukan ratusan bahkan ribuan template dengan fitur dan desain yang sangat bervariasi, dari berbayar sampai gratisan. Pembuat template tersebut pun rata-rata juga sudah profesional yang pastinya template yang dihasilkan ada jaminan ramah pengunjung dan ramah SEO.

Jika begitu kenapa harus susah-susah membuat template blog sendiri?

Apa benefit belajar membuat template blog sendiri?

Mungkin sebagian ada yang bertanya seperti itu dan jawabannya pun pasti juga bervariasi. Setiap individu memiliki alasan masing-masing terkait hal tersebut.

Disini saya akan menjawab dengan alasan saya belajar membuat template blog sendiri berdasarkan pengalaman pribadi.

Awal mula ngeblog saya juga hanya memakai template blog yang didownload secara gratis di beberapa situs penyedia template.

Seiring berjalannya waktu saya sering memodifikasi template blog yang digunakan, menambah fitur, widget, dll sampai akhirnya sedikit paham tentang struktur template.

Karena sudah sedikit paham sayapun mencoba belajar membuat template blog sendiri secara otodidak dan akhirnya jadi.

Menurut saya menggunakan template buatan sendiri merupakan sebuah kebanggaan tersendiri bagi saya, juga ada rasa “puas” karena template yang dipakai memiliki desain yang dibuat dengan selera desain kita sendiri. Selain itu hal tersebut juga dapat menambah sedikit pengalaman dibidang front end developer dan UI/UX.

Setelah saya bisa membuat template blog sendiri, sayapun iseng iseng membuat template blogger lagi dan dibagikan secara gratis dengan menyisipkan credit link dan booommm

Template tersebut bernama RBZ One

Tak disangka banyak juga yang menggunakan dan mengapresiasi karya pertama saya dikala itu.

Karena pada template yang dibagikan disisipkan credit link, hal tersebut secara otomatis menambah backlink dari situs ini.

Bisa dilihat total backlink dari situs ini kurang lebih seperti berikut:

membuat template blogspot sendiri

Backlink tersebut kebanyakan dari template yang saya bagikan gratis.

Bagi yang belum tahu, backlink merupakan salah satu dari SEO Off Page yang sangat berpengaruh pada ranking website/blog kita pada mesin pencari.

Selain membuat template blogspot yang dibagikan gratis, saya juga pernah menjual template hasil buatan saya. Walaupun saya sendiri pada kala itu belum bisa menjadi pembuat template yang profesional, namun alhamdulillah laku juga.

Pada sekitar tahun 2017 saya mendapat untung sekitar 150rb di penjualan template premium pertama saya.

Jadi kurang lebih benefit yang didapat dari membuat template blog sendiri yaitu pengalaman (menambah skill), kepuasan, backlink (jika dibagikan gratis), dan uang (jika dijual).

Bagaimana? Apakah anda semakin tertarik untuk belajar cara membuat template blog sendiri?

Cara Membuat Template Blog Sendiri Untuk Pemula

Template atau tema blog merupakan hal yang utama dalam sebuah blog.

Semua fitur dan desain ditampilkan oleh template blog.

Template blogger sendiri sampai saat ini sudah sampai ke versi 3.

Salah satu pembeda antara versi template blogger yaitu cara menulis kode/syntaxnya dan juga output yang dihasilkan nanti. Di panduan kali ini kita akan belajar membuat template blog sendiri versi terbaru atau versi 3.

Adapun fitur yang akan ada ditemplate yang akan dibuat nanti, antara lain:
  • Simpel & Fast loading
  • Responsive & Mobile Friendly
  • User Friendly
  • SEO Friendly
  • Layout blogger versi 3
  • Widget blogger versi 2
  • Komentar versi terbaru

Dan untuk tata letak dari template blog yang kita buat kurang lebih seperti berikut.
cara membuat template blog blogger dari nol

Untuk wireframe juga sudah saya buat untuk acuan project kita kedepan. Kurang lebih target desain template kita minimal seperti berikut. Oiya sebelum proses membuat template blog sendiri alangkah baiknya kita rancang desain terlebih dahulu untuk gambaran praktek kedepannya.

panduan lengkap membuat template blog sendiri dari awal
Wireframe Halaman Home

cara membuat template blogspot
Wireframe Halaman Item

Dikarenakan struktur template blogger yang begitu kompleks, kami sudah membagi tutorial dalam beberapa BAB/Sesi. Untuk urutan lengkapnya bisa dilihat pada tabel berikut atau bisa masuk ke halaman daftar isi tutorial membuat template blog sendiri untuk pemula


No. Panduan
1. Pendahuluan (Pemahaman Dasar&Struktur Dasar Template)
2. CSS Dasar Template Blogger
3. Menu Navigasi
4. Desain Halaman Homepage
5. Desain Halaman Posting
6. Komentar Blogger
7. Desain Sidebar
8. Desain Footer
9. Kostumisasi Font
10. Responsive Template
11. Membuat Template SEO Friendly

Pemahaman Dasar

Sebelum memulai membuat template blog sendiri ada beberapa hal yang harus dipahami terlebih dahulu.

Ibarat kata dasar teori yang perlu dibaca untuk bekal praktik membuat template blog sendiri nanti.

Lembar Kerja

Lembar kerja dalam pembuatan template blogspot yaitu berada pada template editor blogger.

Cara masuk template editor yaitu dengan login ke Dashboard Blogger, pilih Theme atau Tema, pada tema saya pilih panah kecil disamping sesuaikan, kemudian pilih “Edit HTML”.

panduan mendesain template blog sendiri

Bahasa Pemrograman

Untuk membuat template blog blogger sendiri paling tidak kita harus paham dasar dari 3 bahasa pemrograman berikut:
  • XML
  • HTML
  • CSS

Tidak harus hafal semua codenya, saya pribadipun juga tidak menghafal semuanya. Cukup pahami konsep dasar atau bisa dibilang aturan penulisan saja.

Untuk yang ingin belajar HTML dan CSS sebenarnya sudah banyak situs yang menyediakan secara lengkap.

Berikut link bagi yang ingin belajar HTML dan CSS:
Bahasa inggris:

HTML: https://www.w3schools.com/html/

CSS: https://www.w3schools.com/css/default.asp

Bahasa Indonesia:

HTML:

https://www.duniailkom.com/tutorial-belajar-html-dan-index-artikel-html/

https://www.petanikode.com/tutorial/html/

CSS:
https://www.duniailkom.com/tutorial-belajar-css-dan-index-artikel-css/
https://www.petanikode.com/tutorial/css/

Jika teman-teman tidak punya waktu untuk belajar melalui link diatas tidak masalah, akan kami berikan rangkuman konsep dasar HTML dan CSS dibawah ini, semoga bisa dipahami.

XML

XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam. XML merupakan kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa standar untuk melacak Internet.

Bahasa XML ini berfungsi untuk menyederhanakan proses penyimpanan dan pengiriman data antarserver.

Berikut baris syntax pada template blogger yang menandakan bahwa template tersebut dibangun menggunakan bahasa xml

<?xml version="1.0" encoding="UTF-8" ?>
Berbeda dengan HTML, dalam xml kita bebas menentukan nama tag sendiri.
Contoh penggunaan tag pada xml
<nama>Reboza Sambirejo</nama>

Tag "nama" diatas merupakan fungsi yang kita definisikan sendiri, yang mana jika dipanggil akan menampilkan nilai berupa nama yang sudah kita inputkan.

Untuk contoh lain penggunaan XML pada template blogger yang nantinya akan sering kita temui kurang lebih seperti berikut tag nya

<b:includable id=’’>.......</b:includable>
<b:if cond=’’>.....</b:if>

HTML

HTML pada blogger berfungsi menampilkan fungsi-fungsi yang telah didefinisikan sebelumnya menggunakan XML.

Struktur dasar HTML kurang lebih seperti berikut:


<!DOCTYPE html>
<html>
<head>
// dapat berisi meta tag, javascript, CSS
</head>
<body>
// isi konten untuk memanggil fungsi-fungsi xml ataupun fungsi yang telah didefinisikan di head. Dapat berisi script javascript juga
</body>
</html>

Bagian head digunakan untuk menyimpan meta tag, javascript, ataupun CSS. Bagian head akan dimuat diawal namun tidak sepenuhnya ditampilkan pada halaman web. Hal tersebut dikarenakan head hanya menyimpan fungsi-fungsi saja.

Untuk menampilkan fungsi-fungsi tersebut harus dipanggil pada bagian body agar nantinya bisa ditampilkan.

CSS

Umumnya template blogger tersusun dari XML yang ditampilkan menggunakan bahasa HTML.

Fungsi dari CSS sendiri yaitu mengatur desain dari HTML tersebut. Desain disini meliputi ukuran, tata letak, warna, dsb.

Cara kerja CSS sendiri yaitu dengan menyeleksi elemen HTML melalui selektor lalu memberikannya property sekaligus nilainya untuk menghasilkan desain yang diinginkan.

Bentuk umum CSS:


Selektor {
 Properti: nilai;
 Properti kedua: nilai kedua;
}
Contoh penerapanya

body {
 width: 100%;
 background: #ccc;
 color: black;
}

body: selektor berupa tag
width: 100%; //properti width dan nilainya 100% maksudnya yaitu elemen body memiliki lebar 100%
background: #fff; //properti dan nilai kedua, artinya warna backgroundnya yaitu dengan kode warna RGB #FFF (putih)
color: black; //properti dan nilai ketiga, berfungsi memberikan warna text dengan warna hitam

Selektor CSS
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita atur.

Selektor bisa berupa tag, id, class, dan attribute.

Contoh:

/* Selektor dengan nama tag */
h2 {
    color: blue
}

/* Selektor degnan class */
.bg-yellow {
    backgound-color: yellow;
}

/* selektor dengan ID elemen */
#header {
    background: grey;
}

/* Selektor dengan Atribut */
input[type=text]{
    background: yellow;
}
Contoh penggunaan CSS dengan html

<HTML>
<head>
<style>
/* Selektor dengan nama tag */
h2 {
color: blue
}
/* Selektor dengan class */
.bg-yellow {
backgound-color: yellow;
}
/* selektor dengan ID elemen */
#header {
background: grey;
}
/* Selektor dengan Atribut */
input[type=text]{
background: yellow;
}
</style>
</head>
<body>
<div id="header">
Header
</div>
<div class=”bg-yellow”>
<h2>Reboza Sambirejo</h2>
</div>
<input type="text" placeholder="ketik sesuatu..." />
</body>
</HTML>
Outputnya:
cara mudah membuat template blog blogger

Jadi secara umum penulisan selektor seperti berikut:
Tag ditulis langsung

HTML

<body>
CSS

body{
    property: nilai
}

Id diawali dengan "#"

HTML

<div id="header">
CSS

#header{
	property: nilai
}
Class diawali dengan "."

HTML

<div class="kotak">
CSS

.kotak{
	property: nilai
}
Atribut ditulis tag[atribut tanpa petik]

HTML

<input type="text" placeholder="ketik sesuatu..." />
CSS

input[type=text]{
	property: nilai
}
Oiya penulisan CSS tidak harus seperti ini

body{
	width: 100%;
	background: #ccc;
	color: black;
}
Bisa kita sederhanakan menjadi seperti berikut

body{width: 100%;background: #ccc;color: black;}
Fungsi cara penulisan pertama adalah untuk mempermudah dalam pengeditan nantinya.

Mulai Membuat Template Blog Sendiri

Pada bagian ini kita akan langsung ke praktek membuat template blog sendiri. Untuk kalian yang memang masih pemula dalam hal ini silahkan ikuti tutorial secara urut dari awal. Baca sambil dipraktekkan langsung dan lakukan berulang kali jika masih belum paham.

Untuk menghindari sesuatu yang tidak diinginkan, kami sarankan untuk membuat blog baru khusus untuk praktek kali ini.

Pertama buat blog baru dan jangan isi dengan konten dahulu.

Masuk ke template editor lalu hapus semua isinya dengan cara klik pada bagian isi, kemudian tekan ctrl+a lalu delete atau back space.

cara membuat template blog paling lengkap

Struktur dasar XML dan HTML Blogger

Salin dan tempelkan (ctrl+c then ctrl+v) kode dibawah ini ke template editor

<?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>

Jika sudah coba save theme dengan mengeklik tombol save

Yaa maka akan muncul error seperti berikut.
panduan membuat template blog detail dan lengkap

There should be one and only one skin in the theme, and we found: <b>0</b>

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.

CSS Blogger

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

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

Untuk itu tambahkan kode beikut didalam tag head, kemudian save

<?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:     Reboza Template
	Version:  1.0.0
	Designer: Rosyad (Reboza Sambirejo)
	----------------------------------------------- */
	]]></b:skin>
  </head>
  <body>
  </body>
</html>
Setelah klik save maka akan muncul error kembali.
cara mudah membuat template blogspot sendiri dari awal

We did not find any section in your theme. A theme must have at least one b:section tag.

Hal tersebut dikarenakan 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

<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.


<?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:     Reboza Template
	Version:  1.0.0
	Designer: Rosyad (Reboza Sambirejo)
	----------------------------------------------- */
	]]></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.
panduan membuat template blogger mudah dan lengkap


Perhatikan pada tab browser anda.
cara membuat theme blogger sendiri

Disitu tertulis url blog kita bukan judul kita.

Untuk mengubahnya kita harus menambahkan meta tag title.

Tambahkan kode berikut didalam head atau dibawah tag <head>

<!-- Title -->
<b:if cond='data:view.isHomepage'>
    <title><data:blog.pageTitle/></title>
<b:elseif cond='data:view.isSingleItem'/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
<b:elseif cond='data:view.isMultipleItems and data:blog.pageName == &quot;&quot;'/>
    <title>
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Semua Postingan - <data:blog.title/>
        <b:default/>
        All Posts - <data:blog.title/>
    </b:switch>
    </title>
<b:elseif cond='data:view.isError'/>
    <title> 
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Halaman tidak ditemukan - <data:blog.title/>
        <b:default/>
        Page Not Found - <data:blog.title/>
    </b:switch>
    </title>
<b:else/>
    <title><data:blog.pageName/></title>
</b:if>
Kurang lebih menjadi seperti berikut

<?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>
  	<!-- Title -->
<b:if cond='data:view.isHomepage'>
    <title><data:blog.pageTitle/></title>
<b:elseif cond='data:view.isSingleItem'/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
<b:elseif cond='data:view.isMultipleItems and data:blog.pageName == &quot;&quot;'/>
    <title>
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Semua Postingan - <data:blog.title/>
        <b:default/>
        All Posts - <data:blog.title/>
    </b:switch>
    </title>
<b:elseif cond='data:view.isError'/>
    <title> 
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Halaman tidak ditemukan - <data:blog.title/>
        <b:default/>
        Page Not Found - <data:blog.title/>
    </b:switch>
    </title>
<b:else/>
    <title><data:blog.pageName/></title>
</b:if>
  	<b:skin><![CDATA[
  	/* -----------------------------------------------
	Blogger Template Style
	Name:     Reboza Template
	Version:  1.0.0
	Designer: Rosyad (Reboza Sambirejo)
	----------------------------------------------- */
	]]></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>

Menambahkan Header

Lanjut ke header.

Header adalah elemen paling atas tempat untuk menampilkan judul blog kita.

Untuk cara menambahkan silahkan copy dan paste kode berikut dibawah tag <b:if cond='!data:view.isError'>

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        	<b:widget id='Header1' locked='true' title='' type='Header' visible='true'></b:widget>
</b:section>

Kurang lebih seperti berikut

<?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>
  	<!-- Title -->
<b:if cond='data:view.isHomepage'>
    <title><data:blog.pageTitle/></title>
<b:elseif cond='data:view.isSingleItem'/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
<b:elseif cond='data:view.isMultipleItems and data:blog.pageName == &quot;&quot;'/>
    <title>
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Semua Postingan - <data:blog.title/>
        <b:default/>
        All Posts - <data:blog.title/>
    </b:switch>
    </title>
<b:elseif cond='data:view.isError'/>
    <title> 
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Halaman tidak ditemukan - <data:blog.title/>
        <b:default/>
        Page Not Found - <data:blog.title/>
    </b:switch>
    </title>
<b:else/>
    <title><data:blog.pageName/></title>
</b:if>
  	<b:skin><![CDATA[
  	/* -----------------------------------------------
	Blogger Template Style
	Name:     Reboza Template
	Version:  1.0.0
	Designer: Rosyad (Reboza Sambirejo)
	----------------------------------------------- */
	]]></b:skin>
  </head>
  <body>
  	<b:if cond='!data:view.isError'>
  		<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        	<b:widget id='Header1' locked='true' title='' type='Header' visible='true'></b:widget>
    	</b:section>
  		<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 lalu coba refresh halaman blog kalian.

Kurang lebih tampilannya menjadi seperti ini
membuat theme blogspot dari awal sendiri

Menambahkan Sidebar


Masuk kebagian samping selanjutnya kita akan menambahkan sidebar disamping kanan blog.

Copy paste kode berikut dan letakkan dibawah <b:section class='main-content' id='main-content' name='Konten'>.....</b:section> atau diatas tag </b:if> bawah sendiri

<aside id='sidebarWrap'>
            <!-- widget sidebar -->
            <b:section class='sidebar-content' id='sidebar-content' name='Sidebar '>
            </b:section>
</aside>

Kurang lebih menjadi seperti ini

<?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>
  	<!-- Title -->
<b:if cond='data:view.isHomepage'>
    <title><data:blog.pageTitle/></title>
<b:elseif cond='data:view.isSingleItem'/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
<b:elseif cond='data:view.isMultipleItems and data:blog.pageName == &quot;&quot;'/>
    <title>
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Semua Postingan - <data:blog.title/>
        <b:default/>
        All Posts - <data:blog.title/>
    </b:switch>
    </title>
<b:elseif cond='data:view.isError'/>
    <title> 
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Halaman tidak ditemukan - <data:blog.title/>
        <b:default/>
        Page Not Found - <data:blog.title/>
    </b:switch>
    </title>
<b:else/>
    <title><data:blog.pageName/></title>
</b:if>
  	<b:skin><![CDATA[
  	/* -----------------------------------------------
	Blogger Template Style
	Name:     Reboza Template
	Version:  1.0.0
	Designer: Rosyad (Reboza Sambirejo)
	----------------------------------------------- */
	]]></b:skin>
  </head>
  <body>
  	<b:if cond='!data:view.isError'>
  		<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        	<b:widget id='Header1' locked='true' title='' type='Header' visible='true'></b:widget>
    	</b:section>
  		<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>
		<aside id='sidebarWrap'>
            <!-- widget sidebar -->
            <b:section class='sidebar-content' id='sidebar-content' name='Sidebar '>
            </b:section>
        </aside>
	</b:if>
  </body>
</html>

Simpan template.

Dikarenakan kita belum mengisi sidebar maka tidak ada perubahan saat kita refresh blog kita.

Menambahkan Footer


Elemen terakhir yang akan kita tambahkan pada sesi kali ini adalah footer. Footer merupakan elemen paling bawah dalam sebuah struktur template.

Footer biasanya berisi credit title.

Untuk menambahkan footer vopy paste kode berikut dan letakkan dibawah <b:section class='main-content' id='main-content' name='Konten'>.....</b:section> atau diatas tag </b:if> bawah sendiri

<footer id='footerWrap' class='footerWrap'>
		<div class='credit'>
		Copyright &#169; 2013. <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - All Rights Reserved - Template Created by <a href='#' target='_blank'>Reboza Sambirejo</a> - Proudly powered by <a href='http://www.blogger.com' target='_blank' title='Blogger'>Blogger</a>
		</div>
</footer>

Kurang lebih seperti berikut

<?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>
  	<!-- Title -->
<b:if cond='data:view.isHomepage'>
    <title><data:blog.pageTitle/></title>
<b:elseif cond='data:view.isSingleItem'/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
<b:elseif cond='data:view.isMultipleItems and data:blog.pageName == &quot;&quot;'/>
    <title>
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Semua Postingan - <data:blog.title/>
        <b:default/>
        All Posts - <data:blog.title/>
    </b:switch>
    </title>
<b:elseif cond='data:view.isError'/>
    <title> 
    <b:switch var='data:blog.locale'>
        <b:case value='id'/>
        Halaman tidak ditemukan - <data:blog.title/>
        <b:default/>
        Page Not Found - <data:blog.title/>
    </b:switch>
    </title>
<b:else/>
    <title><data:blog.pageName/></title>
</b:if>
  	<b:skin><![CDATA[
  	/* -----------------------------------------------
	Blogger Template Style
	Name:     Reboza Template
	Version:  1.0.0
	Designer: Rosyad (Reboza Sambirejo)
	----------------------------------------------- */
	]]></b:skin>
  </head>
  <body>
  	<b:if cond='!data:view.isError'>
  		<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        	<b:widget id='Header1' locked='true' title='' type='Header' visible='true'></b:widget>
    	</b:section>
  		<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>
		<aside id='sidebarWrap' class='sidebarWrap'>
            <!-- widget sidebar -->
            <b:section class='sidebar-content' id='sidebar-content' name='Sidebar '>
            </b:section>
        </aside>
        <footer id='footerWrap' class='footerWrap'>
			<div class='credit'>
				Copyright &#169; 2021. <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - Template Created by <a href='#' target='_blank'>Reboza Sambirejo</a>
			</div>
		</footer>
	</b:if>
  </body>
</html>

Simpan template dan refresh tampilan blog atau view blog
panduan membuat theme blog sendiri lengkap

Sampai disini kalian sudah menyelesaikan bab pertama dalam Tutorial Membuat Template Blog Sendiri Untuk Pemula Terlengkap.

Silahkan lanjut ke bab berikutnya atau bisa lihat Daftar Isi Panduan Membuat Template Blog Sendiri Untuk Pemula
Show comments
Hide comments

28 comments:

  1. Nice artikel, kadang kita perlu niat untuk belajar

    ReplyDelete
    Replies
    1. Iya gan harus ada niat jika benar" ingin membuat template agar nantinya bisa paham. thanks atas kunjunganya.

      Delete
  2. ternyata gini cara buatnya, bermanfaat nih

    ReplyDelete
  3. thanks, infonya mas, ternyata ada cara bikin template untuk blog sendiri.

    ReplyDelete
  4. ternyata buat template sendiri rumit ya -_-
    apalah daya blog saya yang cuma pakek template orang lain :3 sake-xp.blogspot.com

    ReplyDelete
    Replies
    1. ya bisa di bilang cukup rumit juga kalau belum dong bahasa pemrograman web nya. Saya sendiri juga template punya orang, hanya saja saya edit dikit.

      Delete
  5. kan uda jadi kerangkanya mas, tinggal bikin template sendiri dong ya?

    Kunjungan balik mas kalau minat

    ReplyDelete
    Replies
    1. Ya mas. Tinggal melanjutkan saja.

      Ok mas sudah saya kunjungi balik artikel sobat lebih lengkap

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. template yang di pake blog ini apa ?

    ReplyDelete
    Replies
    1. memang sebenarnya mau saya jadikan template premium. Tapi maaf sementara belum bisa dijual karena kodenya belum saya rapikan.

      Delete
    2. Mungkin beberapa minggu lagi akan saya launchingkan. Untuk saat ini masih tahap perbaikan.

      Delete
    3. Kira-kira tanggal berapa? dan harganya berapa ?

      Delete
    4. Belum tau soalnya akhir-akhir ini saya sibuk.

      Delete
    5. Sekarang aja min saya beli, cuma ke saya doang

      Delete
  8. Keren mas bermanfaat bisa beljar otak atik ni =D

    ReplyDelete
  9. Buat tutorial di youtube dong gan.. Cara buat template sendiri

    ReplyDelete
  10. Buat tutorial di youtube dong gan.. Cara buat template sendiri

    ReplyDelete
  11. html header & sidebar mana pak?? gak disediakan

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Gan perbaikin dunk bagian membuat header dan sidebar gak nongol codenya

    ReplyDelete