Assalamualaikum

Hai o/ Hari ni nak bagi freebies button untuk Home , Older and Newer . Tak lawa , simple version punya . Yang ni siri pertama punya . Lepas ni apis akan update yang ke-2 , ke-3 dan seterusnya .

First sekali , rujuk tutor ni Tutorial tukar home , Older and Newer .

Untuk ambil , just CTRL + KLIK pada image yang korang nak . Kemudian COPY URL berkenaan . kbai o/

Tutorial : Image Hover Effect 5

Assalamualaikum

Semalam dapat another request . Dia tanya macam mana nak buat hover macam dekat bahagian disclaimer aku tu . Thanks to are-qil sebab request tutor , maka ber-update jugak lah blog buruk saya ni . hahaha . sebelum tu , meh kita tengok live preview nya dahulu ;

Better Live Preview Here

1) For Classic Template , paste this code ABOVE </style>

img {
margin-top:-5px;
border:1px dashed #6d6d6d;
padding:3px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
img:hover {
opacity:0;
-moz-transform: rotate(360deg)scale(0.3);
-webkit-transform: rotate(360deg)scale(0.3);
}

Save .


2) For Template Designer , go to Template > Edit HTML > Paste ABOVE this code ]]></b:skin>

img {
margin-top:-5px;
border:1px dashed #6d6d6d;
padding:3px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
img:hover {
opacity:0;
-moz-transform: rotate(360deg)scale(0.3);
-webkit-transform: rotate(360deg)scale(0.3);
}

Save.


* mana mana yang di bold tu boleh ubah ikut citarasa korang . 


Okay siap . mesti jadi punya . kalau tak jadi bagitau la ye . kalau nak guna or jadi , sila sila lah komen jugak . nak re-tutor , inform me first . kbai o/

Tutorial : Border Bergambar Keliling Blog

Assalamualaikum & Salam Sejahtera
Okay , tadi dapat satu lagi request tutor yang baru daripada sorang blogger . Requestnya berbunyi begini , hehehe ;

First sekali nak minta maaf sebab takde preview nak tunjuk dekat korang , tapi rasanya ramai yang dah tau macam mana border bergambar tu . Secondly nak cakap yang this tutor i learned from Wana . She teach me how to do it . So thanks to her . Third , aku tak pernah cuba this tutor dekat mana mana template kecuali dekat simple template . So nak cakap yang this tutor hanya menjadi dekat simple template sahaja . Okay ayuh mula .


A) Template > Edit HTML

B) Tekan F3 atau Ctrl + F untuk cari code .content-outer {

C) Jumpa code tu , kemudian paste code bawah ni dekat BAWAH code yang korang cari tadi .

background : url (URL BACKGROUND);
padding:10px;

Kemudian try PREVIEW and SAVE.


Okay siap . now blog korang dah di kelilingi border yang bergambar . Jadi tak ? Kalau jadi sila komen bagitau , sama juga dengan yang nak guna this tutor . Pada yang tak jadi , bagiotau gak . Mana yang aku boleh tolong , aku akan tolong . Okay ? 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/

Contest Blog Super Kawai by Bubu

Assalamualaikum

Pertama sekali izin kan saya menempek banner contest yang awesome and comel ni dulu ;

Okay itu banner untuk contest yang di anjur oleh bubu . agak terlambat apis join . 6 hari selepas contest berlangsung . ni contest kedua apis join yang di anjurkan oleh bubu . kenapa apis still join walaupun blog apis langsung tak kawai ? satu - sebab nak support contest ni bagi meriah , dulu masa apis pernah buat contest , bubu orang yang terawal join , orang pertama ke , kedua kalau tak silap apis . hehe . dua - mencuba . tak salah kan ? mana tau kali ni rezeki menyebelahi apis ke , siapa tahu ? hehe . tiga - sebab syarat dia sangat mudah . serius sangat mudah . tak perlu nak follow banyak banyak blog , tak perlu like banyak benda . thats why apis join . kemudian hadiah . OMG ! nak topup tu ~ boleh renew BIS . hehe . okay . semua syarat apis dah buat now syarat terakhir , tag dua orang and mangsa tag apis kali ni tak lain tak bukan ;

Nana 

Wana

For those yang masih belum join , cepat ! masih belum terlambat :D klik je banner comel tuh . k adios 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/

Trip Ke Pulau Perhentian

Assalamualaikum

Yoo , seperti yang di janji kan , apis nak upload gambar gambar percutian apis selama 3H2M ke Pulau Perhentian , Besut , Terengganu , Malaysia . tu diaa . siapa kata dekat Malaysia ni takde tempat yang cantik macam dekat luar negara ni ? meh datang ke Pulau Perhentian , pastu baru korang tau betapa cantiknya pulau ni . tak percaya ? meh apis tunjuk antara gambar gambar yang apis tangkap masa dekat sana ^^v

SESAMPAINYA DI PERHENTIAN BESAR

JETI ARWANA RESORT

BOLEH JADI PHOTOGRAPHER TAK ? HEHE

BERGAMBAR BERSAMA MIA

CHALET SAMUDRA (Y)

SNORKLING POINT

MENUNGGU BOT KE SNORKLING

PERMANDANGAN INDAH 

WATER CONFIDENT TIME

POINT PERTAMA

IKAN IKAN KELAPARAN

MASIH DI POINT PERTAMA

CANTIK KANNNN ? (Y)

SUBHANAALLAH *O*

ME AT SNORKLING POINT 1 :D

MOVING TO OTHER PLACE 

CHASING THE TURTLE XD

JUMPING TIME :P

BERGAMBAR SEKETIKA ;)

ME AT NEMO POINT 

SHARK POINT >.<'

MASA UNTUK PULANG ^^

Kesemua gambar di atas takde edit apa apa kecuali gambar di resize dan di letak watermark . amacam , cantikkan ? Subhanaallah. ciptaan Allah memang indah indah belaka . banyak lagi gambar sebenarnya , takkan nak upload semua kan ? hehehe . so kepada sesiapa yang masih belum pernah pergi ke Pulau Perhentian , sila sila lah pergi . serius . tak rugi pon . so sekarang siapa nak kata Malaysia takde tempat yang cantik ? hehehe . btw , untuk pengetahuan korang , Pulau Perhentian ni adalah Taman Laut Malaysia . sebab tu cantik sangat :D kbai o/

p/s : jangan tanya pasal package and etc , sebab saya taktau . saya cuma bayar and pergi sahaja . sorry . tq :)