Seperti Biasanya,,Kali ini saya share trik blogger yang katax trik ini baru di keluarin"WOW" sangat mantab
oke tanpa lelet saya share ajha tanpa lama,,soalnya malas ngetik :
- Login Ke Blogger
- Masuke Ke Template > Edit HTML
- Click Expand Template Widget
- Cari Kode ']]></b:skin>' dan masukan kode dibawah ini diatas kode ]]></b:skin> :
#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;
}
#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/AVvXsEiSM9Tn85LncAzy7zpx1-ziD7PjYyqAa3zCDcFnlxV9nQDRgg98R3aS-8cf5GD1fIjj-KXHC5HjjezO2TmfKSp1gcGplGKzgprwgfylwH4nDVaMmSBWjyt_8VdrQPtZSzjw6qyFrMuzYmw/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;}
- Kemudian Cari kode ' <body>' kemudian paste kode dibawah ini,,diatas kode ' <body>' :
<div id='well'>
<div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>
- -Peringatan : Warna Hijau bisa diubah sesuai anda,,tapi jangan terlalu panjang,,Cukup Hingga 12 Kata Saja
- Kemudian Cari kode ' </head>',,copy kode dibawah 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'/>
Dan Klik Simpan,,Kemudian liat hasilnya,,Blog anda mengunakan Slide to unlock seperti pada Tablet atau Iphone anda...! Jangan Lupa Komentar dan Follow Jika Anda Ihklas
Artikel keren lainnya:
keren bro ...
BalasHapustapi gx bermanfaat -_-
saya butuh nya template
UPDATE TEMPLATE LAGI DONG BANG
jiaah,,
BalasHapusWih.. keren bgt mas sangat berguna buat saya, ijin coba ^_^
BalasHapusyupz sob,,
BalasHapusmoga sukses
Coba dlu ahhh
BalasHapusYa sob,,Semoga Sukses
BalasHapussumbernya mana sob? ini dari blog djohanes lho
BalasHapuskomen balik ya dmarchiano.blogspot.com ada template
azzz,,tapi gak ada mirip !! cuman kodenya ajha
BalasHapus