Header atau judul blog yang biasanya terletak paling atas dari sebuah tampilan blog memang sangat menentukan kekhasan tersediri. Dengan melihat judulnya kita sudah bisa membayangkan isi dari blog tersebut, oleh karena itu para blogger belomba-lomba mendesain tampilan blog sedemikian rupa sehingga terlihat menawan dan mempunyai identitas yang berbeda dengan blog yang lain.
Sebenarnya artikel mengubah judul/header blog ini sudah pernah saya tulis dan bisa dibaca di sini namun karena ada pertanyaan dari salah seorang pengunjung blog BIK Pemula dan sudah tidak sesuai lagi karena google pages sebagai tempat untuk menyimpan obyek/gambar judul sudah tidak aktif lagi sehingga saya posting kembali cara mengubah header/judul blog versi kedua ini dengan memanfaatkan Picasa Web Albums sebagai wadah untuk menyimpan file gambar header/judul.
Sebelum membuat sebuah desain heade/judul blog di adobe photoshop sebaiknya lihat dulu berapa lebar header/judul blog anda agar nantinya bisa disesuaikan lebar dan tinggi gambar yang akan di desain pada photoshop dengan cara login ke blogger, layout/tataletak, edit html kemudian carikan kode tentang lebar header, kodenya seperti ini :
#outer-wrapper {
.................
................
width:744px;
...........
...........
Angka 744px di atas akan dijadikan patokan untuk membuat lebar dari ukuran header/judul blog pada rancangan di adobe photoshop. Selain itu sesuaikan juga dengan ukuran tinggi header blog anda.
Saya anggap anda sudah bisa merancang sendiri header/judul blog dengan adobe photoshop jika belum bisa coba baca dulu artikel tentang adobe photoshop di blog ini, anda bisa menemukannya dengan klik kategori adobe.
Setelah selesai merancang header/judul blog di adobe photoshop maka langkah selanjutnya menempatkan ke blog sebagai judul blog kita sehingga terlihat keren.
Berikut caranya.
Setelah didesain di adobe photoshop tentunya kita menyimpan dulu file gambar tersebut dengan ekstensi JPG atau GIF, kemudian file tersebut di upload ke picasa web albums.
Cara upload ke picasa web albums.
Login ke picasa web albums dengan akun google anda, bila belum memiliki akun google buat dulu di sini.
Setelah login pilih My Account/Akun Saya kemudian klik Picasa Web Albums.
Klik tab Upload kemudian klik create a new album, lakukan langkah ini jika anda belum pernah membuat satu albums pun, jika sudah pernah membuat albums lewati saja langka ini.
Ketik nama albums pada Title/Judul, Tanggal, dan deskripsi tentang album tersebut. Pada tab Share biarkan saja pilihan public.
klik Continue
klik browse kemudian cari file gambar yang sudah disimpan tadi dan klik open.
klik Start Upload
Setelah gambar berhasil diupload, klik pada gambar untuk melihat gambar dalam ukuran sebenarnya. Selanjutnya klik kanan pada gambar yang sudah tampil dalam ukuran sebenarnya kemudian pilih View Image sehingga pada address bar terlihat alamat url gambar tersebut. Nah url gambar tersebutlah nantinya sebagai pengganti background header pada blog, jadi copy alamat url tersebut dan simpan sementara di notepad.
Langkah selanjutnya Login ke blogger dengan akun anda kemudian klik Layout/tataletak, dan klik edit html lalu cari kode seperti berikut :
/* Blog Header
--------------------------------------- */
#header-wrapper {
background: url("http://www.blogblog.com/snapshot/bg-headerdiv_$startSide.gif") no_repeat;
ganti url yang berwarna orange dengan url gambar header/judul yang sudah anda peroleh dari picasa web albums sehingga hasilnya menjadi seperti berikut :
/* Blog Header
--------------------------------------- */
#header-wrapper {
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaXmuOaen9TGfORB3jEtrZbux05lUnWQnLankCrddytCRj2_1CAJpT2WQAoe06VHxXi5hYqBcG0hv3DWvCHilMGGfoMjx7Kg1dAEN_011wlXctGUrJq7Tz29Ux_MvE6WHlHj5KhttX7OMU/") no-repeat;
Simpan hasil edit html anda dan coba preview blog anda.
Selesai
Sebenarnya artikel mengubah judul/header blog ini sudah pernah saya tulis dan bisa dibaca di sini namun karena ada pertanyaan dari salah seorang pengunjung blog BIK Pemula dan sudah tidak sesuai lagi karena google pages sebagai tempat untuk menyimpan obyek/gambar judul sudah tidak aktif lagi sehingga saya posting kembali cara mengubah header/judul blog versi kedua ini dengan memanfaatkan Picasa Web Albums sebagai wadah untuk menyimpan file gambar header/judul.
Sebelum membuat sebuah desain heade/judul blog di adobe photoshop sebaiknya lihat dulu berapa lebar header/judul blog anda agar nantinya bisa disesuaikan lebar dan tinggi gambar yang akan di desain pada photoshop dengan cara login ke blogger, layout/tataletak, edit html kemudian carikan kode tentang lebar header, kodenya seperti ini :
#outer-wrapper {
.................
................
width:744px;
...........
...........
Angka 744px di atas akan dijadikan patokan untuk membuat lebar dari ukuran header/judul blog pada rancangan di adobe photoshop. Selain itu sesuaikan juga dengan ukuran tinggi header blog anda.
Saya anggap anda sudah bisa merancang sendiri header/judul blog dengan adobe photoshop jika belum bisa coba baca dulu artikel tentang adobe photoshop di blog ini, anda bisa menemukannya dengan klik kategori adobe.
Setelah selesai merancang header/judul blog di adobe photoshop maka langkah selanjutnya menempatkan ke blog sebagai judul blog kita sehingga terlihat keren.
Berikut caranya.
Setelah didesain di adobe photoshop tentunya kita menyimpan dulu file gambar tersebut dengan ekstensi JPG atau GIF, kemudian file tersebut di upload ke picasa web albums.
Cara upload ke picasa web albums.
Login ke picasa web albums dengan akun google anda, bila belum memiliki akun google buat dulu di sini.
Setelah login pilih My Account/Akun Saya kemudian klik Picasa Web Albums.
Klik tab Upload kemudian klik create a new album, lakukan langkah ini jika anda belum pernah membuat satu albums pun, jika sudah pernah membuat albums lewati saja langka ini.
Ketik nama albums pada Title/Judul, Tanggal, dan deskripsi tentang album tersebut. Pada tab Share biarkan saja pilihan public.
klik Continue
klik browse kemudian cari file gambar yang sudah disimpan tadi dan klik open.
klik Start Upload
Setelah gambar berhasil diupload, klik pada gambar untuk melihat gambar dalam ukuran sebenarnya. Selanjutnya klik kanan pada gambar yang sudah tampil dalam ukuran sebenarnya kemudian pilih View Image sehingga pada address bar terlihat alamat url gambar tersebut. Nah url gambar tersebutlah nantinya sebagai pengganti background header pada blog, jadi copy alamat url tersebut dan simpan sementara di notepad.
Langkah selanjutnya Login ke blogger dengan akun anda kemudian klik Layout/tataletak, dan klik edit html lalu cari kode seperti berikut :
/* Blog Header
--------------------------------------- */
#header-wrapper {
background: url("http://www.blogblog.com/snapshot/bg-headerdiv_$startSide.gif") no_repeat;
ganti url yang berwarna orange dengan url gambar header/judul yang sudah anda peroleh dari picasa web albums sehingga hasilnya menjadi seperti berikut :
/* Blog Header
--------------------------------------- */
#header-wrapper {
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaXmuOaen9TGfORB3jEtrZbux05lUnWQnLankCrddytCRj2_1CAJpT2WQAoe06VHxXi5hYqBcG0hv3DWvCHilMGGfoMjx7Kg1dAEN_011wlXctGUrJq7Tz29Ux_MvE6WHlHj5KhttX7OMU/") no-repeat;
Simpan hasil edit html anda dan coba preview blog anda.
Selesai
Komentar
Posting Komentar