Navi *10
Annyeonghaseyo.Dirah sini.Dah lame ke tak buat tuto?Dah 120 posts yang dah dirah buat ! Belum campur dalam Offical Blog lagi!Kali nie nak bagi tuto ttg navi no.10 . HARAM POST.MINE.OWN MADE.CREDIT KALAU NAK RE-POST.JANGAN JADI BARBIE !
Template Designer : Paste dekat Html/Javascript.
Blogskins : Paste dekat bawah </style>
<style>
a.navoo, a.navoo2, a.navoo3, a.navoo4{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:8px;display:block;
text-align:center;background: #fff;
color:#fff;font-family:arial;
text-transform:uppercase;font-size:1px;
width:20px;height:15px;
border:5px solid #FFD685;padding:2px;
border-radius:1000px;}
a.navoo:hover, a.navoo2:hover, a.navoo3:hover, a.navoo4:hover{
color: #000;font-size:5px;
width:130px;height:15px;
a.navoo{border:5px solid #8533FF;}
a.navoo2{border:5px solid #FFAD33;}
a.navoo3{border:5px solid #85AD33;}
a.navoo4{border:5px solid #1975FF;}
a.navoo:hover{background: #8533FF;}
a.navoo2:hover{background: #FFAD33;}
a.navoo3:hover{background: #85AD33;}
a.navoo4:hover{background: #1975FF;}
</style><div style="left: 40px; position: fixed; top: 150px;">
<a class="navoo" href="http://www.blogger.com/LINK"><br>Tutorial</a>
<a class="navoo2" href="http://www.blogger.com/LINK"><br>Freebies</a>
<a class="navoo3" href="http://www.blogger.com/LINK"><br>Entry</a>
<a class="navoo4" href="http://www.blogger.com/LINK"><Br>Linkies</a></div>
Labels: navi, navigate, navigation, own made, tuto
Navi *9
Assalamualaikum.Baru siap buat bgskin.Dirah cepat-cepat buat tuto lak.K,yg nie cantik juga.Dirah cadangkan korang letak kat head atau kat atas blog tuh.Cantik sikit.Tapi kalo degil sangat nak letak kat sidebar,tak ape lah.Nanye tak cantik sebab yg nie ade shadow.Nanti kalo ltk kat sidebar mesti terlindung shadow nyer.Tak cantik lah.Dah lah malas nak cakap bebanyak.Credit to :
Kak Sya
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code <head> atau kalau nak letak kat sidebar ccari tempat yang sesuai.
Untuk yang guna kat head
.navy{
display: inline-block;
border-right:15px solid pink;
width:80px;
background:#eee;
padding:3px;
font-size:10px;
text-transform:uppercase;
margin:3px;
text-align:Center;
color:#888;
box-shadow: 0px 2px 5px #ddd;
text-decoration:none;
}
.navy:hover{
border-left:15px solid pink;
border-right:0px solid pink;
box-shadow: 0px 70px 5px #eee;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA">Home</a></div>
<a class="navy" href="URL/LINK ANDA">Affies</a></div>
<a class="navy" href="URL/LINK ANDA">Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA">Extra</a></div>
</center>
Untuk yang guna kat sidebar :
</style>
.navy{
display: inline-block;
border-right:15px solid pink;
width:80px;
background:#eee;
padding:3px;
font-size:10px;
text-transform:uppercase;
margin:3px;
text-align:Center;
color:#888;
box-shadow: 0px 2px 5px #ddd;
text-decoration:none;
}
.navy:hover{
border-left:15px solid pink;
border-right:0px solid pink;
box-shadow: 0px 70px 5px #eee;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA">Home</a></div>
<a class="navy" href="URL/LINK ANDA">Affies</a></div>
<a class="navy" href="URL/LINK ANDA">Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA">Extra</a></div>
</center>
Labels: navi, navigate, navigation, tuto
Navi *8
Annyeonghaseyo!Dirah sini!Tuto kali nie adalah tuto ttg navi *8 die bulat dan rotate 540 darjah.Credit : Kak Sya
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.
<style>
.navy{
display: inline-block;
border-radius:900px;
border:5px double #F5A9E1;
width:40px;
height:40px;
background:#F8E0F7;
padding:5px;
font-family:verdana;
font-size:10px;
text-decoration:none;
margin:3px;
text-align:Center;
}
.navy:hover{
background:#F781D8;
-moz-transition:1000ms;
-webkit-transition:1000ms;
border:5px dashed #fff;
-webkit-transform: scale( 1.0) rotate( 540deg);
-moz-transform: scale( 1.0) rotate( 540deg);
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA"><br>Home</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Affies</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Extra</a></div>
</center>
</div>
Labels: navi, navigate, navigation, tuto
Navi *7
Annyeonghaseyo!Dirah here!Tuto kedua pade ari ini.Navi no-7 ..credit :
Kak Sya .
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.
<style>
.navy{
display: inline-block;
border-radius:900px;
border:3px dotted #fff;
width:40px;
height:40px;
background:pink;
padding:5px;
font-family:verdana;
font-size:10px;
margin:3px;
text-align:Center;
text-decoration:none;
}
.navy:hover{
-moz-transition:1000ms;
-webkit-transition:1000ms;
border:5px dashed #ddd;
border-color:#fff;
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA"><br>Home</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Affies</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Extra</a></div>
</center>
</div>
Labels: navi, navigate, navigation, tuto
Navi *6
Annyeonghaseyo!Dirah sini nak ajar korang untuk tuto hari nie ! K,kalo nak tau camne tuto nie jer live preview kat bawah jap agi.Credit :
Kak Sya.
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.
<style>
.pcs{
border:1px solid #eee;
background:url(http://www.sadmuffin.net/cherrybam/graphics/graphics-girly/girly510.gif);
display: inline-block;
width: 60px;
padding:11px;
margin:2px;
color: #000;
font-size: 10px;
text-align: center;
font-family: trebuchet ms;
letter-spacing: 2px;
border-radius:6000px;
text-transform: uppercase;
text-decoration:none;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
.pcs:hover{
color:#fff;
text-shadow: 1px 1px 5px #FF0000;
width:120px;
background:url(http://www.sadmuffin.net/cherrybam/graphics/graphics-girly/girly510.gif");
}
</style>
<br />
<center>
<a class="pcs" href="URL/LINK ANDA">Home</a>
<a class="pcs" href="URL/LINK ANDA">About</a>
<a class="pcs" href="URL/LINK ANDA">Affies</a>
</center>
Labels: navi, navigate, navigation, tuto
Navi *5
Annyeonghaseyo ! Hoohhhhh (menguap) .. nak tdo dah nie...kali nie nak bgi tuto ttg navi no-5.Sile tkn live preview.Credit :
Kak Sya
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.
<style>
.naving{
border:1px solid #CEE3F6;
background:#81BEF7;
display: inline-block;
width: 50px;
padding:11px;
margin:2px;
color: #000;
font-size: 10px;
text-align: center;
font-family: trebuchet ms;
letter-spacing: 2px;
border-radius:6000px;
text-transform: uppercase;
text-decoration:none;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
.naving:hover{
box-shadow: inset 1px 21px 1px 2px #FFF;
color:#000;
background:#CEE3F6;
}
</style>
<br />
<center>
<a class="naving" href="URL/LINK ANDA">Home</a>
<a class="naving" href="URL/LINK ANDA">About</a>
<a class="naving" href="URL/LINK ANDA">Affies</a>
</center>
CREDIT : Kak Sya
Labels: navi, navigate, navigation, tuto
Navigation *4
Hari nie dirah x gi sek game jdi dirah nk bgi tuto navigation no.4 ! Yg nie floating to left.Tak paham ? Tgk gmbo , kalo x phm agi live preview jew.Oh ye,credit : kak fatin
Template Design/simple : paste kat Html/Javascript
Blogskin/Classic : paste bawah code </style>
<style>.tabs {margin-left:-20px;list-style: none; } #buttons {margin-top:25px;margin-left:22px;} .button {float:left;margin-right:2px;height:92px;width:51px;} #button1 {-moz-border-radius: 10px 0px 0px 10px;border-radius: 10px 0px 0px 10px;background-image:url(http://i.imgur.com/RvK6d.png);} #button2 {background-image:url(http://i.imgur.com/yBLUW.png);} #button3 {background-image:url(http://i.imgur.com/QjvPJ.png);} #button4 {-moz-border-radius: 0px 10px 10px 0px;border-radius: 0px 10px 10px 0px;background-image:url(http://i.imgur.com/cbVNR.png);}.nav {width:50px;padding-top:3px;padding-bottom:3px;margin-top:0px;font-size:8px;font-family:tinytots;letter-spacing:1px;text-align:center;opacity:0;overflow:hidden;color:#fffdfd;background:#7A92DC;4-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;} .button:hover .nav {opacity:0.8;margin-top:60px;} </style> <ul class="tabs"> <li><a href="LINK HERE"><div class="button" id="button1"> <div class="nav">TITLE</div></div></a></li><li><a href="LINK HERE"><div class="button" id="button2"><div class="nav">TITLE</div></div></a></li><li><a href="LINK HERE"><div class="button" id="button3"><div class="nav">TITLE</div></div></a></li><li><a href="LINK HERE"><div class="button" id="button4"><div class="nav">TITLE</div></div></a></li></ul></div>
- Paste kat sidiber korang k.
Labels: navi, navigate, navigation, tuto
Nav*3
Tutorial yang kali ni dirah dah tunjuk contoh gambar bawah ni, harap korang pahamlah >< .Kalau tak sila Live Preview !Kredit : Kak Fatin
- Template designer boleh paste di HTML/GADGET
- Blogskin ikut cara bawah ni
1. Cari code </style>
2. Copy code bawah ni
a.navi {
display:inline-block;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
padding:2px;
width:210px;
text-decoration:none;
font-family:calibri;
font-size:13px;
height:20px;
text-transform:uppercase;
color: #444;
background: #FED4EB;
text-align:center;
border: 1px #ffffff solid;
}
a.navi:hover {
color: #fff;
background:url(URL IMAGE);
background-position:50% 80%;
background-size:400px;
}
3. Paste di atas code </style>
4. Next, copy code bawah ni
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
5. Paste kat sideber korang .
puple : put image
hijau : color background
merah : Link Page
Oren : Tittle Navigation
Labels: navi, navigate, navigation, tuto
Navigate *2
Hi ! Kali nie dirah nk bgi tuto Navigate *2 .Maghrib-maghrib dirah buat tuto --' rjin sgt nk update nie : 7.23 P.M..Sorry,tadi dirah pergi tlg ibu jap..skrang dah pukul :7.32 P.M.Navi yg nie..die mcm biasa jugak cume bila kite hover jer tlisan akn membesar.Credit :
Kak Fatin
Blogskin/classic template :
1. Dashboard > Template
2. Tekan Ctrl + f serentak dan cari code </style>
3. Copy code di bawah ni
a.tablo{
margin-bottom:10px;
background:#fff;
width:45px;
text-decoration:none;
border:1px dotted #fff5f5;
border-radius:33px;
color:#555;
display:inline-block;
text-align:center;
}
4. Paste di atas code </style>
5. Then copy code ni pula
<center><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >NAVI1</a><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >NAVI2</a><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >NAVI3</a></center><br><div id="wnsb" style="padding:3px;border:1px dashed #fff5f5;border-radius:3px;background:#fff; width:200px;height:100px;<br><center>Navigate for home/around</center></div><div id="1" style="display: none;">Put what? Navigate for Navi 1</div><div id="2" style="display: none;">Put what? Navigate for Navi 2</div><div id="3" style="display: none;">Put what? Navigate for Navi 3</div></div></div></div></div>
6. Paste kat bahagian yg korang suka. elok di sideber je.
7. Preview & save.
Template designer :
1. Dashboard > Layout > Add Gadget > HTML/JavaScript
2. Copy code di bawah ni
<style>
a.tablo{
margin-bottom:10px;
background:#fff;
width:45px;
text-decoration:none;
border:1px dotted #fff5f5;
border-radius:33px;
color:#555;
display:inline-block;
text-align:center;
}
</style>
<center>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('1').innerHTML" >NAVI1</a>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('2').innerHTML" >NAVI2</a>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('3').innerHTML" >NAVI3</a>
</center>
<br>
<div id="wnsb" style="padding:3px;border:1px dashed #fff5f5;
border-radius:3px;background:#fff; width:200px;height:100px;
<br>
<center>
Navigate for home/around
</center>
</div>
<div id="1" style="display: none;">
Put what? Navigate for Navi 1
</div>
<div id="2" style="display: none;">
Put what? Navigate for Navi 2
</div>
<div id="3" style="display: none;">
Put what? Navigate for Navi 3
</div>
</div></div></div></div>
3. Paste dalam HTML/JavaScript
4. Save
oren : Tajuk navigate
merah : letak ape yg korg nk letak
Labels: navi, navigate, navigation, rajin, tuto
Tutorial : Navigate Hover { 1 }
Assalamualaikum .. Ari nie..dirah x gi sek game lgi..dah 3 hari brturut II ... nah ! Tutorial..ni navi dirah yg dulu dulu dulu dan dulu..nah..jangan lupe credit kak tiqah!.
HOME
ABOUT
STUFF
FOLLOW
DBOARD
{ preview }
1. Copy code ni
<style>
a.navi {
border:1px solid #ebebeb;
text-transform:uppercase;
background:#fff;
text-decoration:none;
color: #666; padding: 6px;
font: 8px yow;
margin-left: 5px; margin-right: 5px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
text-decoration:none;
box-shadow:inset 0px 0px 0px #111,
inset 0px 0px 0px #111; display: inline-block;
width: 65px;
}
a.navi:hover {
-webkit-transition-duration: 0.5s;
box-shadow:inset 0px 14px 0px #111,
inset 0px -14px 0px #111; color: #fff;
}
@font-face { font-family:yow !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<center>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
</center>
2. Paste dalam blog korang
3. Preview & save
Biru : warna background
Pink : link / url
Purple : title
Labels: navi, navigate, navigation, tuto
 Navi *10
Annyeonghaseyo.Dirah sini.Dah lame ke tak buat tuto?Dah 120 posts yang dah dirah buat ! Belum campur dalam Offical Blog lagi!Kali nie nak bagi tuto ttg navi no.10 . HARAM POST.MINE.OWN MADE.CREDIT KALAU NAK RE-POST.JANGAN JADI BARBIE !
Template Designer : Paste dekat Html/Javascript.
Blogskins : Paste dekat bawah </style>
<style>
a.navoo, a.navoo2, a.navoo3, a.navoo4{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:8px;display:block;
text-align:center;background: #fff;
color:#fff;font-family:arial;
text-transform:uppercase;font-size:1px;
width:20px;height:15px;
border:5px solid #FFD685;padding:2px;
border-radius:1000px;}
a.navoo:hover, a.navoo2:hover, a.navoo3:hover, a.navoo4:hover{
color: #000;font-size:5px;
width:130px;height:15px;
a.navoo{border:5px solid #8533FF;}
a.navoo2{border:5px solid #FFAD33;}
a.navoo3{border:5px solid #85AD33;}
a.navoo4{border:5px solid #1975FF;}
a.navoo:hover{background: #8533FF;}
a.navoo2:hover{background: #FFAD33;}
a.navoo3:hover{background: #85AD33;}
a.navoo4:hover{background: #1975FF;}
</style><div style="left: 40px; position: fixed; top: 150px;">
<a class="navoo" href="http://www.blogger.com/LINK"><br>Tutorial</a>
<a class="navoo2" href="http://www.blogger.com/LINK"><br>Freebies</a>
<a class="navoo3" href="http://www.blogger.com/LINK"><br>Entry</a>
<a class="navoo4" href="http://www.blogger.com/LINK"><Br>Linkies</a></div>
Labels: navi, navigate, navigation, own made, tuto Navi *9
Assalamualaikum.Baru siap buat bgskin.Dirah cepat-cepat buat tuto lak.K,yg nie cantik juga.Dirah cadangkan korang letak kat head atau kat atas blog tuh.Cantik sikit.Tapi kalo degil sangat nak letak kat sidebar,tak ape lah.Nanye tak cantik sebab yg nie ade shadow.Nanti kalo ltk kat sidebar mesti terlindung shadow nyer.Tak cantik lah.Dah lah malas nak cakap bebanyak.Credit to : Kak Sya
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code <head> atau kalau nak letak kat sidebar ccari tempat yang sesuai.
Untuk yang guna kat head
.navy{
display: inline-block;
border-right:15px solid pink;
width:80px;
background:#eee;
padding:3px;
font-size:10px;
text-transform:uppercase;
margin:3px;
text-align:Center;
color:#888;
box-shadow: 0px 2px 5px #ddd;
text-decoration:none;
}
.navy:hover{
border-left:15px solid pink;
border-right:0px solid pink;
box-shadow: 0px 70px 5px #eee;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA">Home</a></div>
<a class="navy" href="URL/LINK ANDA">Affies</a></div>
<a class="navy" href="URL/LINK ANDA">Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA">Extra</a></div>
</center>
Untuk yang guna kat sidebar :
</style>
.navy{
display: inline-block;
border-right:15px solid pink;
width:80px;
background:#eee;
padding:3px;
font-size:10px;
text-transform:uppercase;
margin:3px;
text-align:Center;
color:#888;
box-shadow: 0px 2px 5px #ddd;
text-decoration:none;
}
.navy:hover{
border-left:15px solid pink;
border-right:0px solid pink;
box-shadow: 0px 70px 5px #eee;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA">Home</a></div>
<a class="navy" href="URL/LINK ANDA">Affies</a></div>
<a class="navy" href="URL/LINK ANDA">Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA">Extra</a></div>
</center>
Labels: navi, navigate, navigation, tuto Navi *8
Annyeonghaseyo!Dirah sini!Tuto kali nie adalah tuto ttg navi *8 die bulat dan rotate 540 darjah.Credit : Kak Sya
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.
<style>
.navy{
display: inline-block;
border-radius:900px;
border:5px double #F5A9E1;
width:40px;
height:40px;
background:#F8E0F7;
padding:5px;
font-family:verdana;
font-size:10px;
text-decoration:none;
margin:3px;
text-align:Center;
}
.navy:hover{
background:#F781D8;
-moz-transition:1000ms;
-webkit-transition:1000ms;
border:5px dashed #fff;
-webkit-transform: scale( 1.0) rotate( 540deg);
-moz-transform: scale( 1.0) rotate( 540deg);
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA"><br>Home</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Affies</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Extra</a></div>
</center>
</div>
Labels: navi, navigate, navigation, tuto Navi *7
Annyeonghaseyo!Dirah here!Tuto kedua pade ari ini.Navi no-7 ..credit : Kak Sya .
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.
<style>
.navy{
display: inline-block;
border-radius:900px;
border:3px dotted #fff;
width:40px;
height:40px;
background:pink;
padding:5px;
font-family:verdana;
font-size:10px;
margin:3px;
text-align:Center;
text-decoration:none;
}
.navy:hover{
-moz-transition:1000ms;
-webkit-transition:1000ms;
border:5px dashed #ddd;
border-color:#fff;
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA"><br>Home</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Affies</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Extra</a></div>
</center>
</div>
Labels: navi, navigate, navigation, tuto Navi *6
Annyeonghaseyo!Dirah sini nak ajar korang untuk tuto hari nie ! K,kalo nak tau camne tuto nie jer live preview kat bawah jap agi.Credit : Kak Sya.
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.
<style>
.pcs{
border:1px solid #eee;
background:url(http://www.sadmuffin.net/cherrybam/graphics/graphics-girly/girly510.gif);
display: inline-block;
width: 60px;
padding:11px;
margin:2px;
color: #000;
font-size: 10px;
text-align: center;
font-family: trebuchet ms;
letter-spacing: 2px;
border-radius:6000px;
text-transform: uppercase;
text-decoration:none;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
.pcs:hover{
color:#fff;
text-shadow: 1px 1px 5px #FF0000;
width:120px;
background:url(http://www.sadmuffin.net/cherrybam/graphics/graphics-girly/girly510.gif");
}
</style>
<br />
<center>
<a class="pcs" href="URL/LINK ANDA">Home</a>
<a class="pcs" href="URL/LINK ANDA">About</a>
<a class="pcs" href="URL/LINK ANDA">Affies</a>
</center>
Labels: navi, navigate, navigation, tuto Navi *5
Annyeonghaseyo ! Hoohhhhh (menguap) .. nak tdo dah nie...kali nie nak bgi tuto ttg navi no-5.Sile tkn live preview.Credit : Kak Sya
Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript
Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.
<style>
.naving{
border:1px solid #CEE3F6;
background:#81BEF7;
display: inline-block;
width: 50px;
padding:11px;
margin:2px;
color: #000;
font-size: 10px;
text-align: center;
font-family: trebuchet ms;
letter-spacing: 2px;
border-radius:6000px;
text-transform: uppercase;
text-decoration:none;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
.naving:hover{
box-shadow: inset 1px 21px 1px 2px #FFF;
color:#000;
background:#CEE3F6;
}
</style>
<br />
<center>
<a class="naving" href="URL/LINK ANDA">Home</a>
<a class="naving" href="URL/LINK ANDA">About</a>
<a class="naving" href="URL/LINK ANDA">Affies</a>
</center>
CREDIT : Kak Sya
Labels: navi, navigate, navigation, tuto Navigation *4
Hari nie dirah x gi sek game jdi dirah nk bgi tuto navigation no.4 ! Yg nie floating to left.Tak paham ? Tgk gmbo , kalo x phm agi live preview jew.Oh ye,credit : kak fatin
Template Design/simple : paste kat Html/Javascript
Blogskin/Classic : paste bawah code </style>
<style>.tabs {margin-left:-20px;list-style: none; } #buttons {margin-top:25px;margin-left:22px;} .button {float:left;margin-right:2px;height:92px;width:51px;} #button1 {-moz-border-radius: 10px 0px 0px 10px;border-radius: 10px 0px 0px 10px;background-image:url(http://i.imgur.com/RvK6d.png);} #button2 {background-image:url(http://i.imgur.com/yBLUW.png);} #button3 {background-image:url(http://i.imgur.com/QjvPJ.png);} #button4 {-moz-border-radius: 0px 10px 10px 0px;border-radius: 0px 10px 10px 0px;background-image:url(http://i.imgur.com/cbVNR.png);}.nav {width:50px;padding-top:3px;padding-bottom:3px;margin-top:0px;font-size:8px;font-family:tinytots;letter-spacing:1px;text-align:center;opacity:0;overflow:hidden;color:#fffdfd;background:#7A92DC;4-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;} .button:hover .nav {opacity:0.8;margin-top:60px;} </style> <ul class="tabs"> <li><a href="LINK HERE"><div class="button" id="button1"> <div class="nav">TITLE</div></div></a></li><li><a href="LINK HERE"><div class="button" id="button2"><div class="nav">TITLE</div></div></a></li><li><a href="LINK HERE"><div class="button" id="button3"><div class="nav">TITLE</div></div></a></li><li><a href="LINK HERE"><div class="button" id="button4"><div class="nav">TITLE</div></div></a></li></ul></div>
- Paste kat sidiber korang k.
Labels: navi, navigate, navigation, tuto Nav*3
Tutorial yang kali ni dirah dah tunjuk contoh gambar bawah ni, harap korang pahamlah >< .Kalau tak sila Live Preview !Kredit : Kak Fatin
- Template designer boleh paste di HTML/GADGET
- Blogskin ikut cara bawah ni
1. Cari code </style>
2. Copy code bawah ni
a.navi {
display:inline-block;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
padding:2px;
width:210px;
text-decoration:none;
font-family:calibri;
font-size:13px;
height:20px;
text-transform:uppercase;
color: #444;
background: #FED4EB;
text-align:center;
border: 1px #ffffff solid;
}
a.navi:hover {
color: #fff;
background:url(URL IMAGE);
background-position:50% 80%;
background-size:400px;
}
3. Paste di atas code </style>
4. Next, copy code bawah ni
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
5. Paste kat sideber korang .
puple : put image
hijau : color background
merah : Link Page
Oren : Tittle Navigation
Labels: navi, navigate, navigation, tuto Navigate *2
Hi ! Kali nie dirah nk bgi tuto Navigate *2 .Maghrib-maghrib dirah buat tuto --' rjin sgt nk update nie : 7.23 P.M..Sorry,tadi dirah pergi tlg ibu jap..skrang dah pukul :7.32 P.M.Navi yg nie..die mcm biasa jugak cume bila kite hover jer tlisan akn membesar.Credit : Kak Fatin
Blogskin/classic template :
1. Dashboard > Template
2. Tekan Ctrl + f serentak dan cari code </style>
3. Copy code di bawah ni
a.tablo{
margin-bottom:10px;
background:#fff;
width:45px;
text-decoration:none;
border:1px dotted #fff5f5;
border-radius:33px;
color:#555;
display:inline-block;
text-align:center;
}
4. Paste di atas code </style>
5. Then copy code ni pula
<center><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >NAVI1</a><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >NAVI2</a><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >NAVI3</a></center><br><div id="wnsb" style="padding:3px;border:1px dashed #fff5f5;border-radius:3px;background:#fff; width:200px;height:100px;<br><center>Navigate for home/around</center></div><div id="1" style="display: none;">Put what? Navigate for Navi 1</div><div id="2" style="display: none;">Put what? Navigate for Navi 2</div><div id="3" style="display: none;">Put what? Navigate for Navi 3</div></div></div></div></div>
6. Paste kat bahagian yg korang suka. elok di sideber je.
7. Preview & save.
Template designer :
1. Dashboard > Layout > Add Gadget > HTML/JavaScript
2. Copy code di bawah ni
<style>
a.tablo{
margin-bottom:10px;
background:#fff;
width:45px;
text-decoration:none;
border:1px dotted #fff5f5;
border-radius:33px;
color:#555;
display:inline-block;
text-align:center;
}
</style>
<center>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('1').innerHTML" >NAVI1</a>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('2').innerHTML" >NAVI2</a>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('3').innerHTML" >NAVI3</a>
</center>
<br>
<div id="wnsb" style="padding:3px;border:1px dashed #fff5f5;
border-radius:3px;background:#fff; width:200px;height:100px;
<br>
<center>
Navigate for home/around
</center>
</div>
<div id="1" style="display: none;">
Put what? Navigate for Navi 1
</div>
<div id="2" style="display: none;">
Put what? Navigate for Navi 2
</div>
<div id="3" style="display: none;">
Put what? Navigate for Navi 3
</div>
</div></div></div></div>
3. Paste dalam HTML/JavaScript
4. Save
oren : Tajuk navigate
merah : letak ape yg korg nk letak
Labels: navi, navigate, navigation, rajin, tuto Tutorial : Navigate Hover { 1 }
Assalamualaikum .. Ari nie..dirah x gi sek game lgi..dah 3 hari brturut II ... nah ! Tutorial..ni navi dirah yg dulu dulu dulu dan dulu..nah..jangan lupe credit kak tiqah!.
HOME
ABOUT
STUFF
FOLLOW
DBOARD
{ preview }
1. Copy code ni
<style>
a.navi {
border:1px solid #ebebeb;
text-transform:uppercase;
background:#fff;
text-decoration:none;
color: #666; padding: 6px;
font: 8px yow;
margin-left: 5px; margin-right: 5px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
text-decoration:none;
box-shadow:inset 0px 0px 0px #111,
inset 0px 0px 0px #111; display: inline-block;
width: 65px;
}
a.navi:hover {
-webkit-transition-duration: 0.5s;
box-shadow:inset 0px 14px 0px #111,
inset 0px -14px 0px #111; color: #fff;
}
@font-face { font-family:yow !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<center>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
</center>
2. Paste dalam blog korang
3. Preview & save
Biru : warna background
Pink : link / url
Purple : title
Labels: navi, navigate, navigation, tuto
|
You can request here
.jpg)
