Keberadaan gambar header pada
suatu blog cukup berguna sebagai tanda ciri khas blog.
Karena ada beberapa cara membuat dan memasang gambar header di blog, mungkin ini
akan sedikit membingungkan bagi blogger pemula untuk memilih cara mana yang
ingin mereka pakai.
Di sini saya ingin berbagi tips bagaimana cara membuat dan memasang header
banner animasi di blog.
Mungkin ini bisa membantu Anda yang baru saja memulai membuat blog.
Langsung saja ke TKP. Yang
pertama kali dilakukan adalah mempersiapkan Aplikasi atau Software pendukung,
berikut software pendukung pembuat banner header animasi pada blog:
1. Adobe
Photoshop CS6 download disini
2. AAA
Logo 2010 download disini
3. Banner
Designer Pro download disini
Selanjutnya Anda harus mengetahui
ukuran header pada template blog Anda, dan bagaimanakah cara mengetahui ukuran
header tersebut berikut caranya:
1. Buka
www.blogger.com lalu login ke akun blogger
Anda, setelah itu klik menu template.
2.
Kemudian masuk ke Edit HTML
3 . Kemudian cari kata ‘header-wrapper’ caranya
arahkan mouse di dalam kotak html dan klik lalu tekan Ctrl + F dan ketikkan ‘header-wrapper’
lalu tekan enter sampai ketemu seperti gambar di bawah.
. Width menunjukkan panjang header dan height
menunjukkan lebar header, menurut template di atas header blog memiliki ukuran
980px x 120px.
Setelah
ketemu ukuran header langkah selanjutnya membuat header, untuk membuat header
seperti dalam blog RenvileTieft pertama membuat background header terlebih
dahulu. Warna background header harus disesuaikan dengan warna template blog
agar terlihat lebih enak dipandang. Tentukan dulu gambar mana yang bisa
dijadikan background header sesuai dengan template Anda.
1.
Buka Software Adobe photoshop CS6 atau terserah
versi berapa lalu buka gambar pilihan Anda (‘File’ -> ‘Open’) tadi ke Adobe
Photoshop. Misalnya saya memilih seperti gambar di bawah.
2.
Pada Photoshop buat file baru dengan cara klik ‘File’
-> ‘New’ atau Ctrl + N. Dan ubah ukuran sesuai ukuran header Anda tadi. Lalu
klik OK
3.
Dan akan muncul seperti ini
4.
Kembali lagi ke gambar background tadi klik menu
‘move tool’ Lalu arahkan pointer mouse ke gambar klik kiri tahan dan tarik ke
file baru header tadi.
.
Maka gambar background anda sudah di copy ke new
file header tad, geser-geser supaya posisinya sesuai,
.
Setelah pengaturan posisi sesuai lalu klik ‘move
tool’ dan ‘Apply’. Simpan gambar background Anda dengan cara klik menu ‘File’
-> ‘Save for Web’ lalu akan muncul kotak menu seperti di bawah, pilih
‘Original’ supaya kualitas gambar bagus, lalu tekan ‘enter’ dan klik ‘save’.
Dan selesai sudah membuat background header.
.
Hasilnya seperti ini:
Langkah selanjutnya adalah membuat gambar / tulisan logo
dan judul blog. Cara membuat Gambar dan Tulisan Logo dan Judul Blog adalah
sebagai berikut:
.
Buka Software AAA Logo 2010 lalu pilih logo yang
anda inginkan lalu klik, misalnya saya memilih gambar logo seperti berikut
.
Akan muncul seperti di bawah, untuk mengubah
warna gambar atau tulisan cukup klik gambar atau tulisan tersebut lalu pilih
lingkaran warna yang berada di bawah dan untuk mengatur posisi gambar atau
tulisan cukup klik gambar atau tulisan dan geser.
.
Untuk menambah tulisan atau gambar, klik menu
‘objek’ -> ‘New text’(tulisan) / ‘New image’(gambar), misalkan saya menambah
tulisan judul blog saya ‘RenvileTieft Blog’, klik menu ‘objek’ -> ‘New
text’. Pada ‘text line’ ketik RenvileTieft Blog, Lalu atur Font Size, Character
Spacing, Aspect Ratio, Solid Colour dan Jenis huruf sesuai keinginan, lalu klik
‘Ok’.
.
Untuk mengatur huruf dan gambar lainnya sama
seperti di atas sehingga hasil akhir logo header blog saya seperti ini.
.
Setelah selesai, simpan logo dengan cara klik
menu ‘File’ -> ‘Save Logo Image’ kemudian atur ukuran output Image, Scala
Output dan jangan lupa yang paling penting tandai pada ‘Transparan Background’
agar logo yang dihasilkan bias transparan, lalu klik ‘Continue’ dan Save.
.
Dan hasinya seperti ini
.
Untuk gambar logo yang satunya, caranya sama
seperti di atas,,
Setelah semuanya selesai kini tinggal membuat Banner Animasi.
1.
Buka Software BannerDesignerPro atur ukuran
width dan height sesuai ukuran header Anda tadi, tandai pada ‘Loop
Continuously’, ,Custom Image’ dan ‘Center’. Lalu browser dimana tempat gambar
background header yang di buat dengan Adobe Photoshop tadi, klik ‘Open’ dan
‘Ok’.
2.
Untuk menambah logo blog tadi klik menu ‘Banner’
-> ‘ Add Image’
3.
Tandai pada ‘Transparent Image’ dan Browe tempat
logo tadi disimpan, sesuaikan ukuran with dan height lalu ‘apply’ dan klik
‘Ok’.
4.
Dan terlihat seperti di bawah, kemudian Anda
atur effects logo banner, silahkan di atur ‘Drop Shadow’, ’blur’, ‘’Outline’,
dan ‘Emboss’.
5.
Anda atur juga Transitions : ‘Star Timing’,
‘Entry Effect’, ‘Stay Effect’, dan ‘Exit Effect’. Untuk melihat hasilnya klik
‘Priview’.
. .
Untuk logo yang satunya caranya sama, tinggal
diatur-atur saja menurut selera, Kalo semuanya sudah beres tinggal di save,
klik menu ‘File’ -> ‘Publish’
.
Tandai pada ‘Publish GIF’ dan klik ‘Publish’,
‘Save’ dan tunggu sampai proses menyimpan selesai.
8.
Dan hasilnya seperti berikut:
Nah sekarang Banner Header Animasi
sudah jadi, Langkah selanjutnya pemasangan pada blog atau template blog, Tapi
terlebih dahulu Anda upload Gambar Banner Header Animasi tersebut, banyak
alamat-alamat web penyedia layanan upload gambar atau foto, saya ambil cara
yang terpraktis saja, yaitu saya upload di posting blog saya, caranya.
1.
Login ke www.blogger.com
lalu buat posting baru. Kemudian Upload gambar banner Header animasi tadi ke
posting, kemudian kasih judul dan poskan.
2.
Lalu lihat hasil postingan tadi
3.
Kemudian klik gambar banner header animasi hasil
posting tadi dan copy alamat gambar tersebut.
4.
Sekarang masuk ke blogger.com lalu klik menu
Edit Html (Template -> Edit HTML), cari kode ‘header-wrapper’ (Ctrl +F ->
ketik ‘header-wrapper’ -> enter), paste alamat banner header animasi blog tadi pada
background url dan save template.
Eits masih belum selesai ni sob,
setelah kita lihat hasilnya ternyata pada header masih ada judul / deskripsi
blog, untuk memperindah tampilan sebaiknya judul dan deskripsi blog tersebut
harus disembunyikan.
Cara menyembunyikan judul dan deskripsi blog
1. Cari kode ‘logo h1’ atau jika
tidak ada cari kode ‘header h1’ kemudian di bawahnya ketikkan kode
‘visibility:hidden;’
2.
Jika ke dua kode di atas tidak ada,
ada alternative lain, cari kode ]]></b:skin> dan tempatkan kode ini
diatasnya.
.Header h1 {
height: 0px;
visibility: hidden;
display: none;
}
.Header .description {
height: 0px;
visibility: hidden;
display: none;
}
Setelah
menambahkan kode diatas maka judul blog dan deskripsi akan disembunyikan dari
tampilan blog, tinggal gambar saja. Dengan begitu judul dan deskripsi tetap ada,
hanya disembunyikan.
3.
Save template dan liat hasilnya, hasilnya akan
seperti ini:
Jika gambarnya kurang jelas bisa memperbesar dengan me klik pada gambar tersebut.
Oke saya rasa itu saja yang bisa
saya sampaikan, mungkin ada yang masih bingung bisa ditanyakan di kolom
komentar, kuranglebihnya minta maaf. Sekian dan terima kasih.
