Cara Mudah Membuat Gambar Header Blog - Salah satu cara untuk memperindah tampilan
blog yang kita miliki adalah dengan menambahkannya gambar header. Format
gambar yang bisa dipakai sebagai header antara lain gambar yang
berformat GIF, JPG, atau PNG yang bisa anda buat sendiri, baik
menggunakan Adobe Photoshop, CorelDraw, Adobe Ilustrator, atau dengan
sofrware pengolah gambar lainnya.
Agar ukuran header yang kita pakai sama seperti
ukuran halaman blog, temukan ukuran halaman blog anda dengan mencari
kode “ #outer-wrapper{width:900px …. “ pada HTML blog anda. Jika
ukuran halaman blog anda 900px maka buatlah gambar yang lebarnya 900px
sedangkan high (tinnginya) bisa anda atur sendiri sesuai selera anda.
Setelah gambar anda sudah jadi dan menurut anda
itu adalah gambar yang sesuai banget dengan blog anda lalu upload gambar
tersebut kemana aja anda mau, atau bisa juga anda upload ke blogger.com
atau ke Potobucket atau kunjungi cara" nya di Cara Mendaftar Meng-upload Gambar di Photobucket. Kemudian yang anda perlukan adalah link gambar
tersebut. Misalnya saya punya link gambar header seperti ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrv5Iy84NxXHbVKHuYFP__8rkPz0jBu9ltdw6G9Aclv2GR33T85j8EUOP8C-G0BkRJfcchAfgKa44ncRmB5VcgtDumDdDcGFO3Qch6Nhh1SWPz7a-a45NYW4qovsIkqYxAf8_wOXG3UU/s1600/mywap.png
Link gambar tersebuat yang kita masukkan ke HTML Blog kita.
Caranya adalah sebagai berikut :
1. Login ke blog
anda kemudian pilih Design( Rancangan) dan memilih Edit HTML. centang “Expand Widget Template”
2. Cari kode di bawah biar cepat ketemu tekan Ctrl+F dan masukan kode di bawah jika masih bingung lihat caranya di Cara Mudah Dan Cepat Mencari Kede HTML Di Blog :
#outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:# 0000;}
3. Letakkan link gambar anda dengan cara mengganti #000 dengan link diatas atau link sahabat. Maka jadinya seperti berikut.
#outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrv5Iy84NxXHbVKHuYFP__8rkPz0jBu9ltdw6G9Aclv2GR33T85j8EUOP8C-G0BkRJfcchAfgKa44ncRmB5VcgtDumDdDcGFO3Qch6Nhh1SWPz7a-a45NYW4qovsIkqYxAf8_wOXG3UU/s1600/mywap.png) center top repeat-x;}
4. Setelah selesai, simpanlah template blog anda dan lihat hasilnya….
Selamat mencoba
keren
ReplyDeleteijin coment lagi mba,, sekalian mu ikutan tukar linknya.. silahkan cek linknya di tempat saya..
ReplyDeletetrima kasih... link anda bisa di lihat di bagian gadget back link
Deletekunjungi blog saya juga yaaaah.. trims
ReplyDeletedengan senang hati trimakasih ea
DeleteMantap gan...
ReplyDeleteMampir ke gubuk saya ya...
ok pasti ku kunjungi trima kasih dah mampir
Deletetanks gan..
ReplyDeletesama sama
Delete(Yang kedua) Itu di taro bagianmana, yang suruh di temukan itu kode apa?
ReplyDeletesilahkan postingannya di lihat kembali saya sudah ameng-edit nya kembali
Deleteberhasil di blog dummy :)
ReplyDeletethanks...
ReplyDeleteSelamat sore eba Siti, mau tanya posisi #outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:# 0000;} letaknya dimana (maklum otodidak ni eba).
ReplyDeleteTerima kasih
sore juga..! ada di dalam CSS letaknya di bagian atas atau biar gampang tinggal cari aja dengan mengetikan #outer-wrapper
Deletejika belum tau cara mencari code di tampilan HTML baru baca artikel nya di Cara Mudah Mencari Kode Template di Menu Edit HTML Baru
semoga membantu :)
Sudah lama tidak jalan-jalan semakin keren nih blognya +Ganti template ya maba sitti perasaan dulu bukan yang ini templatenya.
ReplyDelete