Friday, November 18, 2016

Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]

Cara Lengkap Membuat Template Blogger Sendiri

Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan membahas tentang cara lengkap membuat template blog sendiri di Blogger. Untuk membuat template blog sendiri, sobat perlu memahami dasar-dasar kode Hypertext Markup Language (HTML) dan Cascade Style Sheet (CSS), selain itu akan lebih baik jika sobat juga menguasai kode JavaScript (JS).

Pertama-tama akan saya jelaskan apa-apa saja yang akan ada dalam bagian template blog, disini saya bagi menjadi 5 bagian, mulai dari bagian paling atas diantaranya adalah Header (yang berisi judul dan deskripsi blog), Menu (yang berisi menu-menu blog sobat), Main (bagian yang berisi posting blog sobat, kolom komentar, page navigation dll), Sidebar (berisi gadget/widget yang bisa sobat modifikasi), Footer (bisa berisi widget atau diisi dengan menu khusus sesuai keinginan sobat dan di tambahkan copyright dibagian paling bawah). Misal tampilan dasar untuk template blog yang akan kita buat adalah seperti berikut ini.

Cara Lengkap Membuat Template Blogger Sendiri

Baiklah, pertama-tama kita akan membentuk kode HTML dasar yang diperlukan di blogger. Pada HTML dasar ini kita hanya memenuhi aturan yang benar-benar dasar dari penggunaan HTML dan aturan dari Blogger itu sendiri. Untuk bentuk dasar dari HTML yang kita kenal adalah sebagai berikut.

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

Sobat bisa mencoba memasangnya di blog sobat. Untuk memodifikasi kode HTML di blogger pertama-tama silakan buka dashboard blogger sobat. Lalu pada menu-menu yang ada pilih Template kemudian klik Edit HTML.

Cara Lengkap Membuat Template Blogger Sendiri

Jika sobat memasang kode seperti diatas pada blogger, tentu sobat akan mendapatkan pesan kesalahan. Karena pada kode dasar HTML blogger kita memerlukan tag <b:section> dan <b:skin> dengan aturan penggunaan masing-masing. Jadi jika ditambahkan kedua elemen tersebut maka kode HTML dasar kita akan menjadi seperti berikut ini.

<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[

]]></b:skin>
</head>
<body>
<b:section class='main' id='Posting'/>
</body>
</html>

Nah, akan saya jelaskan kedua elemen yang ditambahkan tersebut, pertama <b:section> merupakan tag khusus pada blogger yang digunakan untuk membuat "bagian" atau kerangka yang dapat ditambahkan objek tertentu dengan fungsi tertentu melalui bagian layout atau Tata Letak, jadi jika kode dengan tag b:section tersebut telah ditambahkan maka pada bagian tata letak akan bertambah tempat untuk dapat meletakkan widget, sedangkan <b:skin> adalah tag khusus pula yang ada pada blogger yang fungsinya kurang lebih sama dengan tag <style>, yaitu untuk meletakkan kode CSS didalamnya. Namun kita tidak bisa menghilangkan <b:skin> dan hanya menggunakan kode <style> di dalam kode blog sebab akan di deteksi sebagai kesalahan, pada tag <b:skin> biasanya di isi dengan kode CSS dasar (default) yang diperlukan.

Kedua kode tersebut saja sebenarnya sudah cukup untuk dapat dikatakan kode HTML blog kita diterima oleh blogger, tetapi jika dilihat pada tampilan blog yang terjadi malah TIDAK ADA TAMPILAN SAMA SEKALI. Hal ini terjadi karena kita belum menambahkan widget di blog yang berfungsi untuk menampilkan postingan, untuk menambahkan widget tersebut kita tidak bisa langsung menuju ke Tata Letak lalu tambah widget/gadget, tetapi kita harus menambahkannya menggunakan kode tertentu.

Sekarang sobat ingat kita telah membuat "bagian" (section) pada blog untuk menempatkan widget dan perhatikan pada kode sebelumnya bahwa id dari section yang dibuat bernilai Posting jadi kita bertujuan untuk menempatkan widget yang menampilkan postingan blog pada section tersebut. Pertama hilangkan kode penutup pada bagian akhir dari tag section, sehingga kodenya menjadi <b:section class='main' id='Posting'> (perhatikan perbedaannya dengan kode sebelumnya), kemudian tambahkan kode <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' visible='true'/> dibawahnya lalu kita beri penutup untuk tag section dengan </b:section>. Jadi kode kita sekarang menjadi seperti berikut ini.

<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[

]]></b:skin>
</head>
<body>
<b:section class='main' id='Posting'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' visible='true'/>
</b:section>
</body>
</html>

Setelah itu coba lihat pada blog sobat, akan muncul postingan blog sobat (jika telah ada artikel yang telah diterbitkan), beserta dengan beberapa embel-embelnya. Nah selanjutnya kita melangkah ke pemberian title yang akan tampil pada titlebar browser, sebab jika diperhatikan pada bagian title bar browser hanya menampilkan URL dari blog dan itu sangat tidak enak dipandang.

Cara Lengkap Membuat Template Blogger Sendiri

Untuk mengatasi hal tersebut sederhananya kita cuma perlu menambahkan <title>Judul</title> didalam <head>. Tetapi tentu tidak semua halaman di blog memiliki title yang sama, misal halaman posting tentunya harus berjudul sesuai dengan judul posting begitupun halaman-halaman lain. Jadi agar lebih teratur tambahkan kode berikut dibawah <head>.

<!-- SEO Title Tag -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>Archive untuk <data:blog.pageTitle/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Halaman Tidak Ditemukan | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
</b:if>
</b:if>

Kemudian tambahkan pula tag meta charset, tag meta untuk menjadikan blog kita blog yang responsive atau yang biasa disebut sebagai mobile friendly kemudian tambahkan pula tag link untuk mengatur gambar favicon blog. Ini merupakan kode-kode dasar selanjutnya yang diperlukan dalam kode HTML blogger. Berikut ini ketiga kode yang saya maksud tersebut.

<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

Sehingga secara keseluruhan kode yang kita buat sejak awal akan menjadi seperti berikut ini.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

<!-- SEO Title Tag -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>Archive untuk <data:blog.pageTitle/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Halaman Tidak Ditemukan | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
</b:if>
</b:if>

<b:skin><![CDATA[

]]></b:skin>
</head>
<body>
<b:section class='main' id='Posting'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' visible='true'/>
</b:section>
</body>
</html>

Sekarang coba simpan kode HTML blog tersebut kemudian reload atau restart halaman editor HTML blogger dan lihat apa yang terjadi, kode blog sobat ternyata bertambah panjang. Sobat tidak perlu heran, hal ini dikarenakan beberapa hal, pertama penulisan kode tag HTML beberapa ada yang kurang lengkap jadi blogger melengkapinya kemudian yang kedua blogger menambahkan kode-kode lebih lengkap pada widget yang menampilkan postingan blog, sobat bisa melihat-lihat sendiri apa kegunaan dari kode tersebut melalui bentuk dan bahasanya. Jadi secara keseluruhan hasil terakhir kode blog yang kita buat pada pembahasan ini adalah.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

<!-- SEO Title Tag -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>Archive untuk <data:blog.pageTitle/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Halaman Tidak Ditemukan | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
</b:if>
</b:if>

<b:skin><![CDATA[

]]></b:skin>
</head>
<body>
  <b:section class='main' id='Posting'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>
      <!-- TERDAPAT KODE PANJANG DISINI -->
    </b:widget>
  </b:section>
</body>
</html>

Nah, sekarang template yang sobat buat bisa dibilang telah selesai jika ditinjau dari diterima atau tidaknya oleh blogger. Untuk pembahasan tentang mengatur tampilannya, menambahkan header, footer serta sidebar akan saya bahas pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2].

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.
Disqus Comment
Parse Tool