Home Owner Affies Stuffs Themes


February 23, 2014

Floating Navigation #1





Hadeuh...udah lama gak kasih tuto ya! Kasihnya freebieeeeees mulu. Heehe...
Now aku mau posting cara bikin navigation style...Ingat! kalau mau re-tuto harus credit selengkap-lengkapnya karena ini adalah my own coding. Kalau tidak, beruang cilik itu bisa menggigit kamu. Aum!
Tutorial:
  • Log In Blogger first.
  • Classic Template : Template->Paste di bawah </style>
  • Template Designer : Layout->Add a Gadget->HTML/Javascript
  • Copy Paste kode di bawah ini :
<style type="text/css">
.wtv{
width:80px;
padding:15px;
margin-top:15px;
box-shadow:4px 4px 8px #FF9D9D;
background:url('http://25.media.tumblr.com/5d628da23049314b7c347cbbd55b6755/tumblr_movcawwYsM1ru3nbdo2_250.png');
font-family:Happy Monkey;
font-size:12px
text-align:right;
Text-decoration:none;
color:#FF9B9B;
display:block;
-webkit-border-radius: 95px;
-webkit-border-top-left-radius: 35px;
-webkit-border-bottom-right-radius: 35px;
-moz-border-radius: 95px;
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomright: 35px;
border-radius: 95px;
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
-webkit-transition:All 0.9s ease;
-moz-transition:All 0.9s ease;
-o-transition:All 0.9s ease;
}
.wtv:hover{
width:88px;
border-right:10px solid #FF9B9B;
background:url('http://25.media.tumblr.com/33e27b4d7488bbdbf046dbf86065d773/tumblr_mzervoFOuI1ru3nbdo7_r2_100.png');
}
</style>
<br />
<div style="color: #aaaaaa; left: 0px; position: fixed; top: 100px; width: 100px;">
<a class="wtv"
onClick="document.getElementById('entry').innerHTML=document.getElementById('home').innerHTML">Entries</a>
<a class="wtv"
onClick="document.getElementById('entry').innerHTML=document.getElementById('owner').innerHTML">About</a>
<a class="wtv"
onClick="document.getElementById('entry').innerHTML=document.getElementById('stuff').innerHTML">Stuff</a>
<a class="wtv"
onClick="document.getElementById('entry').innerHTML=document.getElementById('linky').innerHTML">Linkies</a>
</div></br>
  • Biru: ID Page Kamu
  • Ungu: ID Entry Kamu
  • Bold: Judul Entry Kamu
  • Preview, Then Save :) 


Thanks For Reading..... Leave Your Comments ^_^



2 comments:

  1. Maksudnya id page itu id blognya?

    ReplyDelete
  2. Zebina : bukan hehehe.... tapi ID buat entry-entry yang utama *aduh jelasinnya rada susah -_-

    ReplyDelete

Just Comment Here! I'm not a Wolf...