Hafiz Zulkafly

Tutorial : Navigation With Hover

Monday, October 29, 2012

Assalamualaikum & Salam Sejahtera
Hari ni kebosanan memuncak lagi . so terasa nak kena update somthing . so benda paling mudah aku rase buat navigation dengan hover sekali . kali ni aku tambah effect rotate 360 degree . main pusing pusing lah dengan navi korang lepas ni . hehe . macam mana tuh ? jom tengok bawah ni .


Preview :


FacebookTwitterTumblrFormspringBlogskins



amacam . berminat tak kalo berminat , nah amek code die dekat bawah ni . paste dekat mana yang korang suka . semua jenis blog boleh guna . tak terhad untuk certain certain blog . kalau nak pakai tu , rajin rajin lah komen ye :)


<style>
.navies {
background:#666;
border:1px solid #a2a2a2;
color:#666;
display:inline-block;
width:80px;
padding:3px;
text-align:center;
letter-spacing:2px;
font-size:9px;
margin:3px;
-webkit-transform: rotate(360deg);
-webkit-transition:1200ms;
}
.navies:hover {
background:#a2a2a2;
color:white;
display:inline-block;
width:80px;
padding:3px;
text-align:center;
margin:3px;
-webkit-transform: rotate(-360deg);
-webkit-transition:1200ms;
}
</style>
<a class="navies" href="LINK">Facebook</a><a class="navies" href="LINK">Twitter</a><a class="navies" href="LINK">Tumblr</a><a class="navies" href="LINK">Formspring</a><a class="navies" href="LINK">Blogskins</a>
mana mana code yang korang rase nak ubah tu , sila ubah mengikut kreativiti korang ye . kbai o/

09. Live While We're Young

Thursday, October 18, 2012


Assalamualaikum

Yoo ~ akhirnya . setelah berkurun lama tak contribute skin dekat blog skin , ter contribute jugak akhirnya . haha . skin ni skin sebelum ni yang apis pakai . simple je . style simple template punya skin . dah kehabisan idea and tak pandai nak buat bagi awesome . so buat yang biasa biasa je . yeah one direction jadi inspirasi . lol . skin ni , apis coding sendiri . 100% code sendiri . takde import export dari mana mana . HAHA . okay nahh ;






nak guna sila kan . make sure jangan remove credit and kalau sudi , komen komen lah ye ^^

Freebies : Affies Skin

Sunday, October 07, 2012

Assalamualaikum

Lama dah nak bagi freebies ni . hari ni baru bagi . skin ni coding sendiri , baru belajar lah katekan . hehe . takde ciplak mana mana coding orang lain , kalau nak guna komen la sikit and jangan buang credit . paham . basecode ? sama sekali tidak dibenarkan even korang letak credit to aku besar mana sekali pun .


Make sure jangan buang credit . kepada sesiapa yang taktau nak pakai macam mana . pergi buat satu blog baru > template > revert to classic template > copy semua code > paste > save . edit lah macam mana korang nak , aku tak kesah . asal jangan buang credit sudah lah ye . hehe . kalau ade ape ape yang tak faham boleh tanya . jangan malu . jangan segan . tanya je :)


Tutorial : Affiliate Link

Wednesday, October 03, 2012

Assalamualaikum

Yoo. update  tutorial . dah taktau nak buat , kesian blog dah berhabuk . nah amek tutorial ni . aku dah codingkan , tugas korang just copy and edit sikit je . okay ? coding buat sendiri . nak guna sila komen . TQ .

Live Preview:

FriendFriendFriendFriendFriendFriendFriend
FriendFriendFriendFriendFriendFriendFriend
FriendFriendFriendFriendFriendFriendFriend
FriendFriendFriendFriendFriendFriendFriend
FriendFriendFriendFriendFriendFriendFriend


Sometime preview error . try on your own blog . and its depend with your a.link hover . :) this is the code :


<style>
@font-face {
font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
a.linkies          {
font-family:tt;
font-size:8px;
display:inline-block;
border:1px solid #eee;
border-radius:10px;
text-align:center;
width:75px;
color: #fff;
background:#fccdf9;
padding:1px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.linkies:hover          {
display:inline-block;
text-align:center;
width: 75px;
color: #000;
background:#fff;
border-radius:0px;
padding:1px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.linkie          {
font-family:tt;
font-size:8px;
display:inline-block;
text-align:center;
border:1px solid #eee;
border-radius:10px;
width: 75px;
color: #fff;
background:#f0cdfc;
padding:1px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.linkie:hover          {
display:inline-block;
text-align:center;
border-radius:0px;
width: 75px;
color: #000;
background:#fff;
padding:1px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}

</style>
<center><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><br><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><br><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><br><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><br><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><a class="linkie"  href="https://www.blogger.com/">Friend</a><a class="linkies"  href="https://www.blogger.com/">Friend</a><br>
</center>

Tutorial : Navigation With Hover

Tuesday, October 02, 2012

Assalamualaikum

Dah lama nak bagi , cuma takde kesempatan . now ade mase nah amek lah pade siapa nak guna . I coding this tutor with my own coding , if you wanna use this , comment it ! ^^

live preview :

TutorialAffiesFacebookTwitter


Paste the code where ever you want ;

<style>
@font-face {
font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.navigate {
display:inline-block;
width:60px;
background:#eee;
text-align:center;
font-family:tt;
font-size:8px;
text-transform:lowercase;
border-left:10px solid #aaa;
border-right:1px solid #aaa;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
-webkit-transition-duration:0.8s;
margin:5px;
}
.navigate:hover {
display:inline-block;
width:60px;
background:#fff;
text-align:center;
font-family:tt;
font-size:8px;
text-transform:uppercase;
border-left:1px solid #aaa;
border-right:10px solid #aaa;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
-webkit-transition-duration:0.8s;
}
</style>
<a class="navigate" href="YOUR LINK">Title1</a><a class="navigate" href="YOUR LINK">Title2</a><a class="navigate" href="YOUR LINK">Title3</a><a class="navigate" href="YOUR LINK">Title4</a>

p/s : the bold code you can change it with your own creativity . tq :)

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED