Cara Saya Membuat Template Blog Sendiri
Jangan lihat buku dari kofernya kata pepatah. Kadang tampilan buku yang menarik ternyata isinya sangat dangkal. Akan tetapi ungkapan tersebut tidak berlaku bagi sebuah bisnis online yang berbasis blog. Desain blog atau tampilan blog merupakan hal pertama yang akan diperhatikan pengunjung saat mereka mengunjungi blog kita melalui mesin pencari.
Kriteria tampilan menarik saja tidak cukup. Apalagi saat masyarakat dunia semakin terkoneksi dengan munculnya era smartphone. Bahkan saat ini di laporan analytics saya melihat jumlah kunjungan via mobile jauh lebih banyak dibandingkan dengan kunjungan via komputer atau desktop. Oleh karena itu sebuah website yang mempunyai kemampuan beradaptasi terhadap perangkat yang digunakan oleh pengunjung menjadi salah satu kriteria penting.
Selain tampilan dan kemampuan adaptif dari website hal lain yang menjadi salah satu karakter pengunjung adalah kecepatan website tersebut menampilkan konten yang dimilikinya. Dalam salah satu artikel Think With Google disebutkan jika sebuah blog atau website tidak menampilkan konten kurang dari 20 detik kemungkinan besar pengunjung akan membatalkan kunjungan mereka.
Akibatnya rasio pentalan akan tinggi dan peringkat sebuah blog atau situs turun. Tentu sebagai page one hunter saya tidak menginginkan hal ini terjadi. Oleh karena itu saya mencoba untuk membuat template blog sendiri karena saya merasa kurang puas dengan template gratis yang telah saya gunakan sebelumnya.
Jika anda mempunyai kartu kredit dan tidak takut bertransaksi secara online membeli template premium seperti BMag dari themeforest.
Bagaimana cara kita mengetahui jika tampilan blog saat ini sudah eye catching? Saya melakukannya dengan meminta teman-teman saya mengunjung blog kandrawilko.info baik dari perangkat komputer maupun perangkat mobile yang mereka miliki.
Hasilnya salah seorang teman saya mengatakan, "tampilan blog lu ga menarik." Lalu saya pun mulai langkah-langkah meng-edit template blog online dengan template editor online yang dipersiapkan oleh blogger.com.
Membuat Template Blog Sendiri vs Membeli Template Premium
Sejak pertama kali 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 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 kebijakan yang harus diikuti jika menggunakan template blog gratis alasan klasik soal pendanaan pun menjadi alasan saya tidak membeli template blog premium. Karena saya sudah beli domain dan hosting sendiri dan hasil adsense masih belum maksimal maka saya memilih jalur panjang dan keras yaitu membuat template blogger sendiri.
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 tiga kriteria template blog yang harus anda perhatikan baik saat membuat template maupun membeli template premium. Ketiga kriteria template tersebut adalah sebagai berikut.
- SEO Friendly,
- Mobile Friendly, dan
- Fast Loading.
Kita bahas sedikit tiga kriteria diatas dengan singkat.
#1 Template Yang SEO-Friendly
Saat anda ngeblog hal yang penting yang harus anda pelajari adalah cara kerja search engine seperti google, bing, yahoo, dan lain sebagainya. Dengan memahami bagaimana situs pencarian tersebut beroperasi maka anda akan lebih mudah untuk mendapatkan pengunjung ke blog yang telah anda terbitkan.
Dengan memahami cara kerja mesin pencari maka anda akan mengerti cara kerja search engine optimization yang banyak disebar oleh mastah dan nubie. Teknik SEO yang digunakan pun saat ini semakin baru karena mesin pencari seperti Google betul-betul serius untuk memberikan informasi yang relevan jika seorang menanyakan masalah di kotak pencariannya.
Bahkan menurut panduan seo dasar yang dikeluarkan oleh Google, seorang blogger harus membuat website yang ia terbitkan agar bisa diakses melalui perangkat yang berbeda-beda. Jika dulu orang mengakses informasi dengan menggunakan komputer maka seiring berkembangnya software seperti android, iOS dan windows blogger harus membuat websitenya dapat diakses baik dari komputer biasa maupun mobile gadget.
#2 Template Yang Mobile Friendly
Seperti yang saya singgung sedikit diatas seorang blogger harus membuat website yang dikelola mudah diakses oleh pengunjung yang menggunakan smartphone maupun tablet. Tahun 2015 kontributor searchenginejournal menulis jika tren pencarian melalui smartphone tidak diantisipasi oleh siapapun termasuk google. Mungkin anda pernah mendengar sebuah istilah Mobilegeddon. Ini merupakan sebuah peristiwa dimana website yang mobile friendly mendapatkan banyak kunjungan karena template website mereka yang mobile friendly.
Bulan Mei 2016 ini Google mengumumkan jika 20% pencarian melalui mobile yang digunakan oleh pengguna android saat ini adalah dengan menggunakan suara. Pernah lihat iklan "OK Google" di tivi atau di youtube? Itu yang dimaksud dengan voiced search. Makanya jika template blog anda tidak mobile-friendly pengunjung blog atau website anda akan drop.
#3 Fast Loading Template
Saya pernah mengikuti salah satu seminar gratis dari tim google indonesia untuk adsense. Di sesi seminar tersebut pemateri memberi informasi bahwa parameter sebuah blog bisa mendapat peringkat teratas di halaman pertama hasil pencarian google selain keyword adalah kecepatan blog tersebut untuk menampilkan konten.
Agan pernah mencari informasi tentang sesuatu lalu ke google lalu google menampilkan hasil pencarian. Agan pilih satu website yang paling atas terus google merujuk ke situs yang bersangkutan. Tapi agan kemudian balik lagi ke google dan memilih link dari situs lain?
Kenapa agan menekan tombol back di browser dan tidak membaca konten di website yang pertama kali agan pilih? Karena loadingnya lama bukan? Dan kita tidak suka menunggu, kecuali jika yang ditunggu benar-benar berharga.
Karena itu google memberikan sebuah gambaran kecepatan situs agan menampilkan konten dengan google pagespeed insight. Konten situs yang langsung muncul akan membuat pengunjung happy dan memberikan indikasi pada google jika situs agan layak untuk direkomendasikan kepada yang lain yang mempunyai permasalahan serupa.
Setelah memahami kenapa tiga kriteria template blog diatas Yuk kita mulai membuat template blog sendiri.
Panduan Membuat Template Blog
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 blog 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.
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.
Cara Membuat Template Blogspot 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
- tidak terdaftar di google, dan
- 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. Jadi saya pilih untuk berhati-hati.
#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.
#6 - Menulis ulang kode html, css, dan javascript untuk tampilan blog baru anda
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:
b:skinb:section,danb: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
- widget Navbar
- widget Blog
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. Dengan adanya blueprint tampilan maka artikel cara buat template blog sendiri ini bisa anda praktekkan.
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:
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.
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. Fitur Inspect Element akan memperlihatkan kode html dan juga css dari elemen-elemen website yang disorot oleh kursor.
Jadi anda tinggal melihat kode yang membentuk elemen website dan menampilkannya di layout anda sendiri.
agaimana 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. Akan tetapi karena platform yang digunakan berbeda maka saya hanya bisa meniru beberapa tampilan blog neil patel tersebut.
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?
Apa yang saya lakukan mungkin tidak terlalu disukai oleh orang yang tidak mengerti html, css, maupun javascript. Saya pernah mendapatkan artikel tentang cara membuat template blog dengan software seperti artiseer. Menurut informasi dari website software artiseer, template yang dibuat melalui aplikasi mereka dapat langsung diterapkan ke server blogger tanpa kesulitan.
Kesimpulan
Setelah mencoba membuat template blogger sendiri saya seakan merasakan ketagihan dalam membuat template. Hanya saja setelah beberapa bulan saya menggunakan template ini ada beberapa hal teknis yang harus ditambahkan. Khususnya perhatian saya tertuju pada dua faktor penting sebuah template blog yaitu seo friendly dan mobile friendly.
Saya harus banyak belajar lagi mengenai kode-kode program website agar tujuan saya, tampilan blog mirip blog Neil Patel. Sekian dulu yang dapat saya bagikan pada teman-teman dan jangan lupa silahkan ikuti link yang saya berikan diatas untuk melihat bagaimana progress template blog saya saat ini.
