Thursday, January 30, 2014

Tutorial : Cbox With Box Hover

こんにちは, 안녕하세요 , Assalamualaikum. 
Hehe.. Atin dah hidup balik lagi hahah. Atin nak buat tutor ni . Korang boleh try atau ada yang dah tau caranya . Atin memang dah tau da tutor ni . Cuma atin x buatlah . Tapi terpkasa buat sebab 'req' .k . tajuk un atin main hentam je kan hahah ..code asal dari wana



Blogskin/classic template 
 Dashboard > Template
 Tekan Ctrl + F serentak dan cari code </style>
 Copy code bawah ni

<style>
.ch-item {
 width: 100%;
 height: 85%;
 border-radius: 10%;
 position: relative;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;
}

.ch-info-wrap{
 position: absolute;
 width: 270px;
 height: 230px;
 border-radius: 10%;

 -webkit-perspective: 800px;
 -moz-perspective: 800px;
 -o-perspective: 800px;
 -ms-perspective: 800px;
 perspective: 800px;

 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

 top: 20px;
 left: 20px;
 background: #222;
 box-shadow:
  0 0 0 20px rgba(255,255,255,0.2),
  inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info{
 position: absolute;
 width: 270px;
 height: 230px;
 border-radius: 10%;

 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;

}

.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 10%;
 background-position: center center;

 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
}

.ch-info .ch-info-back {
 -webkit-transform: rotate3d(0,1,0,180deg);
 -moz-transform: rotate3d(0,1,0,180deg);
 -o-transform: rotate3d(0,1,0,180deg);
 -ms-transform: rotate3d(0,1,0,180deg);
 transform: rotate3d(0,1,0,180deg);
 background: #fff;
}

.ch-img-1 {
 background-image: url(http://data2.whicdn.com/images/98396939/large.jpg);background-size:400px;
}

.ch-item:hover .ch-info-wrap {
 box-shadow:
  0 0 0 0 rgba(255,255,255,0.8),
  inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
 -webkit-transform: rotate3d(0,1,0,-180deg);
 -moz-transform: rotate3d(0,1,0,-180deg);
 -o-transform: rotate3d(0,1,0,-180deg);
 -ms-transform: rotate3d(0,1,0,-180deg);
 transform: rotate3d(0,1,0,-180deg);
}

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}
</style>

 Paste di atas code </style> tadi.
 Copy code bawah ni pulak
<ul class="ch-grid">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
PUT YOUR CONTENT HERE !
</div>
</div>
</div>
</div>
</li>
</ul>
 Paste kat bahagian mana yg korang suka
 Preview and save




Template designer
 Dashboard > layout > add a gadget > html/javascript
 Copy semua code2 bawah ni

<style>
.ch-item {
 width: 100%;
 height: 85%;
 border-radius: 10%;
 position: relative;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;
}

.ch-info-wrap{
 position: absolute;
 width: 270px;
 height: 230px;
 border-radius: 10%;

 -webkit-perspective: 800px;
 -moz-perspective: 800px;
 -o-perspective: 800px;
 -ms-perspective: 800px;
 perspective: 800px;

 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

 top: 20px;
 left: 20px;
 background: #222;
 box-shadow:
  0 0 0 20px rgba(255,255,255,0.2),
  inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info{
 position: absolute;
 width: 270px;
 height: 230px;
 border-radius: 10%;

 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;

}

.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 10%;
 background-position: center center;

 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
}

.ch-info .ch-info-back {
 -webkit-transform: rotate3d(0,1,0,180deg);
 -moz-transform: rotate3d(0,1,0,180deg);
 -o-transform: rotate3d(0,1,0,180deg);
 -ms-transform: rotate3d(0,1,0,180deg);
 transform: rotate3d(0,1,0,180deg);
 background: #fff;
}

.ch-img-1 {
 background-image: url(http://data2.whicdn.com/images/98396939/large.jpg);background-size:400px;
}

.ch-item:hover .ch-info-wrap {
 box-shadow:
  0 0 0 0 rgba(255,255,255,0.8),
  inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
 -webkit-transform: rotate3d(0,1,0,-180deg);
 -moz-transform: rotate3d(0,1,0,-180deg);
 -o-transform: rotate3d(0,1,0,-180deg);
 -ms-transform: rotate3d(0,1,0,-180deg);
 transform: rotate3d(0,1,0,-180deg);
}

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}
</style>

<ul class="ch-grid">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
PUT YOUR CONTENT HERE !
</div>
</div>
</div>
</div>
</li>
</ul>
 Paste dalam html/javascript tadi.
 Preview and save

Thursday, January 23, 2014

Freebies : Background Part 49


http://2.bp.blogspot.com/-5Ck4MXP-BzY/UuCqxLEHJLI/AAAAAAAAD1Y/8qIfIRTSQMQ/s1600/0iQxuv.png


http://4.bp.blogspot.com/-sWZzGBCercE/UuCq2Ur2bJI/AAAAAAAAD2Q/A4xdUqu-Vys/s1600/ZwQ3zJ.png

http://3.bp.blogspot.com/-XOMdGlg78ks/UuCqyigJ4RI/AAAAAAAAD1g/yme9pNZSFCE/s1600/A6jUAn.png

http://4.bp.blogspot.com/-2bLedML1vL4/UuCqy_XPpmI/AAAAAAAAD1k/wwd5FoKnyFU/s1600/FMBXVZ.png

http://1.bp.blogspot.com/-o20vb465Kqs/UuCqzzQIDqI/AAAAAAAAD1w/mdvGY_ZhVAo/s1600/itnZtY.png

http://1.bp.blogspot.com/-NCTQUY33wi8/UuCq0cLuBkI/AAAAAAAAD14/i4ye0gY3MWE/s1600/mKSW54.png

http://1.bp.blogspot.com/-IuyWEoEEzn0/UuCq1_wC_dI/AAAAAAAAD2I/SI11exz-uL8/s1600/rM7y0n.png

http://1.bp.blogspot.com/-MZC-Hj0FD5M/UuCq08cg18I/AAAAAAAAD18/gvOjEavd7yE/s1600/oo6zC3.png

http://1.bp.blogspot.com/-iX38p7ejmjA/UuCq2zXshXI/AAAAAAAAD2U/fqoqQNWI03U/s1600/yjs1P7.png



Sunday, January 19, 2014

Tutorial : Cara Online WeChat di Web

WeChat for PC or Computer Free Download

こんにちは, 안녕하세요 , Assalamualaikum.

Lama jugak atin tak update kan hahah .. Atin tau ramai dah tak singgah blog atin . Maklumlah dah ramai blogger yang hebat2 .

Ok atin tak nak cakap banyak . So hari ni atin dapat idea nak bagi korang tau cara nak WeChat tanpa fon . Tapi WeChat dekat internet je hahah . Ni bagi memudahkan korang untuk strees asik dengan dua benda nak kena tengok . Wechat kat fon and bukak tenet kat lappy .. nampak sangat kan kita kena pegang 2 benda ni hahaha . Sama la atin pun mcam tu .. So ni kemudahan nya. Sebelum tu atin nak berterima kasih pada dongsaeng Paan sebab ajar noona atin pasal benda alah ni hahah ..




1. Mula2 pergi kat web -> WeChat web
2. Dalam masa yang sama korang buka WeChat kat fon korang tu .


3. Fon korang tu pergi kat Imbas Kod QR



4. *Kalau cara atin paling mudah nak imbas kod QR ni . korang snap scan QR web ni kat camera fon korang .. 
*Contoh yang atin snap kat camera fon atin huhu..


5. Lepas je korang snap macam tu . korang pergi balik kat Imbas Kod QR . pergi tekan atasnya "..." pilih "chose photo" ambik photo scan yg korang snap tu ..



6. Tak sampai 1 minit WeChat korang dah masuk dalam web .. boleh la korang wechat sepuas2nye kat lappy korang tu huhu .. 

Photo: Ni la jawabnye .. bile dua2 benda nak layan .. ahh dah ni sekarang canggih .. layan 1 je .. sambil on9 tenet sambil wechat kat tenet jugak.. fon hanya tinggal masuk hospital hahaha XD

Good luck .. Tak faham lagi tanya atin k huhu .. Jangan lupe , kalau rajin add la wechat atin "atinfatin95" .