. HOME . ABOUT . STUFF . FRIEND . RULES . 

Make a navigation at Blogskins or Desinger Template

Hai^^ Akukan lagi bosen nih,,bingung pengen nulis tutor apa,,yaudah deh nulis ini aja ..
BTW aku copas lho dari sini,,hehehehe..,,btw yang belum tau
navigation itu yg dibawah ini lhoo

Picture made : Choco Vanilla

kalau mau tau yuk,,langsung

Blogskins/classic template: pastekan di diatas code </style> 
Designer template: pastekan di diatas code  ]]></b:skin> 



a.navi{ display:inline-block; -webkit-transition:All 0.8s ease ; -moz-transition:All 0.84s ease ; -o-transition:All 0.8s ease ; padding:5px; width:70px; text-decoration:none; font-family:tahoma; font-size:10px; text-transform:uppercase; color: #fff; background: #693E07; text-align:center; cursor:vertical-text; opacity: 0.4; border-top-left-radius: 35px; border-top-right-radius: 35px; } a.navi:hover{ background: #ccc; letter-spacing: 3px; background-position:50% 30%; background-size:80px; letter-spacing:3px; color: #fff; border-bottom:0px; -webkit-transition:All 1.5s ease; -moz-transition:All 1.5s ease; -o-transition:All 1.5s ease; box-shadow:inset 0 50px 8px #fff; } a.navi1{ display:inline-block; -webkit-transition:All 0.8s ease ; -moz-transition:All 0.84s ease ; -o-transition:All 0.8s ease ; padding:5px; width:70px; text-decoration:none; font-family:tahoma; font-size:10px; text-transform:uppercase; color: #fff; background: #F9D2B3; text-align:center; cursor:vertical-text; opacity: 0.4; border-bottom-right-radius: 35px; border-bottom-left-radius: 35px; } a.navi1:hover{ background: #ccc; letter-spacing: 3px; background-position:50% 30%; background-size:80px; color: #fff; border-bottom:0px; -webkit-transition:All 1.5s ease; -moz-transition:All 1.5s ease; -o-transition:All 1.5s ease; box-shadow:inset 0 50px 8px #fff; }  
Blogskins: Pastekan dibawah code </style>
Designer template: Pastekan di HTML/Javascript.



<center>
<div style="margin-top:0px;width:929px;padding:10px;border-radius:0px 0px 0px 0px;border:2px solid #efefef;background-color:#fff;background-position:center;background-image: url(PUT YOUR URL BACKGROUND);">
<a class="navi" href="URL" title="">Home</a>&nbsp;
<a class="navi1" href="URL" title="">About</a>&nbsp; &nbsp;
<a class="navi" href="URL" title="">Links</a>&nbsp;
<a class="navi1" href="URL" title="">Stuff</a>&nbsp;
<a class="navi" href="http://www.blogger.com/follow-blog.g?blogID=YourBlog ID" title="">Follow</a>&nbsp;</div></center>
Yang warna Kuning-Kuning Orange : Itu untuk URL Titlenya
Yang warna Merah : Itu untuk ID Blogmu
Yang warna pink itu untuk URL Backgroundnya ,, bisa cari kog^^

Kalau mau nambah navigasi bisa tambah pake ini
<a class="navi1" href="URL" title="">OWN</a>&nbsp;
nah yang warna Kuning-Kuning Orange itu untuk URL Titlenya
yang warna Ungu Muda itu dibuat judulnya,,kayak misalnya contac me,freebies,dll...

Nah bisa nggak?
kalau jadi gimana hasilnya bagus nggak?

Semoga Bermanfaat 

Credit : Here


Tidak ada komentar:

Posting Komentar

Jika Belum paham , Jangan malu untuk bertanya^^