header besar dan yeyet

5 langkah Mempercantik Blog , Dengan Templete Fiksioner

14 comments

       
cara mempercantik blog


Ibaratnya Blog itu adalah rumah , bagaimana caranya agar kita nyaman dan tamu juga nyaman berada di rumah kita , salah Selain kualitas konten, tampilan blog juga menjadi hal yang penting diperhatikan.
Tampilan blog yang menarik dan user friendly akan membuat pembaca betah berlama-lama, makanya penting banget sebagai blogger mengetahui bagaimana cara mempercantik blog .

Setelah beberapa kali perteuan dengan coach marita di kbb blogspedia , akhirnya saya bisa menyelesaikan tugas untuk mempercantik blog .semoga dengan  membuat penampilan blog menjadi berbeda dari biasnaya itu menambah semangat dan tambah rajin untuk nulis ya.

Mengenal Templete Dari Blogspot 

Blogspot sudah menyediakan template-template bawaan yang bisa digunakan. Template-template itu bisa diintip di bagian Theme alias Tema, yaitu:

1. Contempo

2. Soho

3. Emporio

4. Notable

5. Essential

6. Simple

7. Dynamic Views

8. Picture Window

9. Awesome Inc

10. Watermark

11. Ethereal

12. Travel

Template 1 - 4 adalah template yang baru dikembangkan saat Blogspot memperbarui dashboardnya pada tahun 2020. Sementara nomor 5 - 12 sudah tersedia sejak dulu kala.

Nomor 1 - 4 ada yang sudah cukup SEO friendly, tapi sayangnya kurang user friendly. Sementara 5-12 tidak SEO friendly, user friendlynya juga so so.

Hanya saja keunggulan Blogspot adalah, dia menyediakan versi mobile view untuk templatenya. Meski seringkali tampilan mobile dan webnya berbeda jauh .

Hal penting yang harus teman2 perhatikan saat mau utak Atik template

1. Backup template yang dipakai saat ini. jika terjadi error, atau ada yang kurang sreg dalam proses setting, kita bisa restore template sebelumnya.
                
Cara Mempercantik Blog                           
     
2. Kuasai medan, dalam utak-atik template, teman-teman akan bermain di dua area yaitu thema dan layout , sedangkan restore ,edit html jika di perlukan saja 

Beberapa Istilah di dalam proses pengeditan templete :
  1. Backup : untuk menyimpan template sebelum di
  2. Restore : untuk mengembalikan backup template sebelumnya atau upload file xml                             template baru (tapi tidak disarankan)
  3. Edit HTML: instalasi file xml template baru/ template pihak ketiga, menambahkan                                   atau menghilangkan kode di dalam template sesuai dengan kebutuhan
  4. Mobile Setting : untuk menampakkan tampilan mobile saat blog diakses di HP .

Cara Mempercantik Blog Dengan Template Fiksioner


Setelah kamu mencoba otak Atik template bawaan blogspot , saat sekarang mengganti template bawaan blogspot dengan pihik ketiga .

Kali ini saya akan menggunakan template pihak ketiga yaitu Fiksioner . Kenapa pakai ini , karena ini yang direkomendasikan oleh coach kami maritaningtyas.

Tahapan Merubah Tema Blog Dengan Fiksioner


1. Cek Pagespeed


Lihat apakah pagespeed template itu oke. Cara nya :

buka https://pagespeed.web.dev/

Terus masukan ulr demo template pada kotak seperti gambar di bawah ini --> lalu khil analyze
                                   
pagespeed

Akan keluar hasilnya seperti ini , 
  •  PageSpeed untuk mobile 
                                        
Hasil check pageSpeed

  • PageSpeed Dekstop
                                         PageSpeed Destop

2. Check SEO friendly atau tidak bisa menggunakan

www.seoptimer.comhanya saja versi gratis ini hanya bisa 2 atau 3x coba. Jika sudah habis limitnya, maka harus nunggu hari berikutnya. Penggunaanya seperti pagespeed insight, masukkan url yang mau dicek ke kolom lalu di klik dan akan muncul hasilnya.Extension meta Seo Inspector. Caranya buka demo templatenya, lalu klik extensionnya.

3. Unduh Templete 

Saya menggunakan templete Fiksioner karena ini templete yang di rekomdasikan oleh coach maritaningtyas saat kami belajar bersamanya .

                             
templete Fiksioner


File unduhan biasanya berbentuk zip, dan harus diekstrak dulu , lalu baru bisa di gunakan file nya
caranya Klik kanan pada file , pilih exstrak                                               

cara Mempercanti Blog
  • Upload file xml ke bagian theme-edit html
                                    edit html

  • Open File xml with notepad-ctr+a (copy all)---masuk ke bagian thema-edit html- ctrl + a clear semua kode yang ada di sana , lalu control + v ( paste dari file xml )
                                          kode file xml
  • Cari <head>
        Di bawah kode ini masukkan kode Google Analytic (GA), bagi yang sudah punya akun GA.

  • Di bagian: <!-- Facebook, Twitter, and Pinterest Meta Tag -->
Gantilah bagian “isi namamu” dengan nama kalian
Gantilah bagian “username” dengan username media sosial kalian

    Kalian bisa menggantinya dengan gambar yang kalian suka, atau mau pakai itu juga boleh.

    4. Buka Layout/ Tata Letak

    • Masuk ke Page Header Gadget

    Untuk mengganti gambar header kecil, untuk mengganti gambar, siapkan gambar                    ukuran 300x50
    headre kecil
       
    • Masuk ke Menu

    Isi link sesuai url blog kalian, url page about blog kalian, url label-label di blog kalian.                              
                                   layout menu
    • Masuk ke Billboard - Big Ad

    Ganti link gambar ini :

    Dengan link gambarmu sendiri. Ukuran 1000x250. Setelah gambar siap, buatlah draft postingan, dan tidak perlu di publish.

                                 
    big ad
    • Masuk ke Sidebar - Salam Kenal
    Ganti link gambar ini https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOLM6BjXyoED_NABg7p4kj4mEGMcL_I8f4g8oUEADKOwJgpPKMk_Zy-1oVPvORbAIdQIo59fZcES-oLhsl6vtuGz-HBa9C42hCczgcPnFCfDZUIsJCIPRpZYMujI3rDoANf5hP5pqLJB-u/s200/default-pic-profile.png dengan link gambarmu sendiri. Ukuran gambar yang disarankan 320x320. Posting di draft, dan cukup di save saja tanpa di publish.

    Kalau gambar sudah diupload, klik kanan pada gambar, pilih ‘copy image address’ atau 
    ‘salin alamat gambar’.

    layout salam kenal

    •   Footer Top

    - untuk memunculkan page, klik edit dan centang page yang ada di list, untuk ubah posisi, di drag saja.

    - isi ‘username’ dengan username medsos kalian

    layout footer

    5.Buka Theme - Customize

    Saatnya mengganti warna sesuka hati sesuai selera, silakan utak-atik sendiri bagian Advance.

                         

    mempercanti blog


    Akhirnya setelah melewati 5 tahapan cara mempercanti templet , menggunakan templete Fiksioner telehselesai , namun sayangnya templet lama tidak sempat saya screenshoot untuk jadi perbandingan , tapi tidak mengapa ya , yang penting sekarang kamu bisa menikmati cantiknya blog saya yeyetkusmiati.com





    Related Posts

    14 comments

    1. Dulu pas awal-awal ngeblog, demen banget gonta-ganti template dan nyoba utak-atik blog sendiri sampe puas. Sekarang mah pasrahin aja ke ahlinya, hihi (padune males, sih hehe)

      ReplyDelete
    2. Wah..keren semangatnya utak-atik blog sendiri.. Saluut.. Terima kasih sharingnya mba, membuka wawasan saya yg awam teknik2 ngeblog.haha..

      ReplyDelete
    3. Semangaat mempercantik blog dan isinya mba. Semoga kita saling bisa menyemangati dan mendoakan dalam kebaikan. Aamiin

      ReplyDelete
    4. Wah lengkap banget artikelnya Mba Yeyet, aku termasuk jarang mengganti template takutnya nggak SEO friendly jadi ya gini tampilan blogku itu-itu melulu hihi

      ReplyDelete
    5. Wah ini menarik banget mbak.melihat blog kawan2 bagus semua jadi pengin, tapi gaptek. Gimana caranya ikut kb blogspedia dengan coach mb marita?

      ReplyDelete
    6. Lengkap banget nih tutorialnya untuk mempercantik blog dengan template. Aku jaman awal ngeblog suka ganti-ganti template, sekarang udah males banget. Tapi setelah baca artikel mba Yeyet, kok jadi kepikiran ya ganti header yang baru, hahahaa

      ReplyDelete
    7. Ihiiiirrrrr nadi ungu mempesonaaaa, awwww gemes, efek ganti baju salah satunya jadi semakin semangat buat ngeblog, terima kasih tipsnya mbaaam

      ReplyDelete
    8. Blogspot menurutku memang lebih kompleks urusan mempercantik tampilan. Kita juga harus kenal kode html. Selain itu, emang kudu hati-hati. Biar html nya nggak eror. Duh, bisa puyeng banget kalau sudah nemu error. Iya nggak sih?

      ReplyDelete
    9. Sudah semakin cantik mbak tampilan blognya. Keren euy emak-emak bisa ngotak-ngatik kode HTML dan berhasil bikin tampilan webnya jadi cantik bin rapih begini. Hoho kangen Bun Yeyet deeeh, ah kapan ketemu lagi yaa.

      ReplyDelete
    10. Alhamdulillah, makin cantik tampilan blognya ya mba. PUnya saya malah cuma simple theme dari blogspot, hanya saja ditambahi bikin banner sendiri. Itupun sumbangan dari teman yang pinter bikin vector hehehe...

      ReplyDelete

    Post a Comment