Halo sob kali ini D-G Blog akan mengeshare Slide To Unlock , fungsinya hanya untuk memperkeren tampilan blog saja, dulu saya pernah m...
Halo sob kali ini
D-G Blog akan mengeshare Slide To Unlock , fungsinya hanya untuk memperkeren tampilan blog saja, dulu saya pernah mengeshare yang
welcome intro, bedanya kali ini full CSS jadinya keren abis, sebelum kita buat alangkah lebih baik kalian lihat dulu Preview atau Pratinjaunya klik
disini, sesudah muncul panahnya diklik lalu ditahan kekanan dan blog kalian akan terbuka, wah keren ya .Mau tahu cara bikinnya?
Langsung saja
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;}
#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/AVvXsEjrzAjz8_C_dxdHuLeUpct_rwsuYKg7MHxAguDUVLi5ljlWJelCijrEnJVeI1IUWfeWZA7_Sm9S75E0J6H2E0FAiOvuSb6SW3C1pRnfXYOh-yG-d6lxxQ7XyFJOgokQjwNlW0iSggvHe2c/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. 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
