Skip to main content

Cara Membuat Template Blog Sendiri Online (Sebuah Studi Kasus)

Cara Membuat Template Blog Sendiri Online (Sebuah Studi Kasus) - Jangan lihat buku dari kofernya kata pepatah. Tapi hal tersebut tidak berlaku bagi sebuah bisnis online yang berbasis blog. Desain blog atau tampilan blog menjadi sebuah hal yang sangat penting yang diperhatikan pengunjung saat mereka mengunjungi blog kita.

Jika tampilan blog kita ringan dan menarik pengunjung akan betah berlama-lama di blog yang kita kelola. Akibatnya konversi terhadap monetisasi blog yang anda pilih akan semakin lebih besar.

Bagaimana cara kita mengetahui jika tampilan blog saat ini sudah eye catching? Mudah saja. Cobalah anda minta pendapat dari teman-teman atau keluarga anda. Saya sendiri mencoba meminta feedback terhadap blog ini kepada teman kantor?

Hasilnya...

Teman saya mengatakan jika tampilan blog saya tidak menarik. Jawaban dari teman saya tersebut menjadi sebuah motivasi bagi saya untuk memperbaiki tampilan blog.

Pertanyaannya adalah haruskah saya membeli template blog premium atau saya usahakan sendiri membuat template blog?

Membuat Template Blog Sendiri vs Membeli Template Premium

Sejak pertama kali mulai blogging di blogspot saya sudah berkali-kali mengganti template blog. Dari template yang saya gunakan tersebut, saya kemudian belajar memodifikasi tamplian template. Alasan utamanya adalah agar penghasilan adsense saya semakin meningkat.

Karena teman kantor saya mengatakan tampilan blog saya sebelumnya tidak menarik maka saya pun mempertimbangkan untuk membeli template blog premium yang telah teruji. Ada banyak template blog gratis yang telah saya miliki baik evo template, kompi ajaib, atau template johny responsive.

Tetapi template-template tersebut mengharuskan saya untuk tidak menghilangkan link credit yang biasanya terdapat dibagian footer. Sedangkan saya mempertimbangkan untuk menghapus link credit kepada para pembuat template tersebut. Alasan saya ketika suatu saat halaman yang terdapat di link credit tersebut menjadi broken atau terindikasi spam oleh google, maka blog saya tidak akan terkena imbasnya.


Selain itu saya juga merasa sayang mengeluarkan "investasi" untuk membeli template blog premium karena saya belum mendapatkan penghasilan yang memadai dari program adsense. Belum lagi jika saya mendapatkan permasalahan dalam memodifikasi template premium yang saya beli, apakah saya akan mendapatkan layanan yang prima? Soalnya dari ribuan blogger yang menggunakan template premium tentu saya harus menunggu antrian jika ada pembeli lain yang mengadukan masalah di blog kepada pembuat template tersebut.

Maka saya pun memutuskan untuk membuat template blog sendiri dengan ribuan artikel yang saya baca di internet. Hasilnya usaha pertama saya gagal. Setelah beberapa waktu kembali membaca artikel tentang cara membuat template blog sendiri akhirnya saya menemukan satu artikel yang cukup bagus dalam memberikan panduan membuat template di blogger.

Sabar saya akan memberi link artikel panduan membuat template yang luar biasa ini dibawah.

Ada dua hal kriteria penting yang harus anda temui saat memilih template blog.
  1. SEO Friendly dan 
  2. Mobile Friendly.
Dengan semakin banyaknya masyarakat di dunia yang menggunakan smartphone maka kebutuhan sebuah template yang mobile friendly alias mudah diakses di perangkat mobile menjadi sebuah keharusan.

Jujur saja saya agak takut sebenarnya dengan pengkodean perangkat mobile ini. Pasalnya saya belum terlalu mengerti tentang bagaimana cara membuat kode yang membuat perangkat dekstop menghasilkan tampilan yang sama dengan perangkat mobile.

Ada banyak template blog yang menjanjikan jika template yang mereka buat memenuhi kriteria SEO-Friendly. Template SEO-Friendly ini artinya lebih kurang template yang memberikan informasi dengan mudah untuk robot google atau robot mesin pencari yang lain. Nah bagaimana anda mendapatkan kepastian bahwa template yang anda beli benar-benar template SEO-Friendly?

Ini alasan saya yang lain kenapa saya memilih mengorbankan waktu luang saya dalam belajar pengkodean website, khususnya blogger.

Anda tidak bisa mendapatkan jaminan jika template yang anda beli ramah dengan perayapan robot mesin telusur. Bisa jadi jika anda tidak hati-hati dalam membeli settingan yang anda dapatkan dari penjual template blog premium membuat blog anda malah tidak terindeks di google.

(Note: Ini asumsi saya yang belum pernah beli template blog secara online loh ya.)

Yuk kita mulai membuat template blog sendiri.

Seperti yang saya sampaikan diatas bahwa cara membuat template sendiri secara online saya dapatkan dari blog lain. Anda juga akan bisa membuat template blog sendiri (di blogger) setelah membaca artikel dari mas mugianto. Dalam artikel tersebut mas mugianto menerangkan langkah demi langkah untuk membuat template di blogger dengan rinci.

Setiap langkah yang dituliskan dalam artikel tersebut saya praktekkan dengan hati-hati dan perlahan-lahan.

Sayangnya artikel dari mas mugianto tersebut hanya sampai pada langkah keempat. Di artikel membuat template blog sendiri secara online yang diterangkan oleh mas mugianto, ia terjebak pada prilaku mastah blogger lain yaitu hanya memberikan kode css yang dapat dikopipaste oleh pembaca artikelnya.

Akibatnya para pembaca yang ingin membuat template blogger sendiri menjadi terjebak sendiri dengan kopi paste kode yang sudah ada dan kesempatan belajar tersebut menjadi hilang. Jadi di artikel dengan tema yang sama ini saya ingin memberikan sedikit perbedaan dengan artikel mas mugianto.

Tetap copy paste kode akan tetapi kita melakukannya dengan langsung belajar.

Jika ada saran silahkan hubungi saya melalui form kontak di blog ini atau via email ke kontak.saya@kandrawilko.info.

Persiapan Membuat Template Blog Sendiri Online

Untuk memulai cara membuat template blog sendiri secara online semoga anda bisa memenuhi persiapan yang akan saya sebutkan dibawah ini. Persiapan-persiapan tersebut merupakan persiapan saya pribadi saat saya memulai proyek pribadi ini.

Persiapan pertama: Pengetahuan Dasar HTML, CSS

Ini menjadi persiapan penting menurut saya. Dengan mengenal dasar-dasar pengkodingan website berupa Hypertext Mark-Up Language dan Cascading Style Sheet ini anda dapat berkreasi sendiri dalam membuat template yang anda inginkan.

Jika anda belum punya persiapan ini saya sarankan agar dapat belajar dulu hingga menguasai dua koding dasar website tersebut. Anda dapat belajar pengetahuan dasar koding website tersebut secara gratis di situs html dog atau di w3school. (Dua situs tersebut menggunakan bahasa pengantar Bahasa Inggris.)

Persiapan Kedua Latest Browser (Recommend Chrome Atau Firefox)

Saya pribadi menggunakan browser Google Chrome. Dengan browser ini nantinya anda dapat membuat tampilan yang sesuai dengan keinginan anda dengan menggunakan tool bernama Inspect.

Setahu saya mozilla firefox pun mempunyai fitur tersebut. Jadi mudah-mudahan anda bisa mendapatkan browser yang saya rekomendasikan tersebut.

7 Langkah Membuat Template Blog Sendiri Secara Online

#1 - Buat akun blog baru di blogger.com

Saran saya sebaiknya anda membuat akun blog baru di blogger.com agar anda leluasa dalam mengotak-atik template nantinya. Selain leluasa mengotak-atik template anda juga tidak akan panik jika bagian-bagian tertentu dari blog anda hilang atau malah tidak muncul sama sekali. 

Setelah template anda selesai nantinya anda dapat langsung mengaplikasikannya di dalam akun blog anda yang utama.

#2 - Tentukan judul, alamat blog, dan pilih template blog yang anda inginkan

Sama seperti membuat sebuah blog baru, anda sebaiknya memilih judul, alamat, dan template blog bawaan.

Fungsinya agar akun dummy template blog yang akan dipersiapkan dapat berbeda dengan nama akun blog utama anda.

Saya pernah melakukan kesalahan ini sehingga saya tanpa sadar sedang melakukan perubahan koding di blog utama. Untung saja tampilannya tidak bermasalah.

#3 - Masuk ke dashboard blog template lalu pilih menu pengaturan

Untuk dummy template blog baru sebaiknya anda membuat blog ini 
  1. tidak terdaftar di google, dan
  2. tidak terlihat di mesin pencari
Ini pilihan anda saja. 

Kalau saya karena menyertakan kode adsense, makanya saya setting hal tersebut. Takutnya dengan keseringan preview perubahan blog akan berakibat akun adsense saya di blokir. Di forum IAPD pernah ada member yang menginformasikan hal tersebut.

#4 - Pilih menu template lalu klik tombol edit html

#5 - Hapus semua kode yang ada di template bawaan blogger yang telah anda pilih pada langkah ketiga tadi

kode template blogger dengan tema simple
gambar kode template bawaan blogger dengan tema template simple

#6 - Menulis ulang kode html, css, dan javascript untuk tampilan blog baru anda



disini untuk meletakkan judul, meta description, link rel, kode javascript dan lain sebagainya


disini untuk membentuk tampilan dari blog anda nantinya. Navbar, Widget, dan lain-lain.

Seperti yang anda lihat pada gambar diatas. Saat kode dasar website dimasukkan ada peringatan dari server blogger dimana ada fitur yang belum dimasukkan. Ini yang membedakan membuat template blog secara online dengan membuat template blog secara offline.

Mas Mugianto menyebutkan ada tiga elemen yang harus ada saat kita menulis ulang kode template blogger. Ketiga elemen tersebut adalah:
  1. b:skin 
  2. b:section, dan 
  3. b:widget
Selain ketiga elemen tersebut ada dua elemen lagi yang mungkin terlupa oleh Mas Mugianto. Dua elemen ini juga memegang peranan yang krusial di sebuah template blogger. Kedua elemen tersebut adalah
  1. widget Navbar
  2. widget Blog
memasukkan kode website html dan elemen template blogger
Gambar diatas memang belum semua elemen yang saya sampaikan tadi karena masih sulit bagi saya mengambil screenshot sembari menuliskan kode seperti mastah blogger lain. Jadi mohon dimaafkan.

Hasil tampilan jika anda menuliskan kode diatas adalah seperti berikut

#7 - Membuat Template Blog Baru Dengan Blueprint Orang Lain

Setelah mengenal 5 elemen tag template yang harus  ada di template blogger maka langkah selanjutnya adalah membuat template blog anda sendiri dengan mengikuti blueprint.

Mas Yadi dalam artikelnya yang juga membahas tentang cara membuat template blog sendiri juga menekankan pentingnya hadirnya blueprint atau dalam bahasa yang bersangkutan layout.

Alih-alih membuat layout sendiri, saya melakukan langkah praktis yaitu meniru tampilan blog orang lain. Tampilan blog yang saya coba untuk ditiru adalah tampilan dari blog internet marketer bernama neilpatel.

Berikut tampilan dari blog neil patel yang menjadi inspirasi saya:

tampilan blog neilpatel.com di desktop/pc/komputer
Gambar diatas adalah tampilan blog neil patel jika diakses dari perangkat desktop. Bagaimana jika blog tersebut diakses dari perangkat mobile?

Berikut gambar blog neil patel jika diakses dengan perangkat mobile.

tampilan blog neilpatel via smartphone
Seperti yang anda lihat tampilan blog neil patel tersebut hampir sempurna (menurut kriteria saya). Blog tersebut akan terlihat sama baik jika dilihat melalui desktop (baca: komputer) maupun melalui smartphone.

Saya berasumsi bahwa template blog neil patel ini memenuhi dua kriteria template blog yang saya cari diatas.

Maka saya blueprint untuk template blog saya adalah tampilan dari blog neil patel ini. (Mesti hati-hati juga karena juragan cipir, yang niru desain web detik.com, dipaksa mengubah desain blognya)

DMCA memang harus membuat blogger sekaligus publisher adsense kreatif. Tapi lanjut dulu deh yak bagi pengalaman belajar bikin template sendirinya.

#8 Menggunakan Fitur Inspect Element dari Chrome untuk Membuat Template

Jika anda menggunakan browser Firefox atau Chrome anda dapat melanjutkan langkah ini. Bagaimana jika anda menggunakan Opera, Safari atau browser yang lain? Saya tidak bisa menjawab karena selain dua browser diatas saya amat jarang (bukan tidak pernah loh ya) menggunakan browser selain Firefox dan Chrome.

Oke saya lanjutkan ya..

Jadi saya melakukan inspect elemen di situs neil patel. Dari fitur tersebut saya mengetahui kode yang dipakai untuk header, body dan footernya. Hampir semua kode di situs tersebut saya kopi. Hingga saya merasa ada kejanggalan dalam tampilan blog saya.

Saya pun mengubah inspect element menjadi melihat source code dan saya menemukan jika neil patel menggunakan cms wordpress. Sedangkan saya menggunakan platform blogger. Jadi saya harus membuat beberapa modifikasi kode yang saya ambil dari Neil Patel.

Hasilnya seperti yang kawan-kawan lihat sendiri di blog kandrawilko.info ini. Tampilannya hampir mirip dengan blog Neil Patel. Sekarang bagaimana menurut teman-teman lebih baik membuat template blog sendiri secara online atau menggunakan template semi-premium?

Comments