Cara Memasang Logo Blogger Menggunakan Background

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

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.
   
   

<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