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
- Buka halaman blogger
- Pilih bagian Layout
- Tambahkan widget dengan HTML/JavaScript
- Copy kode HTML dan CSS dibawah ini
- 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>
.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
gan kalo mau buat logo online, bagusnya dimana ya
ReplyDeleteHmm.. kalau googling ada banyak gan, cuman belum pernah pake logo online gan..
DeleteBantu reply, kalo ane biasanya di onlinelogomaker dot com
Deletemantap agan ara de choco, makasih dah bantu jawab pertanyaan ya..
DeleteThx gn, bisa buat nambah ilmu
ReplyDeletesama - sama gan..
DeleteGan kalau cara lain selain html ada gak??
ReplyDeleteada gan dari menu layout bisa menambahkan logo blog juga koq..
DeleteBlogger 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..
ijin bukmak dulu gan. thanks
ReplyDeletesiap gan silahkan di bookmark artikelnya..
DeleteThx infonya gan.
ReplyDeletesama - sama gan..
DeleteNgatur panjang lebarnya harus di photoshop ya
ReplyDeleteMengatur panjang (Width) sebuah div atau widget melaui edit HTML gan..
DeleteSedangkan 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.
Ijin praktek gan
ReplyDeleteOke siap gan..
Deletenice info gan.
ReplyDeleteSip gan..
DeleteCara cek logo/gambar url dimenu apa kak?
ReplyDeleteURL gambar didapat dari image hosting..
DeleteRefrensi 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..
nice blog gan
ReplyDeleteSip gan..
DeleteSangat membantu
ReplyDeleteIya gan..
Deletegan caranya supaya logo headernya ada atas ditengah gimana ya ?? punya ane letaknya ada di atas kiri
ReplyDelete