-->

Notification

×

Iklan

Iklan

Indeks Berita

Tag Terpopuler

Membuat Slide to Unlock di Blog

Friday, December 14, 2012 | Friday, December 14, 2012 WIB Last Updated 2012-12-14T03:39:08Z

Pada kesempatan ini IT Sasak akan berbagi tips dan trik untuk blog...
Sebelum di coba alangkah baiknya dilihat dulu demonya disini

Kalau sudah dilihat dan tertarik untuk mencobanya, silahkan ikuti langkah-langkah pembuatannya step by step di bawah ini:

1. Masuk www.blogger.com
2. Template
3. Edit HTML, Expand Template Widget
4. Pertama cari kode ]]>

5. Letakan kode dibawah ini diatas ]]>
 
#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/AVvXsEgyaWzQhBkWIpIvy6FaJZxPypi8MTqbO1UMVUG3st3Ezl6xG9bly2XHEr4dpdcwgpZgBhm4EZe8j8j9fZSu4D9qyJyZ8sgFAaCjx7whdKLoPS2nkzZ6PDUrUH8l9HedEXwtrlMM-hrBAi0/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
7. Letakan kode ini dibawah
 

slide to unlock


8. Cari kode
9. Letakan kode ini diatas kode
 




10. Silahkan dilihat hasilnya pada blog sobat.

Selamat mencoba dan semoga bermanfa'at,,, ^_^

Sumber : davidgunawan123.blogspot.com