Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

Membuat Tampilan Google dengan CSS3 Keren

By Muhammad Tajuddin 2 comments
Assalamu'alaikum Wr.Wb, bertemu lagi dengan saya Muhammad Tajuddin, dalam tutorial Cara Membuat Tampilan Google dengan CSS3 Keren, sedikit perubahan dalam desainnya, ya sedikit berbeda sih dengan Google aslinya, tapi untuk tampilan yang saya buat ini lebih keren lho...
Berikut Tampilannya
Tampilan Search Google | Karya Dunia Programming
"Bagaimana cara membuatnya min..? jadi tidak sabar nih pengen nyobak hehehe, habisnya keren tuh keliatannya"
Oke, kalau tidak sabar, ya langsung saja, Ayo...!!
Buat folder kalian contoh, Google, dan simapn script HTML dibawah ini dengan nama index.html

Script HTML
<!doctype html>
<html>
<head>
<title>Jobsheet 8</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<form action="" method="get">
<div id="form">
<div class="kotak1">
<p class="p2">G</p><p class="p3">o</p><p class="p4">o</p><p class="p2">g</p><p class="p5">l</p><p class="p3">e</p>
</div>
<p class="p1">Mesin Pencarian</p>
<input name="cari" type="text" placeholder="Cari" class="cari">
<input type="image" class="button" src="images/search.png">
<div class="wrapper2">
<div class="iklan1">
<h4>Tampilan Gambar Pada Kotak 1</h4>
<img src="images/2.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 1
</div>
<div class="iklan2">
<h4>Tampilan Gambar Pada Kotak 2</h4>
<img src="images/2.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 2
</div>
<div class="iklan3">
<h4>Tampilan Gambar Pada Kotak 3</h4>
<img src="images/3.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 3
</div>
<div class="iklan4">
<h4>Tampilan Gambar Pada Kotak 4</h4>
<img src="images/4.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 4
</div>
<div class="iklan5">
<h4>Tampilan Gambar Pada Kotak 5</h4>
<img src="images/3.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 5
</div>
</div>
</div>
</form>
</body>
</html>

Selanjutnya copykan script CSS dibawah ini kedalam file yang berbeda dengan HTM tadi. akan tetapi diletakkan dalam satu folder.

Script CSS
body {
    background: #ffffff;
    font-family: Arial;
}
#form {
    background: #ffffff;
    width: 1200px;
    height: 500px;
    padding: 10px;
    border-radius: 4px;
    margin: auto;
    margin-top: 60px;
}
.kotak1 {
    width: 130px;
    height: 50px;
    border: 0px solid black;
    position: absolute;
    margin-left: 535px;
    margin-right: auto;
}
.p2 {
    font-size: 2.5em;
    color: #3498db;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 10px;
    float: left;
}
.p3 {
    font-size: 2.5em;
    color: #e74c3c;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 10px;
    float: left;
}
.p4 {
    font-size: 2.5em;
    color: #f1c40f;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 10px;
    float: left;
}
.p5 {
    font-size: 2.5em;
    color: #2ecc71;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 10px;
    float: left;
}
.p1 {
    font-size: 1.5em;
    color: #c9c9c9;
    text-align: center;
    padding-top: 50px;
}
input.cari {
    width: 700px;
    height: 50px;
    border: 1px solid #c9c9c9;
    border-radius: 3px 0px 0px 3px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 200px;
    font-size: 1em;
    color: #c9c9c9;
    float: left;
}
input.cari:focus {
    border: 1px solid #2ecc71;
    box-shadow: glow variation;
   
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    text-decoration: none;
}
input.button {
    background: #e74c3c;
    padding: 16px;
    color: #ffffff;
    width: 23px;
    height: 23px;
    border-radius: 0px 3px 3px 0px;
    border: 0px solid #000000;
    margin-left: -5px;
    margin-bottom: -22px;
    float: left;
}
input.button:hover {
    background: #3498db;
   
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    text-decoration: none;
}
.wrapper2 {
    width: 1080px;
    height: 280px;
    text-align: center;
    margin-top: 90px;
    border: 0px solid black;
    position: absolute;
    margin-left: 50px;
}
img {
    width: 150px;
    height: 90px;
    cursor: pointer;
    border: 1px solid #c9c9c9;
}
.iklan1 {
    width: 175px;
    height: 270px;
    border: 2px solid #1abc9c;
    float: left;
    margin-left: 0px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan2 {
    width: 175px;
    height: 270px;
    border: 2px solid #8e44ad;
    float: left;
    margin-left: 20px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan3 {
    width: 175px;
    height: 270px;
    border: 2px solid #3498db;
    float: left;
    margin-left: 20px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan4 {
    width: 175px;
    height: 270px;
    border: 2px solid #c0392b;
    float: left;
    margin-left: 20px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan5 {
    width: 175px;
    height: 270px;
    border: 2px solid #e67e22;
    float: left;
    margin-left: 20px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan1:hover {
    background: #16a085;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan2:hover {
    background: #9b59b6;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan3:hover {
    background: #3498db;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan4:hover {
    background: #c0392b;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan5:hover {
    background: #e67e22;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}

Bagaimana...? menarik bukan tampilannya...? mau mencoba yang lain..?, Ikuti terus tutorial-tutorial menarik Dunia Programming Lainnya, dengan cara kirimkan alamat email kalian dikanan blog ini. dijamin kalian tidak akan ketinggalan informasi, Oke Saya pamit dulu hehehe, Terimakasih.

2 comments for "Membuat Tampilan Google dengan CSS3 Keren"

  1. UnknownJanuary 28, 2017 at 3:49 PM

    Mantap :)
    Kuy buatin gw Form Login dung..

    ReplyDelete
    Replies
    1. Muhammad TajuddinJanuary 28, 2017 at 4:00 PM

      Oke, Untuk Form Login saya akan buatkan dan desainnya pastinya Hasil tangan sendiri :), Terima Kasih sudah mampir :)

      Delete

- Gunakan Kata-Kata Yang Sopan
- Dilarang Keras Menaruh Link Aktif Dibawah Postingan
- Dilarang Membuat SPAM
- Dilarang Saling Melecehkan Antar Sesama
- Dilarang Promosi Web/Blog/Obat-Obatan Atau Yang Lain