Cara Menambahkan Garis di Atas dan Bawah Tab

Cara Menambahkan Garis di Atas dan Bawah Tab – Blogging tutorialkah ini? Yup, benar sekali.

Kali ini saya akan memberikan tutorial blogging, lebih tepatnya yaitu tutorial untuk menambahkan garis di atas dan bawah tab. Masih bingung apa maksud garis di atas dan di bawah tab? Coba perhatikan dulu tab blog saya ya. Kalau masih bingung tab blog itu yang mana coba lihat gambar di bawah ini:

preview

Bagaimana? Sudah paham?

Nah, mungkin ada di antara pembaca ada yang bingung bagaimana ya cara menambahkan garis seperti itu? Tidak heran, sebelumnya saya juga sempat bingung bagaimana caranya. Hal tersebut dikarenakan saat mengedit template blog tidak ada pilihan untuk menempatkan tab di antara dua garis tersebut. Jadi garis tersebut pun akhirnya berhasil saya tempatkan dengan cara menambahkan kode CSS.

Sulit? Tidak, caranya sungguh gampang untuk dipraktikkan.

Untuk lebih jelas yuk ikuti langkah-langkah di bawah ini!

1. Buka dasbor blogmu lalu pergilah ke bagian template.

2. Setelah sampai di bagian template kliklah tombol sesuaikan.

3. Setelah masuk ke tahap penyesuaian template geser scroll bar ke bawah hingga kamu menemukan tulisan 'Tambahkan CSS'. Klik tulisan tersebut.

4. Salinlah kode di bawah ini lalu tempelkan pada jendela editor CSS (kotak berwarna putih).

.tabs-inner .section:first-child ul {
    border-bottom: 1px solid #EAEAEA !important;
    border-top: 1px solid #EAEAEA !important;
}

    border-bottom-left-radius: 100px !important;
    border-bottom-right-radius: 100px !important;
    border-top-left-radius: 100px !important;
    border-top-right-radius: 100px !important;
}           tekan enter setelah tanda kurung kurawal tersebut.

catatan: jika pada jendela editormu sudah ada kode CSS lain, tekan enter terlebih dahulu sebelum menambah kode yang baru.

5. Tekan tombol terapkan.

6.  Selesai! Sekarang coba lihat bagaimana perubahan tampilan pada tab blogmu.

Eh, singkat sekali ya. Benar cuma segitu aja?

Iya, cukup sesingkat itu saja. Tidak sulit dan cepat pula bukan? Kini tampilan tabmu jadi lebih manis dan tentu blogmu pun jadi lebih cantik.

Kalau kamu penasaran, ini nih perbandingan tampilan blog Rumah Es sebelum dan sesudah diberi kode CSS:

before-after

Jadi, bagaimana nih? Apa kamu juga ingin mencobanya?

---