 |
| Membuat tampilan layout seperti google.com menggunakan CSS/HTML untuk Pembelajaran |
 |
| Belajar Membuat tampilan layout keren seperti google.com untuk Pembelajaran |
Jumpa lagi nich sahabat baikku, kali ini Media Tutorial Gratis dan Terbaru akan memberikan Source Code bagaimana kita Membuat Tampilan Mesin Pencari seperti google. kita tahu bahwa google merupakan Situs Mesin Pencari yang sangat luar biasa hebat, sehingga pada artikel sekarang ini penulis Memberikan Free Tutorial Membuat Layout atau Tampilan seperti google menggunakan CSS3 dan HTML5 hanya untuk pembelajaran saja, dan pehaman bagi kita bagaimana membuat layout yang sederhana, cepat, dan bagus. Seperti konsep dari Mbah Google.
Pada gambar diatas tampilan yang akan kita buat, Untuk Source Code Desaign Web seperti google bisa sobat perhatikan dibawah ini :
<!DOCTYPE html>
<html lang="id">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="Gambar Google. Penelusuran gambar paling menyeluruh di web." name="description">
<title>Pencarian Citra Berdasarkan Isi Menggunakan Ekstraksi Fitur Haar Wavelet Transform | sister_ta_cbir@2015</title>
<script type="text/javascript" src="./js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.img-camera,.img-circle,.gambar,.cari,.thumb,.thum_gambar').hover(function(){
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
$('.img-circle').click(function(){
window.open('./php.class/uploadWebCame/', $(this).attr('title'), "height=550px,width=850px,top=75px,left=250px");
return false;
});
});
function setInfo(i, e) {
$('#x').val(e.x1);
$('#y').val(e.y1);
$('#w').val(e.width);
$('#h').val(e.height);
}
$(document).ready(function() {
var p = $("#uploadPreview");
$("#gambar").change(function(){
p.fadeOut();
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("gambar").files[0]);
oFReader.onload = function (oFREvent) {
p.attr('src', oFREvent.target.result).fadeIn();
};
});
$('img#uploadPreview').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: setInfo
});
});
</script>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div class="img-circle" title="Unggah gambar dengan Webcame">
<div class="judul">G</div>
<div class="judul-i">i</div>
<div class="judul-m">m</div>
<div class="judul-a">a</div>
<div class="judul-g">G</div>
<div class="judul-e">e</div>
<div class="judul-s">s</div>
</div>
<form method="post" action="./home.php?pencarianId=<?php echo md5("pencarian").md5("pencarianImage")."&token=".md5("pencarianImageToken").md5("iMageP"); ?>" enctype="multipart/form-data">
<div class="input-gambar">
<div class="tutup"></div>
<input id="gambar" class="gambar" maxlength="2048" name="image" autocomplete="off" type="file" title="Pencarian Gambar" />
<input type="hidden" value="citraUji" name="jenis" /><input type="hidden" id="x" name="x" /><input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" />
<div class="img-camera" title="Unggah Gambar dari Komputer"></div>
<input class="cari" name="cari" type="submit" value="Go!" title="Klik disini untuk memulai Pencarian" />
</div>
</form>
<div class="pra_pencarian">
<div class="thum_gambar" style="width:150px;" title="Gambar yang akan anda cari">
<img id="uploadPreview" style="display:none;width:250px;height:200px;"/>
</div>
</div>
<div class="footer">
<ul>
<li>home</li>
<li>history</li>
<li>images</li>
<li>wavelet</li>
<li>e-distance</li>
<li style="margin-left:47.5%;width:16%;">utm.informatika ta-sister@google.com 2015 by Achmad Husaini (Untuk Pembelajaran)</li>
</ul>
</div>
<div class="login">
<form method="post" action="./home.php?indexId=<?php echo md5("indexID").md5("indexImage")."&token=".md5("indexImageToken").md5("iMage")."&module=".md5("indexing"); ?>">
<input type="image" value="submit" src="./images/layouts/submit.gif" />
<input type="hidden" value="citraLatih" name="jenis" />
</form>
</div>
</body>
</html>
*Jika sahabat tertarik dengan Layout sederhana seperti google ini? Sahabat bisa Download Disini, jangan lupa simpan dalam bentuk PHP ya?:-) Jika Link Rusak? segera laporkan ke penulis melalui Form Komentar
9 comments
Script apaan itu, asal copas... Hihihi.
ReplyDibikin tampilan notepad aja untuk script. Nice Share deh, yg penting semangat!
Kalao css mirip tanpilan google mobile ada gak om.
ReplyMy family's love and support mean a lot to me. I want to share this profile with you Farnsworth Munsell 100 Hue Test . A color vision test is the Farnsworth-Munsell 100 Hue Test.
ReplyThis blog post is like a breath of fresh air, spreading optimism all around! Whether you're a student or a professional, this reaction speed test is a must-try for everyone!
ReplyYour enthusiasm is contagious – it's evident in every comment you make! space clicker
Replythat tests your clicking speed and efficiency in a given time.
ReplyYour resilience in the face of challenges is truly inspiring. minecraft earth servers
incorporate mods and custom content, expanding the possibilities within the Minecraft universe.
I admire your ability to simplify complex ideas.Best auto clicker help minimize the risk of repetitive strain injuries associated with manual clicking.
ReplyThank you for creating content that speaks to my soul and resonates deeply with me! Challenge your friends to heart-pounding rooftop duels and see who reigns supreme in Rooftop Snipers Unblocked!
ReplyEach post feels like a mini-masterclass, thank you for your dedication.Need a wordgame that's as engaging as it is educational? Say hello to Canuckle! You'll be hooked as you learn new Canadian vocabulary and trivia with each puzzle. Give it a go at canuckle word game
ReplyPost a Comment