Assalamualaikum.

Tutorial ni di request oleh unknown dekat cbox. Memandangkan dia tak tinggal link blog dia maka aku panggil anon. Jangan marah k. Hahaha. Original code by this PAGE. Aku cuma edit sikit mengikut citarasa aku sendiri, and special thanks to Wanaseoby sebab share link dengan den.

Untuk live preview maaf tiada. Tapi buat masa terdekat boleh tengok macam mana navigation dekat blog wana dan blog den berfungi macam tu lah live preview nya.


1. Layout > Add a Gadget > HTML/Javascript  (Gadget bawah header recommended)


2. Paste code berikut.

<style>
#sebelum {
padding:10px;
}

#selepas {
width:100%;
background:#eee;
display:none;
position:fixed;
top:0;
left:0;
z-index:999;
opacity:1;
padding:0px;
text-align:center;
}
.navisatu a {
padding:5px;
border:1px solid #eee;
background:#fff;
text-decoration:none;
color:#777;
margin:5px;
letter-spacing:1px;
font-family: 'Pontano Sans', sans-serif;
font-size:11px;
color:black;
text-align:center;
}

.navidua a {
padding:7px;
background:#eee;
text-decoration:none;
color:#777;
margin:5px;
letter-spacing:2px;
text-transform:uppercase;
font-family: 'Pontano Sans', sans-serif;
font-size:14px;
color:black;
text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<center><div id="sebelum">
<div class="navisatu">
<a href="">NAVIGATION 1</a>
<a href="">NAVIGATION 2</a>
<a href="">NAVIGATION 3</a>
<a href="">NAVIGATION 4</a>
</div></div></center>

<div id="selepas"><div class="navidua">
<a href="">NAVIGATION 1</a>
<a href="">NAVIGATION 2</a>
<a href="">NAVIGATION 3</a>
<a href="">NAVIGATION 4</a>
</div></div>

<script>
    $(document).ready(function() {
        var headerTop = $('#sebelum').offset().top;
        var headerBottom = headerTop + 10; // Sub-menu should appear after this distance from top.
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
            if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom
                if (($("#selepas").is(":visible") === false)) {
                    $('#selepas').fadeIn('fast');
                }
            } else {
                if ($("#selepas").is(":visible")) {
                    $('#selepas').hide();
                }
            }
        });
    });
</script>

3. Edit mana yang patut. Kemudian save dan selesai.


Aku dah cuba simplified kan coding tu dengan guna istilah yang lebih mudah. Nah serba sedikit penjelasan bagi istilah aku guna ;

Sebelum : Bila buka blog korang . Dia berada di kedudukan asal / original
Selepas : Bila scroll blog ke bawah dia akan lekat pada top blog.
Navisatu : Untuk navi dikedudukan asal
Navidua : Untuk navi bila dia dah lekat dekat atas.

Okay kalau tak paham tanya, and sorry agak berterabur sebab dah lama tak bagi tutorial. Bye.

Tutorial : Navigation Style #12

Assalamualaikum.

Lama dah tak dapat request finally *shed tears* hahaha. Terima kasih sebab request. Atas sebab request anda , berupadate jugak lah blog ni. Navigation kali ni jenis lekat atas tu. Kekalnya ia disitu tidak kira sejauh mana korang scroll blog hingga kebawah sekali pon. Ok lupakan.

LIVE PREVIEW

Code ;

<style>
.navigation a {
font:13pt cambria;
text-decoration:none;
letter-spacing:2.5px;
text-transform:uppercase;
color:black;
padding:0px 30px 0px 30px;
text-shadow:4px 0px transparent, -4px -0px transparent;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-ms-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}
.navigation a:hover {
text-shadow:0px 0px #888, -0px 0px #888;
}

</style>
<br />
<div style="left: 0px; padding: 0px; position: fixed; text-align: center; top: 0px; width: 100%; z-index: 999;">
<div class="navigation" style="background:url(http://i.imgur.com/Y2IYZl4.png); border: 1px solid #eee; margin: 0 auto; padding: 15px 0px 20px 0px; width: 1040px;">
<a href="LINK">LINK1</a>
<a href="LINK">LINK2</a>
<a href="LINK">LINK3</a>
<a href="LINK">LINK4</a>
<a href="LINK">LINK5</a>
</div>
</div>

Copy and Paste code diatas di ;

Dashboard > Layout > Add a Gadget > HTML/JavaScript > Save.


Macam biasa, mana code yang di-bold-kan sila ubah mengikut kesusaian blog korang. Sekian.



edited
"for those yang navigation ni bertindih dengan header korang. Sila ke Template >
Edit HTML dan cari code ni body { , dah jumpa sila tambah code : margin-top:110px; bawah code yang dicari tadi. yang warna biru tu, ubah ikut citarasa korang okay"


Bye. o/

Tutorial : Navigation #11

assalamualaikum.

dapat request ni lama dah . maaf buat tertunggu . navigation yang dia maksudkan tu macam yang den pakai before template sekarang . actually den adaptasi dari code tutorial yang ini ; http://hafizzulkafly.blogspot.com/2013/07/tutorial-navigation-with-hover-7.html . bila dah adaptasi maka jadinya begini ;

BETTER PREVIEW

tutorial ni untuk pengguna template designer , simple template sahaja . yang lain den taktau jadi ke tidak . okay so nah amek codenya , paste dekat Layout > Add a gadget > HTML/JavaScript ;

<style>
.navig a{
display:inline-block;
width:80px;
background:;
padding:8px 7px 7px 7px;
color:#fff;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font:12px georgia;
font-style:italic;
text-decoration:none;
text-transform:lowercase;
letter-spacing:1.5px;
margin:3px 5px 1px 5px;
border:1px solid #fff;
border-left:none;
border-right:none;
}
</style>
<div style="width:890px; background:; text-align:center; padding:0px 5px 5px 5px; margin-left:-30px; margin-top:-90px; color:#fff;"><div class="navig">
● <a href="" title="">dashboard</a> ●
<a href="" title="">tutorial </a> ●
<a href="" title="">affiliates</a> ●
<a href="" title="">instagram</a> ●
<a href="" title="">vscogrid</a> ●
<a href="" title="">refresh</a> ●
</div></div>

ohh ya , sebelum terlupa , make sure paste dekat ruangan HTML bawah header macam yang den tunjuk dekat gambar bawah ni . kalau tidak tak jadi ;

Save and Siap . Mana mana code yang den bold-kan , make sure ubah ikut kesusaian blog korang . sebab yang den bagi tu width den punya blog . anything nak tanya tak paham , jangan segan nak tanya . boleh shout dekat ask.fm atau tinggal komen dekat ruangan komen . maaf , lama dah tak update tutor . sumpah awkward . kbai .

Tutorial : Navigation #10

Assalamualaikum.

Yeah finally . Navigation dah siri ke-10 . lol . Okay dapat request dari ask.fm , tapi sorry tak publish soalan dia dekat ask.fm atas sebab sebab tertentu . Macam mana navigation kali ni ? Navigation kali ni sangat sesuai bagi blog yang tak ber-header . Macam ni navigation-nya ;

LIVE PREVIEW

Macam tu . Dia lekat dekat atas tu . Code dia sedikit berterabur . So deal with it . HAHA .


1. Copy and Paste code bawah ni dekat Layout > Add A Gadget > HTML & JavaScript.

<style>
.btd a{
display:inline-block;
width:130px;
text-align:center;
text-transform:none;
font:12px georgia;
text-transform:lowercase;
text-decoration:none;
font-style:italic;
color:#111;
opacity:0.9;
margin:2px;
padding:5px;
letter-spacing:2px;
text-shadow:4px 0px transparent, -4px -0px transparent;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-ms-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}
.btd a:hover {
text-shadow:0px 0px #000, -0px 0px #000;
}
.howon {
position:fixed;
left:0px;
top:0px;
width:100%;
background:url(http://i.imgur.com/liHPRB9.jpg);
padding:20px 10px 20px 80px;
border-bottom:6px solid #fff;
margin-bottom:10px;
box-shadow:1px 1px 1px #aaa;
z-index:999;
}
.satu {
margin-left:120px;
margin-top:48px;
background:white;
width:760px;
opacity:0.85;
border-radius:0px 15px 15px 0px;
}
</style>
<div class="howon">
<img src="http://i.imgur.com/jOtEyMH.jpg" style="width:110px; float:left; border:8px solid #fff; border-radius:100px; z-index:999;" />
<div class="satu"><div class="btd">
<a href="LINK HERE">Title1</a>
<a href="LINK HERE">Title2</a>
<a href="LINK HERE">Title3</a>
<a href="LINK HERE">Title4</a>
<a href="LINK HERE">Title5</a>
</div></div></div>

2. Save. Kemudian pergi ke Template > Edit HTML . Cari code ni ; .content-outer { jumpa code tu , paste kan code bawah ni dekat bawah code yang korang cari tadi .

margin-top:110px;

3. Save and Siap .

Mana mana code yang apis bold-kan tu , korang boleh adjust sendiri mengikut kesesuaian korang punya blog . Take it with a proper credit . Tak paham tanya . Menjadi pon bagitau . Kbai.


adios.

Tutorial : Navigation With Hover #9

Assalamualaikum & Salam Sejahtera

Selamat malam . Malam ni nak bagi navigation with hover versi ke-9 . Feel free kalau nak guna . Cuma , before guna , wajib komen terlebih dahulu . Kredit ? Terpulang . Mana mana code yang di-bold-kan boleh ubah ikut citarasa korang tersendiri . Live preview bawah ni . TQ 

LIVE PREVIEW

Template Designer > Layout > Add a Gadget > HTML/JavaScript

Classic Template > Template

<style>
@font-face {
font-family:"bebas";
src: url('http://static.tumblr.com/q29fumh/UiBmzjw3n/oldsansblack.ttf');
}
.navig a{
font:15pt bebas;
text-decoration:none;
margin:0px 2px 0px 2px;
text-align:center;
text-transform:uppercase;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.navig a:hover{
color:white!important;
}
</style>
<br />
<div class="navig" style="text-align: center;">
<a href="LINK" style="border-bottom: 4px solid #fe9797; color: #fe9797;">Tutorial</a>
<a href="LINK" style="border-bottom: 4px solid #fe97d9; color: #fe97d9;">Affiliates</a>
<a href="LINK" style="border-bottom: 4px solid #e797fe; color: #e797fe;">Twitter</a>
<a href="LINK" style="border-bottom: 4px solid #9a97fe; color: #9a97fe;">Tumblr</a>
<a href="LINK" style="border-bottom: 4px solid #97feb4; color: #97feb4;">Instagram</a>
<a href="LINK" style="border-bottom: 4px solid #f6fe97; color: #f6fe97;">Refresh</a>
</div>

Preview kemudian Save.

Adios.

Tutorial : Floating Navigation #3

Assalamualaikum & Salam Sejahtera

Dah kehabisan idea nak bagi tutorial apa lagi . Haritu ada cuba godek godek code floating navigation ,  akhirnya , berjaya buat satu floating navigation yang agak pelik sikit rupa nya. HAHA . Meh sini tengok macam mana rupanya ;

LIVE PREVIEW HERE

Haaa , itu macam navigation-nya . Pelik kan rupanya ? Tapi tak kisah lahh . Hehe , sebelum amek sila komen terlebih dahulu ya . Credit ? Terpulang . TQ

code ;

<style>
.alone a{
display:inline-block;
width:45px;
margin:5px;
text-align:center;
color:#fff;
font:9px corbel;
letter-spacing:0px;
text-transform:uppercase;
padding:55px 5px 0px 5px;
height:0px;
font-weight:bold;
overflow:hidden;
border-radius:1000px;
text-decoration:none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.alone a:hover {
padding:20px 5px 10px 5px;
height:25px;
}
</style>
<center>
<div style="position:fixed; top:200px; left:30px;">
<div class="alone">
<a href="PASTE YOUR LINK HERE" style="background:#efa784; position:fixed; margin-left:-10px;">About</a><br><br>
<a href="PASTE YOUR LINK HERE" style="background:#ef848c; position:fixed; margin-left:40px;">Tutorial</a><br><br>
<a href="PASTE YOUR LINK HERE" style="background:#ef84c8; position:fixed; margin-left:-10px;">Affiliate</a><br><br>
<a href="PASTE YOUR LINK HERE" style="background:#cd84ef; position:fixed; margin-left:40px;">Facebook</a><br><br>
<a href="PASTE YOUR LINK HERE" style="background:#a17de2; position:fixed; margin-left:-10px;">Twitter</a><br><br>
<a href="http://www.blogger.com/follow-blog.g?blogID=$blogID$" target="_blank" rel="nofollow" style="background:#8784ef; position:fixed; margin-left:40px;">+Follow</a>
</div>
</center>

Tutorial : Navigation With Hover #8

Assalamualaikum & Salam Sejahtera

Yoo selamat petang . Hari ni nak share dengan korang  satu lagi tutorial navigation yang baru sekejap tadi buat . Biasa biasa je navigation kali ni. tak gempak macam yang lain punya . Sebab aku ni memang tak creative . So tak pandai nak buat gempak gempak punya . HEHE . Meh intai dulu macam mana rupa navigation baru ni ;

LIVE PREVIEW

Haa . itu macam lah navigation baru yang aku buat . Berminat nak pakai ? Nah codenya ;

a) Template Designer > Layout > Add A Gadget > HTML / JavaScript
b) Classic Template > Template .

<style>
.alone a{
display:inline-block;
width:60px;
margin:2px;
text-align:center;
color:#fff;
font:9px consolas;
letter-spacing:1px;
text-transform:uppercase;
font-weight:bold;
padding:10px 5px 0px 5px;
height:0px;
overflow:hidden;
text-decoration:none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.alone a:hover {
padding:1px 5px 10px 5px;
height:0px;
}
</style>
<center>
<div class="alone">
<a href="PASTE YOUR LINK HERE" style="background:#efa784;">About</a>
<a href="PASTE YOUR LINK HERE" style="background:#ef848c;">Tutorial</a>
<a href="PASTE YOUR LINK HERE" style="background:#ef84c8;">Affiliate</a>
<a href="PASTE YOUR LINK HERE" style="background:#cd84ef;">Facebook</a>
<a href="PASTE YOUR LINK HERE" style="background:#a17de2;">Twitter</a>
<a href="PASTE YOUR LINK HERE" style="background:#8784ef;">Blogskins</a>
<a href="PASTE YOUR LINK HERE" style="background:#84b9ef;">Tumblr</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=$blogID$" target="_blank" rel="nofollow" style="background:#84efc0;">+Follow</a>
</div>
</center>

Mana mana yang patut atau korang rasa nak ubah , sila lah ubah ye . Btw kalau nak guna , wajib komen dahulu ye . Kemudian pada mana mana yang tak paham atau tutor ni tak menjadi sila inform. Okay ? Kbai o/

Tutorial : Mini Navigation

Assalamualaikum & Salam Sejahtera

Hai korang . Hari ni nak bagi tutorial mini navigation yang mungkin sesuai untuk korang letak dekat sidebar korang (mungkin) sebab size navigation ni tak besar atau panjang mana . Dah nama pon mini kan . HAHA . Macam mana preview dia boleh tengok bawah ni ;

BETTER PREVIEW HERE

Okay macam tu ya mini navigationnya . Taktau lah sesuai tidak untuk letak dekat sidebar . Haha . ni codenya ;

1. Dashboard > Template > Edit HTML .  Copy code bawah ni . Paste dekat BAWAH code <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

2. Save . Copy and Paste code dibawah ni dekat Layout > Add a Gadget > HTML / JavaScript (Bagi pengguna Template Designer) . Untuk Pengguna Classic Template boleh paste dekat Template > Edit HTML .

<style>
.mini a{
display:inline-block;
width:15px;
background:#fff;
text-align:center;
color:#fe9a9a;
font:15px arial;
padding:3px 5px 5px 5px;
margin:5px 1px 5px 1px;
border-radius:100px;
text-decoration:none;
border:4px double #fe9a9a;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.mini a:hover {
border:4px double #fff;
background:#fc5d70;
color:white;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
#s-m-t-tooltip {
background:#fdabab;
font:9px cambria;
letter-spacing:1px;
text-transform:uppercase;
font-weight:bold;
color: #fff;
border-radius:3px;
text-align: center;
padding: 5px 10px 5px 10px;
display: block;
margin: 20px 14px 7px 12px;
}
</style>
<div class="mini">
<center>
<a href="PASTE YOUR LINK HERE" title="About">★</a>
<a href="PASTE YOUR LINK HERE" title="Tutorial">★</a>
<a href="PASTE YOUR LINK HERE" title="Facebook">★</a>
<a href="PASTE YOUR LINK HERE" title="Twitter">★</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=$blogID$" target="_blank" rel="nofollow" title="Follow">★</a>
</center>
</div>

3. Tukar mana yang patut . Kemudian save and preview .

Kalau ada apa apa error , sila lah bagitahu ye . Kalau tak paham apa apa pon , boleh tanya . Mana yang boleh tolong , aku akan tolong . Okay ? Kbai o/

Tutorial : Navigation With Hover #7

Assalamualaikum & Salam Sejahtera

Hai semua , LOL . Kali ni nak bagi satu lagi tutorial navigation . Biasa je navigation ni . Lebih kurang yang macam aku pakai . Tapi dah ubah sikit bagi ada hover. Sesuai untuk semua template . Navigation ni letak bawah header cun . Hehehe , meh sini tengok preview-nya ;

LIVE PREVIEW

Okay , macam itu navigation kali ni . Nak pakai sila komen dahulu ya . Credit terpulang . Tq ;


Template Designer ; Dashboard > Layout > Add a Gadget > HTML & JavaScript

Classic Template ; Dashboard > Template > Edit HTML

<style>
.abc a {
background:#fff;
color:black;
font:9px cambria;
margin:4px;
text-decoration :none;
display:inline-block;
width:90px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.abc a:hover {
opacity:0;
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
}
</style>
<center>
<div style="background:#000; width:730px; text-align:center;padding-bottom:2px;padding-top:0px;">
<div class="abc">
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
</div></div>
</center>

P/S ; Mana mana yang di bold kan tu , korang boleh ubah ikut citarasa korang .

Tutorial : Navigation With Hover #6

Assalamualaikum & Salam Sejahtera
Hari ni , nak bagi tutorial navigation with hover untuk versi ke-6. actually takde special features pon dekat navigation ni , tapi sesaja nak bagi tutorial ni bagi mengelakkan blog ni berhabuk tanpa sebarang update .

LIVE PREVIEW HERE

Template Designer ; Dashboard > Layout > Add a Gadget > HTML & JavaScript

Classic Template ; Dashboard > Template > Edit HTML

<style>
.nav a{
background:#eee;
display:inline-block;
width:105px;
font:10px trebuchet ms;
margin:5px;
border:1px solid #e6e6e6;
text-align:center;
color:#858585;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.nav a:hover {
border-radius:10px;
box-shadow: inset 60px 8px 0px 0px #000, inset -60px -8px 0px 0px #000;
color:#fff;
}
</style>

<div class="nav">
<div style="text-align: center;">
<a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">LINK</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a>
</div>
</div>

Save and Siap .

p/s : Mana mana yang boleh diubah , boleh la korang ubah mengikut citarasa korang ye . kbai o/

Tutorial : Floating Navigation 2

Assalamualaikum & Salam Sejahtera
Hai , hari ni nak share tutorial Floating Navigation Versi 2 . Kalau nak tengok yang versi 1 macam mana , boleh klik dekat sini . This second version macam pelik sikit kot , sebab dah kehabisan idea . Taktau nak buat macam mana . Meh tengok screencap sikit .

LIVE PREVIEW HERE

Macam mana nak pakai ?

Template Designer : Dashboard > Layout > Add a Gadget > HTML & JavaScript

Classic Template : Dashboard > Edit HTML > Paste dekat mana mana yang korang suka .

<style>
a:link, a:visited {
text-decoration:none;
color:white;
}
.go {
display:inline-block;
background:black;
color:white;
width:10px;
height:250px;
text-align:center;
font:8px tt;
text-transform:uppercase;
padding:5px 5px 5px 5px;
border-radius:4px;
box-shadow:2px 2px 2px #000;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.go:hover {
height:100px;
padding:220px 5px 5px 5px;
}
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
@font-face{
font-family:bb;
src:url('http://static.tumblr.com/q29fumh/Of1mmbed0/blackout-midnight_2.ttf')
}
</style>
<br />
<div style="background: #000; color: white; display: inline-block; font: 15pt bb; height: 25px; left: 10px; letter-spacing: 9px; padding: 5px 5px 0px 10px; position: fixed; text-align: center; top: 0px; width: 210px; z-index: 999;">
NAVIGATION
</div>
<div style="left: 34px; position: fixed; top: -150px;">
<div class="go">
<a href="LINK HERE">H<br />o<br />m<br />e</a> </div>
</div>
<div style="left: 64px; position: fixed; top: -120px;">
<div class="go">
<a href="LINK HERE">T<br />u<br />t<br />o<br />r<br />i<br />a<br />l</a></div>
</div>
<div style="left: 94px; position: fixed; top: -140px;">
<div class="go">
<a href="LINK HERE">A<br />f<br />f<br />i<br />e<br />s</a></div>
</div>
<div style="left: 124px; position: fixed; top: -160px;">
<div class="go">
<a href="LINK HERE">o<br />t<br />h<br />e<br />r<br />s</a></div>
</div>
<div style="left: 154px; position: fixed; top: -110px;">
<div class="go">
<a href="LINK HERE">T<br />w<br />i<br />t<br />t<br />e<br />r</a></div>
</div>
<div style="left: 184px; position: fixed; top: -130px;">
<div class="go">
<a href="LINK HERE">T<br />u<br />m<br />b<br />l<br />r</a> </div>
</div>

Mana mana code yang korang rasa nak ubah , sila ubah . Nak guna bagitau . Credit ? Terpulang :D kbai o/

Tutorial : Navigation With Hover #5

Assalamualaikum & Salam Sejahtera
Okay lama dah tak dapat request tutorial . then someone dah request dekat aku punya ASK.FM . kebetulan tengah buka ask.fm. so aku terus buat tutor yang dia request . tapi ape yang dia request ?

Okay maksud dia mungkin Navigation yang aku pakai sekarang ni , yang macam korang tengah tengok dekat sidebar tu . tak pun tengok bawah ni ;

BETTER PREVIEW

Ha macam tu yang dia request . okay apa tunggu lagi . jom mula :D

Template Designer > Layout > Add a Gadget > HTML / JavaScript 

<style>
@font-face{
font-family:franchise;
src:url('http://static.tumblr.com/q29fumh/dcSmlhwc5/franchise-bold-hinted.ttf')
}
@font-face{
font-family:bebas;
src:url('http://static.tumblr.com/q29fumh/i3xmldrl4/bebasneue.otf')
}
.nav {
font-family:franchise;
font-size:18px;
text-align:left;
color:#666;
letter-spacing:2px;
text-decoration:none;
margin:1px;
padding-left:5px;
border-left:0px solid #232323;
text-tansform:lowercase;
webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.nav:hover {
font-family:franchise;
font-size:18px;
text-align:left;
color:#666;
letter-spacing:2px;
text-decoration:none;
margin:1px;
text-tansform:lowercase;
padding-left:5px;
border-left:20px solid #232323;
}
</style>

<div style="font:18px bebas;text-transform:uppercase;">
a) <a class="nav" href="URL">TITLE</a><br />
b) <a class="nav" href="URL">TITLE</a><br />
c) <a class="nav" href="URL">TITLE</a><br />
d) <a class="nav" href="URL">TITLE</a><br />
</div>

Save .


Classic Template > Template > Edit HTML > Paste atas </style>

@font-face{
font-family:franchise;
src:url('http://static.tumblr.com/q29fumh/dcSmlhwc5/franchise-bold-hinted.ttf')
}
@font-face{
font-family:bebas;
src:url('http://static.tumblr.com/q29fumh/i3xmldrl4/bebasneue.otf')
}
.nav {
font-family:franchise;
font-size:18px;
text-align:left;
color:#666;
letter-spacing:2px;
text-decoration:none;
margin:1px;
padding-left:5px;
border-left:0px solid #232323;
text-tansform:lowercase;
webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.nav:hover {
font-family:franchise;
font-size:18px;
text-align:left;
color:#666;
letter-spacing:2px;
text-decoration:none;
margin:1px;
text-tansform:lowercase;
padding-left:5px;
border-left:20px solid #232323;
}

Kemudian Paste code bawah ni dekat bahagian yang sepatutnya .

<div style="font:18px bebas;text-transform:uppercase;">
a) <a class="nav" href="URL">TITLE</a><br />
b) <a class="nav" href="URL">TITLE</a><br />
c) <a class="nav" href="URL">TITLE</a><br />
d) <a class="nav" href="URL">TITLE</a><br />
</div>

Save .

Siap . macam biasa mana mana yang boleh di ubah macam code warna , title , url and etc , ubah lah . ubah mengikut citarasa korang . kalau tak paham atau tak jadi , sila tanya . oh ya , before nak amek tu wajib komen and bagitau ye . credit ? terpulang . kbai o/

Tutorial : Floating Navigation #1

Assalamualaikum & Salam Sejahtera

Okay hari ni nak bagi satu tutorial yang memang aku tak pernah bagi sebelum sebelum ni . first sekali nak ucap terima kasih kepada Wana untuk inspiration this tutor . dia punya floating navigation sangat awesome . tak percaya boleh lawat blog dia . okay , aku buat yang version simple punya . macam mana ? meh tengok gambar dekat bawah ;

Better Preview Here

Amacam , berminat nak buat macam tu dekat blog korang ? meh nak ajar kan :D


For Template Designer : Layout > Add a Gadget > HTML & JavaScript .

For Classic Template : Edit HTML

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.go {
background:black;
text-align:center;
font-family:tt;
font-size:8px;
text-transform:uppercase;
letter-spacing:1px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
margin:2px;
border-left:0px solid #666;
box-shadow:1px 1px 0px #aaa;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.go:hover {
border-left:15px solid #666;
}
.ga {
color:white;
font-family:tt;
font-size:16px;
text-align:center;
display:inline-block;
width:100px;
background:black;
padding:5px;
margin-bottom:2px;
}

</style>

<div style="display:inline-block;background:#000;width:12px;height:280px;position:fixed;top:0px;left:10px;box-shadow:1px 1px 0px #aaa;"></div>
<div style="position:fixed;top:100px;left:20px;">
<div class="ga">Navigation</div><br>
<div class="go" style="display:inline-block; width:55px;"> <a href="LINK">Home</a> </div><br>
<div class="go" style="display:inline-block; width:70px;"> <a href="LINK">TutoBies</a> </div><br>
<div class="go" style="display:inline-block; width:100px;"> <a href="LINK">Link Exchange</a> </div><br>
<div class="go" style="display:inline-block; width:80px;"> <a href="LINK">Fanfiction</a> </div><br>
<div class="go" style="display:inline-block; width:60px;"> <a href="LINK">Twitter</a> </div><br>
<div class="go" style="display:inline-block; width:50px;"> <a href="LINK">Tumblr</a> </div></div>

mana mana bahagian berkenaan korang nak edit , boleh je edit . ikut korang punya citarasa . okay ? kalau nak pakai sila beritahu , kalau nak pakai dekat mana mana skin untuk di freebies or nak re-tutor , WAJIB credit and bagitau dulu . kalau nak pakai dekat blog korang , just komen dekat entry ni sahaja , tak perlu credit :D kbai o/

Tutorial : Flip Hover Navigation

Assalamualaikum & Salam Sejahtera

Salam jumaat semua . hari ni , nak update blog dengan tutorial yang aku sendiri lupa apis amek codenya dekat mana . sebab masa tu pakcik google banyak tolong . kemudian ada yang request this tutor , so nak taknak , kena buat juga . :)

Dashboard
TutoBies
Affiliate
Ask Me
Refresh

LIVE PREVIEW

For Template designer user . Pergi dekat Layout , kemudian Add A Gadget and paste code dibawah ni .

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.abc {
display:inline-block;
padding-top:2px;
width:90px;
font-family:tt;
font-size:8px;
text-transform:uppercase;
text-align:center;
color:#666;
background:#fff;
margin:2px;
border:1px solid #ccc5bc;
-webkit-transition:700ms;
-moz-transition:700ms;}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 145px;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f1_card {
  width:145px;
 height:145px;
 border-radius:300px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  padding-top:33px;
  padding-right:5px;
  padding-bottom:5px;
  padding-left:5px;
  color: black;
  text-align: center;
  border:1px dashed #aaa;
  background-color: #fffaaa;
  border-radius:300px;
  font-family:tt;
  font-size:8px;
}
</style>
<div id="f1_container" class="hover">
  <div id="f1_card" class="shadow">
    <div class="front face">
      <img src="URL GAMBAR" width="140" style="background:white; border:1px dashed #aaa; border-radius:100px;padding:4px;"/>
    </div>
    <div class="back face center">
<center><a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG">TITLE </a><br />
<a class="abc" href="URL KORANG">TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE </a></center><br />
    </div>
    </div>
</div>

Edit mana yang nak di edit di SINI . kemudian save .


Untuk Classic Template , Copy code bawah ni , paste atas </style>

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.abc {
display:inline-block;
padding-top:2px;
width:90px;
font-family:tt;
font-size:8px;
text-transform:uppercase;
text-align:center;
color:#666;
background:#fff;
margin:2px;
border:1px solid #ccc5bc;
-webkit-transition:700ms;
-moz-transition:700ms;}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 145px;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f1_card {
  width:145px;
 height:145px;
 border-radius:300px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  padding-top:33px;
  padding-right:5px;
  padding-bottom:5px;
  padding-left:5px;
  color: black;
  text-align: center;
  border:1px dashed #aaa;
  background-color: #fffaaa;
  border-radius:300px;
  font-family:tt;
  font-size:8px;
}

Kemudian , copy code dekat bawah ni , paste di mana bahagian yang korang nak .

<div id="f1_container" class="hover">
  <div id="f1_card" class="shadow">
    <div class="front face">
      <img src="URL GAMBAR" width="140" style="background:white; border:1px dashed #aaa; border-radius:100px;padding:4px;"/>
    </div>
    <div class="back face center">
<center><a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG">TITLE </a><br />
<a class="abc" href="URL KORANG">TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE </a></center><br />
    </div>
    </div>
</div>

Save . Siap .


Korang boleh ubah mana mana code yang di bold kan , tapi aku tak sarankan korang banyak sangat edit codenya , takut tak jadi macam yang aku punya . tapi kalau korang nak edit juga , terserah :D TQ .

Tutorial : Navigation with Hover (Part Four)

Assalamualaikum & Salam Sejahtera

Hari ni cuba merajinkan diri setelah habes kelas tadi . akhirnya siap juga tutorial navigation with hover untuk part ke empat . simple je navigation ni . mau lihat live preview nya ?

LIVE PREVIEW 

Okay , berminat nak letak dekat blog ? meh nak ajar kan macam mana .

For Template Designer ;

Layout > Add a Gadget > HTML / JavaScript .

Copy and paste code bawah ni ;

<style>
.abc {
background:#fff;
color:#666;
font-size:11px;
font-family:ms gothic;
margin:4px;
text-decoration :none;
display:inline-block;
width:80px;
border-radius:0px;
text-transform:uppercase;
text-align:center;
letter-spacing:1px;
border:1px solid transparent;
padding:5px;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
-moz-box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
-webkit-box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
-webkit-transition:1000ms;
}
.abc:hover {
background:#f2f2f2;
display:inline-block;
width:80px;
border-radius:50px;
border:1px solid #E6E6E6;
-moz-box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
-webkit-box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
-webkit-transition:1000ms;
}
</style>
<br />
<center>
<a class="abc" href="LINK">title 1</a>
<a class="abc" href="LINK">title 2</a>
<a class="abc" href="LINK">title 3</a>
<a class="abc" href="LINK">title 4</a>
<a class="abc" href="LINK">title 5</a>
<a class="abc" href="LINK">title 6</a>
<a class="abc" href="LINK">title 7</a></center>

Save and Siap .


For Classic Template user ;

Template > Edit HTML

Paste je code di bawah ni dekat atas </style>

.abc {
background:#fff;
color:#666;
font-size:11px;
font-family:ms gothic;
margin:4px;
text-decoration :none;
display:inline-block;
width:80px;
border-radius:0px;
text-transform:uppercase;
text-align:center;
letter-spacing:1px;
border:1px solid transparent;
padding:5px;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
-moz-box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
-webkit-box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
-webkit-transition:1000ms;
}
.abc:hover {
background:#f2f2f2;
display:inline-block;
width:80px;
border-radius:50px;
border:1px solid #E6E6E6;
-moz-box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
-webkit-box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
-webkit-transition:1000ms;
}

Kemudian paste code dekat bawah ni dekat mana mana bahagian yang korang nak .

<center>
<a class="abc" href="LINK">title 1</a>
<a class="abc" href="LINK">title 2</a>
<a class="abc" href="LINK">title 3</a>
<a class="abc" href="LINK">title 4</a>
<a class="abc" href="LINK">title 5</a>
<a class="abc" href="LINK">title 6</a>
<a class="abc" href="LINK">title 7</a></center>

Save and Siap .

Korang boleh ubah mana mana yang patut macam link , title , code warna and etc . kbai o/

Tutorial : Navigation (Part Four)

Assalamualaikum & Salam Sejahtera

Hari ni takde benda nak buat , so sambil dengar lagu B.A.P - One Shot , sambil nak bagi tutor simple menu tab ni dekat korang . macam biasa , nama pon simple , so takde yang menarik cuma ape special features dekat navigation ni , dia bulat and warna pelangi . tu je , wait , itu special ke ? haha . lupa kan . nak live preview or better preview ?

CLICK HERE FOR PREVIEW

amacam , okay tak ? nak cuba meh nak ajarkan :)

Template designer 
Layout > Add a Gadget > HTML / JavaScript 

Copy code bawah ni and paste dekat bahagian berkenaan ;

<style>
@font-face{
font-family:lemoncanfly;
src:url('http://static.tumblr.com/eq1rpir/A8nm517nt/lemons_can_fly.ttf')
}
.bulat {
display:inline-block;
width:50px;
height:40px;
font-family:lemoncanfly;
font-size:30px;
text-transform:uppercase;
text-align:center;
color:#fff;
text-shadow: 1px 1px 3px rgba(111, 123, 125, 1);
border:2px solid #fff;
box-shadow:0px 1px 2px #aaa;
border-radius:30px;
padding-top:8px;
padding-bottom:2px;
}
</style>

<center>
<a class="bulat" style="background:#fe5964;" href="YOUR URL">1</a>
<a class="bulat" style="background:#fea659;" href="YOUR URL">2</a>
<a class="bulat" style="background:#f8fe59;" href="YOUR URL">3</a>
<a class="bulat" style="background:#59fe5d;" href="YOUR URL">4</a>
<a class="bulat" style="background:#59ddfe;" href="YOUR URL">5</a>
<a class="bulat" style="background:#5978fe;" href="YOUR URL">6</a>
<a class="bulat" style="background:#ba59fe;" href="YOUR URL">7</a>
</center>

Classic Template
Template > Edit HTML

Copy code bawah ni , paste dekat ATAS </style> ;

@font-face{
font-family:lemoncanfly;
src:url('http://static.tumblr.com/eq1rpir/A8nm517nt/lemons_can_fly.ttf')
}
.bulat {
display:inline-block;
width:50px;
height:40px;
font-family:lemoncanfly;
font-size:30px;
text-transform:uppercase;
text-align:center;
color:#fff;
text-shadow: 1px 1px 3px rgba(111, 123, 125, 1);
border:2px solid #fff;
box-shadow:0px 1px 2px #aaa;
border-radius:30px;
padding-top:8px;
padding-bottom:2px;
}

kemudian copy code bawah ni and paste dekat bahagian mana yang korang nak , ynag korang suka ;

<center>
<a class="bulat" style="background:#fe5964;" href="YOUR URL">1</a>
<a class="bulat" style="background:#fea659;" href="YOUR URL">2</a>
<a class="bulat" style="background:#f8fe59;" href="YOUR URL">3</a>
<a class="bulat" style="background:#59fe5d;" href="YOUR URL">4</a>
<a class="bulat" style="background:#59ddfe;" href="YOUR URL">5</a>
<a class="bulat" style="background:#5978fe;" href="YOUR URL">6</a>
<a class="bulat" style="background:#ba59fe;" href="YOUR URL">7</a>
</center>

Save and siap . mudah kan ? macam biasa , mana mana yang BOLD tu , korang boleh ubah ikut kesukaan korang . kalau berminat nak pakai , sila kan . tapi make sure komen dulu . TQ :)

Tutorial : Navigation on Image

Assalamualaikum & Salam Sejahtera

Yoo . setelah sekian lama tak buat tutor , finally coming back with the new tutorial . haha . ayat poyo . okay , tutorial ni di request oleh Aisha . tak caya ? meh tengok sini ;

Ha percaya tak ? dia request lama dah . tapi sekarang baru ada masa nak buat . thanks sudi request tutor . huhu . actually , aku dah tak pakai navigation tu . so meh tengok live preview dia acano navigation tuh . Okay . tu lah navigation yang aku pernah pakai sebelum ni . perasan tak ? okay . nak cuba . jom nak tolong ajar kan .


Template Designer 

Dashboard > Layout > Add a Gadget > HTML/JavaScript .

Copy and paste code bawah ni .

<style>
@font-face {font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
.mhz {width:200px;padding:5;border:1px solid #f2f2f2;}
.peace{ width:200px;-webkit-transition:900ms;}
#yes{ position:absolute;margin-top:-60;margin-left:5px;-webkit-transition:All 0.4s ease;-moz-transition:All 0.4s ease;-o-transition:All 0.4s ease;background:white;width:201px;text-align:center;color:#000;text-transform:uppercase;font-size:8px;font-family:tt;padding-top:2px;padding-bottom:2px;letter-spacing:1px;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-transition:500ms;}
.icon2:hover #bias{opacity:1;-moz-transition: 0.5s;-webkit-transition: 0.5s;}
.nav { display:inline-block; width:35px; text-align:center; background:#f2f2f2;padding-top:2px;border:1px solid #e6e6e6;margin:2px;}
</style>

<center><div class="peace">
<img class="mhz" src="http://i.imgur.com/lg7Hu.jpg" /><div id="yes">
<a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a></div>
</div>

save and preview .


Classic Template

Dashboard > Template > Edit HTML

Copy code bawah ni , paste dekat ATAS </style>

@font-face {font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
.mhz {width:200px;padding:5;border:1px solid #f2f2f2;}
.peace{ width:200px;-webkit-transition:900ms;}
#yes{ position:absolute;margin-top:-60;margin-left:5px;-webkit-transition:All 0.4s ease;-moz-transition:All 0.4s ease;-o-transition:All 0.4s ease;background:white;width:201px;text-align:center;color:#000;text-transform:uppercase;font-size:8px;font-family:tt;padding-top:2px;padding-bottom:2px;letter-spacing:1px;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-transition:500ms;}
.icon2:hover #bias{opacity:1;-moz-transition: 0.5s;-webkit-transition: 0.5s;}
.nav { display:inline-block; width:35px; text-align:center; background:#f2f2f2;padding-top:2px;border:1px solid #e6e6e6;margin:2px;}

Kemudian , code bawah ni , korang boleh paste dekat mana mana tempat yang korang nak .

<center><div class="peace">
<img class="mhz" src="http://i.imgur.com/lg7Hu.jpg" /><div id="yes">
<a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a></div>
</div>

Save and Preview .

Siap . semudah ABC kan ? hahaha . yang mana BOLD kan tu , ubah ikut cita rasa korang . termasuk lah dengan code warna , okay . selamat mencuba . kalau nak cuba , komen komen lah entry ni . kalau menjadi bagitau , kalau tak menjadi pon , bagila tau . insyaallah , aku akan cuba tolong . kbai o/

P/S ; UNTUK CODE MARGIN-BOTTOM : -60 , KORANG KENA PANDAI ADJUST SEBAB DIA BERUBAH RUBAH MENGIKUT SIZE BACKGROUND GAMBAR YANG KORANG LETAK.

Tutorial : Navigation with Hover (Part Three)

Assalamualaikum & Salam Sejahtera

Yoo. dah lama nak bagi dekat korang tutor menu tab with hover atau pon simple navigation . version ni agak unik sikit , sikit jela . tak banyak pon . actually aku belajar dekat SINI . so dah edit code dia sikit sikit macam yang korang tengok dekat live preview . kalau nak guna , sila komen . dah guna sila credit . sebab code nya agak complicated . 

 LIVE PREVIEW HERE

Amacam . berminat tak ? haha . meh sini nak ajarkan .

Template Designer :

Dashboard > Layout > Add a Gadget > HTML / JavaScript .

Pastu copy and paste code dekat bawah ni .

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}.top-menu li {display: inline-block;text-align: center;margin:10px 24px;position: relative;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
.top-menu li:hover {margin: 10px 24px; }
.top-menu li:active {margin: 10px 33px; }
.top-menu li a  {width: 95px;height: 90px;position:absolute;z-index:9999;top:42px;display:block;text-decoration: none;text-align:center;font-family:tt;font-size:8px;color: white;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li a:hover  {color:#000}
.top-menu li:active a {font-size:20px;top:37px;text-shadow: none;text-align:center;}
.top-menu li div.menu-item {width: 90px;height: 90px;display: block;border:3px solid #fff;box-shadow:0px 0px 2px #333;-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li:hover div.menu-item{-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;-webkit-transform: rotate(225deg);-moz-transform: rotate(225deg);-o-transform: rotate(225deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li:active div.menu-item{-webkit-border-top-left-radius: 50px;-webkit-border-bottom-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-bottomright: 50px;border-top-left-radius: 50px;border-bottom-right-radius: 50px; }
#tutor{ background:#fbb1b1; }
#affies { background:#fbb1e5; }
#facebook { background:#e2b1fb; }
#twitter { background:#b1bcfb; }
#tumblr { background:#b1fbb3; }
</style>

<div class="top-menu">
<li><a href="LINK GOES HERE">Tutorial</a><div class="menu-item" id="tutor"></div></li>
<li><a href="LINK GOES HERE">Affies</a><div class="menu-item" id="affies"></div></li>
<li><a href="LINK GOES HERE">Facebook</a><div class="menu-item" id="facebook"></div></li>
<li><a href="LINK GOES HERE">Twitter</a><div class="menu-item" id="twitter"></div></li>
<li><a href="LINK GOES HERE">Tumblr</a><div class="menu-item" id="tumblr"></div></li>
</div>

Save and siap .


Classic Template :

Dashboard > Template 

Copy code bawah ni . PASTE dekat ATAS </style>

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}.top-menu li {display: inline-block;text-align: center;margin:10px 24px;position: relative;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
.top-menu li:hover {margin: 10px 24px; }
.top-menu li:active {margin: 10px 33px; }
.top-menu li a  {width: 95px;height: 90px;position:absolute;z-index:9999;top:42px;display:block;text-decoration: none;text-align:center;font-family:tt;font-size:8px;color: white;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li a:hover  {color:#000}
.top-menu li:active a {font-size:20px;top:37px;text-shadow: none;text-align:center;}
.top-menu li div.menu-item {width: 90px;height: 90px;display: block;border:3px solid #fff;box-shadow:0px 0px 2px #333;-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li:hover div.menu-item{-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;-webkit-transform: rotate(225deg);-moz-transform: rotate(225deg);-o-transform: rotate(225deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li:active div.menu-item{-webkit-border-top-left-radius: 50px;-webkit-border-bottom-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-bottomright: 50px;border-top-left-radius: 50px;border-bottom-right-radius: 50px; }
#tutor{ background:#fbb1b1; }
#affies { background:#fbb1e5; }
#facebook { background:#e2b1fb; }
#twitter { background:#b1bcfb; }
#tumblr { background:#b1fbb3; }

Code bawah ni pulak . PASTE BAWAH </style>

<div class="top-menu">
<li><a href="LINK GOES HERE">Tutorial</a><div class="menu-item" id="tutor"></div></li>
<li><a href="LINK GOES HERE">Affies</a><div class="menu-item" id="affies"></div></li>
<li><a href="LINK GOES HERE">Facebook</a><div class="menu-item" id="facebook"></div></li>
<li><a href="LINK GOES HERE">Twitter</a><div class="menu-item" id="twitter"></div></li>
<li><a href="LINK GOES HERE">Tumblr</a><div class="menu-item" id="tumblr"></div></li>
</div>

Save and siap .

p/s : anda tak disarankan untuk ubah mana mana code selain dari code color . sebab takut dia tak jadi macam mana yang aku punya preview . :)

Tutorial : Simple Menu Tab

Assalamualaikum

okay , dah takde idea nak update blog . dari tadi dok memikir . adalah dekat 3 , 4 jam gak dok memikir . okay itu menipu . haha . Simple menu tab tu apa ? tu ha . macam ni ha :

okay . yang ni lah namanya menu tab . orang lain punya ohsem ohsem . tapi yang den punya ni versi simple je . well aku tak suka yang bagai bagai , serabut mata memandang .

Dashboard > Template > Edit HTML . pastu CTRL + F this code :

/* Header
----------------------------------------------- */

jumpa ? lepas tuh copy code bawah ni . PASTE dekat ATAS code yang korang carik tadi .

a.linkio          {
display:inline-block;
text-align:center;
width: 55px;
color: #bbbbbb;
border: 1px solid #eee;
background:#f8f8f8;
padding:5px;
margin:2px;
-webkit-transition-duration:.3s;
}

*mana mana yang di boldkan tuh , korang boleh tukar ikut citarasa korang :)

dah siap . save . okay dah 50 % dah siap . now pergi pulak dekat Dashboard > Layout > Add a Gadget > HTML/JavaScript  . Pilih yang bawah header macam dalam gambar bawah ni :

dah ? apa yang perlu korang isi dekat situ ? nahh . copy code bawah ni :

<center><a class="linkio" href="LINK HERE">TITLE</a> .  <a class="linkio" href="LINK HERE">TITLE</a>   .  <a class="linkio" href="LINK HERE">TITLE</a>  .  <a class="linkio" href="LINK HERE">TITLE</a>  .<a class="linkio" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">TITLE</a></center>

okay , paste dekat content . link tuh korang ganti dengan link korang sendiri . title pon . lepas tuh save and preview . confirm jadi . :) okay . siap 100% . mudah kan ? ape lagi , sape yang nak cuba tuh . silakan . kalau tak jadi ~ sila tanya okey . kbye o/