Saturday, June 22, 2019

Cara Mudah Membuat Gambar Background Header Blog

Saturday, June 22, 2019

Cara Mudah Membuat Gambar Background Header Blog


Di setiap dalam Mendeasin tampilan pada sebuah situsblog tidak lepas dengan nama header yang memiliki desain yang unik pasti menjadi ciri khas tersendiri di setiap para pengguna blogger. Logo blog biasanya ditampilkan pada bagian header yang berupa gambar dan gambar teks yang berisi nama atau slogan dari sebuah situsblog. Seorang blogger dapat dengan mudah membuat teks logo blog maupun gambar logo blog untuk header dengan baik dan keren.

Pada umumnya slogan atau logo blog dipakai untuk menggantikan teks pada bagian title dan deskripsi header. Dalam hal ini membuat logo pada blog walaupun hanya berupa gambar atau foto logo dan text bukanlah hal mudah bagi seorang pemula blogging. setidaknya dibutuhkan keahlian khusus untuk membuat gambar logo dan teks yang lebih unik dan keren dengan menggunakan alat pengeditan maupun kode-kode tertentu agar menghasilkan tampilan cantik dan juga keren.

Pada jaman Tekhnologi janggih seperti sekarang ini di internet cukup banyak layanan situs online untuk membuat logo secara gratis maupun pascbayar yang dapat dengan mudah di temukan dari hasil penelusuran mesin pencarian google atau ada pada sebuah iklan google yang tayang di situsblog seseorang pengguna blogger. Dengan memakai jasa online untuk pembuatan logo atau gambar text memudahkan kita untuk mengedit dan membuat logo untuk header blog.

Sama halnya dengan membuat background header selain menggunakan fitur yang disediakan blogger. pada umumnya penulis blog atau admin blog membuat background header melalui klik "EDIT" pada tab halaman "TATA LETAK"di Elemen Header blog jika anda akan lebih tertarik untuk membuatnya melalui kode CSS.

Kode CSS HTML Java Script yang akan saya paparkan dalam artikel postingan ini yaitu cara paling mudah dan siapapun dapat dengan mudah menggunakannya. Hanya memasang kode CSS logo atau gambar background header untuk pada template blog milik anda dan sangatvmenarik yang dapat anda terapkan dan disesuaikan dengan design situsblog.

Ada beberapa kode CSS HTML yang bisa digunakan di blogger pada bagian header ketika anda membuat background header melalui "Elemen Header" yang digunakan. Berikut Cara Memasang Gambar Header di edit HTML template

Langkah yang dilakukan ialah :

Masuk ke Dasbor Blogger anda

Klik Tema > Lalu Edit HTML

Tambahkan kode Salin (Copy) kode CSS dibawah ini

Kemudian cari kode ]]></b:skin> untuk memudahkan anda menempatkan kode ini silahkan tekan tombol “CTRL+F” pada keyboard kemudian copy-kan kode tadi. Jika sudah didapatkan tempatkan kode berikut diatasnya

Klik simpan pada tema Selesai

*/---- Header Background----- */

#header-wrap { background:url(https://3.bp.blogspot.com/-eNwf1wENyU0/XQUuYDS7OwI/AAAAAAAAEJE/j1PCwTM0yL8Px05-cK1pHhmkshSNaA9sACK4BGAYYCw/s167/iyaseo%2Bid.png) no-repeat; width:770px; height:265px; float:left; } #header-inner { background-position:center center; margin-left:auto; margin-right:auto; } #header { float:right; width:500px; color:transparent; text-align:right; padding:100px 20px 0 0; } #header h1 { height:45px; font:italic bold 30px georgia; letter-spacing:0; margin:0; padding:10px 0px 0px 0px; text-transform:none; text-shadow: 2px 2px 2px color:transparent; } #header a { color:transparent; text-decoration:none; text-shadow: 2px 2px 2px color:transparent; } #header a:hover { color:transparent; } #header .description { height:16px; color:transparent; font:bold 13px arial; letter-spacing:0em; margin:0; padding:2px 0px 47px 0px; text-transform:none; text-shadow: 1px 1px 1px color:transparent; } #header img { margin-left:auto; margin-right:auto; }
#header{ display: none !important; }



Nah sudah selesai Jika anda mau lebih keren lagi untuk background nya maka tambahkan elemen tertentu seperti Navbar dan Footer yang lebih Trend masa kini menggunakan background warna gradient ini dapat dibuat dengan kode CSS yang memang fungsi utamanya ialah untuk style atau tampilan nya warna warni dan lebih unik dari biasa atau standar pada sebuah blog dengan pembungkus dari HTML. Oke dalam kesempatan kali ini saya share cara membuat background gradien berwarna diblog Blogger berikut klik disitusblog INI untuk cara penerapan kode dibawah ini karena sumber kode ini dari blog tersebut;

Kode CSS Untuk Background Gradien Warna :
@-webkit-keyframes Gradient { 0% { background-position: 0% 50%} 50% { background-position: 100% 50%} 100% { background-position: 0% 50%} } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } div.header{ color: #fff; background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; display: block; font-weight: bold; color: black; }


Itulah pengenalan singkat Cara Mudah Membuat Gambar Background Header Blog semoga dapat bermanfaat selamat menggunakan aplikasi nya dan salam blogger.

Show comments
Hide comments