Tutorial Menambahkan Logo Ke Header Blog

Menambahkan Logo Blog

Menambahkan logo di header blog mungkin bisa dilakukan oleh siapa saja, tetapi tahukah kamu bahwa sebelum menambahkan logo ke blog anda ada 3 pilar penting yang harus dipahami agar logo blog tidak mempengaruhi performa blog itu sendiri yaitu:

  1. Jenis file logo,
  2. Ukuran (dimensi) logo, dan
  3. Metode upload logo blog yang baik dan benar.
[ads id="ads1"] Jika ketiga pilar atau poin penting dalam menambahkan logo di atas dipahami dan dipraktekkan dengan benar, maka logo blog tidak akan membebani performa blog anda. Oleh karena itu mari simak selengkapnya tutorial menambahkan logo pada blog berikut ini.

Jenis File (Image) Logo

Pada dasarnya semua jenis file image untuk web (PNG,JPG dan WEBP) dapat diaplikasikan ke header logo blog, kamu hanya perlu mengetahui fungsi dari masing-masing jenis file misalnya:

Jenis file PNG untuk mebuat logo dengan style baground transparan sedangkan JPG dan WEBP tidak dapat melakukannya meskipun dari sisi perenderan JPG dan WEBP lebih unggul jika dibandingkan dengan PNG.

Pada umumnya kebanyakan situs web menggunakan jenis file PNG untuk logo, Meskipun demikian kamu tetap bisa menggunakan JPG dan WEBP dengan catatan kamu harus benar-benar jeli mendesain warna baground logo anda agar sesuai dengan warna header blog karena kedua jenis file ini tidak mendukung baground transparan.

Ukuran (Dimensi) Logo

Pada dasrnya setiap template blog memiliki dimensi yang berbeda pada header, itu artinya kamu harus mempertimbangkan dengan sebaik mungkin ukuran (size) logo untuk blog anda. Sebagai refensi saya telah merumuskan ukuran yang terbaik untuk logo blog agar tidak membebani pemutan halaman yaitu:
  1. Size atau dimensi logo harus diukur dengan satuan px (piksel)
  2. Lebar maksimal tidak lebih dari = 400px
  3. Tinggi minimal setidaknya = 60px
Rumusan di atas bertujuan agar logo blog tidak terlalu besar dan tidak terlalu kecil, jika dimensi atau ukuran logo terlalu besar maka file size akan besar pula sehingga blog akan terasa berat ketika dimuat, jika logo blog terlalu kecil dengan tinggi kurang dari 60px, logo akan terlihat buram/pecah dan mungkin juga aspek rasio tidak memadai.

Selain itu, nilai tinggi minamal (min-height) 60px saya rumuskan atau disesuaikan berdasarkan tinggi minimal logo pada markup konten web/blog. Meskipun demikian rumusan di atas tidak menghalangi anda untuk membuat logo blog dengan ukuran yang lebih kecil maupun lebih besar.

Cara Yang Benar Mengupload Logo Blog

  1. Masuk ke dashboard blogger anda
  2. Pilih menu layout
  3. Klik edit pada widget header
  4. Kemudian pilih "Upload from computer"
  5. Sebelum mengupload logo, klik Shrink to fit untuk menyusutkan logo agar sesuai
  6. Pada bagian placement pilih Instead of title and description
  7. Selanjutnya upload logo blog dan klik save
Catatan: Pada bagian placement atau penempatan logo blog pilihannya relatif, jika kamu ingin menyembunyikan teks judul blog (mengganti teks judul blog dengan logo maka pilih "instead of title and description",

Tetapi jika kamu agar logo ditampilkan dibalik judul blog maka pilih "behind title and description" atau kamu juga bisa mencoba semua pilihan penempatan logo blog (placement) sebelum menrbikkan nya.

Kenapa harus mencentang shrink to fit sebelum mengupload logo?

Fitur menyusutkan logo blog agar sesuai dengan header blog (shrink to fit) akan hilang jika logo diupload terlebih dahulu, dan logo akan ditampilkan apa adanya (tidak disusutkan). Oleh karena sebelum mengupload logo blog fitur shrink to fit harus dicentang terlebih dahulu.

Dengan demikian logo blog anda akan ditampilkan dan disesuaikan dengan ukuran (dimensi) header blog anda, sehingga logo tidak keluar dari atau melebihi dimensi header blog.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi Render Blocking Resources Dari Template Blogger

Gambar
Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript. Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut. Dampak Negatif Render-Blocking Resources [ads id="ads1"] Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu
Baca selengkapnya

Cara Mengatasi URL Yang Dikecualikan (Discovered-Currently Not Indexed Status)

Gambar
Tahukah kamu apa itu " Discovered currently not indexed " dengan status " Excluded "? Discovered currently not indexed maksudnya adalah halaman (url) sudah ditemukan oleh google tetapi belum di-crawl, sedangkan status excluded adalah status url yang masuk dalam ketegori pengecualian atau di kecualikan. Biasanya halaman ( url ) yang dikecualikan juga tidak diindeks oleh google karena menurut google halaman (url) merupakan duplikat dari halaman yang diindeks, atau diblokir dari pengindeksan oleh beberapa mekanisme di situs web itu sendiri. Jika tag canonical url di terapkan dengan benar beberapa url atau halaman di situs web akan dikecualikan oleh crawler google, biasanya halaman yang dikecualikan merupakan halaman (url) yang memang tidak penting untuk diindeks seperi url ?m=1, ?m=0 dan /search. Pengecualian pada yang url seperti itu baik untuk situs web, dengan begitu url (halaman) duplikat akan terjaring kedalam keranjang pengecualian di search console. [ads id=&
Baca selengkapnya

Cara Mendaftarkan Blog Ke Google Adsense (Panduan Terupdate)

Gambar
Google adsense menjadi terget utama kebanyakan blogger di dunia, pasalnya google adsense memberikan penghasilan kepada konten kreator melalui monetisasi konten blog dengan iklan adsense. Oleh karena itu bagi kamu yang baru saja memulai blogging khususnya yang ngeblog di platform blogger saya akan menunjukkan cara mendaftarkan blog anda ke google adsense agar dapat dimonetisasi dengan iklan adsense. Tapi sebelumnya harap perhatikan dan terapkan beberapa poin di bawah ini agar blog anda dapat dimonetisasi dengan iklan adsense. Syarat Agar Blog Diterima Adsense Untuk Monetisasi Daftarkan blog anda ke google adsense jika sudah rampung. Pastikan konten blog tidak berisi konten dewasa dan perjudian. Buat navigasi yang relevan dengan konten dan niche blog. Pastikan blog memiliki trafik organik. [ads id="ads1"] Jika ke empat poin di atas yang menjadi syarat kelayakan situs (blog) untuk dimonetisasi dengan iklan adsense sudah dipenuhi oleh blog anda maka blog sudah siap untuk didaftar
Baca selengkapnya