Makeover Tampilan Blog dengan Template SEO Friendly Blogspot Fiksioner 4

Setelah pengalaman deg-degan memasang top level domain yang berbuah kebahagiaan di kelas BLOGSPEDIA COACHING 4, sekarang waktunya materi yang lebih seru dan menantang, yaitu makeover tampilan blog dengan template SEO Friendly. Materi ini menantang dan pastinya bikin makin deg-degan karena mengharuskan kita mantengin dan metani kode html yang berderet-deret.

Soal template, sebelumnya saya beranggapan bahwa template blog itu sesuatu yang personal. Jadi alangkah baiknya apabila kita dibebaskan saja memilih template sesuka hati kita, biar bervariasi sesuai karakter masing-masing blogger. Tak perlu lah diarahkan untuk memilih tema tertentu.

Tapi ternyata pandangan tersebut salah besar. Apalagi buat newbie blogger seperti saya. Pemilihan template blog bukan semata-mata demi memanjakan mata pengunjung blog, tapi juga harus mempertimbangkan template yang mendukung tercapainya tujuan kita ngeblog, yaitu agar memberikan manfaat kepada orang banyak.

Mengenal Template Blog

Mengutip dari Bloggernas, Template Blog adalah cetakan desain tampilan blog. Pola standar yang digunakan untuk menampilkan layout blog secara konsisten.

Meskipun blog terdiri dari ribuan halaman, tapi format atau layout setiap halamannya, akan tetap sama. Posisi dan lebar headernya, posisi postingan atau artikel, posisi widget dan footer, lengkap dengan ukuran, warna, model huruf dan seterusnya, semua akan tetap sama. Tanpa perlu diatur lagi secara manual satu per satu per halaman. Tentu saja ini sangat memudahkan bagi blogger.

Cetakan blog atau template blog dalam bentuk script, yaitu suatu bahasa kode yang berisi perintah layout tertentu, untuk menampilkan ukuran, jarak, warna dan seterusnya.

Kode perintah tersebut, bisa menggunakan bahasa pemrograman HTML, JavaScript, PHP, CSS dan lainnya. Semua kode tersebut, dibundel dalam satu file yang bernama file XML. Jadi sebuah template, biasanya ekstensi filenya selalu dalam format XML.

Mengapa Perlu Mengganti Template?

Template blog bisa berperan membantu blogger agar bisa menjangkau semakin banyak pembaca sehingga tujuan blogger agar menjadi lebih bermanfaat tercapai.

Syaratnya, template blog tersebut harus SEO friendly dan responsif. SEO friendly artinya, rancangan template blog mendukung optimasi mesin pencari (google search). Jika template blog sudah SEO friendly, maka pembaca akan makin mudah menemukan artikel yang dicarinya, menuju blog tersebut.

Sebenarnya blogspot sudah menyediakan template gratis yang tinggal digunakan. Namun kelemahannya, template tersebut belum SEO friendly.

Karena itu perlu untuk mengganti template blog dari pihak ketiga yang SEO friendly tentunya. Pada dasarnya template blog yang SEO friendly memiliki ketentuan:

Ringan, Fast Loading

Konten artikel juga mempengaruhi kecepatan loading ini ya, teman. Salah satu cara menyiasatinya adalah dengan mengkompres gambar pada artikel sehingga size-nya kurang dari 100 KB.

Mengakomodasi kebutuhan SEO

Contohnya seperti memunculkan judul blog, meta deskripsi blog, kalau pas di halaman artikel ya memunculkan judul artikel, struktur yang berurutan.

Misal kalau di homepage, judul blog itu h1, judul2 artikel h2, dan seterusnya.

Sementara kalau di halaman artikel, judul artikel h1, sub judul h2, sub sub judul h3, dan seterusnya.

Ramah di mata

Pemilihan warna dasar juga perlu diperhatikan. Warna background sebaiknya putih, sehingga saat pengunjung mau baca blog enak, nggak sakit matanya.

Navigasi jelas

Menunya bisa diakses dengan mudah, mau pindah ke halaman lain gampang.

Content

Isi artikel atau blogpost paling oke ada di sebelah kiri, sementara sidebar ada di sebelah kanan. Mengapa seperti itu? Karena penelitian membuktikan, fokus mata seseorang lebih ke bagian kiri, makanya bagian yang penting diletakkan saja di kiri biar lebih gampang dibaca.

Termasuk juga soal penulisan paragraph, dibandingkan rata kanan kiri, pilihlah yang rata kiri aja, karena ternyata paragraph style yang rata kiri meminimalisir mata Lelah, terutama saat membaca artikel Panjang.

Responsive

Responsive maksudnya saat template dibuka dari device apapun, dia punya banyak mode, mode dekstop, tab, dan smartphone. Saat dibuka pakai layer lebar nyaman dan mudah dioperasikan. Dibuka di layer kecil/ hp juga baik aja

Persiapan Sebelum Mengganti Template

Memahami Layout

Secara garis besar, saat temen2 mau ganti template, pahami dulu apa itu layout, lalu layout yang ideal itu seperti apa, tahu fitur-fitur untuk kustomisasi tema. Kalau dikustom nggak bisa, maka jalan ninjanya adalah ‘ngobrak-abrik’ htmlnya. Nah ini juga sedikit banyak harus paham mana itu <head>, mana itu <body> karena biasanya di dua part itu yang sering disisipi kode-kode.

Secara umum, layout blog terbagi jadi 3;

1. Header – bagian atas yang memuat Judul Blog, menu, header image

2. Body – bagian tengah yang memuat content/ isi blog + sidebar (info-info di samping content yang ada di sisi kiri dan/ atau kanan)

3. Footer --- bagian Bawah yang memuat info copyright, kadang juga ada menu dan informasi lainnya (tak jarang ada pula elemen2 sidebar yang bisa muncul di footer – beda template beda penampakan.)

Pengecekan Template

Memilih template boleh saja yang unyu, eye-catching, dan yang pas di hati. Namun tetap harus memperhatikan kualitas dan performa template tersebut.

Cara mengecek template yang mau diunduh adalah dengan melakukan pengecekan di SEO Meta Inspector (add on extension di chrome), SEOptimer dan Page Speed Insight untuk mengetahui optimalisasi blog saat menerapkan template yang akan di pasang. Tools ini bisa mengaudit blog kita loh, teman. Apa yang selama ini kita lakukan atau tidak terbaca jelas.

SEOptimer dan SEO Meta Inspector ibaratnya seperti "catatan amal" selama ngeblog. Apa kesalahan blogger terbaca di sini. Dosa-dosa kecil yang diabaikan bisa menggunung dan bikin catatan amal merah, seperti saat bikin postingan tidak perhatian sama SEO On Page.

Melakukan Backup Template Blogspot Saat ini

Berurusan dengan kode html harus ekstra hati-hati ya, temans. Sebelum proses ganti template baru, langkah yang wajib kamu lakukan adalah membuat backup data template saat ini. Sehingga nanti kalau ada salah memasukkan kode dan template baru error, template lama masih bisa digunakan kembali, daripada error and Hank.

Cara Memasang Template Pihak Ketiga

Kalau sudah punya pilihan template yang akan dipasang, tinggal pasang deh.

Untuk mengganti template blogspot dengan template pihak ketiga ini, saya memilih menggunakan template Fiksioner 4. Sebuah template blogspot popular karya Igniel.

Mengapa memilih Fiksioner? Karena direkomendasikan sama Coach Marita, itu alasan utamanya. Menurutnya, fiksioner secara SEO sudah oke, responsive, dan loading cepat juga. Jadi, ya saya ngikut saja, percaya sama gurunda. Senang sekali tidak perlu hunting template sendiri ya.

Memasang template awali dengan MELUANGKAN WAKTU, TANPA DISTRAKSI, KONSENTRASI, BERANI, TENANG, HATI-HATI, TELITI, SABAR, dan YAKIN PASTI BISA, INSYAALLAH

Wah, kok kelihatannya menyeramkan ya memasang template baru. Memang begitu sih kesan saya karena masih baru. Jika kamu merasa takut salah, sebaiknya kamu lakukan langkah ini hingga benar-benar memiliki keberanian.

Ulangi membaca atau menyimak video tutorial hingga benar-benar paham. Perhatikan ISTILAH dan WORKS AREA di mana tutorial mengarahkannya. Langkah ini akan membuatmu TAU APA YANG HARUS DILAKUKAN.

Istilah yang mungkin kurang akrab di telingamu misal ekstrak file Zip, file .xml, backup, restore, dan lainnya, pahami dulu sampai mengerti.

Works area itu seperti dashboard blogspot bagian theme, segitiga dekat customisasi, notepad, dan lainnya, ada baiknya kamu akrabin dulu biar saat eksekusi nggak muter-muter cek tutorial lagi dan lagi.

Jika merasa sudah paham dan siap eksekusi, lanjutkan singsingkan lengan baju dan tajamkan mata ke satu titik, your screen.

Step by step Mengganti Template SEO Friendly Blogspot Fiksioner 4

1. Buka www.fiksioner@blogspot.com

Boleh dipelajari dulu dokumentasinya. Dokumentasi itu semacam manual petunjuk menggunakan template ini, misal mengganti beberapa bagian yang diinginkan.

2. Kalau sudah, klik download

3. Lihat file downloadnya, pindah ke folder yang kamu mudah mencarinya.

4. Ekstrak file fiksioner tersebut karena format filenya .Zip.

5. Setelah diekstrak, lihat filenya. Ada 4 macam file hasil ekstrak Zip. Salah satunya file dengan ekstensi .xml. File ini yang mengandung kode html template Fiksioner

6. Klik file .xml tersebut. Klik Open with. Pilih Notepad

7. Select all kode html di notepad, lalu klik copy



8. Masuk ke dashboard blog bagian theme. Klik segitiga kecil dekat customisasi. Lalu klik edit html





9. Select all kode html di situ, hapus (jangan klik cut ya, tar malah kecopy n cut)

10. Paste kode yang dari notepad tadi ke area html yang telah dihapus.

11. Cek ke bagian kanan atas layar, sebelum klik save, klik Pratinjau yang gambar icon Mata.

Jika template blog yang terlihat bukan template lama, maka berarti template baru si fiksioner tadi sudah terpasang

12. Klik SAVE

Kembali ke dashboard, dan lihatlah blogmu (view blog)

Amati perubahan dari template baru tersebut. Pasti ada perubahan yang kamu kehendaki dan ada juga perubahan tampilan blog baru yang mengganggumu.

Memang setelah template baru terpasang di blog, proses makeover blog belum selesai. Ada tahapan lanjutan yaitu merapikan dan mempercantik blog.

Btw, saat saya sudah pasang template Fiksioner 4 dan edit di bagian banner, menu drop down, sosial media, dan warna, ada surprise dari coach Marita. Kita dikasih kode html Fiksioner 4 yang sudah dipermak sehingga di mata SEO Meta Inspector sudah oke alias catatan merahnya dah diperbaiki dan jadi green.

Demi mengetahui hal itu, langsung deh saya ulangi langkah pasang template. Ulangi semua dari awal. Biarlah repot edit-edit lagi, daripada repot merubah raport blog yang sudah terlanjur banyak merahnya, aduhai kasihan mata ini metani kode html yang menjemukan.

Penyesuaian Setelah Memasang Template Baru

Setelah template Fiksioner 4 menjadi bagian dari blogku, ternyata kelihatan ada beberapa bagian yang perlu penyesuaian.

Edit Warna Blog

Warna blog merupakan hal yang menyangkut ciri khas sebuah blog. Jadi harus mengganti warna dari warna bawaan template Fiksioner 4 agar sesuai dengan warna blog kita

Perubahan warna ada di bagian edit Theme>customisasi>advance

Perubahan warna ada pada:

Warna dasar blog, Warna header, Warna footer, Warna text, warna background.

Banyak ya pilihan bagian yang bisa dirubah. Saya masih melakukan perubahan basic saja, belum eksplore lebih.

Eh tapi, untuk edit warna ini, saya kemaren memberanikan diri ngulik warna pake kode html loh. Saya cari kode warna hex di pinterest, lalu ganti warna-warna yang menurut saya kurang cocok. Seneng deh nemuin color palletes yang cantik-cantik. Kalau sudah ketrigger sama warna seperti ini, kayaknya penyakit lamaku utak-atik template bakal kambuh deh. Tapi, kali ini utak-atiknya di bawah petunjuk SEO yang dikit-dikit sudah dipelajari.

Setiap kali akan edit html, pastikan untuk copy dan paste dulu kode html-nya. Tempatkan di tempat aman misal di draft post editor atau di word. Buat satu salinan lagi untuk "diuprek" atau diedit. INGAT!! Satu kesalahan kecil seperti menghapus satu karakter tanpa sengaja akibatnya fatal. Kode pemrograman tidak akan berjalan.

Banner

Banner blog yang lama masih ada, tapi ukurannya jadi kurang nyaman dilihat. Jadi saya ingin menggantinya.

Untuk proses mengganti banner ini saya dapet tips dari tutorial mbak Luluk Sapta, yaitu membuat banner besar. Waah kelihatan keren.

Saya ikuti tutorialnya, tapi kok gambar banner jadi blurr. Beberapa teman punya permasalahan yang sama dan Coach Marita turun tangan memberi insight.

Berikut tips membuat banner besar di blog:

1. Buat gambar banner di canva. Gunakan size 1000x250 piksel. Download dengan memilih file PNG.

2. Upload gambar di post editor blog. Setel gambar dengan Original Size. Simpan post sebagai draft. Klik kanan gambar dan klik Copy Image Address.


3. Masukkan hasil copy link gambar tadi di kode untuk banner berikut ini. Warna soft orange adalah link gambar, ganti dengan link gambar kamu. Link warna biru bisa diganti dengan url blog kamu.

<img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeUBpoSWdPs6bBia03oDBDKHkwS-Vgi_7hCFKPk1G3QjLudKBdmUb5v_3u6PyApWpu2nnXyPq8515ooe0ms5g4UyWBFxhh98okqO1tFPB1b-jJZYCdVIgr0i11Q4g3rW7uBcLR1gh0gVa7kh4dZjpFzzHLlI17tmIPvSfxf9ahVXyqFE7bjQx9sgo3WA/w320-h80/aishawa-satu.jpeg" width="1000" height="250" title="aishawa.com" alt="aishawa.com"/>

4. Memasang Banner di Dashboard Layout

Pergi ke layout dashboard > Billboard > Tambahkan/Add a Gadget > HTML/JavaScript gadget > lalu copy paste kode di atas > SAVE
Menu di Header Blog

Setelah pake fiksioner4, menu di bagian header morat-marit dan masih tersimpan menu bawaan Fiksioner. Ini harus dirubah sesuai dengan identitas blog kita.

<ul>

<li><a href='https://www.aishawa.com' title='HOME'>HOME</a></li>

<li><a href='https://www.aishawa.com/p/sitemap.html' title='Sitemap'>SITEMAP</a></li>

<li><a href='https://www.aishawa.com/p/tentang-aishawa.html' title='ABOUT'>ABOUT ME</a></li>

<li class='dropdown'>

<span>MENU</span>

<ul>

<li><a href='https://www.aishawa.com/search/label/Blogging' title='label1'>Blogging</a></li>

<li><a href='https://www.aishawa.com/search/label/Pleasure' title='label1'>Pleasure</a></li>

<li><a href='https://www.aishawa.com/search/label/Life%20%26%20Love' title='label3'>Life&Love</a></li>

</ul>

</li>

</ul>

Jika ingin memakai kode ini, copy paste semua kode, kemudian cukup ganti link pink dengan url kategori/label blog kamu. Jika ingin menambahkan kategori, tinggal copy mulai <li> hingga </li> dan ganti linknya. Warna ungu silahkan ganti sesuai nama kategori/labelmu.

Link Sosial Media

Link Sosial media fiksioner ini ada di bagian footer. Agar sesuai dengan identitas sosial media kita, tentu ini mutlak harus diubah. Pengubanhannya langsung di bagian layout di footernya.

Before After Template Aishawa.com

Setelah pemasangan template Fiksioner 4 berhasil, dan juga editing sederhana seperlunya berhasil juga, saatnya melihat hasil keseluruhan dari proses ini.


Hasilnya nggak Cuma dilihat dari segi tampilan saja, tapi juga dari data audit SEO Meta Inspector.


Perubahan warna merah ke hijau yang bikin adem hati meski masih musim panas tanpa hujan di sini.


Perubahan juga terjadi pada page speed.

Puas dengan Template Baru?

Alhamdulillah selesai sudah proses berhari-hari kurang tidur makeover tampilan blog dengan template SEO Friendly Blogspot dari Fiksioner by Igniel. Sejauh ini puas banget ya, ternyata newbie cupuers ini bisa melalui tahap ini dan bisa berbagi juga dengan teman-teman sesama cupuers. Dan benar lah kata Coach Marita, meski pusing dan capek ganti template SEO friendly, setelahnya kamu bakal makin cinta sama blog kamu. Semangat ya untuk kalian yang masih proses ganti template demi masa depan blog yang lebih baik. See you di cerita utak-atik blog lainnya.