Hai sobat kreasi... Gimana kabarnya nih... Sudah hampir seminggu aku menghilang ya...Sebenarnya tidak menghilang, tapi lagi pusing belajar cara update template fiksioner V4 versi terbaru. Lumayan menghabiskan energi...hehehee....
Ini materi blogspediacoaching4 yang paling sulit menurutku. Bener-bener merasa pengen menyerah. Hahahaha.... tapi kok ya malu semua kawan-kawan peserta coaching pada semangat belajar dan mencoba.. Dan walaupun hasilnya tidak maksimal banget, tapi taraaaa... akhirnya aku berhasil... 😍
Dan inilah wajah baru sudutpandangnovita sekarang 😊
Aku mau ulas bagaimana cara update template fiksioner V4 terbaru yang sudah aku lakukan. Yuk simak lebih detailnya...
Backup Terlebih Dahulu
Sebagai langkah antisipasi, langkah pertama yang harus kita lalukan sebelum kita otak atik template dalam blog baiknya kita lakukan backup terlebih dahulu semua kode awal. Cara backup masuk menu theme kemudian klik customize, lalu klik backup.
Secara otomatis file akan terdownload. Setelah itu jangan lupa rename file dan beri tanggal backup agar file mudah diingat dan ditemukan.
Unduh Template Fiksioner V4
Langkah selanjutnya yaitu melakukan unduh template pada Fiksioner V4 pada https://www.igniel.com/2018/10/fiksioner-blogger-template.htmlScroll ke bawah sampai kalian temukan kolom download untuk versi gratisnya. Kemudian klik download.
Setelah berhasil download kemudian lakukan ekstrak rar file. Simpan pada folder tersendiri / khusus.
Cara Memasang Template
1. Buka file template yang telah di-download. Klik kanan file bertipe XML --> Open with --> notepad2. Copy semua kode html yang ada di dalamnya
3. Masuk ke menu editing blog --> theme/tema --> klik tanda panah ke bawah di samping tulisan customisasi --> pilih edit HTML --> hapus semua kode yang ada di dalamnya --> paste kode html yang sudah di-copy dari notepad.
4. Klik simpan/save
Cara Update Template Fiksioner v4 dari Igniel.com
a. Info Penulis
Buka kode HTML, lalu seach "Your Name", Blogger Profile, ID Facebook, ID Twitter, dan ID sosial media lainnya. Berikut contoh kode HTML milik sudutpandangnovita.<!-- AUTHOR -->
<meta content='sudutpandangnovita' name='author'/>
<meta content='sudutpandangnovita' property='article:author'/>
<link href='https://www.blogger.com/profile/14366077005007773963' rel='me'/>
<link href='https://www.blogger.com/profile/14366077005007773963' rel='author'/>
<link href='https://www.blogger.com/profile/14366077005007773963' rel='publisher'/>
<meta content='https://www.facebook.com/@Novita Nurul Islami' property='article:author'/>
<meta content='https://www.facebook.com/@Novita Nurul Islami' property='article:publisher'/>
<meta content='@novita9393' name='twitter:site'/>
<meta content='@novita9393' name='twitter:creator'/>
- Ubah teks berwarna hijau sesuai dengan nama blog dan url sosial mediamu.
- Klik simpan/save
b. 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 seperti di bawah ini:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUIT_xbJTUxOWbve4GTwWBwfIEQ_d_ihw-A_HFzbduMg3KySFnXR8f-DhgxqF8QgcV3jHi6y-VDpDo-u-pbDzfGvYPWMWvrhZ779Vk_Kh8_z1uXVJHFWE7fsns-6TYuxeCv_jQG_etsGFRICMqivsf3HTjJUic8vUmN928vMPyE2FwN2jG47KzFLVTcM/s2240/Pink%20Simple%20Illustrated%20Creative%20Writing%20Blog%20Banner.png" width="1000" height="250" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUIT_xbJTUxOWbve4GTwWBwfIEQ_d_ihw-A_HFzbduMg3KySFnXR8f-DhgxqF8QgcV3jHi6y-VDpDo-u-pbDzfGvYPWMWvrhZ779Vk_Kh8_z1uXVJHFWE7fsns-6TYuxeCv_jQG_etsGFRICMqivsf3HTjJUic8vUmN928vMPyE2FwN2jG47KzFLVTcM/s2240/Pink%20Simple%20Illustrated%20Creative%20Writing%20Blog%20Banner.png"/>
- Ubah teks berwarna hijau sesuai dengan image address yang digunakan untuk header. Sedangkan teks warna biru diubah sesuai alamat blogmu.
- Klik simpan/save
c. Mengedit Berbagai Tampilan Warna
Langkah berikutnya untuk menata blog dengan template sederhana SEO friendly fiksioner v4 ini adalah mempermak berbagai tampilan warna pada menu tema dengan cara:- Masuk ke menu tema/theme
- Klik customisasi/sesuaikan
- Pilih menu 'lanjutan' yang ada di sidebar sebelah kiri
- Cari pilihan 'background color (light mode)'
- Aturlah warna mulai dari warna background utama, postingan, header, label, menu dropdown dan footer di sini sesuai dengan yang diinginkan dan ramah mata.
d. Membuat Menu Drop Down
Untuk menambahkan menu drop down, maka lengkapi kode berikut ini:
<ul>
<li><a href='https://www.sudutpandangnovita.com/' title='Home'>Home</a></li>
<li><a href='https://www.sudutpandangnovita.com/p/about-me.html' title='About'>About Me</a></li>
<li class='dropdown'>
<span>Topik Bacaan</span>
<ul>
<li><a href='https://www.sudutpandangnovita.com/search/label/BLOGGING & TECHNO' title='BLOGGING & TECHNO'>BLOGGING & TECHNO</a></li>
<li><a href='https://www.sudutpandangnovita.com/search/label/EDUKASI' title='EDUKASI'>EDUKASI</a></li>
<li><a href='https://www.sudutpandangnovita.com/search/label/FINANCE' title='FINANCE'>FINANCE</a></li>
<li><a href='https://www.sudutpandangnovita.com/search/label/REVIEW BUKU' title='REVIEW BUKU'>REVIEW BUKU</a></li>
<li><a href='https://www.sudutpandangnovita.com/search/label/REVIEW PRODUK & TEMPAT' title='REVIEW PRODUK & TEMPAT'>REVIEW PRODUK & TEMPAT</a></li>
<li><a href='https://www.sudutpandangnovita.com/search/label/SELF DEVELOPMENT' title='SELF DEVELOPMENT'>SELF DEVELOPMENT</a></li>
<li><a href='https://www.sudutpandangnovita.com/search/label/SOSOK INSPIRATIF' title='SOSOK INSPIRATIF'>SOSOK INSPIRATIF</a></li>
<li><a href='https://www.sudutpandangnovita.com/search/label/TRAVELLING' title='TRAVELLING'>TRAVELLING</a></li>
</ul>
</li>
</ul>
- Ubah teks berwarna hijau sesuai dengan address blog kalian. Sedangkan teks warna biru diubah sesuai label blogmu.
Jadi, untuk mengisi menu drop down ini, pastikan kita sudah menyiapkan beberapa label yang akan disambungkan pada menu ini. Untuk blogku sendiri seperti pada setting kode di atas, aku memilih Label "BLOGGING & TECHNO, EDUKASI, FINANCE, REVIEW BUKU, REVIEW PRODUK & TEMPAT, SELF DEVELOPMENT, SOSOK INSPIRATIF, TRAVELLING".
- Kemudian klik simpan/save
e. Menambahkan Banner Komunitas
Kemudian untuk menata blog dengan template sederhana SEO friendly fiksioner v4 ini juga bisa melalui penambahan banner komunitas yang dilakukan dengan cara sebagai berikut :- Masuk ke menu layout/tata letak
- Pada menu ASIDE, klik tambah gadget
- Pilih HTML/JavaScript
- Pada kolom judul, tulis 'Bagian dari'
- Pada kolom konten, masukkan kode html berikut :
<table border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 300px;">
<tr><td><a href="https://bloggerperempuan.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQORZNbRvSmY-i4PCHSPUbMk857sD9snRECHWxJSBVuL77KreyvNYUp73hR8TF50mqP_ZBopnqhkkZttXuT9rqt3pA0_CsHWWDfiSJyJbtyO7ef_GEYn-psw6wtk8LpeX5qzsZsnellj4Kp71LIyMwGwWR6sqhmRjKq5FqIoyZeZcBmcmZbJmhT3yMoE/s1600/blogger-perempuan.png" border="0" alt="Blogger Perempuan" width="75" height="75" /></a></td></tr></table>
<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>
- Ubah teks berwarna biru sesuai dengan alamat blog komunitas. Sedangkan warna kuning sesuai dengan alamat gambar yang digunakan.
- Klik simpan/save <a href='https://www.facebook.com/NoviantoNurIslami' 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/novita9393' 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/novitanurulislami' 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.youtube.com/@edu-vit5773?si=0xePGquZjixndFNz' 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>
Nah, itulah pengalamanku cara update template fiksioner V4 terbaru ya sobat...
- Klik simpan/save
f. Menambahkan Widget Sosial Media di Footer
Agar pembaca dapat memperoleh informasi lebih, maka kita dapat mengoptimasi blog kita dengan cara menambah beberapa widget. Untuk menambahkan widget ini, masuk me widget Social Media, lalu ubah kode berikut:
<a href='https://twitter.com/novita9393' 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/novitanurulislami' 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.youtube.com/@edu-vit5773?si=0xePGquZjixndFNz' 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>
- Ubah teks berwarna hijau sesuai dengan address media sosial kalian.
- Klik simpan/save
- Klik simpan/save
Nah, itulah pengalamanku cara update template fiksioner V4 terbaru ya sobat...
Semoga dengan perubahan wajah baru sudutpandangnovita menjadi semangat baru buat aku untuk lebih rajin menulis dan buat kalian lebih betah berkunjung ya... Kasih masukan yuk apa yang kira-kira masih kurang dari penampilan sudutpandangnovita . Tulis dikolom komentar ya... 😊
Lengkap sekali stepnya. Sudah ada kode html juga 😍
BalasHapusTerimakasih kak... Semoga tulisan ini bisa bermanfaat 😊
HapusTutorial step-step nya lengkap kak... Lumayan membantu aku yg lagi pusing pasang template fisioner v4 ini 😄
BalasHapusTerimakasih kaka... Alhamdulillah jika tulisan ini membantu kaka :)
Hapus