cara membuat template di blogger

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol

Selamat datang di blog Dua Rupa, Blogger!

Sebelum memulai, saya ingin menginformasikan kepada Anda bahwa sebenarnya template blog dengan platform Blogger sudah tersedia banyak sekali di internet.

Kalau tidak percaya, coba saja lakukan pencarian dengan kata kunci "template blogger" di Google.

Anda akan menemukan ribuan template blogger dengan desain dan fitur yang berbeda satu sama lain, yang bisa Anda dapatkan baik secara gratis maupun berbayar.

Jika sudah ada sekian banyak template blog yang bertebaran di internet dan bahkan dapat diperoleh secara gratis, lalu mengapa harus susah-susah belajar membuat template blog sendiri? Bukankah akan lebih praktis jika kita menggunakan template yang sudah ada saja?

Benar sekali bahwa menggunakan template blog buatan orang lain memang merupakan langkah yang cepat dan praktis. Kita juga tidak perlu susah-susah belajar coding yang tentu sangat menyita waktu.

Tetapi sobat Blogger, saya ingin sedikit cerita pengalaman saya yang sudah mengenal Blogger sejak tahun 2008. Dibandingkan menggunakan template blog orang lain, saya lebih nyaman dan lebih konsisten melakukan update posting ketika menggunakan template blog yang saya buat sendiri.

Pada awal mengenal Blogger, saya juga hanya bisa menggunakan template blog buatan orang lain.

Seiring berjalannya waktu, saya sangat senang melakukan modifikasi desain dan fitur template blog orang lain untuk memenuhi kriteria blog yang saya butuhkan.

Hingga akhirnya sampai saat ini bisa dibilang saya telah berhasil membuat template blog sendiri mulai dari nol.

Jika dihitung mulai sejak awal pertama kali saya mengenal Blogger, sudah hampir 9 tahun saya menjadi seorang Blogger. Selama 9 tahun itu pula saya belajar memodifikasi template blogger secara otodidak (sendiri) dengan sumber tutorial saya cari di Google.

Belajar secara otodidak memang akan memberikan Anda pengalaman yang luar biasa, tetapi mungkin akan menghabiskan lebih banyak waktu. Belajar kepada seseorang yang memiliki keahlian dan pengalaman akan membuat Anda paham dengan lebih efektif.

Pada kesempatan ini, izinkan saya untuk membagikan pengalaman selama 9 tahun belajar memodifikasi template blogger saya ini dalam bentuk panduan membuat template blog Blogger sendiri dari awal.

Merupakan suatu kebanggaan tersendiri bagi saya ketika Anda telah berhasil membuat template blog Blogger karya Anda sendiri karena mengikuti panduan yang saya tulis ini.

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol

Template blog merupakan jantung sebuah blog. Ia mengatur desain dan fitur yang dimiliki sebuah blog. Dalam panduan ini, kita akan belajar membuat template blog dengan kriteria minimal sebagai berikut :

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

Template blog memiliki struktur yang kompleks, sehingga untuk dapat memahami tiap bagian dengan baik, saya telah membagi panduan membuat template blog sendiri ini menjadi beberapa serial.

Jika Anda benar-benar pemula dalam dunia Blogger, saya sarankan Anda untuk melanjutkan membaca artikel ini sampai selesai dulu, baru kemudian mulai melanjutkan membaca serial berikut :

No	Serial	Pemahaman
1.	Pemahaman Dasar	5%
2.	Membuat Blog Ringan, Valid HTML5, dan SEO Friendly	10%
3.	Struktur Dasar Template Blog	20%
4.	Menu Navigasi	30%
5.	Desain Header	40%
6.	Desain Posting	50%
7.	Desain Kolom Komentar	60%
8.	Desain Sidebar	70%
9.	Desain Footer	80%
10.	Kustomisasi Font	90%
11.	Responsive Template	100%

Sekilas Tentang Blogger

Blogger merupakan sebuah layanan blog-publishing yang dirintis oleh Pyra Labs pada tahun 1999, dan dibeli oleh Google pada tahun 2003.

Semua blog dengan platform Blogger secara default dihosting pada subdomain blogspot.com, namun bisa di-upgrade menjadi top level domain (seperti www.duarupa.com).

Server penyimpanan data berupa gambar, video, dan script dihosting pada server Google, dan dapat langsung diunggah melalui Blogger. Data yang dihosting pada server luar atau pribadi tetap dapat dimuat dan ditampilkan pada blog dengan platform Blogger.

Untuk melihat source code (kode sumber) template blog Blogger dapat dilakukan dengan masuk ke Template Editor. Caranya pada Dashboard Blogger, pilih Theme, kemudian pilih Edit HTML.

Di dalam kotak Template Editor ini Anda dapat melakukan modifikasi template blog Anda.

XML

Blog dengan platform Blogger dibangun menggunakan XML. XML (Extensible Markup Language) adalah bahasa markup (manipulasi) untuk keperluan umum yang disarankan oleh W3C (World Wide Web Consortium) untuk membuat dokumen markup untuk keperluan pertukaran data antar sistem yang beraneka ragam.

Jadi dokumen yang dibuat menggunakan XML dapat dijalankan pada multi-platform OS seperti Windows, Linux, Macintosh, Android, dan lain-lain.

Berikut adalah 2 baris script paling atas pada template blogger yang menunjukkan bahwa template tersebut dibangun menggunakan XML.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>

1.
2.

XML sendiri berfungsi mendefinisikan syntax penulisan kode-kode bahasa pemrograman menjadi tidak standar, yang dapat kita tentukan sendiri. Contohnya :

<penulis>Nama Penulis Blog</penulis>

1.

Fungsi "penulis" disini merupakan fungsi yang kita definisikan sendiri, yang mana jika dipanggil akan menampilkan nilai berupa Nama Penulis Blog.

XML hanya sebatas melakukan pendefinisian fungsi saja, untuk menampilkan fungsi tersebut harus dilakukan pemanggilan menggunakan bahasa pemrograman lain.

Pemanggilan fungsi XML dalam template blogger dilakukan menggunakan HTML. Selain itu fungsi XML juga dapat diatur tampilannya menggunakan CSS.

CSS

Pada dasarnya sebuah template blogger tersusun dari kumpulan fungsi-fungsi XML. CSS (Cascading Style Sheets) berfungsi untuk mengatur desain atau tampilan fungsi-fungsi tersebut.

Di dalam CSS tampilan (style) template blog didefinisikan dalam bentuk nilai yang diapit dalam kurung kurawa "{...}" atau bracket.

•CSS_id {style-CSS-satu:nilaipertama;style-CSS-dua:nilaikedua;}

1.

Berikut ini adalah 3 cara penulisan CSS :

1. table { // tanpa awalan apapun
     width:100%;
     margin:10px;
   }
   
   1.
   2.
   3.
   4.
   

   Yang pertama penulisan tanpa awalan tag apapun sebelum CSS table. Penulisan seperti ini akan mengatur tampilan semua tabel yang dibuat menggunakan fungsi <table>.
   

2. #keren{ // dengan hashtag
     width:100%;
     margin:10px;
     color:red;
   }
   
   1.
   2.
   3.
   4.
   5.
   

   Yang kedua adalah penulisan CSS diawali dengan tagar (tanda pagar) "#" atau hashtag. CSS seperti ini dapat dipanggil dengan menyisipkan tag id pada fungsi. Contoh pemanggilannya :
   
   

   <table id="keren"></table>
   
   1.
   

   Tagar biasanya digunakan untuk menandai bagian-bagian utama template blog.
   

3. .keren{ // dengan dot
     width:100%;
     margin:10px;
     color:red;
   }
   
   1.
   2.
   3.
   4.
   5.
   

   Yang terakhir penulisan CSS yang diawali tanda titik "." atau dot, dapat dipanggil dengan menyisipkan tag class pada fungsi. Contoh pemanggilannya :
   
   

   <table class="keren"></table>
   
   1.
   

   Tanda titik ini biasanya digunakan untuk menandai elemen-elemen di dalam bagian-bagian utama template blog.

HTML

Secara umum HTML berfungsi untuk menampilkan fungsi-fungsi yang telah didefinisikan sebelumnya oleh XML.

Struktur HTML sendiri terdiri dari 2 bagian yaitu bagian head (kepala) dan body (tubuh).

<HTML>
<head>
 // untuk meta, javascript, CSS
</head>
<body>
 // untuk memanggil fungsi yang telah didefinisikan pada bagian head
</body>
</HTML>

1.
2.
3.
4.
5.
6.
7.
8.

Bagian head ini berisi pendeklarasian fungsi seperti meta, javascript, dan CSS. Fungsi-fungsi ini hanya disimpan saja dalam memori head, belum ditampilkan.

Untuk menampilkan fungsi-fungsi di dalam memori head, dilakukan pemanggilan terhadap fungsi-fungsi tersebut pada bagian body.

Contoh HTML di bawah ini menyimpan CSS wrapper pada bagian head dan dipanggil pada bagian body untuk ditampilkan.

<HTML>
<head>
#wrapper {background: #fff; width: 90%; padding: 20px;margin:20px}
</head>
<body>
<div id='wrapper'>
      isi konten
</div>
</body>
</HTML>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Membuat Template Blog Sendiri Mulai Dari Nol

Sekarang kita akan langsung praktek. Sebaiknya Anda mengikuti tutorial di bawah sambil mempraktekkannya. Buatlah blog baru yang khusus digunakan untuk belajar, jangan gunakan blog utama Anda.

Silahkan hapus seluruh kode template Anda sebelumnya dengan cara seleksi semua kode (Ctrl+A), kemudian tekan Delete atau Backspace untuk menghapusnya.

Membuat Struktur XML dan HTML

Silahkan copy dan paste kode di bawah ini ke dalam Template Editor, kemudian pilih Save Theme untuk menyimpannya.

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

1.
2.
3.
4.
5.
6.
7.
8.

Apa yang terjadi? Error!

There should be one and only one skin in the theme, and we found: 0

Perhatikan kata skin yang saya cetak tebal. Jika diterjemahkan artinya kulit, tetapi dalam kasus ini berarti tampilan. Anda tahu kan siapa yang bertanggung jawab mengatur tampilan?

Error di atas muncul karena kita belum mengatur tampilan blog kita. CSS berperan sebagai pengatur tampilan. Jadi solusi untuk error di atas tentu saja adalah dengan menambahkan CSS.

Menambahkan CSS

Secara default CSS diletakkan di antara tag b:skin dan penutupnya.

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

1.
2.
3.

Sekarang coba letakkan CSS berikut pada bagian head, kemudian coba simpan.

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

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

Apa yang terjadi? Error lagi!

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

Perhatikan kata section yang tercetak tebal. Error di atas muncul karena kita belum menampilkan apapun di dalam blog kita. CSS di atas hanya disimpan di dalam memori head, belum ditampilkan.

Ingat bahwa untuk menampilkan suatu fungsi, maka fungsi tersebut harus dipanggil terlebih dahulu. Untuk memanggil fungsi salah satunya dilakukan menggunakan tag b:section.

Memanggil Bagian Posting

Contoh tag b:section untuk menampilkan bagian posting.

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

1.
2.
3.

Sekarang masukkan tag b:section untuk postingan pada bagian body kemudian simpan.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; 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>

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

Berhasil! Kali ini tidak ada error yang muncul.

Sekarang coba lihat tampilan blog Anda dengan memilih View Blog.

Seharusnya tampilan sementara blog Anda akan seperti gambar di bawah ini.

Perhatikan bagian tab browser yang Anda gunakan untuk membuka blog Anda. Di situ tertera alamat blog Anda, bukan? Padahal seharusnya judul blog.

Menambah Tag Title

Cara membuat judul blog kita muncul pada tab browser adalah dengan menyisipkan tag title berikut.

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

1.

Masukkan tag title ke bagian head, kemudian simpan.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; 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>

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

Lihat kembali blog Anda, harusnya sudah seperti gambar di bawah ini.

Penggunaan tag b:skin ternyata telah diatur untuk memuat CSS dasar (bundle.css) yang dihosting di blogger.com (tidak ditanam langsung pada Template Editor), yang menyebabkan bertambah lamanya waktu loading blog.

Sampai disini apakah Anda sudah siap untuk membuat template blog Anda sendiri? Jika sudah silahkan lanjutkan membaca serial kedua panduan membuat template blog sendiri berikut : Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly.

Selamat, Anda baru saja menyelesaikan serial pertama dari 11 serial panduan membuat template blog sendiri. Pemahaman Anda sudah mencapai 5%.

5%