Widget HTML #1

Cara Buat Gambar/Logo Blog untuk Template Viomagz

Untuk kalian para blogger yang menggunakan template Viomagz atau template lain karya Mas Sugeng, pastinya kurang lengkap kalau belum menggunakan gambar/logo pada nama blog kalian (header). Namun, saat dipasangi gambar/logo, hasilnya sering kurang memuaskan. Misalnya gambar/logo jadi kekecilan setelah dipasang.

Ada dua solusi yang dapat kalian gunakan gunakan untuk mengubah ukuran gambar/logo kalian yang kurang pas atau kekecilan. Salah satunya dengan edit kode HTML pada tema, kemudian mengubah angka pada bagian kode .header img {. Tapi, solusi tersebut menurut saya kurang tepat karena bisa membuat template jadi rusak atau error. Selain itu, untuk yang tidak terlalu mengerti tentang HTML pastinya akan sedikit kebingungan.

Letak masalahnya bukan pada HTML, tapi ada pada gambar logonya. Saat kalian membuat logo, pastikan untuk tidak meninggalkan ruang kosong yang lumayan lebar antara logo dan pinggirannya. Nah, lebih jelasnya akan saya jelaskan pada tutorial membuat logo sederhana untuk template Viomagz berikut.

Di sini saya menggunakan aplikasi PixelLab pada hp Android saya. Selain gratis dan ringan, aplikasi ini memiliki fitur yang cukup lengkap kalau hanya untuk membuat logo berupa tulisan. Untuk hasilnya bisa kalian lihat pada logo blog ini. Lumayan, bukan? Ya, setidaknya kalian bisa membuat yang lebih bagus dari punya saya.

Buat Gambar/Logo Blog dengan Aplikasi PixelLab


  1. Buka aplikasi PixelLab di hp kalian. Kalau belum punya, bisa dapatkan di toko aplikasi seperti Playstore.
  2. Tap titik tiga sebelah kanan atas, kemudian pilih image size. Pada preset, pilih Twitter header size. Kemudian pilih OK. Ukuran gambar akan berubah menjadi memanjang. Nantinya lebih mudah untuk dipangkas.
    Twitter header size
  3. Ubah tulisan New Text sesuai yang kalian inginkan. Misalnya PUNYAHP. Yang nantinya akan jadi logo di blog. Kemudian ubah font-nya sesuai dengan yang kalian inginkan. Kalian bisa mengubah font-nya secara keseluruhan atau hanya sebagian. Di sini saya contohkan mengganti font hanya pada kata "PUNYA" dan untuk "HP" saya gunakan font yang berbeda lagi.
    Pilih font
  4. Setelah mengganti font, sekarang perbesar tulisan yang sudah kalian buat hingga memenuhi ruang kiri dan kanan. Agar tulisan tetap berada di tengah-tengah, kalian bisa gunakan fitur relative position. Kemudian gunakan pilihan rata tengah untuk kiri dan kanan dan rata tengah untuk atas dan bawah.
    Perbesar gambar
  5. Selanjutnya, ini hal yang terpenting, yaitu memangkas ruang yang masih tersisa lumayan banyak pada sisi atas dan bawah. Caranya, pilih titik tiga yang ada di pojok kanan atas, kemudian turunkan angka hanya pada Height saja. Contohnya saya ubah dari 500 ke 420. Selanjutnya, guanakan fitur relative position atau position untuk mengembalikan gambar ke tengah-tengah. Jika masih ada ruang yang cukup banyak, turunkan sedikit lagi angka pada Height tadi. Hingga hanya tersisa sangat sedikit ruang pada sisi atas dan bawah.
    Turunkan height
  6. Terakhir, ubah gambar menjadi transparent dengan memilih ikon kotak di bawah kemudian pilih transparent. Selanjutnya simpan gambar dengan memilih ikon simpan pada bagian kiri atas, pilih save as image. Kemudian pilih SAVE TO GALLERY. Nah, logo/gambar sederhana sudah jadi dan siap dipasang di blog.
    Save to gallery

Cara Ubah Gambar/Logo Blog di Template Viomagz


  1. Masuk ke blogger via browser.
  2. Masuk ke menu tata letak, kemudian tap ikon pensil pada Header.
  3. Pilih gambar yang sudah kalian buat tadi, kemudian gunakan opsi penempatan Selain judul dan keterangan.
  4. Simpan. Hasilnya kira-kira seperti gambar berikut.
    Upload ke blogger
Nah, itu hanya sebuah contoh. Kalian tentunya bisa membuat logo yang lebih baik dan lebih bagus lagi. Selain pilihan font yang disediakan oleh PixelLab, kalian juga bisa menggunakan font lainnya yang bisa kalian dapatkan di internet. Selamat mencoba, sekian dan terima kasih.

2 komentar untuk "Cara Buat Gambar/Logo Blog untuk Template Viomagz"