Friday, 6 May 2016

SCRIPT MEMBUAT TAMPILAN AWAL GOOGLE KREASI SENDIRI

Langsung saja tanpa basa basi....

Contoh tampilan yang sudah  jadi








(HTML)



<html>
<head>
<title>BOOKLE</title>
  <link rel="icon" type="image/png" href="image/logo.png"/>
  <link rel="stylesheet" href="google.css" type="text/css">
</head>
<body>
<!-- Design Header website -->
<div id="header">

<div id="tulisan">
<p align="right"><a href="">Gmail</a> &nbsp;&nbsp; <a href="">Gambar</a> &nbsp;&nbsp; <a href=""><img src="image/kotak.png" width="25px" height="25px"></a> &nbsp;&nbsp; <a href=""><img src="image/sign.png" width="70px" height="40px"><a/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>
</div>
<!-- Design Content website -->


 </div>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <p align="center"><img src="image/google.png" width="300px" height="100px"/></p>
   <div id="free">
      <form>
        <p align="center"><input class="input" type="text"/></p>
      </form>
   </div><br>
   
   <div id="free">
   <p align="center"><a href=""><input class="input3" type="submit" value="Penelusuran Google"/></a>&nbsp;&nbsp;<a href=""><input class="input3" type="submit" value="Saya Lagi Beruntung"/></a></p>
   </div><br>
   <p align="center">Google.co.id tersedia dalam : <a href="">Bahasa Melayu</a> &nbsp;&nbsp;<a href="">Bali</a>&nbsp;&nbsp;&nbsp;<a href="">Jawa</a></p>
   
   

<!-- Design Footer website -->
  <div id="footer">
    <p> <font type="arial">Periklanan &nbsp;&nbsp; Bisnis &nbsp;&nbsp;Tentang &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Created By : Ahdim Tutor&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Privasi &nbsp;&nbsp; Persyaratan&nbsp;&nbsp; Setelan</font></p> 
</div>
<div id="copy" align="center">

</div>
</div>
</body>
</html>






CSS


html,body{
margin:0 0 0 0;
padding:0 0 0 0;
}
h1,p{
margin:5px 0 5px 0;
}
a{
color:#6388b9;
text-decoration:none;
}
/* CSS HEADER */
#header{
height:85px;
display:block;
background-image:url(image/header.png);
}

/* CSS CONTENT */

.input{
    width: 570px;
    height: 40px;
    border: 1px solid #3492F7;
    margin-top:20px;
}


.input3{
 width:200px;
 height:45px;
 position:center;

}

#free{
}

/* CSS FOOTER */
#footer {
background-image : url(image/footer.png);
height : 50;
    position: absolute;
    bottom: 0;
    font-family: arial;
}



Semoga bermanfaat......




No comments:

Post a Comment