Halo sobat Share-Tuts kembali lagi nih dengan Admin yang super ganteng yang bisa bikin kalian semua ketawa terbahak - bahak =)). Sobat pasti taukan "Slide to Unlock" seperti diBlackBerry dan juga IPhone. Nah disini Share-Tuts akan memerikan tutorial kepada sobat semua tentang Membuat Slide to Unlock diBlog. Untuk demo sobat bisa melihat Disini
Berikut tutorial pembuatannya :
1. Sobat login ke Blogger
2, Pilih Template
3. Pilih lagi Edit HTML
4. Centang Expand Template Widget
5. Lalu sobat cari kode ]]></b:skin>
6. Setelah ketemu letakan kode dibawah ini diatas kode ]]></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/AVvXsEhDpu-T47u-O0Jg3idzhDN1Qlx2mskt4_WjWHyNQqDjxozk3RNXL-xr7X8UHTxbliHhhQF76TQoXMXCTCaTCOvWN_uOyYdzxXGG_zh4344lDov1_Qlohl0htjnZIJfQuXNGs1dTi-thnmY/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;}
7. Lalu letakan lagi kode HTML dibawah ini, didalam/dibawah kode <body><div id='well'> <div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>8. letakan 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'/>8. Setelah selesai semua kode dimasukkan seperti yang Share-Tuts ajarkan pilihlah Simpan Template.kalau sobat masih ragu sobat bisa mencoba klik Pratinjau terlebih dahulu untuk mengetahui apa cara yang Share-Tuts beri ini berhasil atau tidak.
Ingin tau lebih detailnya silahkan ke sumbernya Klik Disini.
Selesai sudah tutorial Membuat Slide to Unlock diBlog. Semoga sobat berhasil mempraktekkannya.
Source : http://djogzs.blogspot.com
Anda sedang membaca artikel tentang Membuat Slide to Unlock diBlog dan anda bisa menemukan artikel Membuat Slide to Unlock diBlog ini dengan url http://share-tuts.blogspot.com/2012/11/membuat-slide-to-unlock-diblog.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Slide to Unlock diBlog ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.
Ingin mempromosikan Blog, Produk, Bisnis, Jualan atau lainnya ? Sobat bisa memasangnya diBlog ini. Tunggu apa lagi mumpung masih ada slot untuk sobat. Silahkan hubungi ane dengan meng-Klik Disini
6 komentar:
ini seperti save energi ya sob ??
@Blog Lumajang beda juga sob kalau save energy itu apabila kita tidak melakukan apa - apa maka akan muncul terus kalau ini cuman diawal aja seperti halnya Ipad
waduh sedikit bingung mas, baru belajar soalnya
Apa gak menganggu pengunjung ?
@alief kalau mengganggu sih iya sob ini kan cuman buat yang pengen blognya agak ada sedikit hiasan aja
background itemnya diganti ama gambar bisa g ?
Peraturan Berkomentar :
1. KOMENTAR "PERTAMAXX, KEDUAXX, NICE GAN, NICE SOB" dan sejenisnya akan langsung Share-Tuts hapus
2. Berkomentar sesuai isi postingan.
3. Berkomentar dengan sopan, tidak SARA, kasar/porno.
4. Dilarang SPAM !
5. Dilarang menaruh iklan !
6. Apabila menaruh link hidup maka akan Share-Tuts ganti menjadi link Blog ini !
7. Apabila Anda ingin berkomentar dengan menyertakan link blog, silahkan gunakan profil OpenID.
Posting Komentar