Sunday 13 October 2013

Cara Mengatur Jarak Tabs Pada Menu Pages Blog

Cara mengatur jarak tabs pada menu pages di blog /web, maksudnya adalah bagaimana caranya mengedit / atur jarak padding di dalam tabs menu horizontal pages blog bagi pengguna template standar / bawaan dari blogger, artikel ini mungkin bisa membantu anda.

Mengatur jarak padding dalam tabs di menu pages blog bukan lah hal yang sulit, hanya diperlukan sedikit kode css untuk mengatur nya. Perhatikan gambar di bawah ini agar lebih mengerti tentang artikel bagaimana caranya edit / atur jarak posisi menu tabs pada halaman pages di bawah header blog.
Cara Mengatur Jarak Tabs Pada Menu Pages Blog
Gambar 1. Klik gambar untuk perbesar tampilan.
Pada gambar di atas jelas terlihat garis warna merah yang menunjukkan lebar antara suatu kolom pada tiap-tiap tabs menu tersebut. Untuk mendekatkan jarak nya diperlukan kode css pada template. Setelah berhasil maka contoh hasil nya seperti gambar di bawah ini, bandingkan gambar 1 dan 2, anda akan tahu perbedaan nya.
Cara Mengatur Jarak Tabs Pada Menu Pages Blog
Gambar 2. Klik gambar untuk perbesar tampilan.
Perhatikan langkah-langkah nya di bawah ini. Sebelum melanjutkan langkah-langkah nya, terlebih dahulu anda harus sudah menampilkan menu tabs view nya di blog anda.

Langkah pertama:

1. Sign in akun blog anda
2. Ke menu Rancangan > Template > Edit Html
3. Cari kode " .tabs-inner .widget li a { " . Gunakan Ctrl+F agar pencarian cepat.
4. Lalu akan muncul kode kira-kira seperti di bawah ini.
.tabs-inner .widget li a {
  display: inline-block;
  margin: 0;
  margin-right: 1px;
  padding: .6em 1.5em;
  font: $(tabs.font);
  color: $(tabs.text.color);
  background-color: $(tabs.background.color); 

5. Perhatikan kode di atas pada kode " padding: .6em 1.5em; ". Ganti angka yang warna merah dengan angka sesuai kebutuhan anda, semakin kecil nilai nya maka semakin dekat jarak nya.

Keterangan:
- 6em : untuk mengatur jarak vertical (tegak lurus).
- 1.5em : untuk mengatur jarak horizontal (sejajar).

6. Selesai.

Rekomendasi:
Mungkin anda ingin mengatur jarak antar widget / gadget di sidebar blog anda.

6 comments: