header-pojok-alfiana

Cara Permak Template Blogger Responsive Gratis, Gaskeuun!!

Permak Template Blogger Responsive Gratis

Halo, Teman Perjalananku!

Tibalah waktunya untuk obrak-abrik template blog. Eh kok obrak-abrik, hehe. Waktunya “menata” template blog supaya lebih aduhaii kece badai deh. 

Memangnya sepenting itu untuk menata atau istilahnya “permak” template blog? Aku udah kadung nyaman dengan template bawaan dari Blogspot. Jadi gini, Dear, memang sudah nyaman tapi apakah sudah SEO friendly dan sudah responsive? Awalnya sih aku begindang, udah cukup dengan template sebelumnya. Cuman aku belum puas dengan tampilan blog ketika dibuka di mobile (phone), nggak banget. Dan pengen banget bikin Menu Dropdown.

Tampilan Blog Sebelum dipermak (Desktop View)
Tampilan Blog Sebelum dipermak (Desktop View)

Tampilan Blog Sebelum dipermak (Mobile View)
Tampilan Blog Sebelum dipermak (Mobile View)

Ditambah lagi waktu kutengok di SEO Optimer, hasilnya ada nilai ‘F’. Ada 18 rekomendasi yang harus dilakukan untuk mengoptimalkan blogku.

nilai-sebelum-ganti-template
Hasil SEO Optimer sebelum Permak Template
Bahkan, ada 18 rekomendasi yang harus dilakukan untuk mengoptimalkan blogku. Setelah menimang baik buruknya mengganti (ganti template dan edit-edit HTML) dan tidak mengganti template (kalau tidak ganti juga tetep ngerjain tugas HTML juga), tapi kalau ganti template pakai yang disarankan, insyaAllah sudah SEO friendly. 

Dan akunya juga penasaran, jadi Gaskeuuun!!

Setidaknya ada 5 hal dasar yang perlu dilakukan untuk melakukan permak template blogger yang gratis tapi tetap bisa responsive (bisa lebih tergantung kamu mau ubah apa aja hehe)

1. Ganti Template Gratis dan Responsive dengan Tema Fiksioner v.4

Langkah pertama dan utama adalah ubah HTML template lama dengan HTML Tema Fiksioner v4

Caranya : Klik masuk ke dashboard blog > di bagian Sidebar pilih Theme > Klik segitiga di samping Customize > Edit HTML > Hapus semua HTML Template lama > Paste HTML Tema Fiksioner v4 > Save

edit-HTML
Edit HTML di Menu Theme > Customize

Teman-teman bisa unduh melalui tautan yang aku sematkan ini. Copy semua HTML di Notepad, yang dari Notepad copy untuk nanti di Paste di Dashboard blog. Yang aku sematkan di drive di bawah ini adalah HTML dari Blog Alfiana's Journey


Note : Hapus sampai bersih HTML lama, Copy dan Paste semua HTML baru, jangan sampai ketinggalan atau kelebihan 1 karakter pun

2. Sesuaikan warna template blog

Langkah kedua yang mudah dulu yaa, masih di Menu Theme > Klik Customize > Sesuaikan Warna Header, Bakground dan Advance Setting 

edit-warna-blog
Cara Edit Warna Blog

Di tahap ini tidak ada patokan edit, sesuaikan selera ingin warna apa. Sarannya pilih 2-3 warna saja, kebanyakan warna pusingg bestiee. Untuk warna latar pilih warna putih, supaya ramah dan nyaman saat membaca.

3. Edit Header (kecil)

Langkah selanjutnya mulai mengotak-atik Template Fiksioner v4 tadi agar sesuai dengan isi blog kita. Disclaimer : Langkah 3-5 akan berfokus di Sidebar Layout > Header

Kita mulai dari Layout bagian Header. 

Header adalah bagian yang terletak di sisi atas dari blog.

Caranya : Klik Sidebar Layout > Header > Page Header Gadget (ada tulisan Alfiana's Journey) > klik gambar Pensil > Isi Blog Tittle > Isi Blog Descripstion > Ganti Image URL dengan Image URL yang sudah kamu siapkan > Save

Tampilan Header kecil di di blog Alfiana's Journey seperti ini :
header-kecil
Tampilan Header (kecil)
Note : buat gambar header dengan ukuran 1000 x 250 px , untuk gambar ini aku buat di Canva. Kasus yang kadangkala ditemui adalah gambar akan blur, triknya simpan gambar di Canva dalam format png 

4. Edit Menu 

Masih di bagian Header, di kolom sebelah kanan ada Menu

Caranya : Klik Sidebar Layout > Header > Menu > klik gambar Pensil >  Edit HTML > Save

Edit HTML berikut :

<ul>
<li><a href='https://www.alfianafitri.com/' title='Home'>Home</a></li>
<li><a href='https://www.alfianafitri.com/p/profil-alfiana.html' title='About'>About Me</a></li>
<li class='dropdown'>
  <span>Literasi</span>
  <ul>
    <li><a href='https://www.alfianafitri.com/search/label/Inspirasi' title='Inspirasi'>Inspirasi</a></li>
    <li><a href='https://www.alfianafitri.com/search/label/Blogging%20Journey' title='Blogging Journey'>Blogging Journey</a></li>
  </ul>
  </li>
<li class='dropdown'>
  <span>Travelling</span>
  <ul>
    <li><a href='https://www.alfianafitri.com/search/label/Travelling' title='Traveling'>Traveling</a></li>
    <li><a href='https://www.alfianafitri.com/search/label/Kuliner' title='Kuliner'>Kuliner</a></li>
  </ul>
  </li>
<li class='dropdown'>
  <span>Ortotik Prostetik</span>
  <ul>
    <li><a href='https://www.alfianafitri.com/search/label/Patologi' title='Patologi (Penyakit)'>Patologi (Penyakit)</a></li>
  </ul>
</li>
</ul>

Warna biru - ganti dengan URL Blog 
Warna ungu - ganti dengan URL Page About Me (Profil)
Warna hijau - ganti dengan URL Label
Warna orens - tulis manual, tulisan tersebut yang akan muncul di Menu 

Ini tampilan Menu di blog Alfiana's Journey (kode di atas jadinya 3 dropdown, jika teman-teman ingin mengurangi atau menambah maka disesuaikan saja)

menu-dropdown-1
Tampilan Menu dengan Dropdown 

5. Edit Billboard (Header Besar)

Bagian ini adalah edit utk Header kecil yang ada di pojok kiri atas.

Caranya : Klik Sidebar Layout > Billboard > Edit HTML/Javascript dengan klik pensil  > Save

Edit HTML berikut :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7_2p6GtQcoFpcwxyND8BTSmGF_DYLGy_kSAGKa6oDOGs7HCy-uOR8nktnTKGhpoOQ2naQXjJQDD6QLgqvcGhjT4I52Uxn7Ck0fXvRRYAUbfjNF8CmKcoxrP_faLiAfhkBfsx5g-DujFpwJvSIRUSFD7MxelEYQ74HBMtKH8tZxRuBB9b52eMbhEuVA4/w640-h160/header%20blog%20(5).png" width="1000" height="250" title="header-pojok" alt="header-pojok-alfiana"/>

Ubah warna biru dengan link gambar yang sudah kamu siapkan

Tampilan akan jadi seperti ini (tulisan Alfiana's Journey di pojok kiri atas)
header-besar
Tampilan Header (besar)
6. Edit About Me
Langkah 6-9 akan berfokus di Layout > Aside (bagian yang akan terletak di samping)
Pertama edit About Me, bagian ini akan menampilkan identitas singkat pemilik blog.

Caranya :  Klik Layout > Aside > About Me > Edit HTML > Save

Edit HTML berikut :
 
<center><span style="font-style: normal;font-size:100%;"><img alt="Preview" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYDpRUbdllfCgiVUSxwvvNVOd8YRL6xaDZsWMZ--ZETmICLvGh9JKDisfKXJGkMpPVxgq2JVd0hUgPQNfg1nrahHYHPogNtxkVg2SAtoLb59a1GZpEQCoMV4ZFtptL2xbgvBIRRfqpVyoknREy1zKTkFwRK4gu_IJfyZDXg2pIGfgZjqjVCYksi4qoD-s/s16000/header%20blog%20(Logo)%20(2).png" width="300" height="300" style="border-radius: 100%; font-size: 100%; text-align: left;" / /></span><br /><p style="font-style: normal;"><span style="text-align: left;font-size:100%;"><span style="font-weight: normal;">Welcome to </span><span =""  style="color:#ff6600;">Alfiana's Journey</span></span></p><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 Literasi, Read Aloud, Travelling and Ortotik Prostetik</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>                                            Alfiana Fitri Istiqomah</b></span></div><div style="font-style: normal; font-weight: normal;"><span style="text-align: left;font-size:100%;">Blogger, Read Aloud Activist &amp; Orthotist Prosthetist</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.alfianafitri.com/p/profil-alfiana.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 kolaborasi? Silakan kontak ke </span><b size="3" style="text-align: left;"><span =""  style="color:#000099;"><a href="mailto:alfianafitri.personal@gmail.com">email</a>.</span></b></div>

Warna biru - ganti dengan url address foto
Warna orens - ganti dengan tulis manual
warna hijau - ganti dengan url Page About Me

Tampilan About Me di blog Alfiana's Journey seperti ini :

tampilan-about-me
Tampilan About Me

7. Edit Sosial Media

Bagian ini akan menampilkan sosial media teman-teman. Sebenarnya teman-teman boleh juga meletekkan Thumnail Sosial Media di sisi Footer, tapi kalau aku lebih suka di bawah Profil About Me.

Caranya :  Klik Layout > Aside > Sosial Media > Edit HTML > Save

Edit HTML berikut :

<table border="0" bordercolor="#111111" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 150px;">

<td><a href="https://www.instagram.com/alfianafitri.blog/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrHL0plS9_6YX2rsQ31BELAa0h7k3JPp03eleS53jsRi0SiPdGQIwhyOtw7XC4Gaj_dnayAtc7vfLiqw65INjTn4RKr7Jg4dIu09uw1hGxJ_7KYCMfybjb4lvuwNurHTFqwks9zxBTDtayfiziPkpMb76pG0S1Z6MnE5Ep25qs4E8FrN-VZAOro0Vvu4/s320/1.png" border="0" alt="blogspedia loggo" width="50" height="50" /></a><td>

<td><a href="https://www.youtube.com/channel/UC5sBlqgv8lefu6vAP7_pNMQ" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU1pbssd6bsrYgAOL_GDa8o7DSSf3y76XS3wJRMmDPdidxZLPQV8u21X6UhVLKXpPdSIFiinJCOp-DwCcTUmKmzKx5qCtrUYFLq-zkJ92IEnblmEpANpAejZGe9oiwAcxwUFrzdwxxUbsLefyUx4iGkQmFDYd3V5D75AYuOXPpuxTHkNCXiku2FhWbRpw/s320/2.png" border="0" alt="Blogger Perempuan" width="50" height="50" /></a><td>

</td></td></td></td></table>

Warna orens - ganti dengan URL sosmed masing-masing
Warna biru - ganti dengan Image adress tumbnail/gambar
Jika ingin menampilkan lebih dari dua sosial media maka kode HTML dicopy saja sesuai kebutuhan ingin berapa sosmed.

Tampilan sosial media di Alfiana's Journey seperti ini :

tampilan-sosial-media
Tampilan Sosial Media

8. Edit Banner Komunitas 

Bagian ini adalah tempat kita meng-"eksis"-kan diri kita hehe. Kita aktfi di mana, tergabung di komunitas apa, dapat penghargaan apa, kerja dimana, bahkan bisa untuk branding usaha. Karena nanti kita bisa menampilkan logo dan ketika diklik akan mengarah ke sosial media/kontak/websitenya. 

Tampilan Banner di blog Alfiana's Journey seperti ini :

banner-komunitas
Tampilan Banner Komunitas
Untuk di blog Alfiana's Journey, aku membuat tiga kolom banner yaitu Rumah Baca dan Komunitas Read Aloud, Komunitas Blogger, dan Penerbit Buku. Tiga kolom banner tersebut cara buatnya sama, jadi akan aku beri tutorial salah satu saja yang Komunitas Blogger ya. Caranya pun tak jauh berbeda dengan Edit HTML Sosial Media.

Caranya : Klik Layout > Aside > Komunitas Blogger > Sesuaikan Tittle > Edit HTML > Save

<table border="0" bordercolor="#111111" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 200px;">

<td><a href="https://www.blogspedia.my.id/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZvs9wBaW2Dhq1VOfB69sVBy8oCDpihKGwdsxEm-HdxA_tuJIjUixnQZKUhVK-yvmSer6LJfdGfAggqgN9ux2IDbz6jbASPenXBQ9QHfrp13wfxOVJ9H88BuB9iLmfLPJL8zG33MNsNoG-ISynZKgJrmNizmC31Lyg4zGAoILb1Fja-38TNGxZbo3XAtU/s320/logo-thecupuers.jpg" border="0" alt="blogspedia loggo" width="150" height="150" /></a><td>

<td><a href="https://www.instagram.com/bloggerperempuan/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEira7nB5SZHyvtZT_zG0Nvkiuper0tg2pHKezioeLePJqMo_mcqLoccmcAElIabdeUoKBzY80F6iaGXUabYUUVYiFVTWu9IPaHcVyex1U_qDA9PwZeOtDYXEUBopW6d2FSNG_FHgezXGLCGDBmQqp1zcRdY_-gfxOsVN1gThVBA-V2tzy-gaMJRObnflCA/s16000/download%20(1).png" border="0" alt="Blogger Perempuan" width="200" height="200" /></a><td>

</td></td></td></td></table>

Warna orens - ganti dengan sosial media/website komunitas
Warna biru - ganti dengan image address logo komunitas

Lakukan hal yang sama di kolom banner lainnya, jika hanya ingin satu kolom banner saja, maka yang lain dihapus, jika ingin menambah maka klik Add Gadget > HTML/JavaScript

9. Label, Arsip, Popular Post

Pada bagian Label dan Arsip tidak perlu memasukkan kode HTML

Untuk Label, hanya cukup setting sederhana seperti tampilan label ingin seperti apa dan menyesuaikan label mana saja yang ingin ditampilkan dengan cara mengeklik daftar label. Ganti Judul Label sesuai keinginan teman-teman. Kalau aku menuliskan "Label Alfiana's Journey"

Tampilan Label di blog Alfiana's Journey seperti ini :
Tampilan Label Alfiana's Journey
Tampilan Label Alfiana's Journey
Untuk Arsip, hanya cukup setting frekuensi arsip mingguan, bulanan, atau tahunan serta tatatan layout arsip ingin seperti apa, hirarki, dropdown atau flat list. Di blog Alfiana's Journey menggunakan Dropdown dan Montly. Ganti Judul Arsip sesuai keinginan teman-teman. Kalau aku menuliskan "Daftar Perjalanan"

Tampilan Arsip di blog Alfiana's Journey seperti ini :
Tampilan Arsip di blog Alfiana's Journey
Tampilan Arsip Alfiana's Journey

Most Popular Post menampilkan postingan paling populer di blog. Bagian ini juga cukup setting sederhana. Teman-teman ingin menampilkan postingan populer all time, 1 tahun terakhir, 30 hari terakhir atau 7 hari terakhir. Juga bisa memilih ingin menampilkan berapa postingan. Ganti judul Most Popular sesuai keinginan teman-teman. Kalau aku menuliskan "Paling Banya Disukai!"

Tampilan Most Popular di blog Alfiana's Journey seperti ini :

Tampilan Most Popular
Tampilan Most Popular

10. Edit Footer

Footer adalah bagian paling bawah dari sebuah blog. Teman-teman bisa menambahkan hal lain-lain di bagian ini, bahkan sosial media juga boleh ditempatkan di bagian footer.
Untuk blog Alfiana's Journey aku hanya menuliskan Copyright.

Caranya : Klik Layout > Footerbuttom > Copyright > Edit tittle > Edit Content

Edit Footer Copyright
Edit Footer Copyright
Tampilan Footerbuttom di blog Alfiana's Journey seperti ini :
Tampilan Footerbuttom
Tampilan Footerbuttom

Setelah selesai, jangan lupa klik tombol SAVE yang ada di ujung kanan bawah. Setelah itu taraaa lihat perbedaannya, blog teman-teman dijamin jadi makin cantik dan tentu saja SEO Friendly serta responsive.

Nah, selesai juga proses permak Template Blog dari Fiksioner v4. Ini tampilan Blog Alfiana's Journey setelah permak Template dengan Fiksioner v4

Tampilan Blog Setelah Pakai Template Fiksioner v4 (Desktop view)
Tampilan Blog Setelah Pakai Template Fiksioner v4 (Desktop view)
Tampilan Blog alfianafitri.com setelah menggunakan Tema Fiksioner v4
Tampilan Desktop Blog alfianafitri.com setelah menggunakan Tema Fiksioner v4
tampilan-mobile-after
Tampilan Mobile After edit
Meskipun cukup banyak drama selama hampir satu minggu ini otak-atik template hingga bisa seperti sekarang ini. Mulai dari awalnya aku sudah pasang Template unduhan Fiksioner v3, aku otak-atik sampe begadang berhari-hari dan sudah sekitar 75% selesai. Lalu mendapat kode HTML bonus, ganti template lagi. Otak-atik banner komunitas, pengen bikin beberapa menu dropdown tapi awalnya gak bisa-bisa sampe nyoba berpuluh-puluh kali wkwk
Hasil SEO inspector setelah permak Template
Hasil SEO inspector setelah permak Template

At the end, aku sebetulnya belum 100% puas tapi untuk sekarang aku cukupkan. Kalau dilihat dari SEOinspector hanya kurang dua hal yang perlu aku perbaiki lagi, itu akan aku perbaiki lagi besok dan tentu saja sambil otak-atik lagi. Satu hal yang kemarin aku coba tanamnkan dalam diri dan akan aku terus tanamkan :
COBA AJA, TANYA, KULIK, JANGAN TAKUT SALAH 
So, Selamat Mencoba, Dear :)

Teman Perjalananmu,
Alfiana :)

12 komentar

  1. Waah, cakep kak rumah barunya. Seger warnanya

    BalasHapus
    Balasan
    1. terimakasih apresiasinya, pemilihan warna ini adalah warna kesukaan saya, peach orens terang

      Hapus
  2. Cakep banget blognya, mba Alfiana. Terima kasih sharingnya. Ijin AtM ya

    BalasHapus
    Balasan
    1. terima kasih apresiasinya, boleh dong kalau mau ATM kak

      Hapus
  3. Cantek kali blognya...Sepertinya pandai baca-baca html nih mbak Alfi..

    BalasHapus
    Balasan
    1. terima kasih apresiasinya kak Aida.. huhuuhu ampee pedes matanya kak

      Hapus
  4. MasyaAllah, belum diuprek sama template aja udah kece. Apalagi ditambah dengan template keren dan lengkap banget. Telaten sekali mb Alfiana. Semoga bisa ketularan pinternya main HTML ya hehe. Aku baru uprek komunitas aja sudah lelah huhu

    BalasHapus
    Balasan
    1. terima kasih kak apresiasinya, pemilihan warnanya sama kak.. cuman mmg lebih rapi dan lengkapp pas udah pake fiksioner

      Hapus
  5. Semoga bisa setelaten kak alfi buat otak-atik html nya..

    BalasHapus
  6. Mau cobaaa jugaaa ih.... makasih mba Alfi

    BalasHapus