Cute Navigate Button/Hover

Post by Adilla Shahirah | 1:20 am | 1 Nutella |

Assalammualaikum + annyeong, chingu :)

\Bismillahirrahmanirrahim/ Hello everybody. Tuto kali neh ialah Cute Navigate Button/Hover yang telah di request oleh seseorang. Nak link ke blog dy, tapi dy dah delete blog dy T-T . Kalau tuto neh tk menjadi jangan salahkan Eyra yeah. Coz neh Eyra cube dahulu T-T

1. Dashboard -> Design -> Edit HTML -> Tick Expand Widget Templates
2. Tekan CTRL+F and search for code neh : #footer .widget {
3. Tekan CTRL+C and copy code bawah neh :
#nav {
display: inline-block;
padding:3px;
padding-left:5px;
padding-right:5px;
background: #E37895;
font-size:11px;
-moz-border-radius: 35px;
border-radius: 35px;
letter-spacing:.1em;
border:2px solid #891A37;
}
#nav:hover {
background-color:#FFC9D8;
}
#nav a:link {
color: #710925;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
#nav a:visited {
color: #FF8589;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}


4. Paste code atas neh dkt bawah code yang tadi korang carik.
5. Save !
6. Dashboard -> Design -> Page Elements -> Add A Gadget -> HTML/Java Script
7. Copy code bawah neh :




<a id="nav" href="URL korang" title="Tajuk">Tajuk</a>





8. Paste code tadi dkt HTML/Java Script.
9. Save !

  • Yang Eyra warnakan BIRU, sila tukar dgn code color yang korang nak.
  • Yang Eyra warnekan HIJAU, sila tukar ikut kesesuaian korang.
  • Yang Eyra warnekan KUNING, sila tukar same ade solid, dotted, dashed or others.
  • Yang Eyra warnekan MERAH, sila tukar dgn URL korang and tajuk yang korang nak sendiri.
  • Ooyeah, yang nombor7 tuh, setiap kali korang nak ade button tuh, korang kene letak berulang. Means, kalau korang nak ade 3 button, korang kene letak tiga code jugak mcm bawah neh


<a id="nav" href="http://lalala.com" title="Lala">Lala</a> <a id="nav" href="http://contoh.com" title="Example">Example</a> <a id="nav" href="http://blogsaya.com" title="Blog">Blog</a>
       Paham tak? Kalau tk paham tnye ye and kalau tk jadi bgtau. Kalau jadi pon bagitau :)

    Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

    1 comments:

    Anonymous said...

    nice tutor... :)