Cara Membuat Slide To Unlock Untuk Blogger

Minggu, 07 Juli 2013

Cara Membuat Slide To Unlock Untuk Blogger - Widget ini apabila dipasang di blogger anda akan semakin keren saja karena widget ini hampir sama dengan pengunci hp iphone. Sebenernya widget ini tidak mempunyai fungsi sama sekali tetapi widget ini mempunyai kelebihan yaitu, a) Efeknya lebih keren. b) Lebih ringan untuk dipasang di blogger. c) Lebih mudah untuk memasangnya di blogger. Apakah anda ingin memasang widget ini untuk memperkeren blogger anda? ikutilah langkah-langkah dibawah ini.

1. Masuk ke blogger.
2. Pilih template.
3. Pilih edit html.
4. Cari kode dibawah ini.

]]></b:skin>

5. Salin kode dibawah ini dan taruh kode tersebut diatas kode ]]></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/AVvXsEgWs9V70_Uy46CF-knZfJoTBAmQM44J292A-q6z1MCx9V1pGaxfz8RI6H_7noqhiuBIYFbYDDdhgpeT0E712g_Il1_vDShUl0jrTwV8X_ByiDUAu-uF6Qr3AsIGcn2Z4NKzOZzhLUoVQPU/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;}

6. Cari kode <body>
7. Salin kode dibawah ini dan taruh dibawah kode <body>

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

8. Lalu, anda cari kembali kode </head>
9. Salin kode dibawah ini dan taruh kodenya diatas kode tadi.

<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'/>

10. Simpan.