Posted by : Unknown Saturday, March 9, 2013

1.masuk ke blog sobat
2.pilih template -> Edit HTML -> Centang
3.lalu cari kode  ]]></b:skin>

4.letakkan kode berikut diatas kode nomer 3

#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/AVvXsEj0oOHIMAqLKXrEhKNnarLjD36D2rbnS4iQ5QslERmvNUi623P9pEz0cBvv7K6Q8M-JYtuZxzmpSQW7gCA8VzyXdlmLyudnGq1zoqkIWik3wrvkFZVpyp-klUaK67mtGZrV7KhiKmq79g0/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;}


5.lalu cari kode <body> dan letakkan kode berikut di bawahnya


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




6.etakan lagi jquery dibwah 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'/>



7.simpan dan lihat hasilnya,,,

sekian dulu cara memasang slide to unlock di blog,semoga bermanfaat..
dan salam blogger :)

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © 2013 Z-C - Shingeki No Kyojin - Powered by Blogger - Designed by Johanes Djogan -