√CARA MUDAH MENGGANTI DAN MENGEDIT TEMPLATE BLOG WITH FIKSIONER

Hello mooie vechter…para pengunjung kesayangan neng Ai, mari kita berbagi informasi menarik lagi. Masih membahas seputar blog dulu ya, namun topiknya sedikit berat. Ya, kira-kira 10-25kg lah ya (udah kayak beras aja). Kali ini kita belajar bersama tentang mengganti dan mengedit template di blog.

Are you ready?

Mangga, blognya dibuka semua. Bagi yang belum punya blog, dipelajari dulu nggak apa-apa. Nanti pas praktek udah lancar kayak kereta cepat Jakarta-Bandung.hehe

MENGGANTI DAN MENGEDIT TEMPLATE

Dalam mengganti maupun mengedit suatu blo khususnya template, ternyata banyak yang perlu diperhatikan dan diterapkan. Tidak hanya artikel yang butuh SEO, template yang dipasang pun juga memerlukannya supaya optimal ditemukan mesin pencari seperti Google dan sejenisnya.

Template yang SEO

Template blog yang SEO adalah desain dan struktur dasar sebuah blog yang dioptimalkan untuk mesin pencari seperti Google. Tujuan utamanya adalah meningkatkan visibilitas blog kita di hasil pencarian, sehingga lebih banyak orang dapat menemukan dan membaca konten kita.

Terdapat beberapa komponen kunci yang harus dipertimbangkan dalam template blog SEO, diantaranya:

Desain Responsif yang dapat menyesuaikan tampilan di berbagai perangkat, termasuk desktop, tablet, dan ponsel. Ini penting karena Google memberikan peringkat lebih tinggi pada situs yang mobile-friendly.
Kecepatan Memuat Halaman termasuk faktor penting dalam SEO. Kita dapat mengoptimalkan kecepatan dengan mengompres gambar, menggunakan hosting yang andal, dan mengurangi penggunaan elemen-elemen yang memperlambat situs misalnya music, screen saver, animasi, dll.
URL yang Ramah SEO yang singkat dan mencerminkan judul posting akan membantu mesin pencari memahami konten kita lebih baik.
Struktur Header yang tepat meliputi tag header HTML (H1, H2, H3, dsb.). Judul utama posting harus ditandai dengan tag H1, sementara subjudul dan bagian lainnya dapat ditandai dengan tag H2 dan H3. Ini membantu mesin pencari memahami hierarki konten kita ya mooie vechter.
Meta Deskripsi merupakan potongan teks yang muncul di hasil pencarian dan harus menggambarkan dengan baik isi dari postingan. So, setiap posting blog harus memiliki meta deskripsi yang informatif dan menarik.
Penggunaan Kata Kunci yang relevan untuk setiap posting blog dan gunakan kata kunci tersebut dengan alami dalam konten, judul, subjudul, dan deskripsi. Jangan berlebihan dalam penggunaan kata kunci (keyword stuffing), karena ini bisa merusak SEO kita.
Gambar yang Teroptimasi yaitu diunggah dengan ukuran yang tepat dan diberi tag alt yang deskriptif. Ini membantu dalam optimasi gambar dan aksesibilitas.
Pemantauan dan Pembaruan Teratur dengan memeriksa statistik situs, peringkat pencarian, dan pembaruan algoritma mesin pencari, dan sesuaikan strategi SEO dengan kebutuhan.

Website Download Template

Banyak situs-situs menyediakan desain template secara gratis, namun tidak semuanya memenuhi SEO template. Pada materi blogspedia coaching, neng Ai coba mempelajari beberapa situs penyedia template tersebut. Ada 3 situs rekomendasi untuk mengunduh template secara gratis. Dimana saja itu?

https://www.blantertheme.com/ disarankan pilih yang Blanter Wisdom seperti punya pak Yonal

https://www.igniel.com/ - disarankan pilih yang Fiksioner

https://gooyaabitemplates.com/ di sini lebih banyak pilihan, jadi bingung mau template yang gimana

Setelah menjelajahi satu per satu situs di atas, awalnya mencoba template punya gooyabitemplate.com karena pilihannya yang banyak. Namun dari sekian banyak template membuat semakin bingung, alhasil menetapkan pilihan pada Fiksioner punya igniel. Walaupun tampilan sederhana namun sudah SEO friendly ya mooie vechter.

SEOptimer dan Page Speed Insight

Sebelum memasang template Impian, pastikan template sudah di uji www.seoptimer.com maupun https://pagespeed.web.dev

Mengapa demikian?

Supaya kita tahu seberapa tingkat SEO friendlynya serta kecepatan akses halamannya. Caranya mudah mooie vechter. Kita cukup buka www.seoptimer.com > lalu buka pada tab baru, kunjungi situs penyedia template blog misalnya www.igniel.com > pilih template misal Fiksioner, kemudian klik “Demo” (nanti akan muncul tampilan template) > selanjutnya copy URL di halaman Preview/Demo > lalu paste ke halaman seoptimer pada kolom audit > klik “Audit” untuk memunculkan hasil penilaian template. Hasil tersebut untuk melihat apakah template sudah SEO friendly dan juga mengetahui apa saja yang perlu dioptimasi.

Tahapan tersebut juga bisa diterapkan di https://pagespeed.web.dev. Hasilnya kurang lebih sama, kita tinggal mempelajari saja bagian mana yang perlu dioptimasi. Di bawahnya sudah ada keterangan lengkap.

TUTORIAL MENGGANTI TEMPLATE

download dan ganti template fiksioner di blog

Bagaimana kondisi mata dan pikiran? Masih baik-baik saja ya mooie vechter?

Masih banyak jalan yang harus ditempuh untuk merenovasi blog kesayangan supaya tampil SEO friendly. So, tetap semangat membaca tulisan ini ya. Berikut ini neng Ai bagikan tutorial mengganti template dengan tepat dan cepat. Template yang dipilih kali ini Fiksinoner ya, untuk template lain kemungkinan tahapannya sama. Yuk disimak!

Download Template

Langkah-langkah mendownload template Fiksioner by igniel :

Buka website www.igniel.com
Pilih menu "Tema/Template"
Klik Template yang diinginkan, missal Fiksioner
Scroll ke bawah, klik tombol download pojok kanan bawah. Kalau mooie vechter ingin yang premium, tinggal klik “Beli Versi Premium” lalu lakukan pembayaran. Berhubung tidak banyak perbedaan versi gratisan dengan premium, jadi neng Ai pilih yang gratis aja dulu.
File yang terunduh berformat .zip atau .rar, jadi kita extract dulu sekalian dengan klik kanan pada folder unduhan “Fiksioner-V4” > pilih extract all/extract here (tiap laptop kadang opsi beda-beda intinya pilih yang kata “Extract”)
Setelah Extract, akan ada 3 file tersedia yaitu Changelog V4, Dokumentation and Tutorial serta Fiksioner-V4
Selanjutnya klik kanan file “Fiksioner-V4” > pilih open with > pilih wordpad/notepad
Kita biarkan dulu, dan kita beralih ke blog.

Ganti Template

Beberapa tahapan mengganti template blog fiksioner :

Buka blognya dulu, kemudian masuk dashboard
Cadangkan tema lama terlebih dahulu, caranya klik menu "Tema" > klik “tanda panah bawah” sebelah “sesuaikan” > klik “CADANGKAN” > klik “DOWNLOAD”
Selanjutnya tetap di menu “Tema” klik “tanda panah bawah” lagi > klik “Edit HTML” > copy semua kode (Ctrl+A lalu Ctrl+C)
Buka Wordpad/Notepad baru > tempelkan html yang dicopy tadi (Ctrl+V). Ini dilakukan untuk antisipasi, misalkan kode html template baru error, dsb jadi masih ada cadangan html lama.
Selanjutnya buka Wordpad/Notepad template Fiksioner-V4 yang kita biarkan tadi, kemudian copy html (Ctrl+A lalu Ctrl+C) > kembali ke blog halaman html > hapus semua kode html lama dan tempelkan (Ctrl+V) kode html fiksioner yang dicopy tadi > lalu klik tombol simpan (pojok kanan atas)
Template otomatis berganti masih sesuai bawaan Fiksioner, jadi perlu proses editing.
Kalau mau ganti warna background, side bar, dll tinggal klik “SESUAIKAN” yang ada pada menu “Tema”

TUTORIAL MENGEDIT TEMPLATE

Template sudah berganti Fiksioner versi 4, namun tampilan masih bawaan dari igniel.com jadi perlu dipermak/renovasi ya mooie vechter. Berikut terdapat beberapa bagian yang perlu diubah:

Pertama buka dashboard blog > klik Tata Letak

Header

1. Header Kecil

Klik tanda pensil/tombol Edit pada bagian “HEADER”, nanti akan muncul tampilan edit header seperti biasanya. Pastikan gambar header disesuaikan blog kita sendiri ya. Misal belum ada gambar header, tinggal upload saja. Jangan lupa disimpan ya. Ini tampilan headernya imut banget alias kecil.

Kalau neng Ai, gambar headernya diganti logo blog/favicon supaya beda saja. Itu sesuai selera mooie vechter saja, mau tetap pakai header ya tidak masalah.

2. Header sesuai standar

Fokus pada bagian “BILLBOARD” > klik tombol edit pada “Ad Billboard” kemudian masukan kode html berikut

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy2SDBEMvpXcAfB1XAN2S888DmDENMOFhKwu7bThyCswdIIl2QZQc3pF_Mk4wMo2hYDjJOR6mDq2BEPI7rOyyhz_2efhIV82x7F6sQAK8J9ETMp8H-IfihkmG_BuIW71F_LghUxLXUWz_lQUmksAniHoqBEOfjLDtUMVMxWnp7x7rRoPx8h3qD46DnZ98/s1000/HEADER.jpg" width="1000" height="250" title="skinkeren.com" alt="skinkeren.com"/>

Jangan lupa teks yang berwarna diganti/diedit sesuai blog mooie vechter ya.

Tombol Dropdown

Langkah awal, buka dasboard blog "Tata Letak/Template" > kemudian pada kolom "HEADER" klik tombol edit bagian "MENU" > lalu waktunya mengedit kode html sesuai kebutuhan blog masing-masing

<ul>
<li><a href='https://www.skinkeren.com' title='HOME'>HOME</a></li>
<li><a href='https://www.skinkeren.com/p/about.html' title='ABOUT ME'>ABOUT ME</a></li>
<li class='dropdown'>
<span>TOPICS</span>
<ul>
<li><a href='https://www.skinkeren.com' title='Skincare Products'>Skincare Products</a></li>
<li><a href='https://www.skinkeren.com' title='Skin Treatments'>Skin Treatments</a></li>
<li><a href='https://www.skinkeren.com/search/label/HEALTHY%20SKIN' title='Healthy Skin'>Healthy Skin</a></li>
<li><a href='https://www.skinkeren.com/search/label/SKIN%20FOODS' title='Skin Foods'>Skin Foods</a></li>
<li><a href='https://www.skinkeren.com' title='Make-up Products'>Make-up Products</a></li>
<li><a href='https://www.skinkeren.com' title='Tips'>Tips</a></li>
<li><a href='https://www.skinkeren.com/search/label/Others' title='Others'>Others</a></li>
</ul>
</li>
<li><a href='https://www.skinkeren.com/p/sitemap.html' title='SITEMAP'>SITEMAP</a></li>

</ul>

Berhubung neng Ai butuhnya tombol dropdown hanya pada TOPICS, jadi menu dropdown yang dimasukkan mulai Skincare Products hingga barisan Others. Yang lainnya seperti HOME, ABOUT ME, SITEMAP merupakan menu tunggal.

Jadi untuk mengedit menu tunggal maupun menu dropdown, silakan teks yang diwarna bisa diganti sesuai kebutuhan mooie vechter ya.

Banner

Bagian satu ini dibutuhkan untuk menampilkan komunitas, organisasi, dll yang kita ikuti. Langkah-langkahnya :

Pada menu "Tata Letak" di dashboard blog, scroll ke bawah dan cari "ASIDE atau ASIDE STICKY"

Kemudian klik tombol edit pada ASIDE/ASIDE STICKY > masukkan kode html berikut:

<table border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 300px;">

<tr><td><a href="https://www.blogspedia.my.id/" target="_blank"><img src="https://www.blogspedia.my.id/wp-content/uploads/2022/01/logo-thecupuers-300x300.jpg" border="0" alt="Gandjel Rel" width="75" height="75" /></a></td></tr></table>

Selanjutnya tinggal mengganti teks yang diwarna tersebut. Pastikan kita memiliki info alamat URL komunitas kita seperti blog, website, dll agar lebih informatif.

pasang banner pada template blog fiksioner

Perbedaan ASIDE dan ASIDE_STICKY adalah posisi tampilan banner saja, ASIDE tampilan banner berada diantara barisan About Me, Followers, Label/Topics, dsb. Sedangkan ASIDE_STICKY posisinya banner berada di paling bawah sebelum "Social Media".

Kalau neng Ai lebih suka yang paling bawah, biar enak dipandang. Kalau mooie vechter suka yang mana?

Social Media

Tahap selanjutnya mengatur link sosmed/sosial media. Tetap berada di menu "Tata Letak" pada dashboard > kemudian scroll bawah temukan "Social Media" ada di "FOOTERTOP" ya..

Lalu klik tombol edit (tanda pensil) dipojokkan > selanjutnya edit kode html sesuai link sosial media masing-masing ya. Berikut linknya:

<a href='https://www.facebook.com/aida.dlupin?mibextid=LQQJ4d/#' title='Facebook' aria-label='Facebook' target='_blank' rel='noopener'><svg viewbox='0 0 320 512'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/></path></svg></a>

<a href='https://twitter.com/#' title='Twitter' aria-label='Twitter' target='_blank' rel='noopener'><svg viewbox='0 0 512 512'><path d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></path></svg></a>

<a href='https://www.tiktok.com/@aidadlupin?_t=8fhYxl5c4vg&_r=1/#' title='Tiktok' aria-label='Tiktok' target='_blank' rel='noopener'><svg viewbox='0 0 448 512'><path d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/></path></svg>

<a href='https://instagram.com/br_aida?igshid=OGQ5ZDc2ODk2ZA==/#' title='Instagram' aria-label='Instagram' target='_blank' rel='noopener'><svg viewbox='0 0 448 512'><path d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/></path></svg></a></a>

Edit teks yang diwarna ya, URL linknya silakan dicek di sosial media masing-masing. Nanti tinggal salin URL, tempel ke html tersebut. Sebenarnya masih ada youtube juga, berhubung neng Ai nggak punya jadi tidak dicantumkan.

menyematkan link sosial media pada template blog

Memeriksa SEOptimer atau Page Speed Template

Kalau sudah selesai mengganti maupun mengedit template, jangan lupa disimpan ya. Pastikan semua kode HTML sesuai tutorial. Selanjutnya mari cek SEOptimer atau Page Speed lagi untuk melihat analisis setelah mengedit template. Apakah ada peningkatan atau malah mengalami penurunan?

Cara cek SEO sudah dicantumkan di atas, tinggal kita masukkan link blog saja.

Selain itu, kita bisa cek juga yang perlu dikoreksi lewat META SEO Inspector

Pastikan sudah diaktifkan pada chrome/mozilla/opera, dll. Caranya gampang, setelah terpasang kita pin. Jika sudah muncul tombol lampu di kanan atas deretan URL, itu artinya sudah terpasang dan di-pin/tampilkan. Selanjutnya buka URL blog yang ingin dicek SEO Inspectornya, nanti tanda lampu tersebut akan memunculkan angka apabila template masih ada yang perlu diperbaiki. Tinggal kita cek bagian yang "WARNING" biasanya bertuliskan warna merah.

TIPS & TRIK

Sebelum mulai mengoprak-ngaprik html, selalu awali dengan doa dulu. Supaya apa? Supaya nanti diberi kesabaran yang berlimpah, jika nemu error atau tampilan blog makin berantakan.
Wajib teliti ya. Semakin kita teliti baca kode, semakin kecil kemungkinan terjadi error. Kode html sebenarnya simple kalau kita paham bacanya. Namun kalau ada kurang satu huruf atau tanda baca, kemungkinan error juga besar.
Pastikan sudah back up/cadangkan html template yang lama ya mooie vechter , buat jaga-jaga kalau misal error tak berujung. Kita tinggal masukan aja html lamanya.
Pastikan disave/simpan setelah mengedit html. Supaya tampilan blog selalu diperbarui.
Baca kode htmlnya pelan-pelan saja, yang penting paham. Pastikan template yang di dowload lengkap dengan tutorialnya ya, supaya mengedit template blognya terarah meskipun buta kode html.
Tetap tenang dan sabar meskipun menemui kendala, seperti error, tampilan blog semakin berantakan, dsb. Cari solusinya dengan membaca tutorial. Pasti disitu ada semua. Kalau nggak nemu, langsung tanya pada ahlinya.
Kepo blog orang-orang yang membahas seputar template atau bisa cek tutorial youtube.

Kini perasaan lebih tenang setelah mengganti dan mengedit template sesuai keingingan. Semakin bersemangat lagi untuk menulis dan berkarya. Kuncinya edit html template itu harus coba lagi berkali-kali dan tetap bersabar ya.

"Coba lagi dan lagi, karena keberhasilan itu hasil dari suatu percobaan berulangkali"

Bagaimana? Apa sudah dipraktekkan mooie vechter?

CARA MUDAH MENGGANTI DAN MENGEDIT TEMPLATE BLOG WITH FIKSIONER