Cara Membuat Sendiri Template Blogger Yang Berkualitas - Bagian Pertama

Template yang berkualitas tentulah selalu dikait-kaitkan dengan parameter seperti seo friendly, responsive design, user friendly, fast loading, dan berpenampilan menarik. Maka hal ini pulalah kelak yang akan menjadi pembahasan pokok pada artikel ini yang tersusun dalam beberapa bagian. Demikianlah, karena secara teknis nampaknya tidak produktif bila harus diselesaikan dalam satu artikel hingga selesai.

Target utama dari artikel ini adalah para pembaca bisa membuat sendiri suatu template blogger nantinya. Dan saya memusatkan judul tulisan pada Template berkualitas agar bermakna umum karena kalau sudah berkualitas maka digunakan untuk keperluan penyebaran artikel, pemasangan Google Adsense, dan sebagainya akan berlangsung lancar.

Sebenarnya judul artikel ini bisa panjang atau kepanjangan bila semua keyword tujuan pembuatan template tersebut dimasukkan. Judulnya bisa seperti ini :

Cara Membuat Atau Merancang Template Blogspot Sendiri Yang Fast Loading Dan Responsive Serta SEO Friendly Juga Adsense Ready Serbaguna Tahan Lama - Bagian 1.

Haha, kepanjangan brooo...! Judul yang saya pakai saja sudah kepanjangan, apalagi ini. Meskipun niat saya memang memberikan tutorial pembuatan template sesuai judul yang panjang tersebut. Biasalah bro, saya jadi korban teori-teori tentang riset keyword pada saat membuat judul.

Template yang akan kita bangun nanti sudah memakai pendekatan teknologi rancang bangun template Blogspot yang ter-update. Jadi tidak lagi menggunakan teknologi jadul. Tadinya ingin latah juga menggunakan HTML5, tapi setelah beberapa kali mengimplementasikannya, HTML5 ternyata belum memberikan nilai tambah apapun. Yang ada malah menyedot konsentrasi berlebih untuk mengejar validasinya. Dan setelah valid malah banyak menimbulkan inkompabilitas. Ya, biarlah HTML5 sekedar jadi wacana sementara ini. Karena ternyata Blogspotpun belum menerapkannya.

Bagi anda yang terobsesi oleh Google Adsense ketahuilah, apapun jenis tema yang anda pakai, selama itu fast loading dan SEO friendly, maka akan cocok untuk memasang adsense. Termasuk tema yang secara bersama-sama akan kita buat kali ini.

Butuh berapa lama hingga nanti bisa membuat template sendiri? Itu relatif, dan bagi anda yang sebelumnya telah menguasai html, css, dan javascript maka masa pembelajarannya akan singkat. Mungkin hanya beberapa jam saja, dan setelah itu malah jadi lebih pandai dari saya. Hehehe.

Bagi anda yang newbie dalam pengertian sebenarnya mungkin harus sedikit bersabar mengikuti tutorial ini. Alangkah baiknya jika belajar secara pararlel. Selain mempelajari tutorial ini juga mempelajari dasar-dasar html dan css. Syukur-syukur bila mempelajari jquery sekalian, tapi yang utama adalah html dan css sudahpun cukup.

Denah Template

Ibarat membangun rumah, maka kita harus menyiapkan denahnya terlebih dahulu. Apakah denah tersebut akan digambar atau cukup dalam benak kita saja, bukan masalah. Karena kita saat ini sedang belajar, maka saya akan menggambarkan denah template yang akan kita buat nanti. Inilah denahnya :

Nomor 1 adalah outer-wrapper yang merupakan bungkus terluar dari template.

Nomor 2 adalah header-wrapper yang merupakan bagian teratas dari template.

Nomor 3 adalah navigation menu yang merupakan tempat bagi sekumpulan menu diletakkan.

Nomor 4 adalah content-wrapper yang merupakan bungkus bagi konten utama template (bidang merah)

Nomor 5 adalah sidebar yang merupakan bilah sisi template. Di sini diletakkan sebelah kiri.

Nomor 6 adalah main yang merupakan bungkus bagi posting,

Nomor 7 adalah footer-wrapper yang merupakan bungkus kaki dari template,

Nomor 8 adalah credit-link yang merupakan tempat menyematkan beberapa link identitas.

Istilah-istilah di atas adalah yang umum diterapkan pada suatu desain template. Untuk sementara anda bisa menggunakan istilah-istilah itu terlebih dahulu. Nanti jika sudah canggih boleh membuat istilah-istilah sendiri. Yang penting sudah memahami fungsinya terlebih dahulu.

Benar, nanti anda boleh membuat nama-nama sendiri untuk pengistilahan di atas sesuai dengan fungsinya. Hal ini akan bisa dipahami bila sebelumnya anda telah mengerti dasar-dasar css.

Pondasi Template

Pada rancang bangun sebuah rumah, pondasi adalah bagian yang tertanam di dalam tanah. Ia ada namun tidak nampak secara langsung. Nah kita akan terapkan analogi tersebut pada desain template ini. Kita akan membuat sebuah pondasi template yang hasilnya nanti berupa halaman blank atau kosong.

Sebelum melanjutkan pada tahap pembuatan pondasi template, saya mohon maaf terlebih dahulu. Semestinya untuk mempermudah pembelajaran kita, maka perlu ada gambar-gambar pendukung yang berupa tangkapan layar atau capture yang berasal dari Blogspot. Tetapi itu tidak bisa saya sajikan karena melanggar TOS dari Google. Semoga maklum adanya.

Sekarang lakukan langkah-langkah sebagai berikut :

1. Login ke blogger.com

2. Pilih blog yang akan digunakan untuk belajar

3. Klik Template --> Edit HTML --> Delete semua kode yang ada di sana hinnga menjadi area kosong.

4. Pada area kosong tersebut letakkan kode ini :

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE HTML> <html> <head> <meta charset='UTF-8'/> <b:include data='blog' name='all-head-content'/> <b:include data='blog' name='google-analytics'/> <meta content='initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width' name='viewport'/> <link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/> <style type="text/css"> <!-- /* <b:skin><![CDATA[*/ html, body, ul, dir, nav, aside, hgroup, header, footer, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0px;padding:0px;border:0px none;outline:0px none;background:transparent;} a:link {text-decoration:none;color: blue;}a:visited {color: rgb(72,14,182);} a:hover {color: darkblue;} html, body{font-family:Helvetica,Tahoma,sans-serif;color:#444;line-height:1.3;display:block;width:100%;margin:0px auto;word-wrap:break-word;} h1{font-size:1.2em;}h2{font-size:1em;} h3{font-size:0.8em;} ]]></b:skin> </head> <body> <b:section class='header' id='header' showaddelement='yes'/> </body> </html>

Kode di atas benar-benar merupakan dasar. Nanti pada tahap penyempurnan template akan ada beberapa kode tambahan baru yang berupa link, meta tag, dan lain-lain. Tahap penyempurnaan template akan diberikan pada bagian terakhir dari seluruh rangkaian artikel ini.

Klik Simpan Template dan periksa hasilnya dengan cara klik Lihat Blog. Ia harus tampil berupa halaman kosong. Dan hingga di sini kita sudah berhasil membuat pondasi untuk blogspot. Untuk proyek pembelajaran ini saya menggunakan link atau url aliansi.xyz untuk contohnya.

Catatan :

Pada desain template ini saya menggunakan satuan em untuk font. Konon satuan ini secara umum lebih baik dibandingkan satuan px pada template responsive design. Tentang hal ini anda bisa membacanya pada artikel saya yang berjudul Cara Menggunakan Satuan Em pada Website Atau Blog

Bila anda telah merasa cukup di bagian satu ini, maka bisa meneruskan ke bagian dua.

Dan sekiranya artikel ini dinilai bermanfaat, semoga andapun mau membagikannya untuk yang lain. Anda bisa membagikannya pada Google++ dan Facebook atau Twitter. Mari kita menyebarkan yang bermanfaat! :-)

Demikianlah artikel dari Kontakmedia yang berjudul Cara Membuat Sendiri Template Blogger Yang Berkualitas - Bagian Pertama, semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.