Cara Desain Header Blog (Bag 2)

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. ^_^

Description: Cara Desain Header Blog (Bag 2)
Rating: 3.5
Reviewer: Dat-s
ItemReviewed: Cara Desain Header Blog (Bag 2)

Anda sedang membaca artikel tentang Cara Desain Header Blog (Bag 2) dan anda bisa menemukan artikel Cara Desain Header Blog (Bag 2) ini dengan url http://pimitemplate.blogspot.com/2012/05/cara-desain-header-blog-bag-2.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Desain Header Blog (Bag 2) ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Desain Header Blog (Bag 2) sumbernya.