Proses mempercantik Blog, Tetap Bakoh dengan Koding

Jangan nyerah sama coding, semangat!

Blog itu ibarat rumah yang nyaman untuk penulisnya. Ada kalanya ingin dipercantik dan dipermanis supaya betah berlama-lama, tak hanya untuk penulis namun juga untuk pembacanya. Acapkali kita menginginkan rumah yang “cantik” namun terlupa bahwa salah satu membuat blog supaya mudah dikenali oleh google.

Teringat beberapa tahun lalu, aku adalah pengguna garis keras blog wordpress, karena tampilannya bersih menurutku dan tak butuh ini itu, namun sayang untuk naik ke top level domain harus benar-benar merogoh kocek yang sangat dalam (untukku).

Beruntung, aku bertemu teman-teman blogger yang membuatku “mencicipi” blogspot, selain karena harga untuyk TLD relatif terjangkau, ternyata tema-tema yang ditawarkan juga cukup clean dan enak seperti woprdpress.

Oke, di jkelas blogpedia yang diampu Mbak Marita, kita sampai untuk mempercantik rumah kita.

Cukup bimbang awalnya, karena sudah terlanjur nyaman dengan tema ini, daaaan kalau diganti aku takut tidak bisa mengembalikannya lagi, dan harus setel-setel ulang kembali. Biasa anak mager mah aku inih.

Namun, beberapa teman yang sudah berhasil mempercantik blognya membuatku galau untuk mencoba tema ini.

Tahap awal memasang tema, dengan mengecek kecepatannya

Oke, Mbak Marita merekomendasikan salah satu template blog, yang kalau dirasa-rasa hampir semua muridnya memakai tema ini, karena aku menemui beberapa teman bloggerku yang diampu oleh Mbak Marita juga memakai tema ini.

Sebelum memasang tema, sebaiknya mengecek terlebih dahulu kinerja tema tersebut apakah berat atau ringan, kita bisa mengecek tema dengan demo dan kita klik website ini https://pagespeed.web.dev/

Web tersebut akan menunjukkan presentase 0-99% yang mana semakin mendekati 99% tandanya temanya memiliki kecepatan yang baik (baca:tidak lemot). Kan bete juga ya, saat membuka web lalu lemot, nah ini menjadi cara jitu untuk cek cek kecepatan tema blog.

Oke kembali lagi ke tema fiksioner tadi, setelah dicek melalu website tadi kecepatan dekstop dan kecepatan mobile terbilang cepat, (akan melambat bila web dipasang iklan) kalau ini mungkin hampir semua tema sama ya.

Oke setelah mengecek performa, mari kita mulai untuk memasang tema fiksioner ini.

Mempercantik Blog dengan template dari Fiksioner!

Step pertama adalah kita unduh tema fiksionernya, karena sudah direkomendasikan oleh Mbak Marita jadi saya tidak mencari-cari darimana templatenya ini.

Tapi kalau manual bisa disearch via google, atau langsung download melalui situs igniel, kita unduh lalu kita ekstrak sari mengkudunya (eh)

Setelah di ekstrak kita pilih file dengan format XML Document, yang kemudian kita buka dengan Wordpad, setelah kita akan melihat kode-kode dari tema tersebut. Sebagai blogger, ya mau tak mau harus belajar coding juga ya, biar kita bisa utak-atik temanya. Setelah itu kita copy paste semua kodenya.

Selanjutnya kita pasang di blognya, caranya bagaimana?

Pertama kita buka dashboard blogger kita, kemudian pilih Theme.

Sebelumnya supaya kita tak menyesal dikemudian hari karena mengganti tema, sebelum measang tema baru kita perlu membackup kode-kode dari tema sebelumnya, caranya?

Klik segitiga di sebelah tulisan customise kemudian pilih backup.

Setelah di backup kita bisa langsung memasang tema dengan cara, klik segitiga sebelah customise  kemudian pilih edit HTML

Setelah itu akan muncul kode-kode, kita ctrl all lalu kita paste kode baru.

Jangan terburu-buru kita bisa cek hasil demonya dengan cara klik gambar seperti mata (preview theme). Kalau sudah yakin dengan tampilan, boleh langsung di save.

Atau bila ingin diutak-atik supaya berbeda sesuai style seperti mengubah warna atau gambar bisa lanjut membaca ini.

Cara mengganti header image besar di dalam blog, yang berisi gambar utama blog kita

Pertama-tama kita buat terlebuih dahulu gambarnya, eh tunggu dulu tentukan dahulu warna yang akan dipakai, karena setiap penulis pasti memiliki warna untuk identitas mereka. Misal saja saya branding diri saya sendiri dengan warna pink.

Pilih, pallete yang tepat supaya blog tampak enak dimata, pilih dua atau sampai empat warna yang pas, bisa cek-cek colour pallete di instagram atau melalaui pinterest. 

Setelah itu kita buat desainnya, bisa melalui canva (langganan sejuta umat) dengan ukuran 1000x250. Setelah desain sudah jadi bisa kita save di blog kita. New post lalu upload gambar (ini berupa draft ya) kemudian kita copy untuk alamatnya.

Header Image ini kita setting dari Billboard dengan menambahkan gadget HTML/JavaScript gadget. Caranya: Layout > Billboard > Add a Gadget > HTML/JavaScript gadget > Copy Paste kode 

contoh codingnya: 

<img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggwIfitBWmtwIIeNAgXZrFKrnPYk0tY_pSEJDRRKBeF7biw1WVtT3vq34yh5BXCWDOL4hBc5vCI_2OjGpATTLj43KHSpt_b1PxRnsHDU-CHM9BUBVwal0cvDPSwjXfvOQcGiVw05kgw3d-GdyoWyQLWB74OR-NpVNcdzDA9aD6hFsqHtjZDLMdNDQbwg/s3000/Untitled%20%281000%20%C3%97%20250%20px%29%20%283%29.png" width="1000" height="250" title="saraahmegha.com" alt="saraahmegha.com"/>

Header image kecil, sebagai identitas blog

Tema fiksioner memiliki beberapa bagian yang bisa diutak-atik salah satunya diujung kiri atas, sebagai penanda alamat misalnya.

Cara membuatnya juga hampir sama, kita buat desainnya kalau untuk header kecil pada ukuran 300 x 50 . Kemudian untuk memasangnya dengan klik 

Layout > Page Header Gadget > Input Image URL > Paste link image address > pilih Instead of title and description > Save

Kemudian untuk mengganti warna tema

Setelah bagian header besar dan kecil, maka supaya lebih rapi dan seragam bisa kita menyusaikan warnanya.

Caranya, kita kostumisasi tema dengan buka Theme lalu klik customise. Kemudian klik advance, dan kita bisa menyesuaikan warna sesuai yang kita inginkan.

Jujur saja di bagian terakhir ada bagian yang sempat membuat rusuh teman-teman blogger, di mana aku menanyakan cara mengganti warna di bagian label, karena tidak ada di cutom. 

Akhirnya mendapat cara dari Mbak Marita dan Mbak Nimas untuk instal Inspeksi Elemen, dan aku merasakan bahwa tool inspeksi elemen ini sangat membatu dalam mencari coding. 

Misalnya untuk warna yang tidak ada di custom advance, bisa kutemukan melalui inspeksi. 

Kemudian menambahkan tulisan kecil Copyright juga.

Kendala yang kuhadapi

In syaa Allah akan dibenahi sampai pada titik yang pas, (semoga enggak menang magernya ya), sekian dulu.