Sebenarnya sudah lama tidak pernah edit template blogspot karena memang tidak jago desain. Tapi dapat kabar ada versi terbaru Fiksioner Igniel, maka akhirnya Umma juga tergoda untuk segera mengupgrade-nya. Yuk kita update Fiksioner v4 Igniel!
Mengenal Tema Fiksioner Igniel
Fiksioner adalah template blogger gratis rasa premium. Setidaknya itu yang Umma tangkap saat membaca keterangan terkait tema template blog satu ini di laman igniel.com . Hasil karya dari mbak Igniel ini memang sangat diminati oleh blogger dengan berbagi Niche blog mulai dari lifestyle, Foodies, pendidikan, instansi dan lainnya.
Bahkan banyak keunggulan dari tema template ini selain sudah SEO Friendly juga loadingnya sangat cepat sekali.
Mau tahu selengkapnya bisa langsung meluncur ke blog Igniel ya.
Ini Cara Update Tema Fiksioner v4 Igniel Terbaru
Sebenarnya tidak sulit untuk mengupgrade Fiksioner v4 atau bagi pemula yang akan mengganti template blog ke Fiksioner mudah tapi harus teliti sekali. (Baca dulu ya sampai habis artikel Umma, baru action download, biar tidak mumet seperti Umma, Ingat!).
Berikut tahapnya:
1 Download dulu tema fiksioner v4 di web ignel.com
2. Masuk web Igniel
3. Klik Tema (Template)
4. Pilih Fiksioner v4
5. Download
6. Buka dengan Zip Extractor
7. Pindah file yang sudah di download ke folder yang mudah ditemukan
8. Kemudian extract file
9. Cari file Xml dengan judul Fiksioner-v4.min.xml
10.Klik kanan Open With/Buka dengan "Notepad" . Saatnya kita mulai install dan update versi terbaru Tema Fiksioner v4 Igniel
Saatnya Install dan Setting Tema Fiksioner v4 Igniel
Panduan kali ini Umma praktekkan bersumber dari sharing coach Marita setelah update tema Fiksioner blog kesayangannya Maritas Palace . Yuk kita mulai! Tapi jangan lupa ya setiap akan mengganti kode, selamatkan dulu kode yang lama di file lain, agar saat kita menemui masalah kita bisa tidak terlalu bingung. (Asli Umma belajar dari pengalaman, kapok bikin kepala pusing, nantikan cerita Umma di akhir artikel ya). Yuk lanjut..
Copy Semua File XML
Setelah file xml Fiksioner-versi-edit diunduh, klik kanan pada filetersebut. Pilih open with notepad. Select all, copy semua kode yang ada.
Buka Theme - Edit HTML
1. Paste Kode HTML Versi Terbaru Fiksioner v4
Select all kode, hapus. Tempel/ paste semua kode yang tadi sudah kita copy
dari XML. Perlu diingat jangan langsung diupload menggunakan file tapi lebih baik menggunakan cara manual edit HTML. Hal ini agar template lama tetap terbawa saat kita menempel Kode Fiksioner v4 Igniel ini. Simpan dan siap di edit sesuai panduan berikutnya.
2. Aktifkan Google Analytic
Cari <head> dan
Di bawah kode ini masukkan kode Google Analytic (GA), bagi yang sudah punya
akun GA. Yang belum punya bisa skip dulu. Cara lengkap bisa baca disini ya. Cara Memasang Google Analytic Igniel.
3. Edit Gambar Thumbnail
Di bagian <!-- THUMBNAIL -->
Cari link gambar seperti ini:
https://1.bp.blogspot.com/-9nrnveUZKgs/YDpBhSuo8WI/AAAAAAABpcM/b8wQD
K2IsgUakCh8DKwBBgkBj_Qc7fyiwCLcBGAsYHQ/s16000/default-thumbnail.png
Kalian bisa menggantinya dengan gambar yang kalian suka, atau mau pakai itu juga
boleh.
Caranya siapkan gambar, save di draft postingan. Klik kanan, copy image address,
lalu ganti link di atas dengan gambar pilihan sendiri.
4. Edit Author
Di bagian <!-- AUTHOR -->
Gantilah bagian “isi namamu” dengan nama kita
Gantilah bagian “username” dengan username media sosial kita
Edit Tata Letak/Layout
Setelah kita Edit HTML, saat kita masuk ke Tata Letak. Pilihlah di Dashboard Tata Letak kemudian saatnya melakukan pengeditan tema Fiksioner v4 Igniel terbaru.
1. Edit Page Header Gadget
 |
| Penampakan header Ruang Umma |
2 Edit Menu Blog
Di dashboard blog masuk layout/tata letak kemudian pilih Menu disamping HEADER > klik pensil > lalu isi dengan kode HTML yang Umma siapkan dibawah ya. Simpan. Isi link sesuai url blog, url page about blog, url label-label di blog kita.Ada beberapa menu yang Umma coba buat untuk memudahkan pengunjung mencari artikel kita.
<ul>
<li><a href='https://www.namablogmu.com/' title='Home'>Home</a></li>
<li><a href='https://www.namablogmu.com/p/about-me.html' title='About'>About Me</a></li>
<li class='dropdown'>
<span>Topik Bacaan</span>
<ul>
<li><a href='https://www.namablogmu.com/search/label/label1' title='label1'>label1</a></li>
<li><a href='https://www.namablogmu.com/search/label/label2' title='label2'>label2</a></li>
<li><a href='https://www.namablogmu.com/search/label/label3' title='label3'>label3</a></li>
</ul>
</li>
</ul>
3. Edit Billboard
 |
| Penampakan Billboard Bagian HTML |
Masuk ke Billboard - di bagian HTML/ Javascript. Ganti link gambar ini
https://1.bp.blogspot.com/-9iHYNCTIwcc/YDpA5gJO1kI/AAAAAAABpcA/I13n6K
4PEIwK2uBvpRc5-XLf3I_0aYS9ACLcBGAsYHQ/s16000/default-header-bigad.png
dengan link gambar kita sendiri. Ukuran 1000x250
Kode di bagian ini mau dipindah ke Big Ad juga bisa yaa tapi sengaja tidak disana tapi dibagian Java script saja. Karena Big Ad, fungsinya lebih ke iklan Adsense. (Semoga seiring waktu blog kita kebanjiran Adsense yang berkah dan bisa ditaruh disana. Aamiin).
4. Edit Sidebar- Salam Kenal
Ganti link gambar ini
https://1.bp.blogspot.com/-jNyHsfuHScY/YDpA5uAx-YI/AAAAAAABpb8/lUqFKZ
qhXrcl8d6aKglaEaRldzeCioR7wCLcBGAsYHQ/s200/default-pic-profile.png dengan
link gambar kita sendiri.
Ukuran gambar yang disarankan 320x320. Judul dan Tulisan bisa disesuaikan dengan kebutuhan dan keinginan.
<center><span style="font-style: normal;font-size:100%;"><img alt="Preview" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXjdUIuEF40pPHbycNmi7_VtI4w4HOHnN9c6k8stCwTJD8IS2cUblE7Ux7yi7IEOja1uZyyAtIn98a0i-H01E3jKJ_Ir-A7ivBo_W93gfyKAuuV6X4ZC-sP21eeMc5Y_wqlQf1JEGWadRi/s200/default-pic-profile.png" width="200" height="200" style="border-radius: 100%; font-size: 100%; text-align: left;" / /></span><br /><h4 style="font-style: normal;"><span style="text-align: left;font-size:100%;"><span style="font-weight: normal;">Selamat datang di </span><span ="" style="color:#ff6600;">My Blog</span></span></h4><div><div><span ="" style="color:#ff9966;"><b>It's Personal Blog </b></span></div><div style="font-weight: normal;"><b><span ="" style="color:#ff9900;"><i>about Stories, Love, Motivation and The Meaning of Love</i></span></b></div><div style="font-style: normal; font-weight: normal;"><b style="color: red; font-size: 100%; text-align: center;"><br /></b></div><div style="font-style: normal; text-align: center;"><span ="" style="color:red;"><b> Namaku Wanita</b></span></div><div style="font-style: normal; font-weight: normal;"><span style="text-align: left;font-size:100%;">Blogger, Writer & Mom</span></div></div></center><div style="font-style: normal; font-weight: normal; text-align: -webkit-center;"><br /><span style="text-align: left;font-size:100%;">Klik di </span><b style="text-align: left;font-size:100%;"><a href="https://www.namablogmu.com/p/about-me.html">sini</a> </b><span style="text-align: left;font-size:100%;">untuk info lengkap.</span></div><div style="font-style: normal; font-weight: normal; text-align: -webkit-center;"><span style="text-align: left;font-size:100%;">Ingin kerjasama? Silahkan kontak ke </span><b size="3" style="text-align: left;"><span ="" style="color:#000099;"><a href="mailto:username@gmail.com">email</a>.</span></b></div>
5. Edit Sidebar “Part Of”
Pada bagian sidebar "part of' bisa disesuaikan sendiri dengan komunitas apa yang mau ditampilkan. Tinggal hapus yang tidak diperlukan, dan tambahi gambar yang dibutuhkan.
Catatan: Untuk mengganti gambar kita sendiri untuk header dan sidebar bisa dengan cara menyimpan foto terlebih dahulu pada draft. Caranya pertama ambil postingan baru, unggah foto dan jadikan draft bukan publish.
Setelah terunggah di draft, kita bisa mengambil link image addressnya saja.
Kalau gambar sudah diupload, klik kanan pada gambar, pilih ‘copy image address’
atau ‘salin alamat gambar'.
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggyHQ7k4lGo1DWdNKDtL-jqv_lfpVZhehuOOxvCfLMwg4-TEEOikyFBCUlmXzNJ9tymUe117Qtp3U5obq8XTaWNNtgQQ20rXvEWPA3C7w9Axi-Ee-gNGuH9LqAm8zlDHEC_qoxbz9R6fowFhFShxsUkVQaH0BwEolyivCnL1EQ8F3NeT6gSP2s6qElgew/s320/6.png" border="0" alt="Gandjel Rel" title="GR" width="75" height="75" loading="lazy" /></a></td>
<td><a href="https://bloggerperempuan.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6SdAygMwiInRqXRWMXxNescJXGXhVPp3SjDGuFvbZyHube1mANtTE-kUl-24MfxR9yQ_nQjkfP5PtlBd3kSvFO1IpB7LYjK2q0HOmAEi1Q_VoNm_7bZICP7lGoOm217Y8RKxLnGRw2rlseHuj3FINOD93uT58vBN-R4e--WWbaFtn-vWTElIwZrXp/s16000/blogger-perempuan.png" border="0" alt="Blogger Perempuan" title="BP" width="75" height="75" loading="lazy"/></a><td>
<td><center><a href="http://www.emak2blogger.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmyYail0ra5mKDzY6d43J-JPQMmP6VEp41SoCg1bsDv_iWPKderq0Ds0S28S8ATd4ri8cmYI8M-CFgNTdR-ItVdNX1Tfw0ujNDNgF400b3rpYFTwuy5cG-JR3A2IMsyKMLexLEUJuMWw/s1600-rw/KEB.webp" border="0" alt="Kelompok Emak Blogger" title="KEB" width="75" height="75" loading="lazy" /></a><td>
<td><center><a href="https://www.institutibuprofesional.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii215N9YlLPOXuQYzCOjtPE84XQnKLrepYLbi2wk4alvI_oxva8SKwT9PRcZFp-4b3tVz547JiCXJgtv_An6pV6OvBWEV5f_2n6ZOawK32-3F4ABI37kVRgvmBdlpVWh_k-O_aR4aLNQk/s1600-rw/IMG-20171110-WA0015.webp" border="0" alt="Institut Ibu Profesional" title="IIP" width="75" height="75" loading="lazy" /></a><td>
</td></center></td></td></center></td></td></td></tr></table>
6. Edit Footer
Pada bagian edit footer untuk memunculkan page, klik edit dan centang page yang ada di list, untuk ubah
posisi kita tinggal drag saja.
Kemudian jangan lupa isi ‘username’ dengan username medsos kita.
<a href='https://www.facebook.com/username' 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/username' 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/@username' 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://www.instagram.com/username' 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/username' 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>
Edit Theme- Customize
Jika sudah selesai, saatnya kita mengganti warna blog sesuai dengan keinginan kita. Caranya dengan membuka dashboard kemudian pilih Tema dan pilih sesuaikan.
Kita bebas memilih warna yang kita inginkan. Pada Fiksioner v4 Igniel terbaru ini ada dua pilihan tampilan yaitu light dan dark. Jadi kita bebas otak-atik sendiri ya. Meskipun sekedar mengubah warna yang kita inginkan tapi bagian ini tetap tricky dan kita harus tetap teliti. (Bagian yang bikin Umma nggak fokus ngapa-ngapain karena warnanya jadi tidak menentu).
Pengalaman Umma Update Versi Terbaru Fiksioner v4 Igniel
 |
| Tampilan sebelum dan sesudah permak blog Meskipun tidak banyak perubahan karena Umma pingin konsisten dengan warna hitam putih |
Ya Allah, akhirnya selesai juga edit versi terbaru dari template keren satu ini. Hasil karya mbak Igniel ini benar-benar luar biasa. Bicara pengalaman Umma disaat pekerjaan rumah membentang dari ujung ke ujung ditambah Qodarullah anak-anak sakit, benar-benar memicu adrenalin untuk memilih antara terus lanjut dengan tugas dari Blogspedia Coaching 4 ini stay berhenti.
Tapi Umma harus optimis menatap masa depan. (Cieee). Dengan bantuan dan kerjasama anak-anak, dan masih jauh dari kesempurnaan. Akhirnya taraaa.... Blog Ruang Umma Versi Terbaru Fiksioner v4 Igniel selesai dikerjakan. Alhamdulillah.
Tapi banyak hal yang jadi catatan Umma, yang mengakibatkan banyak kendala saat mengedit template ini. Berikut catatan yang bisa jadi perhatian Sahabat Umma, jika akan menginstal template baru.
1. Jangan lupa back up kode html jika akan mengganti dengan kode yang baru.
Umma sendiri tidak melakukan back up sehingga Umma mengalami banyak kendala sekali. Ya Allah hanya Allah yang maha memudahkan ditambah teman-teman Blogspedia Coaching 4 yang sangat membantu. Terutama artikel mereka yang sudah duluan launching.
2. Teliti Saat Mengganti Warna Tema
Umma juga mengalami kesulitan saat mengganti warna template Umma. Karena Umma terburu-buru akhirnya amburadul semua warna. Solusinya Umma akhirnya perlahan-lahan lagi dan meneliti satu-satu warna yang dipilih.
Ya sekian cerita Umma mengenai pengalaman mengedit tema Fiksioner v4 Igniel ini. Semoga bisa bermanfaat untuk Sahabat Umma. Jangan lupa sharingnya ya di kolom komentar.
Mantab Mba.. Sampai sekarang kalau sy yg belum kesampaian ganti ganti warna nih..
BalasHapusKeren Umma, selalu suka ruang Umma ini. Sederhana ellegant
BalasHapusSaya tuh takut ngedit template sendiri ... takut salah dan gak bisa benerinnya hehehe. Tapi kok penasaran juga dengan template blogger gratis rasa premium dari Mbak Igniel .... apalagi melihat Ruang Umma sekeren ini.
BalasHapusAda blogku yang lain juga pakai template Igniel ini. Bagus ya simpel padahal aku pakai yg free juga. Belum update nih...Mau ah...
BalasHapusWell noted untuk tutorial lengkap update tempalte fiksioner v4 Igniel, trims
BalasHapusSelamat ya akhirnya blog Ruang Umma versi terbaru Fiksioner v4 Igniel selesai dikerjakan. Makin cakep nih Um..!
Cakeep banget Umma..
BalasHapusMashaAllaa~
Keren bisa updating template sendiri plus setting segalanya secara manual menggunakan coding yaa..
Template Igniel memang terkenal resposive dan SEO friendly, jadi wajib banget di update biar semakin wuuss wuuss di mata google.
Lengkap banget nih tutorialnya. Makasih banyak, Kak. Berguna banget buat yang masih suka bingung kalau ganti tema blog kayak saya. HEhe.
BalasHapusYeaay, makin cakep tampilan blognya😍
BalasHapusTutorialnya lengkap bangeeet, dijamin sih yang ngikutin langkah2 ini nggak akan bingung
thanks mom ilmunya ini beneran bermanfaat buat yang gatek kayak aku jadi paham mesti gimana ngoprek blog
BalasHapusMakasih sharingnya umma.. aku masih suka bingung ngoprek blog, bisa jadi referensi nih
BalasHapuswah jadi ingat dulu pernah juga nyoba pakai template dari igniel ini tapi ada beberapa yang aku nggak bisa nguliknya akhirnya aku pakai template yang lain deh
BalasHapusBanyak banget yang harus diedit ya, takut mbak kalau harus edit edit html kayak gt. Takut bubrah semuanya. Padahal blog aku masih mawut banget
BalasHapusWah, makasi tutorialnya Umm. Sebenarnya saya pun sedang ingin mengotak atik tampilan blog sendiri. Tapi kadang-kadang ragu khawatir jadi acak2an jika salah update. Penasaran dengan tampilan blog yang banyak animasinya.
BalasHapuswaduh baca kodingan kenapa mataku jadi lier hehehe.. semoga makin kece ya blognya dg tampilan baru
BalasHapusWah, kodingnya dicopas juga di artikelnya
BalasHapusMantap mbak
Blognya jadi makin kece
Ngiler banget sama tampilan fiksionernya punya mnak deh, tapi duhhh kebayang ngopreknya, harus punya waktu khusus deh
BalasHapusdulu saya suka banget ngotak ngatik template alhasil gonta ganti mulu capek juga karena banyak coding yang harus diubah tapi jadi belajar dan ngerti soal template coding gitu, sampai akhirnya menemukan yang cocok. saya pernah pakai juga template ini bagus SEO nya juga bagus
BalasHapusIni tah namanya coding, lieerrr mataku, terima kasih mba.
BalasHapuspermisi kak.
BalasHapuscara bikin table of content di atas gimana ya?