Pasang Photo atau Image di Header BlogClick here to get more tutorials!

Memasang atau menampilkan foto blogger, profil blogger atau image dalam bentuk apapun di header blog dapat dengan cepat dilakukan menggunakan kode css. Dengan menambahkan sebuah property background yang dilengkapi dengan pengaturan posisi dan pengatur ukuran maka sebuah tampilan baru yang lebih cantik bisa terjadi di blog anda. Image yang akan dipasang sebagai background ini sebenarnya tak dibatasi hanya dalam bentuk photo profil blogger, namun anda bisa bebas menampilkan gambar apapun. Yang terpenting saat menampilkan sebuah gambar di header blog adalah pada pengaturan ukuran dan posisi yang sekaligus juga telah disertakan kodenya.

New Blogger Template/Template Blogger Baru

Kode yang dipergunakan di template blogger baru dan template lama (tata letak & klasik) tidaklah sama, oleh karena itu dalam tutorial ini disertakan 2 (dua) macam bentuk kode untuk blogger baru dan blogger lama. Kode untuk blogger lama juga bannyak dipergunakan di template hasil download.

header{
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

Atau bisa juga dalam bentuk seperti ini:

.header{
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

.Header{
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

.Header-outer{
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

Old Blogger Template/Template Blogger Lama

Template blogger lama seperti template "Minima Blue, Minima Dark, Harbor, Debim, Rounders. Kode ini juga sering digunakan dibanyak template hasil download. Untuk template download ada yang menggunakan bentuk syntax berbeda misalnya #header-wrap atau #header dan beberapa bentuk lainnya.

#header-wrapper {
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

Keterangan:

• Ganti https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg dengan URL image atau photo yang ingin anda tampilkan di header blog.
• Gunakan image dengan ukuran yang tidak terlalu besar, kira-kira seukuran tinggi header agar loading blog tidak terlalu terbebani.
• background-size:...px ...px: untuk mengatur lebar dan tinggi image. Gunakan satuan px(pixel). Anda juga bisa merubahnya menjadi background-size:..px auto; jika diinginkan tingginya mengikuti perbandingan lebar (width), atau background-size:auto ..px; ketika akan dibuat lebar otomatis dan tinggi yang ditentukan dalam nilai px.
• background-position:98% 10%; artingya:
  berjarak senilai 98% dari kiri dan 10% dari atas. Jika anda ingin merubahnya di posisi sebelah kiri maka nilai 90% bisa diperkecil hingga 2% s/d 10%. Semakin besar nilai prosentase maka gambar semakin ke kanan atau semakin kebawah.
• background-repeat:no-repeat; untuk membuat gambar tidak berulang (hanya ditampilkan satu gambar). Jika anda ingin gambar berulang, misalnya yang digunakan bukan photo melainkan sebuah background untuk memenuhi seluruh header maka no-repeat dirubah menjadi repeat.

Cara Menyimpan/menggunakan kode css

1. Login ke BloggerKlik untuk login ke Blogger!
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Letakkan kode css di atas kode tersebut.
   • Simpan Template/Save Template
7. Selesai! Silahkan coba cek hasilnya dengan membuka blog anda!

Catatan/Keterangan:

Jika anda ingin menggabungkan kode css untuk menampilkan image seperti yang ada di atas dengan kode default blog (kode yang sudah ada di blog), maka carilah syntaxnya yang sama, kemudian kode css di jadikan satu dan diletakkan di bawah kode yang sudah terpasang.

Contoh kode default blog:

#header-wrapper {
        width:860px;
        margin:0 auto 10px;
        border:1px solid $bordercolor;
}

Bentuk kode yang diperbarui dengan tambahan kode css baru:

#header-wrapper {
        width:860px;
        margin:0 auto 10px;
        border:1px solid $bordercolor;
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}