Assalamualaikum & Salam Sejahtera

Yoo , siapa dekat sini skin maker ? pernah tak kadang kadang korang contribute dekat blogskins , then preview error ? okay . hari ni , nak ajar macam mana nak buat live preview using tumblr macam yang aku selalu pakai . actually Wana yang ajar. tapi di tanya oleh Jaera . so hari ni nak bagi tutor tu pada korang , tapi make sure yang korang ada tumblr . okay ?


1. Log in tumblr and pergi pada setting macam gambar di bawah ni ;

2. Kemudian klik pada Tumblr korang , macam gambar di bawah ;

3. Kemudian klik pada customize ;

4. Kemudia , tengok sebelah kiri screen , then scroll down sampai jumpa page , klik pada Add a Page ;

5. Then akan kuar satu popup window , klik pada custom layer , nama kan link korang and paste kan code korang di ruangan yang tersedia macam dalam gambar bawah ni ;

6. Create page and siap .


Mudahkan ? kalau tak paham atau tak jadi , sila bagitau . kalau jadi pon , sila bagitau . hehe . kbai o/

Tutorial : Photoshop , Create Clipping Mask

Assalamualaikum

Lama dah tak bagi tutorial photoshop kan ? malam ni sempat siap kan satu tutor . macam mana nak buat clipping mask . apa itu clipping mask ? korang pernah tengok tak dalam tulisan tu macam ada background . ha , itu nama nya clipping mask . meh apis ajar macam mana nak buat .

1. Siapkan tulisan korang dulu .

2. Kemudian pilih background yang korang nak , then drag ke dalam CS korang macam gambar di bawah ;

3. Then akan jadi macam apis punya dalam gambar dekat bawah ni , korang resize background tu supaya tutup semua tulisan korang tu . kemudian tick pada tanda dalam kotak no dua ;

4. Lepas tu pergi dekat layer . kemudian right click pada background punya layer , then cari clipping mask macam gambar bawah ni ;

5. Siap sudah clipping mask korang . now masa untuk kemas kan bagi nampak lagi okay . right click pada layer tulisan . then pilih blending option ;

6. Siap and dah boleh save :D

Step no 5 tu kalau korang taknak follow pon takpe , apis cuma suggestkan in case kalau korang nak bagi nampak lebih kemas lagi . tak paham jangan malu nak tanya , mana apis boleh tolong , apis akan tolong . kbai o/

11. MISCONCEPTION

Assalamualaikum

Yoo . lama dah apis tak buat skin . haritu apis dah usytiharkan yang apis ni dah retired dari buat skin . tapi tadi , bangun bangun pagi . tetiba idea nak buat skin datang . so apis terus buka laptop . and finally , siap :) skin yang simple . takde apa yang menarik . tapi macam korang semua tahu . apis memang suka benda yang simple simple ni .

Live Preview | Rate and Comment | Download

Skin tu , inspirasi dari blog apis sendiri . lebih kurang macam template blog apis kan ? siapa yang ada akaun blogskin tu , sudi sudi lah komen and rate ye . oh ya , kalau nak guna , sila komen , and JANGAN remove credit . basecode ? sure . but with my premission FIRST . :D

Tutorial : Twitter Widget New

Assalamualaikum

Hari ni , apis nak ajar macam mana nak letak new twitter widget dekat blog korang . seprti yang korang sedia maklum , sebelum ni apis ada buat tutorial macam mana nak letak twitter widget dekat blog kan ? yang tu versi pertama , kali ni apis ajar cara yang lebih mudah and simple . jomm

LIVE PREVIEW

okay . nak twitter widget macam tu ? meh sini apis ajarkan ;


1) Log In twitter korang . kemudian pergi ke setting ;

klik pada widget 

create new

isi ruangan kosong . make sure dekat ruangan domain letak link blog korang .

save and dia akan bagi code . copy code tersebut .

Korang boleh save dekat mana mana yang korang nak . pasal width jangan risau , sebab kalau pengguna simple template , dia akan mengikut side width sidebar korang . kalau nak lawa kan sikit korang punya widget ni macam dekat live preview apis tu , boleh amek code dekat bawah ni . untuk classic template or blogskins user , untuk width , korang boleh cuba code bawah ni jugak .

<center><div style="width:190px;background:url(http://i.imgur.com/9WcA7.png);padding:5px; border:2px solid #aaa; border-radius:5px;">PASTE CODE TWITTER WIDGET SINI</div></center>

Tutorial : Flip Hover Navigation

Assalamualaikum & Salam Sejahtera

Salam jumaat semua . hari ni , nak update blog dengan tutorial yang aku sendiri lupa apis amek codenya dekat mana . sebab masa tu pakcik google banyak tolong . kemudian ada yang request this tutor , so nak taknak , kena buat juga . :)

Dashboard
TutoBies
Affiliate
Ask Me
Refresh

LIVE PREVIEW

For Template designer user . Pergi dekat Layout , kemudian Add A Gadget and paste code dibawah ni .

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.abc {
display:inline-block;
padding-top:2px;
width:90px;
font-family:tt;
font-size:8px;
text-transform:uppercase;
text-align:center;
color:#666;
background:#fff;
margin:2px;
border:1px solid #ccc5bc;
-webkit-transition:700ms;
-moz-transition:700ms;}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 145px;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f1_card {
  width:145px;
 height:145px;
 border-radius:300px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  padding-top:33px;
  padding-right:5px;
  padding-bottom:5px;
  padding-left:5px;
  color: black;
  text-align: center;
  border:1px dashed #aaa;
  background-color: #fffaaa;
  border-radius:300px;
  font-family:tt;
  font-size:8px;
}
</style>
<div id="f1_container" class="hover">
  <div id="f1_card" class="shadow">
    <div class="front face">
      <img src="URL GAMBAR" width="140" style="background:white; border:1px dashed #aaa; border-radius:100px;padding:4px;"/>
    </div>
    <div class="back face center">
<center><a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG">TITLE </a><br />
<a class="abc" href="URL KORANG">TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE </a></center><br />
    </div>
    </div>
</div>

Edit mana yang nak di edit di SINI . kemudian save .


Untuk Classic Template , Copy code bawah ni , paste atas </style>

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.abc {
display:inline-block;
padding-top:2px;
width:90px;
font-family:tt;
font-size:8px;
text-transform:uppercase;
text-align:center;
color:#666;
background:#fff;
margin:2px;
border:1px solid #ccc5bc;
-webkit-transition:700ms;
-moz-transition:700ms;}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 145px;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f1_card {
  width:145px;
 height:145px;
 border-radius:300px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  padding-top:33px;
  padding-right:5px;
  padding-bottom:5px;
  padding-left:5px;
  color: black;
  text-align: center;
  border:1px dashed #aaa;
  background-color: #fffaaa;
  border-radius:300px;
  font-family:tt;
  font-size:8px;
}

Kemudian , copy code dekat bawah ni , paste di mana bahagian yang korang nak .

<div id="f1_container" class="hover">
  <div id="f1_card" class="shadow">
    <div class="front face">
      <img src="URL GAMBAR" width="140" style="background:white; border:1px dashed #aaa; border-radius:100px;padding:4px;"/>
    </div>
    <div class="back face center">
<center><a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG">TITLE </a><br />
<a class="abc" href="URL KORANG">TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE </a></center><br />
    </div>
    </div>
</div>

Save . Siap .


Korang boleh ubah mana mana code yang di bold kan , tapi aku tak sarankan korang banyak sangat edit codenya , takut tak jadi macam yang aku punya . tapi kalau korang nak edit juga , terserah :D TQ .

Tutorial : Blockquote 7

Assalamulaikum

Hai , lama tak bagi tutorial blockquote kan ? sedar tak sedar dah versi ke 7 kot . hehe . versi yang ni agak serabut . haha . tapi apis tetap suka . tidak tahu mengapa . mungkin sebab apis yang buat kot . sebab tu apis suka . okay . tipu . meh jenguk sikit ;

LIVE PREVIEW

Amacam , mau buat itu macam ? nah amek code bawah ni .


- untuk Template designer , paste dekat atas ]]></b:skin> .

- untuk Classic template , paste dekat atas </style>.

blockquote{
font-family:tahoma;
font-size:12px;
text-align:center;
letter-spacing:1px;
padding:10px;
color:black;
text-shadow: 0.5em 0.7em 0.0em black,-0.5em 0.7em 0.0em black,0.5em -0.7em 0.0em black;
background:url(http://i.imgur.com/ROFs4.png);
border:1px solid #aaa;
border-radius:5px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
blockquote:hover{
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
}

save and siap . nak pakai wajib bagitau . kredit ? terserah . TQ :)

Tutorial : Letak Page Facebook Dalam Blog

Assalamualaikum & Salam Sejahtera

Hari ni nak update tutor dengan macam mana cara nak letak fan page facebook dalam blog . actually dah ramai buat tutor ni , tapi sebab orang tu request dekat cbox and ask fm . so aku buat jugak :) korang ada fan page dekat facebook ? kalau takde , cepat buat . kalau ada and nak letak dekat blog , meh nak tunjukkan caranya , ohh ya , kalau baik hati , tolong like sekali aku punya dekat sidebar tu ye. HAHAHA :)


Copy code bawah ni and paste dimana sahaja yang korang nak dia keluar k.

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FUSERNAME PAGE KORANG%2F&tabs=timeline&width=300&height=70&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId" width="300" height="70" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Mana yang bold tu macam biasa boleh ubah ikut creativity korang sendiri. Yang true boleh tukar false and yang false boleh tukar true. Timeline boleh tukar ke events atau messages. Yang bold berwarna tu kena tukar sama sama k. Kalau ubah salah satu takut tak jadi macam yang korang nak.

Freebies : Simple Background 6

Assalamualaikum & Salam Sejahtera


Another freebies background. Actually this background bukan aku buat. I found somewhere dekat google and aku ambik kemudian aku tweak kepada beberapa warna. So credit pada google. Thankyou.

Anak Ke 2 ?

Assalamualaikum

GAMBAR TAKDE KENA MENGENA DENGAN ENTRY

Hai semua . amacam hari ni , sihat sihat belaka ? harap semuanya sihat . apis hari ni kurang sihat sikit . semalam start dengan selsema nya , kemudian hari ni sakit tekak bonus dengan demam nya sekali . so lengkap pakej . tak lama lagi batuk bakal mengundang . ;~~; doa kan supaya apis cepat sembuh . final nak dekat dah ni . okay dah menyimpang jauh dari tajuk entry .


Semalam semasa bermuka muka di facebook . apis terjumpa kawan apis share pasal #FaktaAnakKedua . dia share tu kepada adik dia sendiri , tapi memandang kan apis ni pon anak kedua dalam family , so kira fakta tu fakta apis bersama lah . haha . banyak jugak antara yang ada dalam fakta tu yang kena dengan apis . SERIOUS . haha , tapi tak semua lahh . so korang dekat luar sana , mana mana yang anak kedua tu , jom usha sikit macam mana attitude anak kedua ni ;)


1) ANAK MANJA EMAK
sebab apa-apa pun mesti dia akan diutamakan oleh ibu.


2) ANAK DEGIL 
Anak kedua dikatakan lebih degil, keras kepala dan tidak mendengar kata. Semua dia aje yg betul.Dalam ramai-ramai adik beradik dia aje yg KETEGAQ. Kemahuan dia kuat. Kalau buat sesuatu sungguh-sungguh. Kalau tak nak tu, tak nak lah jawabnya, boleh dipujuk tapi selalunya tak berapa jalan.


3) TAK PANDAI PUJUK 
Memang anak no 2 ni dia tak pandai pujuk makwe or pakwe dia.


3) HITAM / PUTIH 
Apa yg dikatakan semua dipegang. Kalau hitam, hitam lah kalau putih, putih lah. Degil tak boleh toleransi.


4) HATI
 Anak no 2 ni juga nampak aje keras. Tapi hati dia lembut.SATU lagi pe'el dia. Dia tak boleh ditegur.


5) BERDIKARI
 Very independent. Memang betul. Tapi kalau terlebih independent pun payah. Mudah bergaul. Very take care.


6) ARAHAN
Anak no 2 ni juga dia payah nk terima arahan.dia lebih suka buat hal sendiri pendek kata tak boleh kerja ngan orang.


7) PEMAAF & CARING 
Tidak dinafikan anak no 2 ni pun pemaaf dan caring. TAPI awas jangan bagi diorang marah kalau diorang marah faham saje lah.


8) PAKAIAN 
Nak semua up to date. Semua nak kemas


9) BERCINTA 
Dia kalau bercinta, sangat setia. Sanggup berkorban. :D


Ha amacam , ada tak diantara korang yang anak kedua dalam keluarga ? semua perangai dia atas ni kena tak dengan korang ? ke ada yang korang rasa macam tak betul and korang tak macam tu ? haha . jom kongsi pendapat korang dengan cara komen di entry ni :)