Halo sobat
PiMiTemplate ketemu lagi dengan saya si penulis
blog yang tulus memberikan
tutorial tanpa bayaran sepeser pun
"Gratis", sama dengan para
blogger lainnya, cuman bedanya tidak setengah-setengah,,, pokoknya apa yang ada pada saya akan saya bagikan kepada sobat.
Kemarin, kita telah mempelajari
Cara Desain Header Blog (Bag 1), dan kali ini kita akan
belajar Cara Desain Header Blog (Bag 2) yakni tentang
Cara Membuat Atau Mendesain Gambar Background Header Blog serta
Cara Mengganti Background Header Blog Dengan Gambar, untuk itu teruslah membaca, ini adalah
tutorial yang jarang di temukan ini saya dapat sendiri loh tidak di kopi dari
blog orang lain. tapi kalau ada yang sama dari isi blog ini, jangan tersinggung ya. he..he..he..he..!!!
Oke tidak usah panjang lebar lagi, mari kita langsung menuju ke
tutorial blog kita kali ini.
Cara Desain Header (Bag 2)
Cara Membuat Atau Mendesain Gambar Background Header
#1. Buka blog sobat yang ingin di desain header-nya, "tampilan blog sobat secara keseluruhan" seperti punya saya di bawah ini.
Kalu sudah tekan tombol
Prt Scr Sys Rq pada keyboar komputer / laptop sobat untuk mengcaptur gambar tersebut, hal ini bermaksud agar dapat mengetahui ukuran
header blog sobat.
#2. Setelah itu klik
Start >> All Programs >> Accessories >> Paint jika sudah terbuka halaman
Paint kemudian tekan
Ctrl + V pada
Paint,
maka hasilnya akan seperti di bawah ini.
Setelah tampilan menjadi seperti di atas ini, Select Keseluruhan bagian
header blog sobat seperti di bawah ini.
Setelah di select langkah selanjutnya adalah klik crop, sehingga hasilnya akan jadi seperti di bawah ini.
Kalau sudah simpan gambar dengan tipe file .png.
#3. Setelah file tersimpan, cari file tersebut, kemudian Klik Kanan >> Open With >> Adobe Photoshop seperti pada gambar di bawah ini.
Kalau sudah di mengikuti langkah di atas hasilnya akan seperti di bawah ini.
Setelah sudah seperti ini, sekarang giliran sobat untuk mengedit gambar tersebut, kalau untuk cara mengedit gambar dengan adobe photoshop mungkin akan saya buat blog-nya sendiri, karena ini adalah blog khusus Tutorial Blogger dan Tutorial Template Blogger.
Sedikit Penjelasan :
"Gambar yang telah di crop dan di simpan tadi, seperti yang sudah saya katakan di atas adalah untuk memprediksi ukuran header blog sobat, jadi gambar tersebut tidak perlu di rubah ukurannya, cukup di ganti secara keseluruhan isi gambarnya menurut selera sobat".
Untuk Lebih memperjelas lagi, dari hasil editing di atas saya mengubah isi gambar tersebut menjadi seperti ini, tanpa merubah ukuran gambar tersebut.
Setelah Selesai mengedit isi gambar, jangan lupa untuk menyimpan gambar tersebut.
#4. Setelah gambar selesai di simpan, Langkah selanjutnya adalah upload gambar hasil editan tersebut ke
Album Web Picasa sobat, dengan cara, Buka
Album Web Picasa Sobat pilih
>> "Album Blog Sobat" >> Tambahkan Foto >> Pilih Foto Dari Komputer Anda >> Pilih Gambar Yang Telah Di Edit. selanjutnya, Klik
Fotoku >> Pilih
Album Tempat Sobat Mengupload Gambar >>
Klik Gambar Yang Telah Di Upload >> Klik Layar Penuh >> Klik Kanan Pada Gambar >> Salin URL Gambar.
Nah dari ke-4 langkah di atas apa ada masalah, saya rasa tidak. tapi jika ada masalah berikan komentar sobat di bawah postingan ini.
Cara Desain Header (Bag 2)
Cara Mengganti Background Header Blog Dengan Gambar
#1. Masuk ke akun blogger sobat;
#2. Pilih blog yang ingin di edit Background Header-nya;
#3. Setelah itu pilih Template;
#4. Klik Cadangkan / Pulihkan >> Unduh Template Lengkap Sobat >> Tutup, ini untuk menjaga terjadinya kesalahan pengeditan HTML;
#5. Selanjutnya Klik Edit HTML, Centang Expand Template Widget;
#6. Cari kode
.header-outer
dengan Cara menekan
Ctrl + F, Maka Sobat akan menemukan kode seperti di bawah ini.
.header-outer {
padding:auto;
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
#7. Gantilah kode tersebut dengan kode di bawah ini.
.header-outer {
height:Ukuran tinggi gambar sobat;
background-image: url(URL Gambar Milik Sobat);
}
#8. Setelah itu klik simpan
template, Selesai.
Hasil dari tutorial ini terhadap
blog saya seperti pada gambar di bawah ini. dan tentunya seperti
blog yang sedang sobat baca isi postingan-nya ini.
Kalau untuk
blog Sobat Gimana? lihat
blog sobat apakah ada perubahannya atau tidak. berikan komentar jika ada masalah. demikian tutorial kali ini mudah-mudahan dapat di jadikan acuan untuk
Desain Header Blog selanjutnya. ^_^