Cara Mengganti Tulisan Home di Menubar Menjadi Logo Rumah

loading...

Selamat datang di The Royal Moringa. Pada kesempatan kali ini, saya akan membahas bagaimana cara membuat menu home/beranda dalam bentuk logo. Pada umumnya, menu home yang terletak pada menubar di blog/website kita tertulis dalam bentuk teks yaitu home atau beranda. Namun, ada beberapa orang yang menginginkan menu home tampil dalam bentuk logo rumah. Nah, bagi anda yang ingin mengganti teks home yang ada pada menubar anda menjadi bentuk logo, berikut langkah-langkah yang perlu anda lakukan.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > Cari kode ]]></b:skin> kemudian copy dan paste kode script berikut di atasnya

                                    .li-home { position: relative; background-color: #fecb00; line-height: 35px; height: 35px; list-style: none; display: inline-block; float: left; font-size: 18px; font-weight: 400; text-align: center; z-index: 20; padding: 0; } .li-home a { color:#fff; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; } .fa-home::before{ content:"\f015"; }

2.  Selanjutnya silakan anda menuju body tepatnya pada bagian menu navigasi atau menubar blog anda, biasanya menu navigasi terletak setelah </header> dan sebelum content wrapper. Temukan kode seperti ini <li ><a href='#'>Home</a></li>.Tidak masalah jika kode script tidak sama persis seperti di samping semisal punya anda lebih banyak atau lebih panjang, Intinya adalah anda mengganti <li>...</li> yang berisikan menu home dengan kode script berikut.

                                    <li class='li-home'><a href='URL Blog Anda'><i class="fa fa-home" aria-hidden="true"></i></a></li>

3. Silakan anda ganti URL Blog Anda > Save Theme dan lihat hasilnya

Kode CSS yang saya berikan pada langkah pertama bisa menghasilkan ukuran, warna, dan posisi yang berbeda dengan pengaturan atau style menubar anda pertama kali. Tetapi tidak semua template blog mengalami hal ini, sebelumnya saya sudah mencoba kode ini pada blog The Royal Moringa dan hasilnya kode CSS pengaturan warna, ukuran, dan posisi tidak memengaruhi style awal menubar atau dengan kata lain style menubar tetap dalam posisi default. Bagi anda yang menjumpai menubar anda setelah dipasang logo home berbeda warna, jenis huruf, posisi, dan lain sebagainya, silakan anda mengatur kode CSS di atas sesuai dengan style mula-mula menubar anda. Misalnya background color menubar anda mula-mula memiliki kode warna #222222, tetapi setelah tulisan home diganti logo, background color pada bagian logo home berubah kode warna menjadi #fecb00 maka anda perlu mengganti background color pada kode script di atas menjadi #222222 dan begitu pula dengan pengaturan lainnya. Jika anda masih bingung atau tidak berhasil membuat  logo home, anda bebas bertanya melalui kolom komentar, contact us, dan online chat yang merupakan fitur blog terbaru kami. Terima kasih telah membaca!

loading...