Cara Membuat Header blog keren tanpa Upload gambar
Navigasi Info - Header Blog atau Judul Blog sangat mempengaruhi tampilan blog kita agar tampil lebih menarik dan sebagai brand Mark blog kita akan tetapi kecepatan loading untuk menampilkan halaman blog kita semakin berat akibat menampilkan gambar yang kita upload tersebut.
Sebenarnya kita juga dapat membuat tampilan tamplate blog kita menjadi keren tanpa harus meng-upload gambar pada header blog kita yaitu dengan cara meng-edit HTML blog kita di dasbor blogger .
Kita dapat menambahkan kode atau Memodifikasi kode CSS pada skin tamplate blog yang kita punya itu akan meningkatkan kecepatan akses halaman blog kita sekitar 5% sampai 20% dari biasanya oleh sebab itu saya akan membagikan caranya kepada kalian sebagai berikut.
Cara memodifikasi Judul Blog
dengan cara memodifikasi header blog tanpa harus meng-upload gambar pada header blog memang dapat membuat lebih cepet mengakses kecepatan halaman blog dari biasanya yaitu sebagai berikut:
| Kode CSS Header Blogger |
|---|
| .header a { font-family:fantasy; font-weight:700; font-size:100%; font-style:oblique; float: left; color: gold; text-align: center; padding: 12px; text-transform:uppercase; background-color:red; text-shadow:3px 3px 3px #000; text-decoration: #ADFF2F underline; line-height: 25px; border-radius: 10px; border: 5px groove #ddd;} |
- Pertama-tama kalian Copy kode diatas
- Kemudian pergi ke halaman dasbor blogger kalian.
- Lalu pilih edit html
- Selanjutnya cari ]]></b:skin>
- Langkah berikutnya paste kode CSS tersebut tepat diatas ]]></b:skin>
- Kemudian simpan
Maka tampilannya akan seperti dibawah ini
Keterangan kode CSS
Supaya kalian tidak kebingungan dan lebih memahami bahasa program maka saya akan sedikit membagikan pengetahuan saya dengan kalian sebagai berikut :
.header a ( judul blog / header )
.header a adalah berfungsi untuk menyatakan kode tersebut menargetkan kepada judul blog atau header.
float: ( efek melayang )
float: left; adalah berfungsi untuk membuat tulisan mempunyai efek melanyang ( mengapung ) yang posisi ke arah kiri kalian juga dapat mengganti kode left itu menjadi left , right , initial , inherit dan none.
Color: ( kode warna tulisan )
color: gold; berfungsi untuk menentukan warna tulisan dan kalian juga dapat mengganti dengan kode warna yang kalian dengan cara mengubah tulisan gold itu dengan kode warna.
text-align: ( posisi tulisan )
text-align: center; berfungsi untuk mengatur posisi ke rata tengah kalian dapat mengubah pengaturan rata tulisan dengan mengubah center menjadi right , left , dan justify
padding: ( mengatur jarak batas tulisan )
padding: 12px; berfungsi untuk mengatur jarak tulisan antar sisi tulisan yang mana pada kode diatas menunjukan jarak antar sisinya 12 px kalian dapat mengubahnya sesuai dengan keinginan kalian.
text-transform: ( mengubah huruf kapital secara otomatis )
text-transform:uppercase; kode ini berfungsi untuk mengubah jenis huru secara otomatis dan kode diatas akan mengubah secara otomatis menjadi huruf besar dan kalian juga dapat mengubah efeknya dengan mengganti uppercase dengan lowercase , capitalize ,initial ,inherit , dan none.
background-color: ( mengatur background header )
background-color:red; berfungsi untuk mengatur warna latar belakang header blog pada kode diatas kita atur pada warna merah atau red dan kalian dapat mengubahnya dengan warna yang kalian inginkan dengan kode warna lain.
text-shadow: ( memberi efek bayangan pada tulisan )
text-shadow:3px 3px 3px #000; berguna untuk memberi efek bayangan pada tulisan header 3px menunjukan ketebalan bayangan nya sebesar 3 PX kalian dapat mengaturnya sesuka hati #000 adalah kode warna bayangannya kalian dapat ubah dengan kode warna lain.
text-decoration: ( untuk menambahkan efek garis bawah garis atas dan sebagainya )
text-decoration: #ADFF2F underline; pada kode di atas berfungsi untuk memberikan efek tulisan garis bawah kalian dapat mengubah efek posisi garis tersebut dengan mengganti tulisan kode underline menjadi overline dan line-through .
Kalian juga dapat mengganti warnanya dengan mengubah #ADFF2F dengan kode warna yang kalian inginkan.
font-size: ( mengatur ukuran huruf )
font-size: 100%; berfungsi untuk mengatur ukuran huruf pada ukuran menyesuaikan posisi atau otomatis kalian dapat mengubah ukuran huruf tersebut dengan mengubah angka yang tertera disana.
font-family:( mengatur model / jenis huruf )
font-family:fantasy; pada kode diatas berfungsi untuk mengatur jenis huruf atau model huruf fantasy dan kalian dapat mengubah jenis hurufnya sesuai dengan kalian inginkan seperti arial , Times new roman dan sebagainya.
font-style: ( mengatur gaya tulisan )
font-style:oblique; kode CSS ini berfungsi untuk mengatur gaya tulisan yang mana disitu menggunakan oblique ( huruf miring dan tebal ) dan kalian bisa mengubahnya menjadi normal , italic , bold , dan initial
font-weight: ( lebar huruf )
font-weight:700; kode CSS ini untuk mengatur lebar tulisan header disini kita atur 700 piksel dan kalian dapat mengubahnya sesuka hati kalian dengan angka yang kalian inginkan atau juga bisa buat menjadi 100% agar menyesuaikan ukuran header.
line-height: ( mengatur tinggi garis bawah )
line-height: 25px; ini berfungsi untuk mengatur ketinggian garis yang kita beri efek underline atau garis bawah tadi disini kita beri pengaturan 25 piksel kalian dapat mengubahnya sesuai keinginan kalian.
border: ( efek bingkai )
border: 5px groove #ddd; kode CSS ini berfungsi untuk memberikan efek bingkai / didalam kotak sedangkan untuk jenis Border ya kode ini menggunakan jenis disen groove kalian dapat merubah jenis disen border menjadi solid , dotted, double , dan lainnya.
border-radius: ( efek bingkai melengkung )
border-radius: 10px; kode ini berfungsi untuk membuat lengkungan pada Border atau bingkai yang kita buat disini kita buat lengkungan sebesar 10px kalian dapat merubah nya atau menghilangkan efeknya dengan cara merubah angkanya menjadi 0 atau none.
Itulah ulasan kita kali ini yang mana cara memodifikasi header tanpa meng-upload gambar agar kecepatan akses blog semakin lebih cepat dan juga kalian dapat menambahkan berbagai efek kepada header blog kalian agar terlihat indah selamat mencoba dan terima kasih.
Jika kalian ingin menambahkannya dapat berkomentar dibawah .
Mantap totorialnya gan
BalasHapusMakasih gan
Hapus