Cara Membuat Slide To Unlock Di Blog

Rabu, 03 April 20133komentar

Cara Membuat Slide To Unlock Di Blog - halo sobat blogger sudah lama saya tidak share tutorial blog,dan kali ini saya share membuat slide to unlock di blog..
Slide To Unlock seperti di BB dan Iphone sobat.....
dan perlu diingat Memasang Slide To Unlock Di Blog ini cuman diawal aja seperti halnya Ipad.

ok langsung saja jika sobat tertarik ,berikut cara memasang slide to unlock di blog :

1.masuk ke blog sobat
2.pilih template -> Edit HTML -> Centang
3.lalu cari kode ]]></b:skin>

4.letakkan kode berikut diatas kode nomer 3

#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/AVvXsEg_tbQyVDngKj-CB8RHqTWdMv4R4ehoC7fyi-7setjuhLreaYmpUIqAKQweSQKTvvs1_djPM-vczx1Jcxp5fdcmD93U5MmRoJ4gT3xLGmqFAHMlepSs2D8lUtlvSXcDvAgsjqComp33ZMU/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;}

5.lalu cari kode <body> dan letakkan kode berikut di bawahnya

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

6.etakan lagi jquery dibwah ini, diatas kode </head>

7.simpan dan lihat hasilnya,,,

sekian dulu cara memasang slide to unlock di blog,semoga bermanfaat..

dan salam blogger :)

Share this article :