Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku

KURAZONE ~ Halo sahabat Kurazer, gimana kabar kalian? Masih sehat - sehat saja kan? Tumben - tumbennya lho artikel ini tampil full page (via desktop) tanpa sidebar supaya demo pada tutorial ini bisa terlihat menarik. Hehe.. Kali ini kita akan belajar mengenai Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku. Yeah, begitulah judul artikel kali ini.

Hasil jadi pada ulasan kali ini akan nampak seperti dibawah ini :


Navigasi kotak - kotak ini diambil dari Blog Internalku yang beralamat di https://www.internalku.com (silahkan berkunjung ke blog tersebut untuk melihat demonya)

Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku :

1. Buka Akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu letakkan / paste diatas kode ]]></b:skin> atau </style>
.kura-kolom-dalam{width:100%;text-align:center}
.kura-kolom-item{width:100%}
ul.kuralu{width:100%;background:#123456;list-style:none;padding:20px 0px;float:left}
li.kurali{width: 33%;display: inline;}
li.kurali a{color:#fff;text-decoration:none; width: 20%;font-size: 20px;display: inline-block;padding: 30px 60px;margin: 5px;border-radius: 10px;background: rgba(0,0,0,0.6);}
li.kurali a:hover{background: #007bfd;}
li:before{display:none}
.kur.fa{margin-bottom:17px;font-size:40px}
4. Copy kode HTML dibawah ini, lalu letakkan / paste terserah dimana kalian mau menampilkan navigasi kotak - kotak tersebut. Misalnya diletakkan dibawah <body>, dibawah <header, dibawah top-menu, diatas wrapper atau diatas body-wrapper (terserah kalian lah pokoknya, penempatan bisa menyesuaikan selera kalian)
<div class="kura-kolom-dalam">
<div class="kura-kolom-item">
<ul class="kuralu">
<li class="kurali"><a href="/"><i class="kur fa fa-android"></i><br/> Android</a></li>
<li class="kurali"><a href="/"><i class="kur fa fa-btc"></i><br/> Bisnis</a></li>
<li class="kurali"><a href="/"><i class="kur fa fa-pie-chart"></i><br/> Blogger</a></li>
<li class="kurali"><a href="/"><i class="kur fa fa-gamepad"></i><br/> Games</a></li>
<li class="kurali"><a href="/"><i class="kur fa fa-pencil-square-o"></i><br/> Tips & Trick</a></li>
<li class="kurali"><a href="/"><i class="kur fa fa-windows"></i><br/> Windows</a></li>
</ul>
</div></div>
5. Simpan Template

Note :
1. Ganti tanda miring "/" nya menjadi URL menu anda
2. Ganti teks Android, Bisnis, Blogger, Games, Tips & Trick dan Windows sesuai selera kalian
3. Kode fa-android dan seterusnya hingga fa-windows bisa kalian ubah sesuai ikon yang kalian inginkan. Untuk mendapatkan kode ikon tersebut, kalian bisa berkunjung ke situs FontAwesome
4. Jika ikon tidak tampil, maka pasang ekternal Library FontAwesome dibawah ini kedalam template kalian, penempatannya bisa diletakkan dibawah kode <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
5. Cari kedua kode ini >> background:#123456; dan background:#007bfd; untuk merubah warna background
6. Sisanya bisa kalian eksplor sendiri
Hasil jadi pada ulasan kali ini kemungkinan akan berbeda jika diterapkan pada template kalian, karena masing - masing template memiliki struktur unik tersendiri.

HASIL JADI (VERSI KURAZONE) :

Dari contoh diatas, nantinya bisa kalian ubah desainnya sesuai selera kalian

TAMBAHAN :

Supaya tampilan navigasinya nampak rapi saat diakses via mobile, gunakan kode CSS Responsive dibawah ini dan letakkan diatas kode ]]></b:skin> atau </style>
@media only screen and (max-width:768px){li.kurali a {max-width: 712px;width: 30%;}}
@media only screen and (max-width:528px){li.kurali a {max-width: 472px;width: 50%;}}
@media only screen and (max-width:425px){li.kurali a {max-width: 369px;width: 50%;}}
@media only screen and (max-width:375px){li.kurali a {max-width: 319px;width: 50%;}}
@media only screen and (max-width:360px){li.kurali a {max-width: 304px;width: 50%;}}
@media only screen and (max-width:320px){li.kurali a {max-width: 264px;width: 50%;}}


Gimana? Cukup menarik ya... Itulah infromasi mengenai "Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku", selamat mencoba dan semoga bermanfaat. Goodluck !!






Lebih baru Lebih lama