Mengganti Header blog dengan gambar/image dengan mudah

Teman- teman pasti tahu apa itu header??. header adalah kepala blog bisa dikatakan bagian kepala. karena letaknya adalah paling atas. salah satu dari banyak faktor yang dapat menarik perhatian orang adalah tampilan dari blog itu sendiri, Header juga termasuk di dalamnya. Tampilan header yang keren dan cool pasti akan menarik perhatian pengunjung blog dan memunculkan rasa ingin tahu yang tinggi. Kalau pada postingan sebelumnya kita telah membahas bagaimana menghilangkan/ hidden judul blog yang ada pada header dan juga cara menghilangkan deskripsi judul blog yang ada di header
Pada sesion kali ini kita akan belajar bagaimana cara mengganti header blog dengan gambar yang kita buat sendiri, mengatur tampilan header, ukuran-ukurannya. sebenarnya semua itu mudah asalkan kita tahu dasar- dasarnya. Kali ini akan saya contohkan sebagai kelinci percobaannya Blog saya sendiri, he he he.... OK,....lanjut sob. Bagi yang sudah bisa diam dulu ya, bagi yang belum bisa mari kita simak artikel berikut ini. Tetapi kali ini untuk image/ bahannya membuat header kita sedikit-sedikit harus nyanthol atau faham sama aplikasi desain grafis seperti Adobe Phhotoshop, Corel Draw, atau lainnya.
Secara umum header dalam suatu blog memiliki kode css seperti di bawah ini:
#header-wrapper{
 width:900px; /* mengatur lebar header kita */
 height:170px; /* mengatur tinggi header */
 background:#ffffff url("isi dengan alamat gambar kamu")no-repeat;
 padding:0;
 margin:0px auto;
 border:0px solid;
 overflow:hidden}
Jadi kalau kita mau membuat header terlebih dahulu haru mengerti dulu berapa ukuran dari pada header blog kita. kita bisa mengatur tingginya maupun lebarnya. kalau kita sudah menentukan tinggi dan lebarnya langkah selanjutnya buat gambar yang mau kita pasang di header kita. misalkan saya buat gambar dengan ukuran 900 px x 170 px . kalau sudah jadi kita upload gambar tadi ke tempat hosting image kita misalkan di blogger, photobucket, imageshack. imagehosting, tinypick, atau di tempat lainnya. selanjutnya cara pemasangannya:

  • Login dulu ke akun blogger teman- teman
  • Pada Dashboard pilih Tata Letak - Edit HTML
  • Untuk mengantisipasi terjadinya kesalahan fatal, jangan lupa Back Up template kita dengan mengeklik Download Template lengkap
  • Centang kotak Expand Template Widget
  • Tekan Ctrl + F untuk memunculkan jendela pencarian. cari kode yang mirip dengan kode  di bawah ini. [fokus saja pada kode yang berwarna hijau]



    #header-wrapper{
    width:900px;
    height:170px;/
    background:#ffffff ;
    padding:0;
    margin:0px auto;
    border:0px solid;
    overflow:hidden}



  • Tambahkan url gambar [misal url gambarnya = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6JwTGGVbSH0GZQJNi0Hfkm7fVvu3KuGQkuyerZbrf0lWAUn2cP3WbtkJIRyb6u302nDjm7MfoFk6dMbr8sK6E_H201-ZA96J7AO2xdKXPH12r1YaZY3XU8wvW3jBDe6tO3Oc8RgeEPMv/s1600-r/didikweta.jpg]yang kita buat dan hosting tadi sehingga menjadi seperti ini



    #header-wrapper{
    width:900px;
    height:170px;/
    background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6JwTGGVbSH0GZQJNi0Hfkm7fVvu3KuGQkuyerZbrf0lWAUn2cP3WbtkJIRyb6u302nDjm7MfoFk6dMbr8sK6E_H201-ZA96J7AO2xdKXPH12r1YaZY3XU8wvW3jBDe6tO3Oc8RgeEPMv/s1600-r/didikweta.jpg)no-repeat;
    padding:0;
    margin:0px auto;
    border:0px solid;
    overflow:hidden}



  • Klik pratinjau untuk melihat preview atau langsung klik Simpan Template

Bookmark and Share

Posted by: Mas Eko
Download info - Tips trik - update - sharing, Updated at: 18:00

10 - komentar:

Bocah Cikarang said...

image diheader aq ga ngepas lebarnya gan...gmana cara menggantinya ya???

Didik M.A said...

bocah cikarang: agar pas dengan ukuran template kita kita harus bisa menemukan ukuran header kita...terutama lebarnya...biasanya lebar saya samakan dengan lebar outer-wrappper, seperti blog saya ini. tetapi coba aku lihat blog kamu dulu

batik, lurik dan souvenir murah said...

tks banget..tapi kode nya ga ada...

mampir ke blog ku ya...

http;//loviabatikdancraft.blogspot.com/

stkip hamzawadi said...

mantap gan..kebetulan lagi desain headar blog prodi..

yathi said...

aq udah cr tpi kode itu g ada d blogku gmna ne,header ada,tapi ukuran tinggi&lebarx g ada

Unknown said...

kenapa kemaluan keluar nanah kemaluan pria keluar nanah keluar nanah pada kemaluan wanita alat kelamin pria keluar nanah alat kelamin keluar nanah obat alat kelamin keluar nanah keluar nanah dari vagina kemaluan keluar cairan nanah penyakit kemaluan keluar nanah alat kelamin mengeluarkan nanah obat nanah keluar dari kelamin kenapa penis keluar nanah Penyebab penis keluar nanah

Obat Wasir said...

obat kutil kelamin atau jengger ayam

Obat Wasir said...

nanah keluar dari kemaluan ujung penis

Obat Wasir said...

obat kutil kelamin atau jengger ayam

Obat Wasir said...

nanah keluar dari kemaluan ujung penis

Post a Comment

Tiada gading yang tak retak, baka banyak pula hal yang salah dari aku. maka, tinggalkan walau hanya secoret komentar sebagai lankah ke depanku untuk lebih maju

NO SPAM NO PORN!