Thursday, August 23, 2012

Cara Membuat Gambar Header ke Tengah



Selamat sore para pengunjung Blog Ferd. Sore ini Ferd akan membagikan "Cara Membuat Gambar Header ke Tengah". 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
Apabila langkah-langkah diatas sudah dilakukan, langkah selanjutnya adalah menuju ke bagian Header, perhatikan kode dibawah ini :

#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;}

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;}



Hasilnya akan tampak seperti ini :


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;}



Hasilnya akan tampak seperti ini :

 
Gimana, mudahkan? Kenapa mesti sulit-sulit
Kalo gitu, sekian dulu ya postingan dari Ferd. Semoga bermanfaat bagi kalian semua. Amiiinnn :)
thumbnail
Title: Cara Membuat Gambar Header ke Tengah
Posted by

Related post Blog Tutorial :

18 Komentar:

  1. terlalu simple sob,tidak bisa dimengerti
    kode di atas tu ditarog dmna?

    ReplyDelete
  2. kalo gaada kode itunya gimana ya kakak? mohon tutornya :)

    ReplyDelete
  3. susah ah.. gak ada kode begituan

    ReplyDelete
  4. Untuk header ke tengah itu yang kode pertama ya...

    soalnya gambar hasilnya tidak terload/lola

    ReplyDelete
  5. thanks atas totorialnya klo sempat berkunjung blog kami ya... makasih

    ReplyDelete
  6. Keren sob jangan lupa kunjungi juga http://cara-tips-dan-informasi.blogspot.com/

    ReplyDelete
  7. terima kasih tutorialnya, sob.

    ReplyDelete
  8. Ane bingung gan ko ga ada berubah2, dari sebagian banyak artikel ga bisa berubah posisi, tetap aja gambarnya di kiri,
    gimana ya..?///

    ReplyDelete
  9. sama dengan atas
    gambar masih ga pindah
    ga ada kode tersebut

    ReplyDelete
  10. Banyak manfaat ilmu y gan, makasih....ikut nimbrung..http://www.newsforexmarket.com/

    ReplyDelete

 
Copyright © 2013. Contact - Privacy - Disclaimer - DMCA - Sitemap
Template Seo Elite by Bamz