Splash Screen Loser Game
Splash Screen Sederhana Menggunakan perpaduan CSS, Jquery , Css , Html 5 yang mau bikin game berbasis Html 5 ya meskipun tergolong sederhana kan lumayan buat tambahan sapa tau diperlukan meskipun sederhan.
Lencana Facebook Toby
Latest Post
Showing posts with label css. Show all posts
Showing posts with label css. Show all posts
Membuat splash screen Loser Game Sederhana
Written By Unknown on Tuesday, February 26, 2013 | 4:46 AM
Membuat Gallery Sederhana Pakaian Adat Indonesia
Gallery Sederhana Pakaian Adat Indonesia
Ni Contoh Gallery Pakaian Adat Sederhana Capa Tau Ada Yang Membutuhkan Buat Referensi Belajar :D
Barangkali diconvert Ke Android Buat Anak Anak Indonesia Yang Belum Mengenal Pakaian Adat Indonesia
MEMBUAT AUTO TOOLTIPS DI BLOG
Written By Unknown on Sunday, February 24, 2013 | 7:17 PM
AUTO TOOLTIPS ALA WARUNGBEBAS.COM
1. Cari <body> biar cepet cari lewat find CTRL+F kemudian copy kode dibawah ini di bawahnya:
<script
src='http://oyot-projectku.googlecode.com/files/oyotku.js'/><a
href=' http://www.warungbebas.com ' id='wb_ttauth'>Warunge
bebas</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #fba620;background:#dcdcdc}#ttcont{background:#000000;color:#FFFFFF}"
};
//]]></script><script src='http://oyot-projectku.googlecode.com/files/oyotku-tooltips.js'/>
<script src='http://oyot-projectku.googlecode.com/files/oyotku-autotooltips.js'/>
<!-- start oyot tooltip -->
<div id='oyottooltip'>
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #fba620;background:#dcdcdc}#ttcont{background:#000000;color:#FFFFFF}"
};
//]]></script><script src='http://oyot-projectku.googlecode.com/files/oyotku-tooltips.js'/>
<script src='http://oyot-projectku.googlecode.com/files/oyotku-autotooltips.js'/>
<!-- start oyot tooltip -->
<div id='oyottooltip'>
2. Cari kode </body> dan letakkan kode dibawah ini di atasnya :
</div><!--
END tooltip --><script
type='text/javascript'>wb.$_auto_tooltip('oyottooltip');</script>
Kemudian Click save dan liat hasilnya
CARA UPLOAD FILE JAVASCRIPT DI GOOGLE CODE
1. Login dulu di http://code.google.com untuk menuju pada halaman login google code.
kalau belum punya accout ya register dulu aja .. kan gratisan :P
2.Click Create new project.
3. Isikan data.
Untuk Keterangannya sebagai berikut :
Isi sesuka anda,nama ini juga nantinya akan menjadi slah satu dari URL.
Isikan keterangan singkat. Misal kita ingin upload file-file javascript
beri saja judul (javascript) atau terserah anda kan semua orang
mempunyai suatu ciri khas sendiri sendiri .
Beri keterangan sama dengan project summary, atau tidak isi juga g apa apa.
Pilih (Mercurial).
Pilih (GNU GPL v3).
Project Label (s) tidak di isi juga tidak apa.
Trakir isi kode verification kemudian klick CREATE .
3. Sekarang kita upload file javascript kita
klick download kemudian klick new download.
Isi data lagi :
tekan browse untuk upload file anda yang ada dikomputer kemudia klick submit file.
Untuk mendapakan URL, klick nama file yang anda upload tadi.
Setelah itu klick kanan dan plih copy link location.
Untuk Mempratikkannya kita coba pada bagian cara membuat autotooltips dari www.warungbebas.com
Tutorial Membuat Form Login dengan CSS HTML
Membuat Form Login dengan CSS HTML
Scricpt HTML :
<!DOCTYPE html>
<html>
<head>
<title> SimpleForm </title>
<meta name='author' content='wong newbie' />
<meta name='copyright' content='wong newbie' />
<link type='text/css' href='style.css' rel='stylesheet' media='screen' />
</head>
<body>
<form class="formwongnewbie" action="http://wongnewbie.blogspot.com/">
<div class="formtitle">Login to your account</div>
<div class="input">
<div class="inputtext">Username: </div>
<div class="inputcontent">
<input type="text" />
</div>
</div>
<div class="input nobottomborder">
<div class="inputtext">Password: </div>
<div class="inputcontent">
<input type="password" />
<br/><a href="#">Forgot password?</a>
</div>
</div>
<div class="buttons">
<input class="orangebutton" type="submit" value="Login" />
<input class="greybutton" type="submit" value="Cancel" />
</div>
</form>
<body>
<html>
Scricpt Css :
.wrapper {
width: 960px;
margin: 50px auto;
}
.formwongnewbie{
width: 450px;
float: left;
background: #fff;
color: #777;
-webkit-box-shadow: 0px 0px 8px 2px #d1d1d1;
-moz-box-shadow: 0px 0px 8px 2px #d1d1d1;
box-shadow: 0px 0px 8px 2px #d1d1d1;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
overflow: hidden;
}
.formtitle {
padding: 10px;
line-height: 16px;
font-size: 13px;
text-shadow: -1px -1px #e87c19;
color: #fff;
font-weight: bold;
border-bottom: 1px solid #eb8d19;
width: 430px;
background: red; /* Old browsers */
background: -moz-linear-gradient(top, red 0%, #ffb119 50%, #ff9d19 51%, #ff9d19 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,red), color-stop(50%,#ffb119), color-stop(51%,#ff9d19), color-stop(100%,#ff9d19)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, red 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, red 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, red 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='#ff9d19',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, red 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* W3C */
}
.input {
width: 410px;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
margin: 20px;
overflow: hidden;
}
.inputtext {
float: left;
line-height: 18px;
height: 35px;
font-size: 14px;
width: 120px;
}
.inputcontent {
float: left;
width: 290px;
height: 50px;
}
.inputcontent input {
padding: 5px;
height: 18px;
width: 200px;
line-height: 18px;
border: 1px solid #c7c7c7;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color: #777;
}
.inputcontent a {
color: #0084ff;
font-size: 12px;
text-decoration: none;
line-height: 12px;
}
.nobottomborder {
border-bottom: 0;
}
.buttons {
background: #f1f1f1;
border-top: 1px solid #ddd;
padding: 15px;
height: 34px;
}
.greybutton {
background: #e1e1e1; /* Old browsers */
background: -moz-linear-gradient(top, #e1e1e1 0%, #bababa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1e1e1), color-stop(100%,#bababa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* W3C */
border: 1px solid #bababa;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
line-height: 20px;
font-size: 16px;
padding: 6px 12px;
color: #fff;
text-shadow: -1px -1px #bababa;
float: right;
margin-left: 10px;
cursor: pointer;
}
.greybutton:hover{
background: #bababa; /* Old browsers */
background: -moz-linear-gradient(top, #bababa 0%, #e1e1e1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#e1e1e1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* W3C */
}
.orangebutton {
background: #ffc339; /* Old browsers */
background: -moz-linear-gradient(top, #ffc339 0%, #ff9b19 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc339), color-stop(100%,#ff9b19)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc339', endColorstr='#ff9b19',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* W3C */
border: 1px solid #ff9b19;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
line-height: 20px;
font-size: 16px;
padding: 6px 12px;
color: #fff;
text-shadow: -1px -1px #ff9b19;
float: right;
margin-left: 10px;
cursor: pointer;
}
.orangebutton:hover{
background: #ff9b19; /* Old browsers */
background: -moz-linear-gradient(top, #ff9b19 0%, #ffc339 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9b19), color-stop(100%,#ffc339)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9b19', endColorstr='#ffc339',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* W3C */
}
