Pengalaman Pasang Template Fiksioner v4 di Blogspot

Selamat malam Junkeisea-ers,Semangat Pagi. Bagaimana kabarnya hari ini? Kalau mimin lagi puyeng, seharian ngutak atik kode HTML, pengen mual dan muntah rasanya. Ah tapi, malu sama peserta lain yang lagi pada on fire ngerenov blognya. Nah, Junkeisea-ers hari ini habis maintenis ceritanya, mutasi dari template lama ke template baru yang lebih SEO Friendly, yaitu template fiksioner v4 dari igniel.com. Penasaran nggak dengan cerita pasang template-nya? Kuy simak...

Sebelum melangkah jauh mimin mau cerita dulu ya Junkeisea-ers. Jadi, dahulu kala, mimin enggak terlalu paham dan enggak terlalu konsen dengan yang namanya per-SEO-an. Taunya hanyalah yang penting blog sedap dipandang, cantik dan harum baunya. Eh emang bunga! Nah, karena kekepoanku ini, akhirnya miminpun memantabkan hati untuk membeli template dari pihak ketiga yang nuansanya pinky banget. Seneng lah pokoknya.

Bersama dengan template hasil belian ini, mimin udah hampir lah 3 tahunan. Udah dipakai buat ikut rekrutmen komunitas, dan posting sekitar sebulan lah, lumayan banyak hehe. Tapi... setelah ikut Blogspedia Coaching 4 ini akhirnya mataku terbuka dan mata hatiku tergelitik, dengan berat hati akhirnya menurunkan dulu template yang lama, untuk nyoba ke template baru yang oke punya.

Hampir 2 bulan coaching, materi minggu minggu ini memang agak agak tricky banget. Yang ditunggu-tunggu akhirnya datang, pengkodean dan sejenisnya. Berasa masuk ke dunia antah berantah hoho. Namun, berkat Blogspedia yang kece ini, akhirnya kami diberikan "bonus" oleh Mbak Marita, untuk menjajal sebuah template Fiksioner yang SEO Friendly dan ramah Meta Inspector. Huhuuy.

Pertimbangan Pasang Template Fiksioner v4 

Oya, ada beberapa pertimbanganku kenapa akhirnya template lama harus kuturunkan dulu, dan kupasang dengan template baru. Jadi, di awal renov ini, aku menyempatkan untuk ngecek SEOoptimer, kira-kira si junkeisea dengan template yang bunga-bunga ini nilainya berapa ya... Dan ternyata hasilnya B- Hikss..perlu ambil SKS lagi kayaknya.

Nah, maka dari itu, akhirnya aku membulatkan tekad untuk mencoba memasang template dari Igniel.com, template gratis Fiksioner namanya.

Langkah-langkah memasang Template Unduhan

1. Backup terlebih dahulu

Sebagaimana saran Mbak Marita, sebelum semuanya lenyap, ada baiknya backup dulu, termasuk kode-kode pada gadget yang kemungkinan akan dipakai lagi. Tak lupa, siapkan link header image dan foto profil yang akan dipasang di template baru nantinya. Biar enggak bolak balik, siapkan semua file di laptop ya Gaes.

Nah, langkah back up ini cukup mudah, caranya adalah dengan Klik Tema=> Tema Saya=>Cadangkan. Nah, hasil dari back up ini ada di Download, jangan lupa rename dulu biar enggak hilang jejak ditelan bumi.

2. Unduh Template

Langkah berikutnya adalah, mengunduh Template dengan ekstensi XML. Beruntung sekali, kali ini Mbak Marita memberikan unduhan template siap pakai, hanya perlu beberapa penyeseuaian saja.

3. Sesuaikan Template

Untukku sendiri, sebelum me-restore file unduhan, aku edit dulu kode-kode itu dengan Sublime Text. Jika belum punya aplikasi ini, pasang dulu ya di Laptopnya.. Nah, buka unduhan XML dengan Sublime Text, lalu sesuaikan beberapa yang bisa disesuikan secara langsung seperti Alamat Blog, Author, Data Sosial Media, Email.

Penyesuaian Template Fiksioner v4 dari Igniel.com

1. Info Penulis

Buka kode HTML, lalu seach "Your Name", Blogger Profile, ID Facebook, ID Twitter, dan ID sosial media lainnya.<meta content='Thia T' name='author'/>
<meta content='Thia T' property='article:author'/>
<link href='https://www.blogger.com/profile/Junkeisea' rel='me'/>
<link href='https://www.blogger.com/profile/Junkeisea' rel='author'/>
<link href='https://www.blogger.com/profile/Junkeisea' rel='publisher'/>
<meta content='https://www.facebook.com/thia_trisnowati' property='article:author'/>
<meta content='https://www.facebook.com/thia_trisnowati' property='article:publisher'/>
<meta content='@trisnowati_thia' name='twitter:site'/>
<meta content='@utrisnowati_thia' name='twitter:creator'/>

2. Menyisipkan Gambar Header 

Header termasuk penting sekali, karena seringkali terdeteksi merah oleh SEO Meta Inspector. Nah, cara settingnya adalah:

Masuk ke Tata Letak=> Billboard==>Add a gadget, pilih HTML/Java Script Gadget, kemudian isikan kode berikut:

<img src="
https://lh3.googleusercontent.com/Bs8DmoGsKMkMaaBgujB4eekZtrQxmA0cWD-6J_gWolm2gyaXNJUI_K89I5fCBkOSibsp4QZwbKgRw6OOnSmmTNo1ZtUDHxHbB9zl15mZO8m1fGZY3iAk-6xS8S1tZ7FTxC-ASGoAFKdSd9IXEoKr2w=w640-h160" title="junkeisea" width="1000" height="250" alt="header junkeisea"/>

3. Membuat Dropdown

Untuk menambahkan dropdown, maka lengkapi kode berikut ini:

ul>
<li><a href='https://www.junkeisea.com/' title='Home'>Home</a></li>
<li><a href='https://www.junkeisea.com/p/blog-page.html' title='About'>About Me</a></li>
<li class='dropdown'>
<span>Artikel</span>
<ul>
<li><a href='https://www.junkeisea.com/search/label/food' title='Food'>Food</a></li>
<li><a href='https://www.junkeisea.com/search/label/reflect' title='Reflect'>Reflect</a></li>
<li><a href='https://www.junkeisea.com/search/label/life' title='Life'>Life</a></li>
</ul>
</li>
</ul>

Untuk mengisi menu dropdown ini, pastikan kita sudah menyiapkan beberapa label yang akan disambungkan pada menu ini. Untuk blogku sendiri, aku memilih Label food, reflect, dan life.

4. Menambahkan widget sosial media di Footer

Untuk menegaskan blog lagi, ada beberapa widget yang bisa dioptimasikan agar pembaca mendapatkan pengalaman lebih. Untuk menambahkan widget ini, masuk me widget Social Media, lalu ubah kode berikut:

<a href='https://www.facebook.com/thia_trisnowati' 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/trisnowati_thia' 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.instagram.com/ttrsnwt' 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 href='https://www.pinterest.com/thiatrisnowati' title='Pinterest' aria-label='Pinterest' target='_blank' rel='noopener'><svg viewbox='0 0 384 512'><path d='M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z'/></path></svg></a>

<a href='https://www.youtube.com/username' title='Youtube' aria-label='Youtube' target='_blank' rel='noopener'><svg viewbox='0 0 576 512'><path d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/></path></svg></a></a>

5. Menambahkan Back To Top

Sebelumnya aku mikir-mikir, apa sih ini sebetulnya. Jadi, Back To Top adalah semacam widget yang bisa kita klik, agar lebih mudah kembali ke homepage atas. Bagaimana caranya? Masuk ke edit html lagi, lalu masukkan script berikut ini:

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Tidak berhenti di sini, beberapa tampilan dari template blogspot ini ada yang masih bisa dioptimasikan kembali. Namun karena kepala sudah puyeng, selanjutnya adalah memastikan template benar-benar udah mendapatkan "OK" dari SEO Meta Inspector.

Dan beginilah hasilnya manteman...

KESIMPULAN

Memasang template di Blogspot memang gampang-gampang susah ya Junkeisea-ers. Setelah seharian berkutat dengan pasang template fiksioner v4 di Blogspot, makin capek tapi makin penasaran. Enggak perlu template yang unyu-unyu banget, berbunga-bunga...yang penting tak lupa SEO Friendly. Kuncinya adalah kejelian, ketekunan, banyak-banyak istighfar dan berdoa ajaa hehe. Semangat Junkeisea-ers!