hello sobat , di posting saya kali ini saya akan menshare tentang cara membuat slider to unclock di blog.
slider ini seperti ipad loh ? gak percaya ? yuk liat demo nya

1. Login Ke blogger
2. masuk ke template > edit html
3. cari kode ]]<>/b:skin> dan masukan kode di bawah ini di atas kode
   ]]<>/b:skin>
   

   #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;
   }
   #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/AVvXsEiuhd6yw5pANRHmr1euAvdcgJCD6YjD5dDemfJJzRoPad_b54ddfuHIWWJPMzsRHMVz4YyRsdQKae3t9UPGAIAkAQDH14Xsz9ihTZHLxxJxY_579tyA7TlsYm9AgFMWnRI4w3IBo8k3-OA/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;}

4. Kemudian cari kode </body> kemudian paste kode di bawah ini di atas kode </body> :
   

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

5. peringatan : yang warna hijau bisa di ubah sesuai anda ,,, tapi jangan terlalu panjang cukup hingga 12 kata saja.
6. kemudian cari kode </head> copy kode di bawah ini di atas 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'/>

   
   Dan klick Simpan Template ,,, dan kemudian liat hasilnya ,,, blog anda menggunakan slide to unclock seperti pada Tablet atau iphone anda ... !!
   
   Jangan Lupa komentar nya dan follow nya !!
   
   Sumber : http://katsufirst.blogspot.com/2012/10/cara-membuat-slider-to-unclock-di-blog.html