Tuesday, October 8, 2013

Cara Buat Header Dan Tabs Tanpa Jarak

Cara membuat header dan tabs penuh full body, tanpa ada jarak pemisah antara kiri dan kanan blog. Dibeberapa template header dan juga tabs blog tidak menampilkan background secara penuh, ada jarak kosong diantara kiri dan kanannya. Namun ada juga template yang menampilkan header dan tabs secara penuh tanpa ada jarak.
header dan tabs tanpa batas

Cara mengubah header atau tabs blog menjadi penuh tanpa batas, Ikuti langkah-langkah dibawah ini.

Cara Membuat Header Penuh

  1. Login ke blogger. Lalu pada halaman awal dasbor. Pilih pengaturan Tata Letak.
  2. Selanjutnya Klik Desainer Template > Tingkat Lanjut > Dan Klik Tambahkan CSS.
  3. Dan Masukan kode dibawah ini.
  4. #header {background:black;margin:0px -235px 0px -235px;padding:0px 0px 0px 240px;overflow:hidden;}
  5. Setelah itu lihat dulu perubahan dari warna background blog kamu. Jika sudah pas memenuhi semua body, baru klik Terapkan ke Blog.
  6. Jika belum, tambahkan nilai pada kode margin:0px -235px 0px -235px; Contoh:-245. Jika sudah melebihi batas penuh. Silakan dikurangi nilai pada kode marginnya.
  7. Keterangan kode margin:0px (Atas) -235px(kanan) 0px(bawah) -235 (kiri).
  8. Untuk kode padding sama halnya seperti margin. Tapi padding digunakan untuk merubah posisi bagian dalam, jadi tulisannya bisa kita tempatkan ditengah. Sedangkan margin untuk bagian luar.
  9. overflow:hidden; kode ini gunanya agar tampilan header tidak melebihi halaman blog.
  10. Setelah semuanya sudah sesuai dengan yang kalian inginkan, Klik Terapkan Blog. Selesai.

    Cara Membuat Tabs Penuh

    1. Sama seperti cara membuat header penuh. yang berbeda hanya kode yang harus dimasukan. Kodenya dibawah ini.
    2. .tabs-inner .widget ul {margin:0px -265px 0px -265px;padding:0px 0px 0px 240px;overflow:hidden;}
    3. Perbedaannya dengan kode header. Kita dapat mengatur warna background tabs dibawah header langsung dari Desainer Template > Tingkat Lanjut > Latar Tab.
    4. Jangan lupa diatur juga kode margin dan paddingnya agar sesuai dengan keinginan. Selesai.
    Semoga bisa bermanfaat untuk anda.

        No comments:

        Post a Comment