♥♡♥ LIFE ♥♡♥

✿ STATUS ✿

✿ EVERY DAY IS A NEW BEGINNING , TAKE A DEEP BREATH AND START AGAIN ✿

✿ DREAMER ✿

WHATEVER YOU DECIDE TO DO , MAKE SURE IT MAKES YOU HAPPY

✿ CBOX ✿

✿ ARCHIVE ✿

✿ TWEET ✿

Tweets by @amirasyf_

✿ CREDIT ✿

Tutorial:Slide unlock

WRITTEN BY AMIRA AT Saturday, 19 January 2013 & got 0 Comments

Ok mira bt nie tpy x jdy..mgkin korang bt jdy kot..

Ha..tu gmbr contoh nye..

Dashbooard-->Edit Html-->Tick expand widget-->Memudahkan carian tekan F3-->search kod nie ]]></b:skin>

Last sekali tekan preview..klau x de error ok la..jgn main ssave je!klau x jadi ntahla..klau blog nye mkin trok sori sesangat..klau mnjadi alhamdulila!

NI HA CODENYE..COPY PASTU PASTE KT ATS CODE ]]></b:skin>

#well {
padding: 140px 20px 20px 300px;
background:#000;
overflow: hidden; 
width:100%;height:100%;
position:fixed;
z-index:9999999999999999;
-webkit-user-select: none;
font-family: 'Open Sans', sans-serif;
}

#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F); 
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F)); 
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7SPIulvwxL0KdRuJk73kw_Midscmua3N-txrz92jso6fnTiJYlIUNwo4mk55LD7RbzDS3E5Qt6s4MRFlYUInxtoMUX-wGj7ldUZILWMp78i-jqGzU_4IK5iJ52fldquTkpnhy1khfLo/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
opacity:0.8;
}
#slider:hover {opacity:1;}

@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
}

.bgslide {background:#000;width: 722px;
border-radius: 15px;}

7. Pas tu letakan lagi kode HTML dibawah ini, didalam/dibawah kode <body>

<div id='well'>
<div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>

8. letakan lagi jquery dibwah ini, diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'/>
<script src='http://css-tricks.com/examples/SlideToUnlock/js/slidetounlock.js'/>

NEWER POST

Post a Comment

Tutorial:Slide unlock

written by (change with your name) atSaturday, 19 January 2013 & got 0 Comments

Ok mira bt nie tpy x jdy..mgkin korang bt jdy kot..

#well {
padding: 140px 20px 20px 300px;
background:#000;
overflow: hidden; 
width:100%;height:100%;
position:fixed;
z-index:9999999999999999;
-webkit-user-select: none;
font-family: 'Open Sans', sans-serif;
}

#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F); 
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F)); 
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7SPIulvwxL0KdRuJk73kw_Midscmua3N-txrz92jso6fnTiJYlIUNwo4mk55LD7RbzDS3E5Qt6s4MRFlYUInxtoMUX-wGj7ldUZILWMp78i-jqGzU_4IK5iJ52fldquTkpnhy1khfLo/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
opacity:0.8;
}
#slider:hover {opacity:1;}

@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
}

.bgslide {background:#000;width: 722px;
border-radius: 15px;}

7. Pas tu letakan lagi kode HTML dibawah ini, didalam/dibawah kode <body>

<div id='well'>
<div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>

8. letakan lagi jquery dibwah ini, diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'/>
<script src='http://css-tricks.com/examples/SlideToUnlock/js/slidetounlock.js'/>