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

silakan klik tulisan di dalam kotak ini kemudian klik kanan untuk meng-copy-nya

4.       Lebar tab

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

.tabs-inner .PageList li a {padding-left:10px; padding-right:10px;}

5.       Border tab 

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

.tabs-inner .PageList li a {border:1px solid grey;}

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

.tabs-inner .PageList li a {background:#FFB733;}

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

.tabs-inner .PageList li a {margin-right:10px;}

8. Menghilangkan bar dan hanya memunculkan tab

Jika ingin menghilangkan bar seperti pages di blog saya, maka silakan masukkan kode di bawah ini

.tabs-cap-top, .tabs-cap-bottom, .tabs-outer, .PageList, .PageList ul, .PageList .widget-content {border:none !important; background:none !important; -moz-box-shadow:none !important; -webkit-box-shadow:none !important; box-shadow:none !important;} .tabs-inner .section {border:none !important;}

9.Mengatur posisi tab

untuk posisi tab ini akan dibagi ke dalam beberapa sub yaitu:

a. horizontal tab

    - membuat tengah

.PageList {text-align:center !important;} .PageList li {display:inline !important; float:none !important;}}

    - membuat rata kanan

.PageList {text-align:right !important;} .PageList li {display:inline !important; float:none !important;}

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

.PageList {text-align:center !important;}

    - membuat rata kanan

.PageList {text-align:right !important;}

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