√Step By Step Mengganti Template Blogspot Agar Lebih Cantik dengan Fiksioner V4

Blog saat ini menjadi rumah saya. Harus dipermak agar lebih betah berkunjung dan stay di dalamnya. Itulah mengapa saya sedang mengutak-atik template-nya (untuk kesekian kali). Kembali menekurikode kode HTML yang banyak dan membuat mata berkunang-kunang. Hehe.. lebay ah. Alhamdulillah saya terbantu dengan adanya template dari pihak ketiga, yaitu dari Igniel, yaitu dengan template Fiksioner V4 nya ini. Tinggal copas HTMLnya, ganti beberapa link, dan beressss.. tampilan cantik. SEO nya pun aman, responsable, dan mantep lah.

Hm... saya mau ceritain step by step mengubah templatenya. Siapa tau, ada yang berminat juga dengan template Fiksioner V4 ini

Download Template Pihak Ketiga

Yap, pasti kita perlu mengunduh template yang dibutuhkan. Ada hal-hal yang perlu diperhatikan saat akan memilih dan memutuskan mengunduh suatu template.

Pastikan sumber terpercaya

Kalau googling, pastinya ada banyak web yang menawarkan berbagai tipe template. Pastikan kita mengetahui kredibilitas dari web tersebut. Mengapa penting menentukan sumber terpercaya ini? Sebab akan terkait dengan masalah hak cipta, keamanan dan kualitas dari template unduhan ini.

Beberapa pilihan tempat mengunduh template pihak ketiga

Situs resmi dari template developer
Marketplace resmi
Platform e-commerce
Toko template pihak ketiga, seperti themeForest, template monster
Komunitas open source, dll

Perhatikan harganya

Jangan tergiur harga murah bahkan free, karena bisa jadi tidak memiliki dukungan yang memadai. Igniel merupakan salah satu penyedia template 2 versi, premium dan free. Bisa menjadi salah satu pilihan

Periksa lisensi, ulasan dan rating

Sebelum mengunduh template, baca dulu ulasan pengguna lain dan perhatikan pula peringkatnya.

Mengunggah Template Fiksioner ke Blogspot

Klik Download untuk versi free. Untuk mengetahui tampilan blog, bisa melihat live preview dulu ya. Kalau sudah mantap, maka download.

File yang didownload bentuknya zip ya. Nah, bisa diextract dulu, dan dapat beberapa file seperti berikut

Buka file Fiksioner-v4.min, lalu copas seluruh kode ke notepad.

Notes : tapi saya pada akhirnya pakai punya coach Marita. Fiksioner ini juga sih awalnya, tapi sudah diotak Atik sehingga lebih rapi dan ramah SEO nya.

Lalu, buka dashboard blogger. Buka bagian themes

Copas semua kode yang telah disalin di notepad tadi. KLIK Edit HTML, hapus semuanya. Ganti dengan kode yang dari notepad. SAVE.

Mengubah Tampilan/Layout Template Bawaan

Setelah tampilan berubah, jangan lupa ganti beberapa hal berikut untuk menyesuaikan dengan kebutuhan kita.

Ganti header

Caranya dengan : Layout - Billboard - Add a gadget - HTML - Copy kode berikut

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJvESW7pmEyb65bwxRjQBmvoA8o2VLAqo3wRjogJvIyMkwEaMLYJAPRM0BURpSVY4Jc0fx8ecZj0Y65tbRn-56MDs5ymDxDtHnrOAbgWcrYltU8Nasx3r6_AEciRZegxj6NP3ORIWnjJE1kcXkGsiw1byw_ymclP37a9FlOyw-QY6O43660oGqV6Uge9h/s16000/curhatibu.com%20(1000%20%C3%97%20250%20px).png" width="1000" height="250" title="curhatibu.com" alt="curhatibu.com"/>

Ganti tulisan merah dengan address image yang diinginkan, dan ganti bagian bold hijau dengan alamat blog. Lalu SAVE.

Dan hasil di blog saya seperti ini

Ganti media sosial

Buka bagian footertop

Pilih bagian social media. Lalu perhatikan, ganti bagian yang berwarna merah dengan alamat website mu.

<a href='https://www.facebook.com/cahayaembunfajar' 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/windyanitasari' 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/@windyanitasari799' 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/adhwafannada' 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/windyanitasari' 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/@StudykidsChannelIndonesia' 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>

Hasilnya seperti ini, jika saya klik per icon akan langsung menuju kepada laman bersangkutan.

Ganti bagian SALAM KENAL

Ganti kode yang berwarna merah dengan identitas diri sendiri

<center><span style="font-style: normal;font-size:100%;"><img alt="Preview" src="https://blogger.googleusercontent.com/img/a/AVvXsEig969--ItNxPYaaPyPC_YP9lVQfh012WW2fvDANpiDD-H2oC39BOYxwxzdvHtNOqVkHnDM84_9yaGq40tHcNtxv2ESlPcDf8_iiKuATM2lfIr20GB4LXUmbCxPRW4AVwbI9f9gfVqtfFv5tYHyZE5YXodADlZQeJ1sAOMGQtYkS1RPuw9gyucADIbBJFxU" 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 Site</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>Cerita, Kisah, Inspirasi dan Motivasi Perjalanan Keseharian Ibu Rumah Tangga</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 Windy Anita Sari</b></span></div><div style="font-style: normal; font-weight: normal;"><span style="text-align: left;font-size:100%;">Blogger, Podcaster, Youtuber, Writer, Student & Homeschool 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.curhatibu.com/p/about.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="windyanitasari@gmail.com">email</a>.</span></b></div>

Hasilnya seperti ini :

Ganti Link Footertop (Page Links)

Hasilnya

Ganti Dropdown Menu di Header

Caranya dengan pilihan bagian ini

Pada bagian menu, klik tanda pensil, lalu ganti HTMLnya dengan sebagai berikut :

<ul>
<li><a href='https://www.curhatibu.com/' title='CurhatIbu.Com'>Home</a></li>
<li><a href='https://open.spotify.com/show/59mA8RIpqIBZ718TUbK5wJ?si=0ff7bb00ffb944bb' title='Curhat Ibu On Spotify'>Podcast Channel</a></li>
<li><a href='https://www.youtube.com/@StudykidsChannelIndonesia' title='Youtube Channel'>Study Kids Channel</a></li>
<li class='dropdown'>
<span>Our Homeschool Journey</span>
<ul>
<li><a href='https://www.instagram.com/byghumaishadh'/>Ghumaisha</a></li>
<li><a href='https://www.instagram.com/ghaziyahhilyah'/>Ghaziyah</a></li>
<li><a href='https://www.instagram.com/ghaniyasyaneza'/>Ghaniya</a></li>
</ul>
</li>
</ul>

Dan jadi seperti ini

Secara keseluruhan, maka tampilan blog saya menjadi

Before

After

Penutup

Wew... memang tidak mudah bagi seorang Ibu (seperti saya) untuk menguprek kode-kode yang begitu banyak. Hehe.. tapi alhamdulillah terbantu untuk kesekian kali oleh "bonus" dari Coach yang membuat kami tinggal ikutin step by step dengan lebih teliti, lebih seksama tentang cara mengganti template. Memang perlu sabar sih, karena bisa jadi ada 1 kode ketinggalan, kacau lah semua tampilan. Tapi dengan melakukannya lebih tenang, insyaallah perlahan ketemu solusinya.