Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku

Pilihan Editor :

Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku
Penulis Kurazone
5
Modus malam
AAA
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 !!

5 komentar:

  1. Bang buat juga dong tutorial cara buat LATEST POSTSnya juga

    BalasHapus
    Balasan
    1. Kalo latestpostnya tinggal mengubah bagian .post aja sih mas.. Main padding, margin, width dll.. Yg dirancang agar menjadi grid style

      Hapus
  2. Mas jika hanya ingin menampilkan di home page saja bagimana, caranya ?

    BalasHapus
    Balasan
    1. Kode nya bisa diapit oleh kode tag conditional..

      Hapus
  3. Contohnya bagimana mas, tolong di bantu

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar TIDAK di moderasi.