Hallo pembaca setia gyshare, kali ini saya akan memposting bagaimana cara menambahkan SLIDE TO UNLOCK pada blog anda hehehe... seperti Handpone saja widget ini sama seperti yang saya posting sebelumnya yang membuat Energy Saving Mode .
Langsung saja ikuti step by stepnya:
1. Masuk ke blog anda
2. Template
3. Edit HTML, Expand Template Widget
4. Pertama cari kode ]]></b:skin>
5. Letakan kode dibawah ini diatas ]]></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;}6. Cari kode <body>
#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/AVvXsEiHbdeppEkzHN6dj-3mTW6hHSORdR9v8VJ7EoQATtrzW3MAtW_xsVFZwPywZiVGGd5M1Sj_GNZcp9a9oesd116wUD4LDQhKY6Kqirl6AZijwwhFZa0CaLZP3M9vWnVPy1X06YLx1u7x2qw/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. Letakan kode ini dibawah <body>
<div id='well'><div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>8. Cari kode </head>
9. Letakan kode 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'/>10. Selesai dan hasilnya akan seperti ini
Gampang kan bray semoga berhasil.
Semoga bermanfaat
By: Moch Gian Destian ^_^
0 komentar:
Posting Komentar