Hafiz Zulkafly: Februari 2013

Tutorial : Navigation with Hover (Part Four)

Khamis, Februari 28, 2013

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/

Segmen header siapa paling awesome part 2

Sabtu, Februari 23, 2013

Assalamualaikum

Yoo semua , rasa nya dah sekian lama apis tak join mana mana kontes , segmen mahupun giveaway . busy update tutorial dengan freebies je . kali ni apis mencuba nasib dalam satu segmen yang kelihatan simple , tapi sangat menarik minat apis . hehe . mana tau kot kot ada rezeki . hehe .

Ha , itu lah header yang apis pertaruhkan untuk segmen kali ni . header yang simple and tak menarik sebenarnya , tapi apis tetap berpuas hati sebab apis buat sendiri dengan menggunakan Adobe Photoshop . harap rezeki menyebelahi apis untuk segmen kali ni , AMIN ! hehe . syarat syarat semua apis dah ikut . ini sebagai bukti nya ^^v ;

untuk syarat kedua , like fanpage dekat fb , apis dah like kesemuanya . apis tak sempat nak printscreen kesemuannya . hehehe . itu je kot , harap boleh menang sebab hadiah dia menarik sangat ! :)

KLIK SINI UNTUK JOIN SEGMEN AWESOME INI !

Freebies : Simple Header 8

Assalamualaikum & Salam Sejahtera

Another freebies simple header. Pleas take out with full proper credit. Thankyou.

LIVE PREVIEW WITH THE REAL SIZE

Tutorial : Letak Widget Instagram Di Blog

Jumaat, Februari 22, 2013

Assalamualaikum

Hey peeps ! Sebelum tu , nak tanya . korang ada instagram tak ? mesti ada kan . so nak letak tak gambar gambar instagram korang tu dekat blog ? kali ni nak ajar cara mudah macam mana nak letak widget instagram dekat blog korang .

LIVE PREVIEW

amacam , berminat nak buat macam tu ? meh nak tunjukkan cara mudahnya :)

1. Pergi ke Laman Web ni --> SnapWidget

2. Follow gambar ni untuk seterusnya .

customize widget korang

preview dulu

kalau jadi , klik get code and copy semua code tu .

3. Kemudian copy code yang telah diberi and untuk Template Designer paste kan code tersebut di Layout > Add a Gadget > HTML / JavaScript . untuk Classic Template , boleh paste dekat mana mana je yang korang nak .

Mudah kan ? apa lagi . ayuh mencuba , sambil sambil cuba tu , jom lah follow sekali instagram aku . @hafizzulkafly . hehehe . kbai o/

Tutorial : Navigation (Part Four)

Sabtu, Februari 16, 2013

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 : Player for Blog (Mine Version)

Rabu, Februari 06, 2013

Assalamualaikum

Yoo , hari nak bagi satu tutorial . haritu ade godek godek sikit coding macam mana nak bagi music player nampak berhias sikit . cuba punya cuba , jadi lah macam ni :

BETTER PREVIEW

Okay , macam tu lah yang apis berjaya buat . hehehe . macam , nak buat macam tu jugak tak ? jom apis ajar :)

Template Designer

Layout > Add a Gadget > HTML / JavaScript

Classic Template

Template > Edit HTML

Kemudian copy and paste code bawah ni .

<center>
<div style="color:#eee;border:4px solid fff;box-shadow:0px 0px 5px #000;width:25px; height:22px;text-align:center;padding-top:6px;padding-left:1px;padding-right:2px;border-radius:333px;background:#000;">
<embed src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://media.irondj.net/mix/file/31464/Owl_City_and_Carly_Rae_Jepsen_-_Good_Time.mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/classic_small&bgcolor=0x000000&mode=playstop" quality=high wmode=transparent width="14" height="14" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</div>
</center>

*yang apis bold tu gantikan dengan URL lagu yang korang nak :)

Kemudian SAVE and siap . amacam jadi tak ? kalau jadi bagitau . kalau tak jadi pon bagitau . hehe . player ni apis design sendiri , so make sure kalau korang nak guna wajib komen and wajib credit okay ? kbai o/