CARA MEMBUAT HEADER BANNER ANIMASI DAN MEMASANGNYA DI BLOG AGAR SESUAI DENGAN KEINGINAN

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.