HOMEPAGE
THE AUTHOR
FREEBIES
TUTORIALS
DESIGN PROCESS
PORTFOLIO

Tutorial Navigation No Loading At Sidebar.

Assalamualaikum bloggers :)

Today, aten nak buat tutorial navigation no loading at sidebar. Tutorial ni direquest oleh Izyan Nazirah. So mari kita mulakan. Kalau siapa yang tak faham, boleh tengok GAMBAR BERGERAK BAWAH NI.


BOLEH DIGUNAKAN OLEH SEMUA JENIS TEMPLATE.

1. Dashboard > Template (blogskin)
1. Dashboard > Layout > Add a gadget > Edit html javascript (template lain)

2. For blogskin, Copy code bawah ni dan paste kat ruang sidebar korang tu.
2. For template lain, copy code bawah ni dan paste kat gadget html javascript korang tu.


<style>
.kotak navigation {
text-align:center;
width:270px;
color:#333333
}
a.navigation {
cursor:vertical-text;
background-image:url(http://i.imgur.com/pj7k9.png);
width:60px;
text-decoration:none;
color:#333333;
display:inline-block;
border:2px outset #cecece;
text-align:center;
font:16px Yanone Kaffeesatz;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
a.navigation:hover {
border:2px ridge #cecece;
background-image:url(http://i.imgur.com/uuOvb.jpg);
background-position:50% 80%;
background-size:400px;
color:#fff;
-webkit-transition-duration:0.5s;
}
#fh img { max-width:270px;}
 </style>
<center><div class="kotaknavigation">
<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('a').innerHTML" >BACK</a>
<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('b').innerHTML" >NOTICE</a>
<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('c').innerHTML" >SEGMEN</a>
<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('d').innerHTML" >SHOUT</a></div></center>
<div id="fh" style="width:270px;color:#333333;font:11px verdana;">
ISI FIRST PAGE SEBELUM BUTTON LAIN DITEKAN
</div>
<div id="a" style="display: none;">
ISI SECOND PAGE FOR BUTTON YANG PERTAMA
</div></div>
<div id="b" style="display: none;">
ISI THIRD PAGE FOR BUTTON YANG KEDUA
</div>
</div>
<div id="c" style="display: none;">
ISI FOURTH PAGE FOR BUTTON KETIGA
</div></div>
<div id="d" style="display: none;">
ISI FIFTH PAGE FOR BUTTON YANG KEEMPAT
</div>
</div></div>

3. Preview dan kalau dah puas hati terus save :)

Hope korang faham lah cemana nak buat. Lagipun benda ni memang susah nak faham.
Masa aten nak guna pun benda ni pun, memang pening kepala nak buat.
Apa apa pertanyaan boleh tanya ^^
Sekiaannnnn.

20 comments:

  1. Wah, tuto yang sangat berguna. Nak guna ye ? Thanks Much <3 :D

    ReplyDelete
  2. Wah Thanks akak. Nice Tutor . Saya guna ;)

    ReplyDelete
  3. @mizz hatver : ur welcome dear. guna lah :)

    ReplyDelete
  4. Tak paham lah :/ masa nak isi page tu macam mana ? tolong terangkan dengan lebih detail lagi aten :) tq

    ReplyDelete
  5. isilah apa awak nak isi. contohnya awak nak isi cbox, awak letak code cbox awak :)

    ReplyDelete
  6. ala tuto ni la kak ana cari!
    errrr aten... kak ana nk buat
    tp x jadi la T______T

    Aten sudi tak tolong kak ana
    tlg buatkan untuk blog kak ana?


    emel kak ana,
    anaaziz13@gmail.com

    ReplyDelete
  7. Macam mana kalau tak nak bagi ada yang ISI FIRST PAGE SEBELUM BUTTON LAIN DITEKAN. Nak terus keluar yg first button. TQ :)

    ReplyDelete
  8. terima kasih aten... good info for shae...gud job 👍

    ReplyDelete
  9. kak, list punya aku kok tidak tersusun ke bawah yaa~ bagaimana caranya supaya tersusun ke bawah? terimakasih

    ReplyDelete

Terima kasih atas komen yang diberikan. Jangan lupa datang lagi untuk cerita yang terbaru. Salam sayang dari owner blog

 
Thankyou for visiting | Template made by Fatin Hazwani.