Merubah header blog dengan gambar

Merubah header blog dengan gambar







Tutorial ini merupakan kelanjutan dari Tutorial cara membuat template blogger, nah jika belum mengikuti langkah dari awal sebaiknya lihat langkah-langkah sebelumnya yaitu :

Dari template yang telah dibuat kemarin header template berwarna hitam tanpa gambar, sekarang bagaimana jika merubah tampilan header dengan gambar,,,,,bagaimana caranya?

Jika dilihat dari kode CSSnya header yang terdapat pada (langkah 3 disini) memiliki kode seperti dibawah ini :
/* HEADER WRAPPER
==================================================== */
#header-wrapper {
width:960px;
height:150px;
background:#191919;
}

#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: left;
color:#FFF;
}

#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:2px 2px 2px #fff;
text-transform:uppercase;
letter-spacing:.2em;
}

#header a {
color:#FFF;
text-decoration:none;
}

#header a:hover {
color:#FFF;
}

#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#FFF;
}

#header img {
margin-left: auto;
margin-top: auto;
}

Dari kode header diatas terlihat bahwa header memiliki tampilan sebagai berikut:
width:960px; (lebar header)
height:150px; (tinggi header)
background:#191919;  warna latar header hitam dengan kode warna #191919

Sekarang bagaimana cara mengganti dengan gambar?
Pertama : Siapkan terlebih dahulu gambar yang akan digunakan, gambar harus berukuran sama dengan besar header yaitu 960px (pixel) X 150px (pixel) agar hasilnya rapi dan sesuai, kamu bisa membuat dengan photoshop, photoscape atau editor gambar lainnya.

Kedua  : uploadlah gambar tersebut di blogger atau di image hosting lainnya / baca (cara upload gambar) dan ambilah URL gambar tersebut.

Ketiga : Perhatikan kode dibawah ini, kode yang harus kamu rubah :
#header-wrapper {
width:960px;
height:150px;
background:#191919; /* <--- ini kode yang dirubah */
}
Dan rubah kode warna biru background:#191919; 

Menjadi :

background:#191919 url(URL-GAMBAR-DISINI) top center no-repeat;
}

Maka contoh lengkapnya jadi seperti ini :

#header-wrapper {
width:960px;
height:150px;
background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRCT0KWhOLcK3jnauuPbP3HfC5JmAT2Cbl4Ij6Um5wYHa2nzjD33vSdBKrz8j2FQzcVEMXDX7gaShUm_uJpQfQlvDQwgUDtwfCshRtGDJkOVAJkB4bEjniYyS4ggghoPdwOPRK1Otm67K/s1600/header2.jpg) top center no-repeat;
}
Rubah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRCT0KWhOLcK3jnauuPbP3HfC5JmAT2Cbl4Ij6Um5wYHa2nzjD33vSdBKrz8j2FQzcVEMXDX7gaShUm_uJpQfQlvDQwgUDtwfCshRtGDJkOVAJkB4bEjniYyS4ggghoPdwOPRK1Otm67K/s1600/header2.jpg dengan URL gambar yang telah dibuat

Simpan template dan lihat perubahannya.
Jika tidak mau repot membuat gambar gunakan gambar dibawah ini yang sudah saya persiapkan untuk template tersebut.

URL Gambar 1 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBppyPJJImZWirX_10iLwDpjzo5Ss6W4aPDeif4PEKKmixcmuPsyfRLQz34diI_nYsHSxeW_T3pscWcoXohGdGLAOyTAL4QQ8Aqf0nPF9-Ie61hPs0k3RuXGGyGZor5d7KS6GzPLiZQG8/s1600/header1.jpg


URL Gambar 2 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRCT0KWhOLcK3jnauuPbP3HfC5JmAT2Cbl4Ij6Um5wYHa2nzjD33vSdBKrz8j2FQzcVEMXDX7gaShUm_uJpQfQlvDQwgUDtwfCshRtGDJkOVAJkB4bEjniYyS4ggghoPdwOPRK1Otm67K/s1600/header2.jpg


URL Gambar 3 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtM0I1XTJGqR_LAwBFIUaVA4l4HNHsKCrlNZgSn4-s0zeZRnHTSJQuWOB25KexmJxuZ3OwlFud7XluZJglZv9BkZ3scHLfLaAIQcrOlBdtNNyqqqPrRIRTm5WveRA4AZx1X1dGRNAuPaZV/s1600/header3.jpg


URL Gambar 4 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLl292zU8D60QwDic57Wu3wGUaZs9LQtkfDem7p2w1Ty2zFfb0iPWBfc5goueovzUU8VDtOTm7pcJhspFqwYyvMfRqHYgvJ4qlLbjCH9dxeNchOn-pOohvj8gwc7idVm45P1IltgpSTkU3/s1600/header4.jpg


URL Gambar 5 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPafg8VW5y-chW_03-9tVrIa4G-s6LEeNfwRP-X2mJ6IMwOhPovPqHeJKl3hCU80KuZzBtOhahIkdfNlZkcv2jIOV_JVZ2M2ceYG_Q6uedah_PV7fsxEyhGb-jW7RrtYHkqNxc0PZA7_9G/s1600/header5.jpg






Baca : Cara Membuat Template Blog Sendiri

7 komentar:

  1. Tutorialnya berguna bagi para newby seperti saya gini gan...terima kasih ya sudah mau berbagi hal yang bermanfaat...

    BalasHapus
  2. wahhh izin nyobaa ya gan buat blog ane hehehehe
    makasih banget nih gan tutorial,berguna banget buat yang pengen masang gambar di header

    BalasHapus
  3. Bermanfaat nih untuk para newbie seperti saya :)

    BalasHapus
  4. sangat membantu untuk para newbie seperti saya ini gan
    terus membuat artikel yang bermanfaat gan

    BalasHapus
  5. gan, kolom searchnya mana? saya mau cari cara menghapus thumbnails di homepage pada setiap judul artikel.. ada?

    BalasHapus
  6. Kebetulan ane lg nyari thx gan

    BalasHapus