Selamat sore para pengunjung Blog Ferd. Sore ini Ferd akan membagikan . Tentunya agar Blog kalian terlihat lebih rapi ya..? (Menurut saya). Header yang cantik pun akan membuat Visitor terasa nyaman di Blog kalian. So, tunggu apa lagi? Ayo kita praktekkan
Berikut langkah-langkah yang bisa Anda coba :
- Pertama Login Blogger
- Pilih Rancangan
- Pilih Edit HTML
- Beri tanda Centang pada Expand Widget Template
#header-inner { background-position: center; margin-left: auto; margin-right: auto;}
#header h1 {font-weight:100;color: #D7DF01;text-decoration: none;font-size: 36px; line-height:28px;padding:0;text-align:center;}
#header .description {margin: 0;padding: 0px 0 5px 0px;font-weight:800; font-family:arial,verdana,sans-serif;color:#FFFFFF;font-size: 100%;letter-spacing: 1px;text-align:center;}
#header h1 {font-weight:100;color: #D7DF01;text-decoration: none;font-size: 36px; line-height:28px;padding:0;text-align:center;}
#header .description {margin: 0;padding: 0px 0 5px 0px;font-weight:800; font-family:arial,verdana,sans-serif;color:#FFFFFF;font-size: 100%;letter-spacing: 1px;text-align:center;}
Untuk tulisan yang berwarna Merah menunjukan posisi gambar, Biru untuk Judul dan yang Hijau untuk Deskripsi blog.
Hasilnya akan tampak seperti ini :
Untuk setting gambar berada disisi Kiri atau Kanan tinggal merubah #header-inner nya saja
Contoh Gambar Header Kiri
#header-inner { background-position: left; margin-right: auto;}
#header h1 {font-weight:100;color: #D7DF01;text-decoration: none;font-size: 36px; line-height:28px;padding:0;text-align:center;}
#header .description {margin: 0;padding: 0px 0 5px 0px;font-weight:800; font-family:arial,verdana,sans-serif;color:#FFFFFF;font-size: 100%;letter-spacing: 1px;text-align:center;}
#header h1 {font-weight:100;color: #D7DF01;text-decoration: none;font-size: 36px; line-height:28px;padding:0;text-align:center;}
#header .description {margin: 0;padding: 0px 0 5px 0px;font-weight:800; font-family:arial,verdana,sans-serif;color:#FFFFFF;font-size: 100%;letter-spacing: 1px;text-align:center;}
Contoh Gambar Header Kanan
#header-inner { background-position: rigt; margin-left: auto;}
#header h1 {font-weight:100;color: #D7DF01;text-decoration: none;font-size: 36px; line-height:28px;padding:0;text-align:center;}
#header .description {margin: 0;padding: 0px 0 5px 0px;font-weight:800; font-family:arial,verdana,sans-serif;color:#FFFFFF;font-size: 100%;letter-spacing: 1px;text-align:center;}
#header h1 {font-weight:100;color: #D7DF01;text-decoration: none;font-size: 36px; line-height:28px;padding:0;text-align:center;}
#header .description {margin: 0;padding: 0px 0 5px 0px;font-weight:800; font-family:arial,verdana,sans-serif;color:#FFFFFF;font-size: 100%;letter-spacing: 1px;text-align:center;}
Gimana, mudahkan? Kenapa mesti sulit-sulit
Kalo gitu, sekian dulu ya postingan dari Ferd. Semoga bermanfaat bagi kalian semua. Amiiinnn :)
Kalo gitu, sekian dulu ya postingan dari Ferd. Semoga bermanfaat bagi kalian semua. Amiiinnn :)
Terkait
Blog Tutorial
- Waspada Google Sandbox !
- Cara Membuat Background Pas dengan Blog
- Keuntungan Menggunakan Alexa Toolbar
- Solusi Untuk Blog Yang Sepi
- Membuat Sendiri Template Blog Anda
- Cara Menyisipkan Emoticon Di Postingan Blog
- Cara Meningkatkan Traffic Blog
- Cara Akses Situs Yang Hanya Bisa Lewat Handphone
- Cara Merubah Blog Nofollow Menjadi Dofollow
- Cara Membuat Blog Anti COPAS
- Cara Mengatur Ukuran/Size Header Blog
- Cara Memasang ZFP Menu Pada Blog
- Cara Pasang Emoticon Versi Baru di Komentar Blog
- Cara merapikan blog Chibi Transparent V1.0
- Cara Edit Background Blog
0 komentar:
Posting Komentar