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.
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.
Nahhh…ini nih yang aku cari selama ini
Siiip… Coba aaah.. 🙂
Aih! Kok bisa begitu ya? Hal mudh tapi baru ngeh, makasih mbak-mbak atas sharing kustomai menu blogspot di atas… Ane lagi butuh banget 🙂
Halooo Mbak, artikelnya sangat-sangat membantuku dalam mempercantik blog-ku. Aku sudah selesai membuat kolom-kolom (menu/tab) Misal: recipe, traveling, dll. Nah, setelah aku klik menu-menu itu, artikel yang saya buat tetap menyatu.
Pertanyaannya, bagaimana cara mengkategorikan tulisan-tulisan yang saya buat sesuai dengan kategori menu yang telah saya buat.
Terima kasih atas waktunya 🙂
Kalau saya lihat di menu blognya link-nya masih URL blog (http://dewidy12.blogspot.com), seharusnya di-setting ke URL label postingan mbak. Caranya begini: Misalnya lihat postingan mbak yang berlabel Spirituality, di bagian bawahnya kan ada link “Labels: Spirituality”, klik link tersebut nanti mbak akan masuk ke halaman yang hanya memuat postingan berlabel “Spirituality”. Lihat URL-nya di browser: http://dewidy12.blogspot.com/search/label/Spirituality; nah URL ini yang harus dimasukkan ke kolom Tautan External / External Link di setting menu. Ulangi untuk label / kategori yang lainnya.
Selamat mencoba 🙂
Pertanyaanku sama, mbak. Tanya dong, external link tsb liat di setting menu yang mana? Makasih
Silakan refer ke artikel yang ini yaa 🙂 http://bloggerperempuan.com/membuat-menu-pada-blogspot/
Exactly what I’m looking 4 !
*ketjups*
wah artikel ini bener bener membantu! Thanks mbak
Ini diaa… gak rugi ngubek ngubek BP terus ih…
Tengkyuuu…
Wah ini berguna sekali, terima kasih info nya.
Btw, saya sudah coba, judul blog memang jadi ketengah, tapi deskripsi nya blog nya tidak ikutan ke tengah juga, itu bagaimana ya Mba. mohon info nya….
terima kasih sebelum nya.
CSS selector untuk deskripsi blog beda dengan judul blog. Untuk mengatur posisi deskripsi blog, pakai selector “.Header .description”. Jadi CSS-nya sbb:
.Header .description {text-align: center;}Mbak mau tanya, gimana cara membuat navigasi menu, biar spt ini misalnya>> You are here: Home / Blogging Basics 101 / Kustomisasi Menu Pada Blogspot
Terima kasih.
mbak Almazia, kalau misal mau pasang kolom komentar facebook di blogger caranya gimana?? ngaruh gak ya sama loading blog atau spam gitu??
Aaaah, baru tahu ada tutorial beginian di sini *bookmarked*
Tfs ^^
keren banget tutorialnya.. thanks untuk ilmunya Mba.. barokah semuanya.. 🙂
Mbak Alma kok ini gak bisa berubah jadi di tengah? Hehehe
justinlarissa.com
Tutorialnya oke punya. Trims mbk.. segera otewe ngubek-ngubek blog
Wahhh mantab nih tutorial . makasih sharingnya mb. langsung uji coba tkp
maksih.