Skip to content Skip to sidebar Skip to footer

Membuat page navigation dengan cara mudah


Membuat navigation dengan cara mudah

Mau membuat judul saja susah banget curhat jadi aku ngasih judulnya membuat page navigation dengan cara mudah yang bentuknya seperti gambar di atas. Kalau ada teman-teman yang suka boleh mengambil tutorial ini silahkan. Memang gampang banget membuatnya dan aku pikir memang simple dan tidak usah memasukkan kode ke edit HTML template tapi hanya perlu menambahkan gadget. Caranya seperti di bawah ini:

1.Masuk ke Design/rancangan > Tata Letak > Tambahkan Gadget
2.HTML/JavaScript dan masukkan kode di bawah ini:

<style>a.nav{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:5px;
display:inline-block;
text-align:center;
background: #eee;
color:#000;
width:90px;
padding:4px;
font: 13px Franklin Gothic Demi Cond;}
a.nav:hover{
color: #fff;
background:  #FECCBF;
-moz-box-shadow: inset 0 0 5px 5px #BFFEE3;
-webkit-box-shadow: inset 0 0 30px 30px #BFFEE3;
box-shadow: inset 0 0 30px 30px #BFFEE3;}</style>
<div style="background: #FE9980; border-bottom: 1px dotted #fff; border-top: 1px dotted #fff;"/><center>
<a class="nav" href="LINK">TITLE</a>
<a class="nav" href="LINK">TITLE</a>
<a class="nav" href="LINK">TITLE</a>
<a class="nav" href="LINK">TITLE</a>
</center></div>

3.Yang aku tandai warna pink itu adalah kode warnanya bisa diubah sendiri sesuai keinginan, LINK adalah link navigation yang harus dimasukkan dan TITLE diganti dengan nama navigation misalnya home, about me, dll. Dan mungkin ukuran px mau besar atau kecil juga bisa diubah sendiri, setelah itu tekan simpan.

Itulah cara membuat page navigation dengan cara mudah atau simple, dan kalau mouse anak panah menuju navigation ada hovernya yang cantik xD.

Post a Comment for "Membuat page navigation dengan cara mudah"