Monday, December 31, 2012

Tutorial : Image Hover #9


LIVE PREVIEW
Assalamualikum, ok Atin tak cakap banyak korang just click je preview untuk lihat hover.. Untuk hover kali ni image mula akan jadi black jab, lepas tu akan jadi terang :D .. Dah berminat? bleh try hihi :D
  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 
img{
-webkit-filter: brightness(-65%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover{
-webkit-filter: brightness(0%); 
}

Sunday, December 30, 2012

Tutorial : Add Follower Widget New Ver #2

Tumblr_mfszjrjxnb1rgvd7go1_500_large

Adoii , Atinkan dah ajar kan macam mana nak dapatkan follower widget. Dah buat tutorial SINI . Takkan korang masih tak dapat kot? -.- . Ok sebabklan blog pun jadi wajah baru Atin terpaksa buat cara yang baru punya -,-. Sebenarnya sama je caranya. korang je tak pandai nak try cari codenya -.-  Ok lah tanpa membuang masa Atin ajar untuk cara yang blog baru ni. sebab yang dulu blog lama kan?

Oh ye sebelum Atin terlupa, pastikan blog lama yang design template korang tu dah ada follower widgat tau, klo tak , codenya korang tak kan jumpa codenya.

1. Mula2 pergi Home > Template > click upgrade template..


2. Nanti akan tukar ke blog lama design template. Bila dah tukar , korang click --> view blog


3. Then akan terus ke blogger korangkan? Macam bawah ni .. Anyway photo bawah ni blog lama atin sebelum pakai classic punya hihi.. *rindu header tory Atin ni cute2. x nak delete haha...heade kesayangan ku --. .


4. Masa korang kat blog , korang tekat ctrl+U (serentak) , nanti akan jadi macam bawah ni


5. So masa ni lah korang kene cari code follower korang . Masa nak cari tekat ctrl+F (serentak) untuk cari code follower . Ada orang kate x jumpa code friendconnect kan? Tak pe korang cari code follower macam atin punye gambar atas ni.Tengok macam mana Atin dapat code tu

6.  Dah jumpa? now korang copy code bawahnya yang bermula dari

 <script type="text/javascript"> 
sehingga 
locale: 'en'}, skin); 
</script>
</div>


7. Dah copy sampai code tu? Now korang buka notebook korang dan paste dalam notebook korang.


8. Lepas tu, korg bole tukar dari Template Designer ke Template Classic semula. Caranya , korang pergi Template > errow bawah sekali dan click tengok contoh bawah ni.


9. nanti jadi ke blog classic balik . Then korang pergi ke template untuk letak code follower.

10. Yang code dalam notebook tadi korang copy paste masuk code semua tu dalam template , bahagian sideber . tau.

11. Dah paste cube korang preview . tengok jadi x? Kalau dah jadi Save lah ..

Done ..!! 




Tutorial : Cara Download Blogskin

 Tumblr_mfgycssxdd1qzgt9no1_500_large
Assalamualaikum semua . Atin minta maaf lah , Hari tu atin ada buat blogskin. tapi korang tak tau cara nak download kan? huhu. Atin pikir semua dah tau. Tapi tak pe lahatin ajar juga, sebab ramai kot yang tak tau nak download --'

1. Pergi ke web Blogskins
2. Korang pilihlah skin mana korang nak k . Dah pilih click tau


3. Next, korang pergi errow bawah sikit korang akan jumpa preview it, korang boleh click untuk lihat hasil macam mana akan jadi bile korang guna nanti.

4. Then bila korang rasa dah puas preview, korang click kotak bawahnya yang blogger Main korang click untuk download. Kalau tak prasan tengok contoh :


5. Lepas dah download, korang click yang korang download tadi


6. Nanti masa click akan jadi macam bawah ni kan? Korang pergi Edit > Select all . Nanti akan select sendiri


7. Now korang right click , dan pilih copy tau.


8. Then paste dalam template korang , Tapi pastikan dalm tu kosong k , baru boleh paste code masuk dalam template tu.. 

9. Then akhir sekali , click save.. 

10. Done. tengoklah hasihnya . 


Kalau tak faham boleh contact k.

Install Facebook Skin Timeline


Hye Assalamualaikum and Annyeonghaseyo semua >< . Ok Atin Tak taulah korang semua dah tau ke blum nak buat facebook korang tu jenis theme . Kan facebook dah tukar jadi timeline kan? Ahhh kalau ikutkan memang Atin tak nak guna timeline tapi tiba ade je yang pengaruh suruh atin pakai timeline. Alih2 terjadilah timeline, grrr -.- . Sebab sebelum ni Atin punya facebook cool je dengan theme dulu . 


Ok , sebab kan Atin unye dah tukar timeline Atin teragak2 nak jugak facebook atin nampak cool theme hahaha.. Ehh rasanya memang dah lame dah benda ni, Atin sengaja nak ajar korang baru hari ni >< . Ok , ada sesiapa yang dah tau benda ni dah lama muncul? Kalau dah tau boleh la jalan k haha..



 1. Mula2 korang kene pegi page untuk korang pilih mana paling menarik >< . Pergi page SINI


2. Next bila korang dah pilih korang click , dan selepas korang click , korang akan jumpa installkan? So korang click stylish


3. Lepas install , kat atas tu korang akan jumpa logo macam bawah ni


4. Lepas ada benda tu , korang pergi balik page tadi yang korang punya theme tadi, korang clcik Install with stylish. 



5. Dah click? ok selesai , korang uba pegi kat facebook korang . Jadi tak? haha

6. Dah selesai lah ><

Tutorial : Image Hover #8



Hye2, Macam biasalah Image hover haha.. Ok unuk yang hover ni maybe jarang orang buat kot>< . Hover yang ni, bile korang hover kat photo nanti akan ade bayang2 kat bawahnye. Sebenarnya ada 2 part tau yang part ke-2 nanti atin tunjuk, kalau nak jenis pertama boleh try k. tekan preview tau.

  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 


img{
padding:4px;
-webkit-box-reflect: below 0px -webkit-gradient
(linear, left top, left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.1)))
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
}
img:hover{
opacity: 1;-webkit-box-reflect: below 0px
-webkit-gradient(linear, left top,
 left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
}



------------------------------------------------------------------------


Untuk jenis ke dua sama je, just kalau korang nak tambah border effect boleh guna yang jenis hover ke-2 ni k.



  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 

img{
margin: 25px; opacity: 0.8; border: 10px solid pink;
/*Transition*/ -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
/*Reflection*/ -webkit-box-reflect: below 0px
-webkit-gradient(linear, left top,
left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
img:hover{
opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px
-webkit-gradient(linear,
 left top, left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

hijau : ketebalan border
merah : code color


Saturday, December 29, 2012

I'm Spy for Exchange Link !

Tumblr_mema54uqj71rrefkj_large
Ehemm!! cubaan... cubaan 1 2 3... ehemmm Assalamualaikum para-para blogger ku LOL >< . Atin nak umumkan , bahawasanya kepada mereka yang mengExchangekan blog ke blog, Atin nak nak cakap yang Atin memang sudah lama tak check tempat Box Exchange link Atin. So~ tiba-tiba Atin check balik memang terlalau ramai yang sudah hilangnya EXC link ku -,-. 


So dengan ini , Atin mahukan , kepada yang meng EXClink dengan atin tu , mulai hari ni , Atin akan check semua EXClink dalam box exc atin tu.. Atin akan terjah korang semua hahaha LOL XD.. But i'm so serius. Atin mungkin akan tutup sekejab tempat exclink tu , sebab Atin nak ubah tempat exclink tu. Bukan apa , maksud atin , blog terpilih yang maybe blog paling awesome akan masuk ke tempat paling TOP list , tidak kira dia exlink ngn atin atau pun tidak . 


Atin akan bagi tempoh seminggu or dua minggu untuk korang check balik tempat exc Atin ada tak nama nickname korang dalam excbox Atin tu. Sebab kebanyakannnya sudah mula tukar link blog, so perhatikannya. Kalau dalam exclink Atin tu ada nama nickname korang tapi tak sedar korang dah tukar link tolong bawak berjumpa dengan Atin huhu >< . Korang bagi tau nickname and box yang ke berapa tau. 


Tumblr_mfiy0jhy4c1rq2cxso1_500_large


kepada yang nak Exchange link tu, huhu Atin masih open lagi kot. Tapi dengan syarat, patuhi ayat Atin sekarang ni hahaha.. Maksudnya kalau nak exc link , pastikan tempat awak sudah punya exc link yang bernama [AtinVIP] huhu. Untuk kepada yang telah mengEXC , terutama orang lama tu, jangan agak-agak nak taruk or tak, sebab Atin sedang memerhatikan blog exc link Atin dan korang huaahhhhhhh XD. Atin tengah nak jadi spy blog ke blog ni huaaaahhh >< .


Hahah, ok lah Atin tau Atin sedang mengarut hari ni , tapi dalam diam Atin jugak akan jadi spy blog korang tau hahaha. Harap korang dapat membacanya dengan penuh rasa ikhlas? wait? apa yang aku tulis ni? Baboo betul la aku ni -,- . Ok , Atin dah tak nak cakap banyak. Now, i nak jadi spy hussshhhhhhh!! ANDA SEDANG DIPERHATIKAN !!! XD..


Tumblr_mfiv8a8eyx1rq2cxso1_500_large
Opss, Ada pernambahan . Semasa Atin menejah blog, Atin akan tulis macam ni "hye.. atin terjah blog sini :D.. sbb ape atin terjah? bace entry Atin k :D " klo ad ayat ni , maknanya Atin lihat exclink korang ada link Atin  .. . dan kalau ayat ini "hye.. atin terjah blog sini :D.. sbb ape atin terjah? bace entry Atin k ..nama (? ) " itu bermakna . tempat exclink atin ada nama korang tp korg xde link atin.. Dah faham? OK Jom mula terjah hihi XD..



Tutorial : Image Hover #7

Tumblr_med5f14gcn1qj39tmo1_500_large

LIVE PREVIEW
Sebenarnya tuto ni lebih kurang sama je dgn tuto ke-6 SINI , cuma hover die atin delete untuk ke sebelah kiri n kanan.... klo dh faham boleh cuba try OK.
  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 
Kiri
img{
background:transparent:
box-shadow:inset 0 0px 0px #FCDFFF;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
padding:5px;
border:1px solid #FFE8E8;
}
img:hover{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
box-shadow:inset -600px 0px 1px #FCDFFF;}
Kanan
img{
background:transparent:
box-shadow:inset 0 0px 0px #FCDFFF;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
padding:5px;
border:1px solid #FFE8E8;
}
img:hover{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
box-shadow:inset 600px 0px 1px #FCDFFF;}

Friday, December 28, 2012

Tutorial : Image Hover #6

Tumblr_m5hohp9vff1r62gwno1_500_large

LIVE PREVIEW

Kali ni punya hover , ade border and belakangnya ada colour.. Kalau boleh tengok preview tau :D..
  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 
img{
background:transparent:
box-shadow:inset 0 0px 0px #FCDFFF;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
padding:5px;
border:1px solid #FFE8E8;
}
img:hover{
box-shadow:inset 260px 0px 1px #FCDFFF,
inset -260px 0px 1px #F9B7FF;}

Tutorial : Letak Cursor

Tumblr_mfhg71kz1n1rbavh7o1_500_large

Asalamualaikum, hari ni macam biasa tuto je lah keje atin>< . Untuk tuto ni atin rasa korang dh tau kan? Tapi ade reQ yang mengatakan 'macam mn nak letak cursor' . Ok bagi mereka yang takpandai lagi boleh belajar -.-

1.Dashboard > Template > Edit HTML
2.Press Ctrl + F  serentak  dan cari code body {
3.Copy code ni
cursor: url(URL CURSORS), progress;
4. Paste di bawah code body { dan code a. {.
5.Preview & save

Tuesday, December 25, 2012

Tutorial : Navigate Hover #6

Tumblr_mc2trwompx1qcb59ho1_500_large
Atin ada buat skin pertama, yang navigate tu atin lupa nak buat tutonya ><.. So atin buat sekarang lah.. bagi korang yang nak navigate macam atin yang dalam skin tu.. nak tengok contoh , click preview k.
  • Template Design/simple : paste kat Html/Javascript
  • Blogskin/Classic : paste bawah code </style>
<style>
a.navi {
background: pink;
padding: 6px;
display: inline-block;
text-transform: uppercase;
font: 7pt trebuchet ms;
width: 70px;
text-align:center;
margin-bottom:10px;
color: #fff; 
border: 1px solid #fff; 
opacity:.8
}
a.navi:hover {
color:#fff;
background:url(http://data.whicdn.com/images/37003377/teen-top_1889284247601028765_large.jpg);
background-size:420px;
background-position:10% 230px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: 3.5s;
}
</style>
<center>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
</center>



Tutorial : Navigate Hover #5

Tumblr_mfdtgdpy9n1s0si72o1_500_large

Assalamualikum, Ok Atin tak nak cakap ape sebab korang semua dah tau kan ape yang atin nak tunjukkkan .haha .. ayat malas ku.. Nak tengok preview , click preview bawah photo 2 k :D.


  • Template Design/simple : paste kat Html/Javascript
  • Blogskin/Classic : paste bawah code </style>
<style>
.tabs {margin-left:-20px;list-style: none; }
#buttons {margin-top:25px;margin-left:22px;}
.button {float:left;margin-right:2px;height:92px;width:51px;}
#button1 {-moz-border-radius: 10px 0px 0px 10px;border-radius: 10px 0px 0px 10px;background-image:url(http://i.imgur.com/RvK6d.png);}
#button2 {background-image:url(http://i.imgur.com/yBLUW.png);}
#button3 {background-image:url(http://i.imgur.com/QjvPJ.png);}
#button4 {-moz-border-radius: 0px 10px 10px 0px;border-radius: 0px 10px 10px 0px;background-image:url(http://i.imgur.com/cbVNR.png);}
.nav {width:50px;padding-top:3px;padding-bottom:3px;margin-top:0px;font-size:8px;font-family:tinytots;letter-spacing:1px;text-align:center;opacity:0;overflow:hidden;color:#fffdfd;background:#7A92DC;4-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}
.button:hover .nav {opacity:0.8;margin-top:60px;}
</style>

  • Next copy code bawah ni
<ul class="tabs">
<li><a href="LINK HERE"><div class="button" id="button1">
<div class="nav">TITLE</div></div></a></li>
<li><a href="LINK HERE"><div class="button" id="button2">
<div class="nav">TITLE</div></div></a></li>
<li><a href="LINK HERE"><div class="button" id="button3">
<div class="nav">TITLE</div></div></a></li>
<li><a href="LINK HERE"><div class="button" id="button4">
<div class="nav">TITLE</div></div></a></li>
</ul>
</div>
  • Paste kat sidiber korang k.

Freebies : Background Part 43



http://i.imgur.com/M2LtG.gif


http://i.imgur.com/DFu5V.gif


http://i.imgur.com/qS8gG.gif


http://i.imgur.com/IRrUz.gif


http://i.imgur.com/G4DA5.gif


http://i.imgur.com/1XIhh.gif


http://i.imgur.com/z3NNL.gif


http://i.imgur.com/24u5T.gif



http://i.imgur.com/TTREW.gif



http://i.imgur.com/sv2Xw.gif


Tutorial : Image Hover Text #4

Tumblr_mfhpr13cjx1qc7belo2_1280_large

Assalamualiku semua, OK ini hari atin nak tunjuk korang buat image hover yang ke 4 punya.. maybe sama yang sebelumnya tapi sedikit beerlainan hovenya :D.. hope u like it.. you want try? ..

LIVE PREVIEW


     
  • Template designer paste dalam HTML/GADGET 
  • Blogskin Ikut step bawah ni:
  
 Dashboard > Template > Edit HTML
 Tekan ctrl + f (serentak) dan cari code </style>
 Copy code bawah ni:

<style>
.box1 img {-webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.box1 .effect {background-color: #FFF; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.box1 h2 {background: #FBEBED; margin: 20px 40px 0px 40px; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); color: #333; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.box1 text {color: #333; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear;}
.box1 a.info {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear;}
.box1:hover img { -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.box1:hover .effect {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.box1:hover h2,.box1:hover text,.box1:hover a.info {-webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.box2 {width: 300px; height: 200px; margin: 10px;float: center; border: 1px solid #fff; overflow: hidden; position: relative; text-align: center; background: #fff;}
.box2 .effect,.box .content {width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0;}
.box2 img {display: block; position: relative;}
.box2 h2 {text-transform: uppercase; color: #AAA; font-family: calibri; text-align: center; position: relative; font-size: 15px; padding: 5px; margin: 10px; background-color: #FBEBED; margin: 0px; margin-top: 10px; margin-bottom: 10px;}
.box2 text {font-family: calibri; font-style: normal; font-size: 11px; position: relative; color: #000; padding: 10px; text-align: center; margin: 2px;}
</style>
<br />


 Paste code tadi di bawah </style>
 Next , copy code yang bawah ni pula
<br />
<div class="box2 box1">
<img src="http://data.whicdn.com/images/46976936/tumblr_mfhpr13cjx1qc7belo2_1280_large.png" />
        <br />
<div class="effect">
<h2>
Welcome</h2>
<text>YOUR TEXT</text><br />
<br />
</div>
</div>
</div>

 Paste code tadi kat bahagian sideber korang
 Preview & save.

hijau : url image
biru : title
merah : text


Monday, December 24, 2012

Blogskin #2 : Hello Kitty

Alhamdulillah, Terima kasih pada yang sudi komen , blog Atin yang dulu . Atin tau ramai yang suka singgah blog Atin bukan sebab tuto, tapi sebab header Atin buat sendiri tu . ala yang BIG FACE HELLO KITTY tu la --' . 
Ok sebabkan korang minat sangat header yang bertemakan Hello Kitty , Atin ikhlas la nak bagi korang skinya ..haha

Korang jangan ubah credit tau.. seba ikut dah bertemakan , So jangan pandai2 nak curi header kepunyaan ati.. Kalau nak curi tu agak2 lah .. Lain la kalau atin buat freebies header hello kitty tu.. tp yang skin ni jgn ambik. nak ambik header kene terus ke skin sebenar.. AMARAN KERAS LO >< 


Ok untuk yang ni, korang preview ade nampak code yang comen tukan? BTW bende tu xde papaelah.. memang macam tu..Kalau korang guna pun xde keluar macam tulah.. ikut untuk komen korang.. kalau yang review tu cume nakbg tgk skin je.. yang komen tu x rosak pun haha.. OK .. Dah boleh ambik :D ..

Tak tau nak taruk? boleh selak --> PAGE Tutorial


.