28 Feb 2016

Cara Menambahkan Garis di Atas dan Bawah Tab

menambahkan-garis-di-tab-blog
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:

garis-di-atas-dan-bawah-tab
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.


tutorial-menambah-garis-di-atas-dan-bawah-tab


2. Setelah sampai di bagian template kliklah tombol sesuaikan.


tutorial-menambah-garis-di-atas-dan-bawah-tab


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


tutorial-menambah-garis-di-atas-dan-bawah-tab


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.

tutorial-menambah-garis-di-atas-dan-bawah-tab

5. Tekan tombol terapkan.
tutorial-menambah-garis-di-atas-dan-bawah-tab



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:



garis-di-atas-dan-bawah-tab
before-after



Jadi, bagaimana nih? Apa kamu juga ingin mencobanya?

---

17 komentar:

  1. Uwuwuw kalau wordpress gimana ya ._. aku masih belum begitu ngerti template blog gitu eh :'

    BalasHapus
    Balasan
    1. Waa kalo blog wordpress punya saya sayangnya belum ada saya utak-atik nih, jadi belum tau juga gimana caranya. Hehehe.

      Hapus
  2. makasih tutorialnya mbak, nanti dicoba ah :)

    BalasHapus
  3. aku jg kurang ngerti yg namanya bahasa html dan ngutak ngatiknya ini mba :D.. selalunya minta ke web designerku utk utak atik blog kalo memang udh bosen ama design lama -__-

    BalasHapus
    Balasan
    1. Wiii enak tuh kalo ada web designernya mbak, bisa request kalo ada yang ingin diubah atau bosen sama designnya. Saya gaada mbak, jadi mau gamau utak-atik sendiri kalau lagi pengen :D

      Hapus
  4. Halo mbak, termakasih sekali ya mau kembali lagi ke BLOGALAGUE. saya sudah jawab pertanyannya mudah-mudahan bisa di maklumi dan dipahami. oiya kalo mau diskusi boleh langsung email saya ya :) saya seneng banget loh baca komen mbak Nurul. Saya tunggu emailnya ya

    BalasHapus
    Balasan
    1. Iya mbak, saya juga seneng blognya mbak udah balik. Jadi saya bisa balik-balik lagi ke sana :)

      Hapus
  5. Nungguin yg wordpress deh hihihi

    keluargahamsa(dot)com

    BalasHapus
    Balasan
    1. Tunggu saya utak-atik wordpress dulu ya mbak :D

      Hapus
  6. Kalau template nya bukan template gratisan dari blogspot tetep bisa nambah kek gitu nggak mbak?

    BalasHapus
    Balasan
    1. Tergantung templatenya juga mbak, kadang ada template yang ga bisa banyak diubah waktu kita nyesuain di bagian tingkat lanjut template.

      Hapus
  7. Kalau template nya bukan template gratisan dari blogspot tetep bisa nambah kek gitu nggak mbak?

    BalasHapus
  8. saya mau coba ah.. bisa ga ya di template saya :D
    makasih mbak tutorialnya

    BalasHapus
    Balasan
    1. Oke mbak, dicoba aja dulu. Sama-sama :D

      Hapus
  9. Sudah saya coba, tapi kok gak bisa ya...

    BalasHapus

COPYRIGHT © 2017 RUMAH ES · PEKANBARU · INDONESIA