Sedikit Info Seputar
Membuat Tampilan Layout Pencarian Seperti google dengan CSS3 dan HTML5 - Hanya untuk Pembelajaran
Terbaru 2017
- Hay gaes kali ini team Official Sahabat Android, kali ini akan membahas artikel dengan judul Membuat Tampilan Layout Pencarian Seperti google dengan CSS3 dan HTML5 - Hanya untuk Pembelajaran, kami selaku Team Official Sahabat Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Official Sahabat Android. semoga isi postingan tentang
Artikel free tutorials,
Artikel pendidikan, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Membuat Tampilan Layout Pencarian Seperti google dengan CSS3 dan HTML5 - Hanya untuk Pembelajaran
Terbaru
link: Membuat Tampilan Layout Pencarian Seperti google dengan CSS3 dan HTML5 - Hanya untuk Pembelajaran
Berbagi Membuat Tampilan Layout Pencarian Seperti google dengan CSS3 dan HTML5 - Hanya untuk Pembelajaran Terbaru dan Terlengkap 2017
 |
| 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
Itulah sedikit Artikel Membuat Tampilan Layout Pencarian Seperti google dengan CSS3 dan HTML5 - Hanya untuk Pembelajaran terbaru dari kami
Semoga artikel Membuat Tampilan Layout Pencarian Seperti google dengan CSS3 dan HTML5 - Hanya untuk Pembelajaran yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Official Sahabat Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Membuat Tampilan Layout Pencarian Seperti google dengan CSS3 dan HTML5 - Hanya untuk Pembelajaran