Now Reading
Kustomisasi Menu Pada Blogspot

Kustomisasi Menu Pada Blogspot

Setelah membuat menu pada Blogspot, saatnya mempercantik tampilan menu tersebut. Berikut ini tutorial sederhana untuk memodifikasi tampilan menu Blogspot yaitu menghilangkan border, menghilangkan warna abu-abu pada pada link dan membuat menu menjadi rata tengah (center-aligned).

Tutorial kali ini akan melibatkan sedikit kode CSS, tapi tak perlu takut salah, karena meskipun misalnya ada kode yang salah tidak akan “merusak” blog Anda. Hanya perlu menghapus kode yang salah tersebut dan tampilan blog Anda akan kembali seperti semula.

CSS adalah singkatan dari Cascading Style Sheet, fungsinya secara umum mengatur tampilan elemen di blog atau website. Sebagai catatan, kustomisasi menu pada artikel ini dilakukan pada template Blogspot Simple / Sederhana. Hasilnya mungkin akan berbeda di blog yang menggunakan template lain.

 

1. Masuk ke Template, lalu klik “Sesuaikan / Customize”.

2. Pada bagian kiri atas klik “Tingkat Lanjut / Advanced”, lalu scroll bagian kanan sampai paling bawah yaitu “Tambahkan CSS / Add CSS”. Akan terlihat kotak putih kosong di sisi kanan, di kotak inilah kita akan memasukkan kode CSS.

3. Copy paste kode CSS di bawah ini ke dalam kotak putih tersebut, hasilnya akan langsung terlihat pada preview blog di bawahnya.

Kode CSS :

 

1. Menghilangkan seluruh border pada menu

.tabs-inner .widget li a,
.tabs-inner .widget ul,
.tabs-inner .section:first-child ul  {
border: none;
}

 

2. Memberi border atas dan bawah, menghilangkan border kiri dan kanan

.tabs-inner { border-top: 1px solid #555555; border-bottom: 1px solid #555555; border-right: none; border-left: none; }

Kode #555555 ialah hex code untuk warna abu-abu tua (nyaris hitam); Anda bisa bereksperimen dengan warna lain menggunakan hex code yang sesuai.

 

3. Menghilangkan warna abu-abu pada menu yang sedang dipilih

.tabs-inner
.widget li.selected a {
background:transparent
}

Anda bisa bereksperimen dengan warna lain untuk menu yang sedang dipilih, yaitu dengan menggantikan value “transparent” dengan hex code yang sesuai.

See Also

 

4. Mengubah posisi menu menjadi rata tengah

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

 

5. Mengubah posisi judul blog menjadi rata tengah

.Header h1 {text-align: center;}

 

Setelah selesai copy paste kode CSS, klik “Terapkan pada Blog” di bagian kanan atas. Jika seluruh kode CSS di atas diaplikasikan, maka tampilan judul dan menu blog akan berubah seperti berikut :

Sebelum Sesudah

 

Tidak mau ribet dengan kode-kode CSS tapi ingin tampilan blog yang cantik? Silakan melihat-lihat koleksi template Blogspot yang kami sediakan di Blogger Perempuan Marketplace. Dengan harga terjangkau dan dipandu dengan tutorial instalasi step-by-step Anda bisa mempercantik blog Anda dalam waktu singkat.

View Comments (20)

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2015 Blogger Perempuan Network.
All Rights Reserved.

Scroll To Top