Assalamualaikum

Hari ni terasa macam nak buat tutorial . tutor apa ? nama tutorial ni . "Letak Tweet di post blog" . macam mana tuh ? meh nak tunjuk contoh dekat bawah ni ;

Tutorial Letak Twitter dalam post blog :)
— TONY STARK ™ (@m_hfz) December 23, 2012

Ha , macam tu lah . korang boleh terus reply , retweet and favorite dekat situ . amacam , berminat tak nak belajar ? follow gambar dekat bawah ni :)

A) Pergi dekat tweet yang korang nak masukkan dalam post korang . kemudian klik expand .

B) Kemudian dia akan keluar tarikh and masa . sebelah tu ada details , klik pada details .

C) Kemudian akan keluar embed this tweet . klik yang tu pulak .

D) Then copy je code yang dia dah generate untuk korang tu . make shure HTML . selain dari tu , tak kan jadi .

E) Then pergi dekat blog . create new post . klik pada html . then paste code yang dah korang copy tadi . lepas dah paste , klik pada compose semula . memang dia takkan jadi lagi . ape yang korang kena buat , taip je entry . kemudia publish . insyaallah , lepas publish dia akan menjadi .

Ha , amacam . teringin nak cuba ? cuba lah . hehehe . kalau tak paham , tanya . mana bole tolong aku akan tolong . kbai o/

Malu bertanya , sesat jalan . HAHA :)

Tutorial : Navigation on Image

Assalamualaikum & Salam Sejahtera

Yoo . setelah sekian lama tak buat tutor , finally coming back with the new tutorial . haha . ayat poyo . okay , tutorial ni di request oleh Aisha . tak caya ? meh tengok sini ;

Ha percaya tak ? dia request lama dah . tapi sekarang baru ada masa nak buat . thanks sudi request tutor . huhu . actually , aku dah tak pakai navigation tu . so meh tengok live preview dia acano navigation tuh . Okay . tu lah navigation yang aku pernah pakai sebelum ni . perasan tak ? okay . nak cuba . jom nak tolong ajar kan .


Template Designer 

Dashboard > Layout > Add a Gadget > HTML/JavaScript .

Copy and paste code bawah ni .

<style>
@font-face {font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
.mhz {width:200px;padding:5;border:1px solid #f2f2f2;}
.peace{ width:200px;-webkit-transition:900ms;}
#yes{ position:absolute;margin-top:-60;margin-left:5px;-webkit-transition:All 0.4s ease;-moz-transition:All 0.4s ease;-o-transition:All 0.4s ease;background:white;width:201px;text-align:center;color:#000;text-transform:uppercase;font-size:8px;font-family:tt;padding-top:2px;padding-bottom:2px;letter-spacing:1px;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-transition:500ms;}
.icon2:hover #bias{opacity:1;-moz-transition: 0.5s;-webkit-transition: 0.5s;}
.nav { display:inline-block; width:35px; text-align:center; background:#f2f2f2;padding-top:2px;border:1px solid #e6e6e6;margin:2px;}
</style>

<center><div class="peace">
<img class="mhz" src="http://i.imgur.com/lg7Hu.jpg" /><div id="yes">
<a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a></div>
</div>

save and preview .


Classic Template

Dashboard > Template > Edit HTML

Copy code bawah ni , paste dekat ATAS </style>

@font-face {font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
.mhz {width:200px;padding:5;border:1px solid #f2f2f2;}
.peace{ width:200px;-webkit-transition:900ms;}
#yes{ position:absolute;margin-top:-60;margin-left:5px;-webkit-transition:All 0.4s ease;-moz-transition:All 0.4s ease;-o-transition:All 0.4s ease;background:white;width:201px;text-align:center;color:#000;text-transform:uppercase;font-size:8px;font-family:tt;padding-top:2px;padding-bottom:2px;letter-spacing:1px;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-transition:500ms;}
.icon2:hover #bias{opacity:1;-moz-transition: 0.5s;-webkit-transition: 0.5s;}
.nav { display:inline-block; width:35px; text-align:center; background:#f2f2f2;padding-top:2px;border:1px solid #e6e6e6;margin:2px;}

Kemudian , code bawah ni , korang boleh paste dekat mana mana tempat yang korang nak .

<center><div class="peace">
<img class="mhz" src="http://i.imgur.com/lg7Hu.jpg" /><div id="yes">
<a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a></div>
</div>

Save and Preview .

Siap . semudah ABC kan ? hahaha . yang mana BOLD kan tu , ubah ikut cita rasa korang . termasuk lah dengan code warna , okay . selamat mencuba . kalau nak cuba , komen komen lah entry ni . kalau menjadi bagitau , kalau tak menjadi pon , bagila tau . insyaallah , aku akan cuba tolong . kbai o/

P/S ; UNTUK CODE MARGIN-BOTTOM : -60 , KORANG KENA PANDAI ADJUST SEBAB DIA BERUBAH RUBAH MENGIKUT SIZE BACKGROUND GAMBAR YANG KORANG LETAK.

Tutorial : Image Hover Effect 4

Assalamualaikum & Salam Sejahtera

Haritu ada orang request tutorial image hover effect macam yang aku tengah pakai sekarang . masa tu takde kesempatan lagi nak buat . so aku hold dulu . hari ni baru dapat buat . actually , aku dah tak pakai image hover tu . tapi takpe , still boleh ajar macam mana nak buat . thanks Aqila Farah sebab sudi request tutor :)

LIVE PREVIEW

For Classic Template :

Dashboard > Template 

Copy and Paste code bawah ni dekat ATAS </style>

img {
border:1px solid #e6e6e6;
padding:10px;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
img:hover {
opacity:0;
-moz-transform: scale(0.3);
-webkit-transform: scale(0.3);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}

Save and Preview .


For Template Designer :

Dashboard > Template > Edit HTML

Copy and Paste code bawah ni dekat ATAS ]]></b:skin>

img {
border:1px solid #e6e6e6;
padding:10px;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
img:hover {
opacity:0;
-moz-transform: scale(0.3);
-webkit-transform: scale(0.3);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}

Save and Preview

Okay siap . amacam , okay tak image hover gitu ? haha . akan datang cuba nak buat image hover lain dulu .  kbai o/

Tutorial : Image Hover Effect 3

Assalamualaikum

Hari ni dapat buat satu image hover baru lagi . yang ni takde sesiapa request . tadi bosan . so godek godek code dekat SINI . lepas tu jumpa image hover ni . macam ohsem . tapi taktau lah pada korang macam mana kan ? meh preview sikit :


LIVE PREVIEW

Amacam . terasa macam nak letak dekat blog korang tak ? haha . actually , this hover macam a little bit messy . tapi tak kesah lah sama ada ade yang nak pakai ke tidak .

For Classic Template :

Dashboard > Template 

Copy and Paste code bawah ni dekat ATAS </style>

img {
-moz-transition:1000ms;
-webkit-transition:1000ms;
}
img:hover {
-webkit-transform:skewY(360deg);
-webkit-transition:1000ms;
-moz-transition:1000ms;
}

Save and preview .

For Template Designer :

Dashboard > Template > Edit HTML

Copy and Paste code bawah ni dekat ATAS ]]></b:skin>

img {
-moz-transition:1000ms;
-webkit-transition:1000ms;
}
img:hover {
-webkit-transform:skewY(360deg);
-webkit-transition:1000ms;
-moz-transition:1000ms;
}

Save and Preview .

Ade orang request macam mana nak buat image hover macam aku pakai sebelum ni . nanti aku akan bagi next tutor okay ? :)

Tutorial : Image Hover Effect 2

Assalamualaikum

Hari ni rasa macam nak bagi tutorial image hover effect . Aku belajar dekat satu laman web ni . lupa apa laman web dia . macam macam effect korang boleh buat . so kalau nak guna , sila lah komen , kredit ? terpulang .

LIVE PREVIEW HERE

For Template Designer User :

Dashboard > Template > Edit HTML . Ctrl + F perkataan ni ]]></b:skin> . Jumpa ? PASTE code bawah ni dekat ATAS code yang korang dah cari tadi .

img {
border:5px solid #fff;
box-shadow:0px 0px 2px #333;
-moz-transition:1500ms;
-webkit-transition:1500ms;
}
img:hover {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-transition:1500ms;
-moz-transition:1500ms;
}

Save and Siap .

For Classic Template User :

Dashboard > Template . Ctrl + F perkataan ni </style> . Kemudian paste code dekat bawah ni dekat ATAS code yang korang cari tadi .

img {
border:5px solid #fff;
box-shadow:0px 0px 2px #333;
-moz-transition:1500ms;
-webkit-transition:1500ms;
}
img:hover {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-transition:1500ms;
-moz-transition:1500ms;
}

Save and Siap .

Mudah je kan . amacam . awesome tak hover effect tu ? hehehe . actually ada banyak lagi yang lain . akan update dari masa ke semasa . kbai o/

Tutorial : Navigation with Hover (Part Three)

Assalamualaikum & Salam Sejahtera

Yoo. dah lama nak bagi dekat korang tutor menu tab with hover atau pon simple navigation . version ni agak unik sikit , sikit jela . tak banyak pon . actually aku belajar dekat SINI . so dah edit code dia sikit sikit macam yang korang tengok dekat live preview . kalau nak guna , sila komen . dah guna sila credit . sebab code nya agak complicated . 

 LIVE PREVIEW HERE

Amacam . berminat tak ? haha . meh sini nak ajarkan .

Template Designer :

Dashboard > Layout > Add a Gadget > HTML / JavaScript .

Pastu copy and paste code dekat bawah ni .

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}.top-menu li {display: inline-block;text-align: center;margin:10px 24px;position: relative;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
.top-menu li:hover {margin: 10px 24px; }
.top-menu li:active {margin: 10px 33px; }
.top-menu li a  {width: 95px;height: 90px;position:absolute;z-index:9999;top:42px;display:block;text-decoration: none;text-align:center;font-family:tt;font-size:8px;color: white;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li a:hover  {color:#000}
.top-menu li:active a {font-size:20px;top:37px;text-shadow: none;text-align:center;}
.top-menu li div.menu-item {width: 90px;height: 90px;display: block;border:3px solid #fff;box-shadow:0px 0px 2px #333;-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li:hover div.menu-item{-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;-webkit-transform: rotate(225deg);-moz-transform: rotate(225deg);-o-transform: rotate(225deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li:active div.menu-item{-webkit-border-top-left-radius: 50px;-webkit-border-bottom-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-bottomright: 50px;border-top-left-radius: 50px;border-bottom-right-radius: 50px; }
#tutor{ background:#fbb1b1; }
#affies { background:#fbb1e5; }
#facebook { background:#e2b1fb; }
#twitter { background:#b1bcfb; }
#tumblr { background:#b1fbb3; }
</style>

<div class="top-menu">
<li><a href="LINK GOES HERE">Tutorial</a><div class="menu-item" id="tutor"></div></li>
<li><a href="LINK GOES HERE">Affies</a><div class="menu-item" id="affies"></div></li>
<li><a href="LINK GOES HERE">Facebook</a><div class="menu-item" id="facebook"></div></li>
<li><a href="LINK GOES HERE">Twitter</a><div class="menu-item" id="twitter"></div></li>
<li><a href="LINK GOES HERE">Tumblr</a><div class="menu-item" id="tumblr"></div></li>
</div>

Save and siap .


Classic Template :

Dashboard > Template 

Copy code bawah ni . PASTE dekat ATAS </style>

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}.top-menu li {display: inline-block;text-align: center;margin:10px 24px;position: relative;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
.top-menu li:hover {margin: 10px 24px; }
.top-menu li:active {margin: 10px 33px; }
.top-menu li a  {width: 95px;height: 90px;position:absolute;z-index:9999;top:42px;display:block;text-decoration: none;text-align:center;font-family:tt;font-size:8px;color: white;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li a:hover  {color:#000}
.top-menu li:active a {font-size:20px;top:37px;text-shadow: none;text-align:center;}
.top-menu li div.menu-item {width: 90px;height: 90px;display: block;border:3px solid #fff;box-shadow:0px 0px 2px #333;-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li:hover div.menu-item{-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;-webkit-transform: rotate(225deg);-moz-transform: rotate(225deg);-o-transform: rotate(225deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li:active div.menu-item{-webkit-border-top-left-radius: 50px;-webkit-border-bottom-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-bottomright: 50px;border-top-left-radius: 50px;border-bottom-right-radius: 50px; }
#tutor{ background:#fbb1b1; }
#affies { background:#fbb1e5; }
#facebook { background:#e2b1fb; }
#twitter { background:#b1bcfb; }
#tumblr { background:#b1fbb3; }

Code bawah ni pulak . PASTE BAWAH </style>

<div class="top-menu">
<li><a href="LINK GOES HERE">Tutorial</a><div class="menu-item" id="tutor"></div></li>
<li><a href="LINK GOES HERE">Affies</a><div class="menu-item" id="affies"></div></li>
<li><a href="LINK GOES HERE">Facebook</a><div class="menu-item" id="facebook"></div></li>
<li><a href="LINK GOES HERE">Twitter</a><div class="menu-item" id="twitter"></div></li>
<li><a href="LINK GOES HERE">Tumblr</a><div class="menu-item" id="tumblr"></div></li>
</div>

Save and siap .

p/s : anda tak disarankan untuk ubah mana mana code selain dari code color . sebab takut dia tak jadi macam mana yang aku punya preview . :)

Freebies : Simple Background 5

Assalamualaikum & Salam Sejahtera


Hari ni nak bagi freebies lagi . dah taktau nak update apa . so update freebies . kali ni simple background . buat sendiri yang ni . guna apa ? macam biasa . photoshop . maaf kalau buruk and tak lawa . simple je kan ? haha . nak guna ? CTRL + Click pada gambar yang korang nak .

Re-freebies are NOT ALLOWED !