Keseruan Mengganti Template Blog Agar SEO Friendly

 

Assalamu'alaikum Readers! 

Akhirnya sampai juga pada materi mengganti template bawaan blogspot menjadi custom template yang bisa kita pilih sendiri. Saran dari coach ada dua, Blanter Wisdom dan Fiksioner. Keduanya bagus dan aku suka karena sederhana tampilannya, eye catching, dan rapi dilihatnya. Sebenarnya jatuh cinta pada pandangan pertama dengan Blanter Wisdom tapi karena takut nggak bisa ngulik, prefer ke Fiksioner aja deh. Kedua template ini SEO friendly jadi aman. 

Bagiku materi mengganti template itu main learning blogspedia coaching, karena sebelum ikut kelas ini, sudah pengen banget punya template blog custom. Apalagi pas gabung kelas-kelas literasi, uwuuu templatenya keren-keren. Jadi suka nggak pede mau share link. Pun saat mau gabung komunitas blogger, maju mundur nggak pede gitu. Akhirnya sampai sekarang nggak ada logo komunitas blogger yang terpasang di blogku. 

Jika materi mengganti custom domain kemarin seru banget, materi mengganti template lebih seru lagi. Sampai dikasih waktu sepekan buat otak-atik setting, layout, dan html. Itu pun masih banyak PR. Jadi tiap hari ngutek aja di depan laptop hingga pada suatu hari saking mabuknya dengan kode html, baru adzan ashar kukira sudah maghrib dan aku sudah siap untuk berbuka puasa. Pas melihat ke luar jendela lha kok masih terang mataharinya. Saking asyiknya nggak perhatian sekeliling. Yuk ikuti keseruan otak - atik template Fiksioner! 

Alasan Mengganti Template 

Awalnya nggak tahu kalau template itu ngaruh banget, secara buat blog juga sekedar saja buat nampung tulisan, tapi setelah ngeblog agak lama dan sering blogwalking jadi ngerasa aku tuh apaan? Segini doang sementara blog lain itu keren-keren banget. Baru lihat wadahnya saja sudah menarik gitu. Begitulah sampai suatu saat ketemu dengan Mbak yang blognya sering kubaca, keren deh templatenya, rapi. Lama sekali baru berani menghubungi beliau dan minta dipasangkan template, syukur beliau bersedia. Namun karena kesibukannya hingga berbulan template itu tak terpasang meski sudah sepakat template mana yang akan kupilih. 

Hingga suatu hari, mbak ini membuat kelas coaching blog, bak gayung bersambut langsung deh daftar hingga sekarang ini berada di kelas blogspedia ini dan belajar mengganti template sendiri. Akhirnya jadi tahu mengapa harus menganti template. 

Agar tampilannya menarik 

Yah seperti baca buku, daya tarik pertama pastinya sampul bukunya kan lalu daftar isi baru isinya. Begitu pula dengan blog, template yang menarik, rapi, dan navigasinya friendly user tentu menyenangkan. Meski conten tetap menjadi andalan untuk menarik pengunjung. Sementara template bawaan blogspot tentu punya keterbatasan sehingga kita tak bisa mendesain template secantik mungkin sesuai harapan kita meski tampilan template itu bukan segalanya. 

Bisa diatur sesuai keinginan kita 

Custom template mempunyai banyak kelebihan dan fasilitas, sudah mobile friendly sehingga kita tak perlu setting ulang untuk tampilan blog di gadget seperti tablet dan smartphone. Sudah tersedia drop down  dan up top serta pilahan tambahan CSS yang lebih mudah diaplikasikan. Pengaturan heading juga sesuai aturan SEO sehingga tampilan di seo jadi rapi dan urut. Sangat ringan hingga loadingnya cepat, dan banyak kelebihan lainnya. 

Meningkatkan traffic blog 

Ini nih, baru tahu ternyata template unduhan itu bisa menaikan traffic blog kita, melesat kata coach di blogspedia. Tentu saja karena heading dan lainnya SEO friendly jadi dari judul artikel, sub judul dan sub-sub judulnya akan terlihat rapi. Jangan lupa juga nulisnya harus sesuai standar SEO dong, ibarat kata rumahnya sudah bagus, kualitasnya sesuai strandar , isi rumanhnya pun harus sesuai. 

Before and After Tampilan Blog

Nah agar semakin yakin dengan alasan mengapa kita harus ganti template, sekarang aku mau membandingkan tampilan blogku sebelum dan setelahnya. 

Tampilan sebelum ganti template 

Blog ini dibuat saat materi membuat blog di kelas blogspedia, jadi masih baru banget dan niat banget nantinya dibuat blog yang profesional lebih dari blog-blog terdahulu. Domain dan templatenya harus beda dan template awal adalah thema soho dengan warna hijau. Sudah cukup nyaman sih tampilannya sehingga bertahan dua bulan. Dua blogku yang terdahulu juga menggunakan thema ini. Lalu pada materi edit template sederhana bawaan blogspot nyoba ganti dengan thema simple meski kurang suka pada tampilan homepagenya. Tak apalah kan sementara sebelum ganti template. 

Yang dikulik dari template ini nggak banyak. Hanya nyoba membuat up top dan drop down meski akhirnya mentok juga dan nggak jadi diterusin sampai ada materi berikutnya. Jadi tampilan blog lama masih seperti ini, sedehana banget.

 

Makanya semangat banget nunggu materi ganti template ini, harus sabar menerima materi demi materi dan tugas demi tugas dan menyetor tepat waktu agar tidak ditendang dari kelas untuk mendapatkan materi ini. Tapi begitu baca materi ganti template, “Duaaaaar” . 

Tampilan setelah ganti template 

Setelah ganti template ternyata headernya bisa kita atur lagi, maka tergodalah aku membuat header image baru dan merobak header image lama yang sudah dua bulan kupakai. Karena header image yang lama kecil, maka harus buat lagi header image buat di tempatkan di atas artikel dengan menu big ad di layout. Akhirnya punya tampilan header baru, senengnya. 

Langkah-Langkah Memasang Template Unduhan 

Sampai juga pada bagian ini, setelah baca materi pdf yang di share oleh coach, terbayang rumet banget, apalagi harus edit HTML segala. Bahasa apaan ini, kode-kode mulu. Sempat ragu bisa nggak ya aku? Pantas saja, durasi waktu materi ini lama, sepekan. Baiklah mari kita nikmati langkah demi langkah. 

Mengunduh dan memasang template 

Pertama kali yang harus kita lakukan adalah mengunduh template yang kita inginkan. Agar blog kita sesuai strandar SEO maka template unduhannya juga dong. Fiksioner dari Ignel ini sangat tinggi angka SEOnya. 

1. Buka Fiksioner.com maka kita akan dibawa ke tampilan blognya fiksioner, lalu klik garis di pojok kiri atas pilih download thema 
2. Kita akan dibawa masuk ke situs Ignel.com, scroll ke bawa sampai ketemu logi Blog (huruf B) lalu klik download 
3. Setelah itu masuk ke halaman yang ada tulisan Fiksioner v3.zip, ada 4 item disini. Download dan simpan di windows lalu ekstrak karena filenya masih berbentuk zip. 
4. Buka Fiksioner V3.xml dan select all dan copy semua kode yang ada. Simpan di notepad. 
5. Buka dashboard blog kita, klik thema lalu cadangkan thema lama. Setelah itu buka edit HTML lalu hapus semua kode yang ada di halaman itu. 
6. Paste kode HTML dari tempalte yang sudah kita unduk tadi ke bagian ini dan simpan. 
7. Taraa template baru terpasang. 

Semudah itu, tentu tidak saat prakteknya bagi blogger pemula kayak aku gini. Tampilan blog beneran sudah berubah, tapi kok gambar-gambarnya nggak muncul. Sudah otak-atik dan tanya -tanya di wa grup alhasil tetap tidak beubah. Terpikir apakah aku salah download? Akhirnya mengulang lagi dari step satu hingga berhasil memunculkan tampilan yang seharusnya. Seharian sendiri ngubek bagian ini. 

Ngulik layout fiksioner 

Setelah tampilan berubah apakah sudah selesai, belum ternyata kita masih harus edit layout, agar yang belum pas dan sesuai dengan blog kita bisa diperbaiki. 

1. Membuat header lebih besar dengan cara memyiapkan gambar dari postingan seperti kita membuat postingan tapi tidak diupload hanya disimpan saja, gunanya agar kita mempunyail link address. 
2. Seperti biasa tambahkan alt text adan tittle text lalu copy link address image, sesuaikan ukurannya. Lebih baik mengunakan ukuran original. Buka layout cari bagian big ad, buka dulu kuncinya dan masukkan kode yaitu link address tadi. Save . 
3. Mengedit menu, menu yang ada di addres bar masih bertitle bawaan Igniel, seperti download theme, menu dll maka kita harus menggantinya dengan menu yang ada di blog kita. Buka layout lalu cari bagian menu, klik gambar pensil dan munculah kode-kode html. Jangan panik, gampang aja kok kita tinggal ganti nama menu sesuai kebutuhan kita misal home-sitemap-about me-article lalu isi bagian href dengan kode linknya. 
4. Theme Setting dan feature post tinggal disesuaikan mana yang akan di tampilkan di homepage, berapa jumlah relate post , sesuaikan sidebar dan semua yang terkait tampilan blog kita. 
5. Sosial media yang ada di footer tinggal diatur letaknya, dihapus yang tidak terpakai dan diisi dengan link sosial media kita. 
6. Menambah CSS agar tampilan judul artikel rata ketengah. Caranya layout lalu klik lanjutan , paling bawah ada tambah css, copy kode yang mau ditambahkan. 

Mengedit html 

Nah ini saatnya paling bikin hetic nih karena salah pasang satu kode atau salah hapus bisa berantakan dan error. Bahkan sekedar mencari kode h2 aja bisa seharian sendiri saking fokus tapi tetap nggak ketemu juga. Jadi kalau mau ngerjain bagian ini, pastikan perut kenyang dan hati lapang ya, yang sabar dan telaten. Yuk mari kita pantengi ratusan ribu kode di menu html ini. 

1. Menghapus bagian *- <data=blog.title/> dan +”-“+ data:blog title. Ada sepuluh baris yang beberapa bagian harus kita hapus. Hati – hati jangan sampai salah hapus. 
2. Menghapus keyword < meta dari mulai baris ke 34 sampai 36. Kalau dibagian ini dihapus semua. 
3. Mengubah user name media sosial kita, mulai dari facebook hingga twitter. Dari baris ke 41 sampai 44, periksa yang ada tanda xxxxx diganti nama media sosial kita , juga yang ada tulisan yourname diganti nama media sosial kita juga. 
4. Mengapus image twitter karena akan menyebabkan warna merah di SEO inspector 
5. Merubah bagian ini <meta content='en_US' property='og:locale'/> 
6. <meta content='id_ID' property='og:locale:alternate'/> . En-US dijadikan locale alternate sedangkan id_ID dijadikan og locale yang artinya kita mengunakan bahasa Indonesia. 
7. Menghapus h2, ini dia yang seru. H2 pada template bawaan blogspot adalah nama blog kita, padahal seharusnya nama sub judul artikel kita sehingga nanti urutannya menjadi h1 : judul utama artikel, h2 sub judul, h3 : sub-sub judul dan h4 sub-sub-sub judul. H2 ini ada dua pada kode html, yang dihapus adalah yang ke dua. Namun menemukan h2 itu tak semudah itu karena letaknya ada di bagian bawah dari ribuan kode html. Setelah baca materi - buka laptop nyari h2- nggak ketemu- tanya teman-teman di grup- nyari lagi-nggak nemu-matiin laptop – buka lagi karena penasaran- nyari lagi dan lagi akhirnya si h2 ini berhasil ditemuka. Langsung hapus saja, eh ERROR. Nah lho. Singkat cerita, setelah empat kali buka matiin laptop baru deh h2 ketemu di baris ke 2338 sampai 2348 dan 2583 sampai 2585. Harus di bagian ke dua yaitu dari 2583 sampai 2585. Jreeeeng, berhasil. 
8. Menghilangkan kode m=1 dari link address smartphone. Cari kode html <head> lalu tambah kode yang kita download dari situs softrickinfo. 

Selesai kita mengulik kode-kode yang bikin mabok hingga lupa waktu saking serunya. Saatnya ngecek tampilan blog dan SEO parameter. Wow masih belum beres, masih ada relate post yang tidak keluar gambarnya dan parameter seo yang merah. Letak h1,h2,h3 juga harus dibenahi. Ada apakah ini? 

Tampilan gambar pada relate post yang belum keluar bisa diedit dengan menganti kode wxxx dan hxxx dengan sxxxx. Caranya buka postingan , edit html compose dan ganti kode tersebut. Sementara letak h1,h2,h3 sudah urut tetapi masih ada lag yaitu h yang empty ini yang harus dicari pemyebabnya. Menurut coach ada spasi yang kebawa heading. Solusinya di edit satu-satu atau edit postingan ulang, hapus, copas, unformat dan atur lagi. 

Insight Dari Materi Ini 

Akhirnya punya template unduhan itu seneng banget, meski sepekan tiap hari ngulik dan ngulik namun membuat mata berbinar saat menumukan apa yang harus kita lakukan. Seru lah pokoknya menganti template ini. Materi terseru selama kelas blogspedia setelah sebelumnya seru-seruan dengan pasang custom domain. Sampai suami bilang “ Sudah minta pasangkan aja, bentar beres”. Tapi justru pada kesulitan-kesulitan itulah letak kepuasaanya. Seperti hidup, dalam perjalanannya pasti ada ujian yang harus kita lalui, tapi usai menghadapi ujian kita akan merasakan kebahagiannya lebih dari sebelumnya. 

Belum benar-benar belajar blog kalau belum bisa ngubah template. Semangat!