Friday, October 19, 2012

Cara membuat slider to unlock di blog

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





nah gmna, bagus bukan ? langsung  ikuti cara2 step2 nya yuk..

  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(http://3.bp.blogspot.com/-UWPmToPSpzo/UH0iTkibr3I/AAAAAAAADUg/rIvLHbvNMrk/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

Bagikan

Jangan lewatkan Juga Postingan Gue :

Cara membuat slider to unlock di blog
4/ 5
Oleh

Subscribe Gue Lewat email

Suka dengan artikel gue di atas? Tambahkan email Anda untuk berlangganan.

Tampilin Koment
Tutup Koment

7 komentar

Tulis komentar
avatar
October 20, 2012 at 8:44 PM

makasih atas info.a
mampir ke sne juga ya
http://bondowoso-jawa.blogspot.com/

Reply
avatar
October 20, 2012 at 9:36 PM

Blognya kamu sudah saya follow

http://infoku-bloggerku.blogspot.com/

Jangan lupa followback.

Reply
avatar
October 20, 2012 at 10:03 PM

sudah saya follback Sobat...
Visit Terus...http://iffatblogger.blogspot.com/

Reply
avatar
August 9, 2013 at 4:21 PM

Kok saya gagal ya? kok malah jadi energy saving mode bang?
liat aja sendiri bang http://nemo-pc.blogspot.com
Mohon Pencerahannya bang .
saya lagi butuh banget nih bang . :)

Reply
avatar
August 9, 2013 at 4:55 PM

Tolong Follow Back kawann ^-^

Reply
avatar
March 31, 2014 at 5:05 PM This comment has been removed by the author.

Untuk menyisipkan kode pendek, gunakan ... KODE ...
Untuk menyisipkan kode panjang, gunakan ... KODE ...
Untuk menyisipkan gambar, gunakan ... URL GAMBAR ...

Rules :
-DONT SPAM
-DONT FLOOD
-DONT PORNO
-DILARANG NGEMIS/MINTA TEMPLATE IFFAT BLOGGER
-DILARANG BERKOMENTAR DENGAN KATA AGAN.
-BILA ANDA INGIN MENDAPATAKAN INFO YANG TERUPDATE GAME PC DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN DAN BERETIKA
-FOLLOW BLOG INI MAKA SAYA AKAN FOLLBACK