Cara Membuat Template Blog Seo Responsive Mulai Dari Nol

Sebelum memulai Proses Pembuatan Template, saya ingin menginformasikan kepada Anda bahwa sebenarnya template blog dengan platform Blogger ini sudah tersedia banyak sekali di internet.Kalau tidak percaya, silahkan saja anda lakukan pencarian dengan kata kunci "template blogger" di Google.

Dalam pencarian di Google Anda akan menemukan ribuan template blogger dengan desain dan fitur yang berbeda-beda satu sama lain, yang bisa Anda dapatkan baik secara gratis ( free ) maupun berbayar ( premium ).

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

Benar sekali bahwa menggunakan template blogger buatan orang lain memang merupakan langkah yang cepat dan praktis.Dan kita juga tidak perlu susah payah belajar coding yang tentu sangat menyita waktu. Akan 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 pada saat ini bisa dibilang saya telah berhasil membuat template blog seo dan responsif sendiri mulai dari nol.

Jika saya hitung mulai sejak awal pertama kali saya mengenal Blogger, sudah hampir 10 tahun saya menjadi seorang Blogger. Selama 9 tahun itu pula saya belajar memodifikasi template blogger sendir dengan sumber tutorial yang saya cari di Google.

Belajar secara otodidak memang akan memberikan Anda pengalaman yang luar biasa, tetapi mungkin akan menghabiskan lebih banyak waktu. Jika belajar kepada seseorang yang sudah memiliki keahlian dan pengalaman yang cukup di duania blogging akan membuat Anda lebih cepat paham dengan lebih efektif.

Pada kesempatan ini, Saya akan membagikan pengalaman saya selama 10 tahun belajar memodifikasi template blogger saya ini dalam bentuk panduan membuat template blog Blogger sendiri dari awal hingga akhir.

Berbagi adalah Sebuah kebanggaan tersendiri bagi saya ketika Anda telah berhasil membuat template blog Blogger karya Anda sendiri karena mengikuti panduan yang saya tulis ini dan mudah mudahan anda paham dengan tulisan saya yang mungkin masih acak acakan ini.

Tutorial Membuat Template Blog 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 ini memiliki struktur yang kompleks, sehingga untuk dapat memahami tiap bagian template dengan baik, saya telah membagi panduan membuat template blog sendiri ini menjadi beberapa serial.Jika Anda memang benar-benar pemula dalam dunia Blogger, Disini saya sarankan kepada Anda untuk melanjutkan membaca artikel ini sampai selesai, 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%

# TENTANG BLOG:

Blogger Adalah 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 Hal Ini bisa di-upgrade menjadi top level domain.

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 masuk ke Dashboard Blogger, pilih Theme, kemudian pilih Edit HTML. untuk lebih jelasnya lihat gambar dibawah ini:

Cara Membuat Template Blog Seo Responsive Mulai Dari Nol

Kemudin Di dalam kotak Template Editor ini Anda dapat melakukan modifikasi template blog Anda sesuka anda

Cara Membuat Template Blog Mulai Dari Nol

# PENJELASAN XML

Blog dengan platform Blogger dibangun dengan 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 beragam.

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>

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

<penulis>Nama Penulis Artikel Blog</penulis>.

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, Sehingga untuk menampilkan fungsi tersebut kita harus lakukan pemanggilan menggunakan bahasa pemrograman lain.

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

# Pengertian CSS

Pada dasarnya sebuah template blogger itu 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;}

Berikut ini adalah 3 cara penulisan CSS :

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

 table {  // tanpa awalan apapun   
  width:100%;   
  margin:10px;  
 }

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

 
 #keren{  // dengan hashtag   
  width:100%;   
  margin:10px;   
  color:red;  
 }

Contoh pemanggilannya :

 
  <table id="Sakti"></table>

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

3. ) Cara Yang Ketiga penulisan CSS yang diawali tanda titik "." atau dot, dapat dipanggil dengan menyisipkan tag class pada fungsi.

 
 .keren{ // dengan dot  
 width:100%;  
 margin:10px;  
 color:red;  
 }

Contoh pemanggilannya :

<table class="Sakti"></table>

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>

Pada 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, Harus 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>

Cara Membuat Template Blog Sendiri:

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

Selanjutnya Silahkan Anda hapus seluruh kode template Anda sebelumnya dengan cara pilih semua atau lakukan dengan cara tekan kode (Ctrl+A) pada keyboard komputer anda, kemudian tekan Delete atau Backspace untuk menghapusnya.Sehingga akan bersih seperti pada gambar yang anda lihat dibawah ini:

Cara Membuat Template Blog Seo Responsive

1. Langkah Pertama adalah Membuat Struktur XML dan HTML

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

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

Sekarang kita melihat, ERROR!

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

Perhatikan kata skin yang saya maksud disini adalah error pada tampilan. Jika diterjemahkan skin artinya kulit, Akan tetapi dalam kasus ini berarti tampilan. Anda tahu kan siapa yang bertanggung jawab mengatur tampilan? tentu saja yang bertanggung jawab adalah CSS.

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.

2. Langkah Kedua Adalah Menambahkan CSS Secara default CSS ini umumnya diletakkan di antara tag <b:skin> dan penutupnya </b:skin>

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

Sekarang kita coba letakkan CSS berikut pada bagian head, kemudian coba sekarang kita 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>

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. Harus Kita Ingat bahwa untuk menampilkan suatu fungsi, maka fungsi tersebut harus dipanggil terlebih dahulu. Untuk memanggil fungsi salah satunya harus dilakukan menggunakan tag b:section.

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

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

Sekarang sudah Tidak muncul error lagi, Selanjutnya Sekarang coba kita lihat tampilan blog Anda dengan memilih View Blog. Seharusnya tampilan sementara blog Anda akan seperti gambar di bawah ini.

Perhatikan pada bagian tab browser yang Anda gunakan untuk membuka blog Anda. Di situ tertera alamat blog Anda, Padahal seharusnya judul blog Blog Anda, Kemudian Langkah Apa Yang harus kita lakukan..? yang harus kita lakukan adalah menambahkan tag Title

Cara Menambah Tag Title Cara membuat judul blog kita agar muncul pada tab browser adalah dengan cara menyisipkan tag title berikut.

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

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>

Sekarang Kita Lihat hasilnya, dan pasti sekarang anda sudah melihat judul postingan pada browser anda

Demikian Adalah Cara Membuat Template blog sendiri dengan mudah dan cepat, untuk tutorial membuat template blog lebih lanjut akan saya share pada pertemuan berikutnya, jika anda mengalami kendala atau ada pertanyaan terkait cara diatas silahkan diskusikan bersama di kolom komentar.