Tempat belajar blogspot

Cara Memasang Logo Blogger Menggunakan Background


Cara Membuat Logo Blogspot

Menambahkan logo pada halaman blogspot sebetulnya bisa dilakukan dengan cara yang lebih mudah lagi melalui menu pengaturan layout pada halaman blogger, tapi pada artikel ini sengaja saya berikan cara untuk menambahkan logo pada header secara manual karena cara ini cukup lumayan untuk sedikit mengamankan logo kita agar tidak mudah di copy paste (Bukan berarti tidak bisa di copas ya). Berikut beberapa hal yang perlu diketahui saat menggunakan cara manual untuk memasang logo pada halaman blogspot.
  • Ukuran gambar logo akan otomatis disesuaikan secara proposional berdasarkan ukuran width dan height layout logo.
  • Gambar atau logo diposisikan sebagai background pada sebuah kotak layout (WAJIB DIKETAHUI terlebih dulu ini akan membuat logo kita tidak muncul pada mesin pencari, apabila tempat hosting gambarnya bersifat private).
  • Untuk mengambil gambar logo tidak bisa dengan menggunakan klik kanan, tapi masih bisa dengan cara mengupas bagan HTML melalui inspect browser untuk mengambil direct link gambar tersebut.

Contoh posisi letak logo blogspot

Contoh Posisi Logo Blogspot

Posisi logo sebuah halaman website atau blog pada umumnya berada di bagian tengah atas atau kiri atas, contoh gambar diatas bisa dilihat penempatan untuk sebuah logo halaman blog dibagian tengah atas. Gambar diatas hanya sebagai pelengkap informasi saja, untuk memudahkan kita membayangkan proses pemasangan serta letak posisi logo halaman blogspot.

Cara menambakan logo pada header blog

  1. Buka halaman blogger
  2. Pilih bagian Layout
  3. Tambahkan widget dengan HTML/JavaScript
  4. Copy kode HTML dan CSS dibawah ini
  5. Perhatikan gambar dibawah ini untuk lebih jelasnya.
    Add Widget Blogger HTML JavaScript

<style>
.logo {
   width: 100%;
   height: 100px;
   background-image: url(ALAMAT URL GAMBAR);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}
</style>

<a class="logo" href="ALAMAT URL BERANDA WEBSITE" style="display: block" title="JUDUL WEBSITE"></a>

Keterangan tambahan kode diatas

  • height: 100px bisa kita ganti sendiri dengan angka sesuai dengan ukuran tinggi yang diinginkan, selanjutnya bagian width atau lebar akan mengikuti secara proposional.
  • ALAMAT URL GAMBAR adalah alamat URL dimana gambar atau logo tersebut disimpan, contoh alamat URL gambar : http://i1146.photobucket.com/albums/o567/user1234/Logo%20Blog/Logo%20BLOGSPOT_zps7zhcgv5h.png (alamat URL gambar wajib berupa alamat direct link yang langsung menuju file gambar)
  • ALAMAT URL BERANDA WEBSITE adalah alamat URL blogspot kita sendiri.
  • JUDUL WEBSITE pastinya adalah tag judul halaman blog kita dan ini sangat disarankan untuk di isi.

Setelah selesai menambahkan kode diatas, silahkan simpan perubahan dan coba buka halaman blog kita untuk mengetahui hasilnya.
Sampai sini dulu artikel tentang "Memasang Logo di Header Blogspot" dan semoga artikel ini dapat berguna bagi kita yang ingin belajar memodifikasi halaman blog milik sendiri.
Terima kasih

Artikel ini ditulis oleh :
Perbloggeran

25 comments:

  1. gan kalo mau buat logo online, bagusnya dimana ya

    ReplyDelete
    Replies
    1. Hmm.. kalau googling ada banyak gan, cuman belum pernah pake logo online gan..

      Delete
    2. Bantu reply, kalo ane biasanya di onlinelogomaker dot com

      Delete
    3. mantap agan ara de choco, makasih dah bantu jawab pertanyaan ya..

      Delete
  2. Gan kalau cara lain selain html ada gak??

    ReplyDelete
    Replies
    1. ada gan dari menu layout bisa menambahkan logo blog juga koq..
      Blogger sudah menyediakan widget header namanya..

      Hanya saja di artikel ini saya memberikan tips penambahan logo menggunakan HTML dan CSS, dan bedanya gambar logo di tips ini saya fungsikan sebagai background dari sebuah div.. Gunanya apa sich koq difungsikan sebagai background, nah ntar logo agan tidak akan muncul di Google Image atau logo agan tidak mudah dibuka, terkecuali klo emank niat ambil gambar bisa mlalui inspect page kemudian di cari URL gambar background tersebut..

      Delete
  3. Ngatur panjang lebarnya harus di photoshop ya

    ReplyDelete
    Replies
    1. Mengatur panjang (Width) sebuah div atau widget melaui edit HTML gan..
      Sedangkan kalau ukuran REAL gambar yang melalui photoshop..
      Kenapa seperti itu? karena gambar atau logo akan menempati sebuah div atau wrapper (pembungkus).

      Trus apabila ukuran div atau wrapper tidak sama dengan dengan ukuran REAL sebuah gambar masih bisa di bantu dengan kode CSS seperti penggunaan property "object-fit" dengan value "fill atau cover atau contain" tinggal disesuaikan dengan keinginan.

      Delete
  4. Cara cek logo/gambar url dimenu apa kak?

    ReplyDelete
    Replies
    1. URL gambar didapat dari image hosting..
      Refrensi situs image hosting gratis yang mendukung direct link, coba photobucket..
      Bisa juga menggunakan layanan komputasi awan (cloud computing) gratis yaitu dropbox, layanan cloud tersebut juga memperbolehkan kita sebagai pengguna menjadikan dropbox sebagai image hosting..

      Delete
  5. gan caranya supaya logo headernya ada atas ditengah gimana ya ?? punya ane letaknya ada di atas kiri

    ReplyDelete

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Apa itu CSS Syntax dan Selector

CSS ( Cascading Style Sheet ) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS , namun pada artikel yang sekara...

Popular Posts