Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku

Pilihan Editor :

Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku
Penulis Bagus Surochman
0
Modus malam



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) :


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 !!

nanio
Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku
Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku Cara Membuat Navigasi Kotak - Kotak seperti Blog Internalku Reviewed by Bagus Surochman on 8/19/2018

Tidak ada komentar:

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 selalu di moderasi.