Tutorial : Navi Header. (Like Me)

by - 10:10 PTG


사랑해 | via Tumblr
Assalamualaikum :)
Dah lama sangat orang mengrequest tuto nie. Sorry sangat-sangat, baru sekarang dapat buat. Tak tahu nak bagi nama apa so arrien bubuh saja nama Navi Header. Navi sebab dye macam navigation, header sebab dye dekat atas macam header (?) LOL XD Basecode credit to : [Owner]

Template designer
1. Dashboard > Layout > Add a Gadget > HTML/JavaScriptAdd
2. Copy this code:
<style>
@font-face{
font-family:agentletouch;
src:url(http://static.tumblr.com/dep4vzc/GkJmxp429/a_gentle_touch.ttf);}
@font-face {
    font-family: Bebas Neue;
    src: url(http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf);
}
#title2 {
    font: normal 25px "Bebas Neue";
    text-shadow: 0 0 0px #111;
    color: #ccc;
    text-align:center;
    background: url(URL BACKGROUND);
    padding: 20px;
    background-position:50% 50%;
    border-bottom: 10px solid #fff;
    box-shadow: 0px 0px 10px #aaa;
    width: 97%;
    z-index: 9999!important;
    top: 0px;
    position: absolute;
    left: 0px;
}
</style>
<div id="title2">
<div style=" text-width: 600px;  color: #fff; font-family:agentletouch; font-size:50px;  text-align: center;text-shadow: 0 0 10px #000; ">
" YOUR BLOG NAME'S "
</div> <br />
<div class="title2"><div class="btd">
◉<a class="n" href="LINK">ABOUT</a>◉
<a class="n" href="LINK">ENTRY</a>◉
<a class="n" href="LINK">ASK.FM</a>◉
<a href="LINK">STUFF</a>◉
<a href="LINK">SKIN</a>◉
<a href="LINK">ARTWORK</a>◉
<div></div></div></div></div>
3. Paste and Save.

Classic Template / Blogskin 
1. Dashboard > Template > Edit Template HTML.
2. Use Ctrl+F and find code </style>
3. Copy this code :
<style>
@font-face {
    font-family: Bebas Neue;
    src: url(http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf);
}
#title2 {
    font: normal 25px "Bebas Neue";
    text-shadow: 0 0 10px #111;
    color: #fff;
    text-align:center;
    background: url(URL BACKGROUND);
    padding: 20px;
    background-position:50% 50%;
    border-bottom: 10px solid #fff;
    box-shadow: 0px 0px 10px #aaa;
    width: 97%;
    z-index: 9999!important;
    top: 0px;
    position: absolute;
    left: 0px;
}
</style>
<div id="title2"><center>
<div style=" text-width: 600px;  color: #fff; font-family:agentletouch; font-size:50px;  text-align: center;text-shadow: 0 0 10px #000; ">
" YOUR BLOG NAME'S "
</div> </center><br>

<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('o').innerHTML">home</span> ◉
<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('k').innerHTML">about</span> ◉
<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('p').innerHTML">linkies</span> ◉
<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('s').innerHTML">tutorial</span> ◉
<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('u').innerHTML">free page</span> ◉
</div>
4. Paste bawah code yang dicari tadi.
5. Preview & save!.

Note:
Red : Url background
Blue : Your Blog name's
Purple (template designer) : Your page link's
Orange : Pastikan ianya sama dengan anda punya key code untuk post.
Purple (blogskin) : Pastikan sama dengan anda punya keycode untuk page tersebut.

P/s : sorry, untuk blogskin arrien tak tahu nak terang macam mana dekat bahagian Note tu.. so korang try-try lah yea.. try and error oke? ;D Good luck ^_-


You May Also Like

4 Comments