Home » , » cara mengganti background header blog dengan gambar

cara mengganti background header blog dengan gambar

Cara Mengganti Background Header Blog
Cara Mengganti Background Header
Cara mengganti background blog akan terasa sulit bagi blogger pemula.hal ini juga saya alami saat pertama kali bergelut dengan dunia blogging.oleh sebab itu sebagai pelengkap artikel seblumnya yang membahas seputar cara mennganti background blog,tidak ada salahnya saya juga akan menuliskan tutorial blogging tentang cara mengganti latar belakang header blog dengan CSS,khususnya menggunakan gambar.

untuk mengganti background header secara keseluruhan,Anda harus setidaknya sedikit mengenal kode-kode css yang membentuk header tersebut.namun Anda juga tidak harus faham secara sempurna kalau hanya sekedar untuk mengganti bagian paling atas dari sebuah blog tersebut.hanya sekedar mengenal atau tahu saja sudah cukup.

Selanjutnya silahkan Anda ikuti langkah-langkah cara mengganti background header blog dengan gambar atau cara mengganti header blog dengan html (Url gambar) berikut ini :

  1. Langkah pertama untuk mengganti latar belakang bagian header blog dengan gambar,Anda harus mempersiapkan terlebih dahulu gambar yang akan dipakai sebagai background.untuk langkah ini Saya anggap Anda sudah memiliki gambar atau image yang dimaksud.
  2. Selanjutnya,Hosting gambar tersebut.Anda bisa meng-hostingnya di blogspot atau di situs penyedia layanan hosting gambar gratisan lainnya.

    Jika Anda ingin menghost gambar tersebut di blogspot,silahkan baca tutorialnya disini 👉 Cara Mudah Hosting Gambar Gratis.
  3. Setelah langkah kedua Anda selesaikan,selanjutnya adalah mengambil Url dari gambar yang sudah Anda Hosting tadi untuk digunakan sebagai latar belakang header Blog Anda.
    Contohnya seperri ini
    "https://4.bp.blogspot.com/-YzRwxvCHlcY/WiONkd2jCdI/AAAAAAAAHAM/8Gpy7iMmEwQppL0dUy8whtgX7O6ruZQWACLcBGAs/s1600/Berita%2Bsepakbola%2Bterbaru.jpg".
    Copy Url gambar hasil hosting tersebut.
  4. Setelah Url gambar tadi sudah Anda Copy,sekarang silahkan cari CSS untuk bagian header.
    Cari kode CSS header seperti ini,
    .header-wrapper{width:850px; color:#333;min-height:100px;overflow:hidden;position:relative;z-index:999;margin:0 auto}
    Agar lebih mudah dalam menemukan kode CSS header yang dimaksud,klik CTRL+F dan cari kode seperti di atas.
  5. Jika sudah ketemu,tambahkan kode ini sebelum kode color bercetak tebal pada kode diatas.
    background: url(https://4.bp.blogspot.com/-YzRwxvCHlcY/WiONkd2jCdI/AAAAAAAAHAM/8Gpy7iMmEwQppL0dUy8whtgX7O6ruZQWACLcBGAs/s1600/Berita%2Bsepakbola%2Bterbaru.jpg); background-repeat: repeat-x;
    Silahkan ganti Url Gambar berwarna merah tersebut dengan Url yang sudah Anda Copy tadi.maka hasil edit secara keseluruhan nanti akan manjadi seperi ini,
    .header-wrapper{width:850px;background: url(https://4.bp.blogspot.com/-YzRwxvCHlcY/WiONkd2jCdI/AAAAAAAAHAM/8Gpy7iMmEwQppL0dUy8whtgX7O6ruZQWACLcBGAs/s1600/Berita%2Bsepakbola%2Bterbaru.jpg); background-repeat: repeat-x; color:#333;min-height:100px;overflow:hidden;position:relative;z-index:999;margin:0 auto}
  6. Perlu Anda ketahui,untuk kode "background-repeat: repeat-x" ini berfungsi untuk mengulang gambar yang ukurannya lebih kecil dari lebar atau panjang header secara keseluruhan,jika gambar yang Anda pakai sudah sama ukurannya,maka hapus saja kode tersebut.
  7. Sebelum disimpan,baiknya Pratinjau dahulu hasil edit yang sudah Anda lakukan tadi.jika tidak ada kesalahan dan Anda yakin dengan hasilnya,maka langkah terakhir simpan hasil edit template tesebut

Bagaimana,mudah bukan cara mengganti background header blog dengan gambar ini?,Saya yakin Anda bisa,karena Saya yang juga berkategori pemula saja bisa.
Jika dirasa kurang faham dengan tutorial cara mengganti background bagian teratas dari halaman blog ini belum sepenuhnya Anda fahami,maka silahkan Anda ajukan pertanyaan dikolom komentar,dengan senang hati akan saya jawab semampu Saya.
Anda baru saja membaca : cara mengganti background header blog dengan gambar

Artikel Terkait

« Previous
« Prev Post
Next »
Next Post »

0 komentar:

Post a Comment