Saturday, 25 January 2014

Cara Mengedit dan Mempercantik Tab Pages

Hari ini saya lagi-lagi melakukan perubahan kecil dalam desain blog saya. Puas banget rasanya kalau nemu tutorial di google yang emang sesuai keinginan saya hehehe. Nah kepuasan ini membuat saya berpikir kenapa saya tidak copas artikel tersebut ke blog ini. Kan lumayan bisa membantu teman-teman yang juga ingin mengedit blog nya. Copas yang akan saya lakukan ini akan diikuti dengan pernerjemahan si artikel yang kebetulan dalam bahasa inggris.

Tutorial yang akan saya berikan merupakan tutorial yang sudah saya lakukan dan berhasil saya lakukan di blog saya. Jadi yang sebenarnya yang saya lakukan adalah menyelam sambil minum air, artinya saya menerbitkan artikel tersebut di blog saya, akan ada pembaca yang datang ke blog saya, disisi lain sekaligus menjadi tempat penyimpanan untuk artikel-artikel yang saya gunakan sebagai tutorial dalam mengedit blog saya sendiri hehehe.

Maka, tanpa memperpanjang mukadimah lagi saya akan menjelaskan cara mengedit tab pages (halaman) untuk blogger.



Untuk tulisan no 1 – 3, maka teman-teman dapat mengubahnya dengan mengklik template > customize (sesuaikan) > advanced (tingkat lanjut) dan pilih sub menu yang ingin diubah


 1.       Tulisan tabs (font, ukuran, warna, dsb)


Pilih sub menu tabs text (teks tab) untuk mengganti warna, ukuran, jenis font/tulisan, memiringkan atau menebalkan tulisan, dsb nya. Pada sub menu ini teman-teman juga dapat mengatur warna teks tab yang sedang dipilih.

2.       Warna latar belakang bar


Pilih sub menu tabs background (latar tab) untuk mengganti warna latar dari bar pages teman-teman. Latar tab > warna latar (bagian paling kiri)

3.       Warna latar belakang bar yang sedang dipilih 
Pilih sub menu tabs background (latar tab) untuk mengganti warna latar dari bar pages yang sedang dipilih. Latar tab > warna yang dipilih (bagian tengah)

Untuk nomor-nomor berikutnya, teman-teman akan menggunakan custom css code snippet.
Jika teman-teman menemukan kotak seperti ini

4.       Lebar tab
masukkan kode di bawah ini dan naikkan nilai padding left dan padding right jika ingin memperlebar tab. misal 15px.

5.       Border tab 
 masukkan kode di bawah ini untuk mengubah border atau garis pinggir sesuai keinginan. jika ingin menghilangkan garis ubah 1px menjadi 0px.



Jika teman-teman ingin mengganti tipe border, maka silakan klik DISINI untuk melihat pilihan border yang disediakan, sedangkan untuk warna, silakan ganti dengan warna dalam bahasa inggris, misalnya red, orange, black, dsb nya

6.       Warna latar belakang tab
masukkan kode di bawah ini untuk mengganti warna tab
klik DISINI jika teman-teman memerlukan kode hex untuk mendapatkan warna-warna baru

7. Jarak antar tab
masukkan kode di bawah ini jika ingin mengatur jarak antar tab dimana meningkatkan nilai px akan memperbesar jarak


8. Menghilangkan bar dan hanya memunculkan tab
Jika ingin menghilangkan bar seperti pages di blog saya, maka silakan masukkan kode di bawah ini



9.Mengatur posisi tab
untuk posisi tab ini akan dibagi ke dalam beberapa sub yaitu:
a. horizontal tab
    - membuat tengah


    - membuat rata kanan

Catatan: jika tab menumpuk satu sama lain setelah kode ditambahkan, maka teman-teman bisa mencoba mengganti display:inline dengan display:inline-block

b. sidebar tab
    - membuat tengah

    - membuat rata kanan


nah, jika sudah selesai silakan klik preview/pratinjau dan apply to blog jika teman-teman merasa puas. Semoga bisa membantu teman-teman untuk mengedit tab blog masing-masing dan jika ada kesalahan mohon dikoreksi mengingat saya baru di bidang tutorial blog ini hehehehe..
happy editing =)

Sumber: DISINI dan DISINI

4 comments:

  1. Thanks ya informasinya. Bermanfaat sekali. Jangan lupa kunjungi blog saya juga ya, ada sumbangsih kamu juga tuh disana. Hehe..
    Ni Blogq : sedekahide.blogspot.com

    ReplyDelete
  2. terima kasih mbak sudah membantu saya edit tabs,.... :)

    ReplyDelete
  3. biasanya tabs bawaan ada dua garis border gimana menghilangkan salah satunya...

    ReplyDelete