BAGIAN-BAGIAN BLOG
Blog dibagi menjadi 3 bagian yaitu:
1. Header (bagian atas) yang memuat judul blog, menu, header image.
2. Body (bagian tengah) yang memuat isi blog (content), sidebar (yaitu info-info di samping kiri atau kanan).
3. Footer(bagian bawah) yang memuat info copyright, dan kadang-kadang ada menu dan informasi lainnya. Karena beda template beda penampakan.
Template blog harus harus sesuai dengan SEO friendly. Ada yang memasang template blog dengan edit sederhana, namun juga ada yang memasang template blog dari pihak ketiga. Disini disarankan untuk memasang template blog dari Igniel.com yaitu Template Blog Fiksioner V4 (versi terbaru), dimana template ini sudah SEO friendly. Untuk mengecek apakah template yang akan kita pasang sesuai dengan SEO friendly, temans dianjurkan memasang Meta SEO inspector. Meta SEO Inspector adalah salah satu tool untuk mendeteksi apakah template yang kita pakai sudah cukup SEO friendly atau belum. Biasanya ditunjukkan dengan tanda gambar lampu merah di sebelah kanan atas. Bila ada yamg harus diperbaiki pada blog kita, nantinya tool ini akan merinci apa saja kesalahan pada blog kita.
TEMPLATE BLOG YANG SEO FRIENDLY
Kriteria template blog yang SEO friendly adalah:1. Ringan (fast loading). Seiring dengan berjalannya waktu, biasanya dalam suatu blog sudah banyak postingan dan gambar, dimana hal ini akan mempengaruhi kecepatan loadingnya. Ditambah lagi bila dipasang google Ad Sense, akan membuat semakin lama loadingnya.
2. Dapat mengakomodasi kebutuhan-kebutuhan SEO misalnya dapat memunculkan judul blog, meta deskripi blog, memunculkan judul artikel di halaman artikel, menggunakan heading yang sesuai. Misalnya h1untuk judul artikel, h2 untuk sub judul, h3 untuk sub sub judul.
3. Ramah di mata pembaca. Dalam hal ini penggunan warna harus nyaman dan ramah di mata pembaca, penggunaan huruf maksimal 3 dan masih ada beberapa lagi kriterianya yang sudah pernah dibahas.
4. Navigasi jelas dan menu bisa diakses dengan mudah.
Saya memilih mempercantik blog dengan menggunakan template dari pihak ketiga yaitu Template Bog Fiksioner V4, dengan pertimbangan lebih SEO friendly.
Masalah edit mengedit blog dengan mengoprek kode-kode html merupakan hal baru bagi saya yang baru mulai belajar ngeblog. Dari tugas Blogspedia Coaching ini, sudah 3 hari saya mengoprek dan mengedit tampilan blog namun hasilnya belum maksimal juga. Memang membutuhkan kesabaran dan ketelitian untuk belajar IT yang bagi saya hanya seorang ibu rumah tangga biasa.
CARA MEMASANG TEMPLATE BLOG FIKSIONER V4
1. Hal pertama yang terpenting tentunya kita harus membuka web Igniel.com kemudian download theme Fiksioner V4. (pilih tombol download BIRU yang tidak berbayar).
2. Membuka file dengan Zip Extractor, kemudian pindahkan ke folder, lalu extract file.
3. Temukan file Xml yaitu Fiksioner v4.min.xml, klik kanan open with notepad.
4. Buka dashboar blog, masuk ke thema, kemudian customize, klik download kemudian simpan. Tujuannya adalah untuk membackup template yang lama, bila menemui kesalahan pada template baru, agar bisa kembali ke template lama.
5. Masuk ke dashboard kembali lalu klik thema, customized, klik edit html lalu hapus semua kode html di sana. Setelah itu copykan file xml yang kita download tadi, lalu save.
Setelah itu kita bisa merubah atau mengedit tampilan blog agar lebih cantik dan sesuai SEO friendly.
![]() |
Tampilan Template Blog Fiksioner (gambar: igniel.com) |
BEBERAPA TAMPILAN YANG DIUBAH
Ada beberapa tampilan yang diubah dalam blog menurut kebutuhan kita, yaitu:
1. HEADER IMAGE
Header image bisa diganti sesuai kebutuhan dan selera kita agar tampak menarik, namun perlu diingat agar file image jangan terlalu besar sehingga menyebabkan loading yang lama. Ukuran untuk header image besar adalah 1000x250 px.
Cara mengganti header adalah masuk Layout, add a gadget pada Bilboard, copy html berikut ini:
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF81JZSpNhqgas6YrmMBjKFlKqeGz6tmtLLd4Sut8Eje6gX36mO6wWj_shk5f1R2LNYFf3r66VU20bslGzLdHOIt4m-oXzWpeQazjactcCLQHY3h_mIvGpf7MWprfIS6grLTKsP5F6C0IKSeNYzq6w3GxEoR9FhhB4xbpuWkGNcmzDoa0cVnnYcQo7fVM8/s16000/20230914_213715_0000.jpg" width="1000" height="250" title="wahyusuwarsi.com" alt="wahyusuwarsi.com"/>
Tulisan merah silahkan ganti dengan image address.
Tulisan biru diganti dengan url blog.
Cara mengcopy image address adalah:
Copy gambar ke draft, kemudian klik kanan, save image address. Copykan link image untuk mengganti tulisan berwarna merah, lalu SAVE.
Ini image header blog saya yang saya desain dari canva:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF81JZSpNhqgas6YrmMBjKFlKqeGz6tmtLLd4Sut8Eje6gX36mO6wWj_shk5f1R2LNYFf3r66VU20bslGzLdHOIt4m-oXzWpeQazjactcCLQHY3h_mIvGpf7MWprfIS6grLTKsP5F6C0IKSeNYzq6w3GxEoR9FhhB4xbpuWkGNcmzDoa0cVnnYcQo7fVM8/w320-h80/20230914_213715_0000.jpg)
2. MENAMBAHKAN MENU DROP DOWN
Tujuan drop down adalah mengarahkan pembaca pada artikel yang akan dibuka. Cara menambahkan menu drop down adalah:
Buka dashboar kemudian Layout, pilih Menu, copy html berikut ini:
<ul><li><a href='https://www.wahyusuwarsi.com' title='Beranda'>Beranda</a></li>
<li><a href='https://www.wahyusuwarsi.com/p/Tentang.html' title='Tentang'>Tentang</a></li>
<li class='dropdown'>
<a href='#' onclick='return false;' title='Daftar Isi'>Daftar Isi</a><ul>
<li><a li><a href='https://www.wahyusuwarsi.com/search/label/Artikel' title='Artikel>Artikel</a></a></li>
<li><a href='https://www.wahyusuwarsi.com/search/label/Wisata' title='Wisata'>Wisata</a></li>
<li><a href='https://www.wahyusuwarsi.com/search/label/Kuliner' title='Kuliner'>Kuliner</a></li>
<li><a href='https://www.wahyusuwarsi.com/search/label/Review ' title='Review '>Review </a></li>
Tulisan merah: diganti url blog.
Tulisan biru: diganti tulisan yang akan ditampilkan.
3. MENAMBAHKAN BANNER KOMUNITAS
Bila kita mengikuti beberapa komunitas, maka bisa menambahkan banner di blog kita.
Caranya adalah:
Masuk ke Layout, kemudian Aside, Add gadget, masukkan kode html berikut ini
<table border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 300px;">
<tr><td><a href="https://www.gandjelrel.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3257dCyBQ9s8N5T-3U1dd5pDzh2NIHqV7XCFWue9UCUPgmHRJEi4sd4xRt9Act4jrj_9BVI19LlR97PPyZVrx4VnHclE4gU3U6d9QZhG799BKrujLvS2lX6w3aYYX5fSLsDeJsPPeZeL0aDNynjtoSGG1a9yuTipZkGySKnwIqtuYl5akI8S1-bnmK_hE/s320/Gandjel%20Rel.jpg" border="0" alt="Gandjel Rel" width="100" height="75" /></a></td></tr></table>
Tulisan merah: diisi url blog komunitas
Tulisan biru: diisi link image address.
Cara mengcopy image address adalah:
Copy gambar ke draft, kemudian klik kanan, save image address. Copykan link image untuk mengganti tulisan berwarna merah, lalu SAVE.
4. MENAMBAHKAN SOSIAL MEDIA
Tambahkan sosial media pada blog kita, tujuannya agar pembaca bisa langsung terhubung dengan medsos kita.
Cara memasang media sosial pada blog adalah:
Masuk dashboard lalu ke Layout, pilih Footetop, Sosial media kemudian edit (gambar pensil), masukkan kode html lalu SAVE.
a href='https://www.facebook.com/Wahyu Suwarsi' 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://www.instagram.com/wahyu.suwarsi' 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/Wahyu Suwarsi' 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>
Tulisan merah: diisi username.
5. MENAMBAHKAN TOMBOL BACK TO
Pada template Fiksioner V4 tombol “back to” terletak di kanan bawah. Biasanya sudah tersedia tombol back to pada Fiksioner. Karena itu tidak perlu diedit, kecuali bila temans ingin mengedit dengan gambar lain yang diunduh. ![]() |
Tampilan-blog-setelah-diedit |
PENUTUP
Sebenarnya masih ada beberapa tampilan yang masih bisa diedit agar blog lebih cantik. Tapi saya sendiri belum praktek dan belum tahu kode html nya untuk nguprek. Pelan-pelan sambil jalan dan belajar, mempercantik blog dan memahami kode-kode html yang jumlahnya ribuan.
Tetapi bila temans ingin menggunakan template blog yang SEO Friendly, saya sarankan untuk memasang Template Blog Fiksioner ini di blog teman-teman. Pasti hasilnya memuaskan dan selain tampilan blog lebih cantik, juga SEO Friendly. Semoga tulisan ini bermanfaat bagi yang membacanya.
Semoga bermanfaat.
Masyaaallah semamgat buu. Puny saya jg proses uTak atik lagi ❤️
BalasHapusAlhamdulillah, akhirnya selesai juga ya, Bu. Setelah utak-atik, copy hapus. Semoga berkah semua usahanya. Baarakallah, makin bermanfaat blognya.
BalasHapusAamiin
HapusAlhamdulillah Bu Yayukkk.... Kerja keras membuahkan hasil ya Bu. Sekarang blognya jadi cantik. Terus semangat ya Buuuuu, MasyaAllah Tabarakallah
BalasHapusHarus semangat mbak. Karena teman2 disini banyak membantu saya.
HapusAlhamdulillah,akhirnya launching juga setelah utak atik, diskusi sama coach di wag. Aku menyimak dan banyak belajar dari apa yang ibu diskusikan sama coach. Masyaa allah ibu udah berjuang luar biasa
BalasHapusTerima kasih mbak.
HapusKeren teman nge blogging satu ini. Semangatnya MasyaAllah. Terimakasih sudah menginspirasi kak
BalasHapusMatur nuwun mbak.
HapusMasya Allah.. ibu ibu yang jagoan.. Berhasil mengulik html
BalasHapusWaah itu karena bimbingan coach Marita yg telaten, juga bantuan teman2 yang lain disini.
Hapus