Membuat pop up slider tampilan android di blog

Dari judulnya saja udah menarik, bagaimana nanti praktiknya yah.... tanpa basa basi, tanpa padang bulu,,,
langsung kita sikat saja kodenya !!!
Sikat tapi jangan di makan yahh ....

berawal dari kode css :

<style>
#page-wrap {width: 720px; margin: 0 auto; padding:300px; position:fixed; background:transparant center;}
#well {
padding: 14px 20px 20px 20px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;

background: -moz-linear-gradient(top, #010101, #181818);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));

border: 2px solid #454545;
overflow: hidden;

-webkit-user-select: none;
}
#codestyle {
background: -moz-linear-gradient(left, #4d4d4d, 0.4, #4d4d4d, 0.5, white, 0.6, #4d4d4d, #4d4d4d);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));

-moz-background-clip: text;
-webkit-background-clip: text;

-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;

-webkit-animation: slidetounlock 5s infinite;

font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300; color:#666;
padding: 0;
width: 200%;

-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zdI1ln-Pyb-BgKVB03aGDoZmdHp_sSNGzQpPL13n7sRAahEKjLU3jRiFhZLU_Q6EaXu-5Bd2jsfFFyCJda9a2BjM4rS8bttgs5lwiK2L_XbELwXh1ltR-1N6hAfTPBCQeZNzzWOnTVg-/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
@-webkit-keyframes slidetounlock {
0% {
background-position: -820px 0;
}
100%{
background-position: 820px 0;
}
}
</style>

Berlanjut dengan kode 3 buah script yang tanpa repot dan tanpa ragu kamu hanya copas ajah hehe... :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script src='http://ycusoy.googlecode.com/files/code%2Bstyle%2Bslide.js'></script>

Lalu kode htmlnya yang nanti di paste pada halaman posting...

<div id="page-wrap">
<div id="well">
<div id='codestyle'><strong id="slider"></strong> <span>slide to unlock</span></div>
</div>
</div>

bagaimana bro and sista... mudah bukan ?? silahkan praktekan dan sebar luaskan artikel ini. dan jangan lupa yah sumbernya ...

contohnya pasti udah kamu lihat kan ??

slide to unlock