Trik Upload Image di Header BlogTrik Upload Image di Header Blog

Ada sebuah fitur yang disediakan blogger untuk upload image guna memasang/membuat sebuah background image di header blog. Anda dapat mengupload baik dari folder PC ataupun dari image yang tersimpan di image hosting (URL). Sedikit trick ini perlu disampaikan karena saat upload dari URL sering kali bikin bingung karena image tak dapat segera terupload dan muncul di header blog. Ini sangat berbeda dengan kita menggunakan upload image yang berasal dari folder PC.

Blogger Hack fixed width & height header inner Blogger Template DesignerBlogger Hack fixed width & height header inner Blogger Template Designer

Header blog di Blogger Template Designer (Perancang Template Blogger) memang dibuat fleksibel. Ketinggian header blog sangat bergantung kepada variabel yang ditampilkan di header seperti image yang diupload melalui halaman Tata Letak » Elemen Laman (Page Elemen), Ukuran font yang digunakan, panjang pandeknya nama blog, dan deskripsi blog.
Beberapa blogger ingin hanya menampilkan image dalam ukuran kecil di header blog yang diupload melalui elemen header di halaman Tata Letak, namun ketika image berhasil diupload, maka lebar blog title dan header blog description tiba-tiba ikut menyempit hingga justru terlihat meninggi disebelah kiri halaman blog. Dengan trik dibawah ini, semua permasalahan diheader blog akan teratasi dengan melakukan beberapa penambahan kode di bagian body. Perubahan memang terpaksa harus dilakukan melalui bagian ini karena semua pengaturan header berkaitan dengan penambahan image di blogger template designer tidak dilakukan melalui kode css yang ada diantara tag pembuka dan penutup head.

Menampilkan icon/image bulat di header blogMenampilkan icon/image bulat di header blog

Bukan sebuah image, icon, photo atau gambar yang sebelumnya sudah berbentuk bulat dengan format gif atau png, namun image ini berbentuk bujursangkar (kotak sama sisi) yang dibuat menjadi bulat dengan menggunakan border-radius property. Image juga bukan hasil upload melalui elemen header yang ada di "Dasboard » Page Element, namun sebuah image yang benar-benar baru dan untuk memasangnya di header blog dilakukan dengan menambah atau membuat kode css baru. Ukuran image dapat anda sesuaikan dengan tinggi header dan bisa berupa gambar apa saja.

Pasang Photo atau Image di Header BlogPasang Photo atau Image di Header Blog

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 */
}

Buat & rubah posisi Blog Title di kiri, tengah (Center) dan kananBuat & rubah posisi Blog Title di kiri, tengah (Center) dan kanan

Blog title atau nama blog default blogger berposisi di sebelah kiri header blog. Perubahan untuk membuat tampilan blog lebih menarik sering harus melibatkan perbahan posisi blog title ini. Posisi di sebelah kiri yang memang merupakan posisi default bisa dengan mudah dirubah menjadi di kanan atau ditengah (center) dengan menambahkan kode css. Kode css dapat ditambahkan secara langsung di syntax .Header h1 yang bentuknya seperti contoh di bawah ini:

.Header h1 {
      font: $(header.font);
      color: $(header.text.color);
      text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 {
      font: normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #3399bb;
      text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
}

atau dengan membuat syntax baru yang sama dengan penambahan property css yang diperlukan yang diletakkan di atas kode ]]></b:skin>