Juanas Smith Shared

Bagi anda yang sedang kuliah dan membutuhkan materi perkuliahan untuk mengerjakan tugas atau untuk belajar bisa anda dapatkan disini materi nya akan saya update terus sampe semester 8. dibawah ini adalah daftar lengkap materinya:

Semester 1
Algoritma dan Struktur Data

Aljabar Linear dan Fisika Dasar

Semester 2

Kalkulus

Semester 3

Arsitektur Komputer

Selamat Malam Bertemu lagi dengan Saya Juanas di tutorial Cara Membuat Form Pencarian yang bisa disembunyikan seperti di gmail, ketika icon cari di klik maka form pencarian akan muncul. Saya Menggunakan efek toggle di button nya kemudian ditambahkan style position nya absolute dan z-index nya100 agar form pencarian menumpuk diatas navbar dan berada di layer paling atas, oke langsung saja buat ini dia scriptnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Web</title>
</head>
<body>
<div class="topnav">
<li><a class="ubahclass" id="home">Home</a></li>
<li><a class="ubahclass" id="blog">Blog</a></li>
<li><a class="ubahclass" id="kontak">Kontak</a></li>
<li><a class="ubahclass" id="profil">Profil</a></li>
<div id="flip" class="btn-link"><i class="fa fa-search"></i></div>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</li>
</div>
<div id="panel">
<button id="close"><i class="fa fa-arrow-left"></i></button>
<input type="text" style="width:70%;" placeholder="Cari teman, pesan atau halaman disini">
<button class="btns"><i class="fa fa-search"></i></button>
</div>
</nav>
</div>
</body>
</html>

Lalu ini javascriptnya :

$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("fast");
});
$("#close").click(function(){
$("#panel").slideToggle("fast");
});
});

dan untuk css nya saya gunakan seperti ini:

#panel, #flip {
text-align: center;
background-color: transparent;
border: none;
width: 10px;
float: right;
position: absolute;
display: inline-box;
visibility: visible;
}
#flip {
cursor: pointer;
}
#flip:hover{
color: #00ccff;
}
#panel {
padding: 10px;
width: 100%;
top: 0;
display: none;
float: right;
background: #fff;
z-index: 4;
}

dan ini adalah tampilan form pencarian nya

Sekian tutorial cara membuat form pencarian yang tersembunyi semoga bermanfaat, terimakasih

Hallo Selamat sore sahabat blogger, bertemu lagi dengan saya kali ini saya akan membagikan tutorial cara membuat program hitung mundur "countdown" dengan javascript. aplikasi ini bisa anda aplikasikan untuk menghitung mundur berapa lama lagi tahun baru misalnya, atau menghitung mundur berapa lama lagi hari raya idul fitri.

ini dia kodenya. pertama buat dulu html seperti berikut :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Countdown</title>

</head>
<body>
<h1>Tahun Baru Akan dimulai dalam waktu</h1>
<div><span id="days">00</span><br>Hari</div>
<div><span id="hours">00</span><br>Jam</div>
<div><span id="minutes">00</span><br>Menit</div>
<div><span id="seconds">00</span><br>Detik</div>

<script src="countdown.js"></script>
<script>
countdown('12/31/2016 11:59:59 PM', ['days', 'hours', 'minutes', 'seconds'], function() {
document.write('<h1>Selamat Tahun Baru 2017! Happy New Year</h1>');
});
</script>
</body>
</html>

lalu javascriptnya seperti berikut:

var countdown = function(end, elements, callback) {

var _second = 1000,

_minute = _second * 60,

_hour = _minute * 60,

_day = _hour * 24,

end = new Date(end),

timer,

calculate = function() {

var now = new Date(),

remaining = end.getTime() - now.getTime(),

data;

if(isNaN(end)) {

console.log('Invalid date/time');

return;

}

if(remaining <= 0) {

clearInterval(timer);

if(typeof callback === 'function') {

callback();

}

}else {

if(!timer) {

timer = setInterval(calculate, _second);

}

data = {

'days': Math.floor(remaining / _day),

'hours': Math.floor((remaining % _day) / _hour),

'minutes': Math.floor((remaining % _hour) / _minute),

'seconds': Math.floor((remaining % _minute) / _second)

}

if(elements.length) {

for (x in elements) {

var x = elements[x];

data[x] = ('00' + data[x]).slice(-2);

document.getElementById(x).innerHTML = data[x];

}

};

calculate();

}

dan terakhir kode css untuk mempercantik tampilan countdown nya seperti berikut:

body{

margin: 200px; auto;

height: 100%;

margin-bottom: 250px;

text-align: center;

font-family: sans-serif;

background: url('tahun-baru.jpg') center no-repeat;

background-size: cover;

}

div {

display: inline-block;

padding: 5px;

max-width: 80px;

max-height: 100px;

border: 1px solid #ccc;

border-radius: 10px;

text-align: center;

color: #fff;

text-shadow: 1px 1px 2px lightblue, 0 0 25px blue, 0 0 5px lightblue;

background-color: rgba(255, 255, 255, 0.5);

}

#days, #hours, #minutes, #seconds {

font-size: 40px;

border-bottom: 1px solid #ccc;

}

h1 {

color: #fff;

}

ketika waktu mundurnya sudah habis maka countdownnya akan menampilkan teks seperti pada gambar dibawah:

Ok. sekianlah tutorial cara membuat countdown dengan javascript. semoga bermanfaat

Selamat siang bertemu lagi dengan saya kali ini saya akan membagikan aplikasi file sistem menggunakan php dan jquery. Aplikasi ini mirip dengan cpanel dengan aplikasi ini anda bisa membuat file baru, mengedit, menyimpan dan menghapus berkas/folder. Aplikasi ini saya dapatkan dari vasplus programming blog dan sekarang saya akan bagikan lagi.

Fitur-fiturnya:
- bisa membuat file baru / folder baru
- bisa upload file
- dapat mengenali berbagai jenis type file (seperti .jpg, .doc, .pdf, .xls dll)
- bisa memindahkan file
- bisa mencopy file
- bisa meng compress file
- dan bisa menghapus file

Download Disini | Download Server 2

ok semoga bermanfaat.

Selamat malam guys kali ini saya akan membagikan aplikasi search engine sederhana. Aplikasi ini saya dapatkan dari tutorial web design yang telah saya modif.

Fitur-fiturnya antara lain:
- bisa dijadikan search engine localhost, jika anda mempunyai banyak folder projek di htdocs maka tinggal daftarkan folder tersebut agar terindeks oleh sistem giviews search engine ini. jadi sekarang anda tidak perlu lagi mengetikan alamat yang panjang seperti http://localhost/projek tinggal buka giviews search lalu ketikan nama projek
- proses pencarian cepat karena menggunakan ajax, begitu anda tekan enter hasil pencarian pun akan muncul seketika
- tersedia menu untuk menambahkan situs baru

Ok jika anda tertarik aplikasi giviews search bisa anda download disini
Aplikasi giviews seach ini bisa anda kembangkan lagi menjadi aplikasi search engine yang besar seperti google

Selamat Sore, Pada postingan sebelumnya saya udah membahas tentang cara membuat template one page yang responsive. Kebanyakan template yang sekarang jika halaman di scroll ke bawah maka navbar akan melayang diatas halaman dan jika discroll lagi ke bawah maka navbar akan kembali ke posisi semula seperti pada gambar diatas, nah untuk membuatnya kita membutuhkan jquery yang akan menangani efek on scroll tersebut. pertama buat dulu htmlnya seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Sticky Navigation</title>
<link href="sticky.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="sticky.js"></script>
</head>
<body>

<div class="container">

<h1>Sample Header</h1>


<nav>
<ul class="clearfix">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>

<div class="content">
<br>
<h2>Content Header</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>

Lalu CSS nya seperti berikut:

* {

margin: 0;

padding: 0;

}

.container {

max-width: 80%;

margin: 0 auto;

padding: 0 20px;

position: relative;

}

h1 {

background-color: #305782;

color: #fff;

padding: 60px 25px;

margin: 0;

}

nav {

z-index: 100;

background-color: #e7ecf2;

}

.nav-placeholder {

margin: 0 0 40px 0;

background: #e7ecf2;

}

.fixed {

position: fixed;

top: 0;

left: 0;

width: 100%;

background-color: transparent;

}

.fixed .nav-inner {

padding: 0 10%;

}

.fixed .nav-inner-most {

max-width: 80%;

margin: 0 auto;

background-color: #e7ecf2;

}

nav ul {

margin: 0;

padding: 0;

}

.clearfix {

width: 100%;

background-color: #e7ecf2;

}

nav ul li {

list-style: none;

text-align: center;

display: inline-block;

}

nav ul li a:link,

nav ul li a:visited {

display: inline-block;

text-decoration: none;

padding: 10px 25px;

background-color: #e7ecf2;

border-right: 2px solid #d5dce4;

color: #33557c;

font-size: 90%;

font-weight: bold;

}

.content {

margin: 100px auto;

}

dan untuk javascriptnya seperti berikut :

jQuery(document).ready(function() {

var navOffset = jQuery("nav").offset().top;

jQuery("nav").wrap('<div class="nav-placeholder"></div>');

jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

jQuery("nav").wrapInner('<div class="nav-inner"></div>');

jQuery("nav-inner").wrapInner('<div class="nav-inner-most"></div>');

jQuery(window).scroll(function() {

var scrollPos = jQuery(window).scrollTop();

jQuery(".status").html(scrollPos);

if (scrollPos >= navOffset) {

jQuery("nav").addClass("fixed");

}else{

jQuery("nav").removeClass("fixed");

}

});

Ok Selamat mencoba. semoga bermanfaat.

Untuk membuat sticky navigation seperti ini bisa juga anda menggunakan plugin smint bisa anda download di http://www.outyear.co.uk/smint/

Assalamualaikum wr. wb. Ketemu lagi dengan saya. Kali ini saya akan membahas cara membuat template one page yang responsive. Membuat template bisa anda jadikan untuk menambah penghasilan yang lumayan karena harga per template rata-rata sekitar $25 anda bisa memasarkanya di themeforest.net. Nah kali ini saya akan share cara membuat template yang sederhana nantinya bisa anda kembangkan lagi. pertama kita buat dulu struktur folder sperti ini

folder_project:
-css
-fonts
-js
-img

lalu di folder_project buat file index.html isinya seperti ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Gym - Personal Training</title>
<meta name="viewport" content="width/device-width, initial-scale=1.0">
<link href="css/blueberry.css" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
}
h1 {
text-align: center;
font-size: 180%;
line-height: 120%;
padding: 5% 0;
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%;
}
h3 {
line-height: 110%;
padding: 5% 0;
}
p {
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #fff;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
#logo {
margin: 20px;
float: left;
width: 200px;
height: 60px;
background: url("img/the-gym.png") no-repeat center;
}
nav {
float: right;
padding: 30px 20px 20px 0;
}
#menu-icon {
display: none;
width: 40px;
hight: 40px;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
.current {
color: #fff;
text-decoration: underline;
}
#doc {
margin: 40px 0;
}
#content {
margin: 0 auto;
max-width: 1140px;
margin-top: 110px;
}
.blueberry {
max-width: 960px;
margin-top: 110px;
}
section {
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
display: inline;
}
aside {
float: right;
margin: 0 auto;
width: 34%;
height: auto;
padding: 4%;
display: inline;
}
ul.gym li {
padding-left: 3%;
}
footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.70;
}
footer p, footer h3 {
color: #fff;
}
footer p a {
color: #fff;
text-decoration: none;
}
ul.social li {
display: inline;
}
ul.socila li img {
height: 50px;
}
footer.second {
border-top: 1px solid #4D4E50;
background-color: #111;
max-height: 50px;
text-align: center;
opacity: 0.50;
color: #fff;
}
/********************MEDIA!!!!*********************/
@media screen and (max-width: 478px) {
body {
position: absolute;
}
}
@media screen and (max-width: 748px) {
header {
position: absolute;
}
#menu-icon {
display: block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #405580;
border: 1px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
article {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
aside {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}

</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"><img src="img/icon.png"></a>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Trainer</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="doc">
<div id="content">
<div class="blueberry">
<ul class="slides">
<li><img src="img/inside-gym.png">
<li><img src="img/push-ups.png">
<li><img src="img/chest-fly.png">
<li><img src="img/training.png">
</ul>
</div>
</div>
</div>
<section>
<img src="img/trainers.png">
<h1>Best Trainers Around!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<section>
<img src="img/location.png">
<h1>Local And Convenient</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<section>
<img src="img/check.png">
<h1>Check Us Out -Free!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<div class="clear"></div>
<article>
<img src="img/gym-classes.jpg">
</article>
<aside>
<h2>Our Group Class Schedule:</h2>
<ul class="gym">
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
</ul>
</aside>
<div class="clear"></div>
<section>
<h1>Ladies Section</h1>
<img src="img/ladies-gym.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<section>
<h1>The Gym Floor</h1>
<img src="img/gym-floor.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<section>
<h1>Free Heights</h1>
<img src="img/free-weights.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<footer>
<section>
<h3><b>The Gym</b></h3>
<p><b>215-555-5555</b><br><br>
1700 Cestrus Street<br>
Philipina, Pa 19102<br>
trainer@thegym.com</p>
</section>
<section>
<h3>Connect With Us!</h3>
<ul class="social">
<li><a href="#"><img src="img/facebook1.png"></a></li>
<li><a href="#"><img src="img/googleplus.png"></a></li>
<li><a href="#"><img src="img/twitter1.png"></a></li>
<li><a href="#"><img src="img/youtube1.png"></a></li>
</ul>
</section>
<section>
<img src="img/weight-lifter.png">
</section>
</footer>
<footer class="second">
© Copyrights 2016 - The Gym
</footer>
</body>
</html>

kemudian untuk folder css diisi css dari blueberry.css

untuk folder js diisi jquery.js dan jquery.blueberry.js

untuk folder img bahan gambarnya bisa didownload disini

dan untuk folder fonts bisa diisi dengan font-awesome

nah untuk file blueberry.css dan jquery.blueberry.js filenya dari mana? itu dari plugin blueberry slider untuk blueberry slider bisa didownload di http://marktyrrell.com/labs/blueberry/

Oke Semoga bermanfaat

Selamat sore Guys kali ini kita akan membuat navbar yang responsive dengan css. Jika dibuat dengan bootstrap itu gampang, tetapi jika membuat dengan css secara manual bagaimana caranya? oke langsung saja. Pertama kita buat dulu struktur htmlnya seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Navbar</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.js"></script>
</head>
<body>
<header>
<h1>Best Website Since Google</h1>
</header>
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Blog</li></a>
<a href="#"><li>Shop</li></a>
<a href="#"><li>Gallery</li></a>
<a href="#"><li>Contact</li></a>
</ul>
<div class="handle">Menu</div>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
</body>
</html>

lalu buat cssnya seperti berikut:

body {

margin: 0;

padding: 0;

font-family: sans-serif;

}

header {

background: #00795f;

width: 100%;

padding: 40px 0;

color: #fff;

text-align: center;

}

a {

text-decoration: none;

font-weight: bold;

color: inherit;

}

nav ul {

background-color: #43a286;

overflow: hidden;

color: #fff;

padding: 0;

text-align: center;

margin: 0;

-webkit-transition: max-height 0.04s;

-ms-transition: max-height 0.04s;

-moz-transition: max-height 0.04s;

-o-transition: max-height 0.04s;

transition: max-height 0.04s;

}

nav ul li {

display: inline-block;

padding: 20px;

}

nav ul li:hover{

background-color: #399077;

}

section {

line-height: 1.5em;

font-size: 0.9em;

padding: 40px;

width: 75%;

margin: 0 auto;

}

.handle {

width: 100%;

background: #005c48;

text-align: left;

box-sizing: border-box;

padding: 15px 50px;

cursor: pointer;

color: #fff;

font-weight: bold;

display: none;

}

@media screen and (max-width: 500px){

nav ul {

max-height: 0;

}

.showing {

max-height: 20em;

}

nav ul li {

box-sizing: border-box;

width: 100%;

padding: 15px 50px;

text-align: left;

}

.handle {

display: block;

}

Pada css diatas ada kode @media screen and (max-width: 500px) nah itulah yang membuatnya responsive Pada layar dengan lebar 500px css yang digunakan adalah nav ul {

max-height: 0;

}

.showing {

max-height: 20em;

}

nav ul li {

box-sizing: border-box;

width: 100%;

padding: 15px 50px;

text-align: left;

}

.handle {

display: block;

}

Lalu ada sedikit kode javascript

Baiklah kita kali ini akan membuat layout web dengan menggunakan bootstrap, bootstrap merupakan framework css yang paling banyak digunakan saat ini karena tampilanya yang sangat menarik. bootstrap pertama kali diperkenalkan pada tahun 2011 oleh Mark Otto untuk twitter. framework ini menggabungkan html, css dan javascript jadi anda tidak usah ribet lagi mengatur css dan javascriptnya cukup dengan html dengan memanfaatkan class yang ada anda sudah bisa membuat website. jika anda belum mempunyai file bootstrapnya silakan di download di getbootstrap.com secara gratis. jika sudah anda download silakan anda ekstrak.
Pada layout yang akan kita buat ini kita akan mennggunakan navbar untuk menu navigasi kemudian carousel untuk slidernya, lalu dibawahnya ada jumbotron dan di bawahnya ada tiga buah grid. lalu di halaman profile ada paragraf untuk menampilkan post dan dibawahnya ada paination, dan disebelah kanan menu ada tombol login jika di klik akan menampilkan modal login.
Untuk membuatnya pertama buat file index.php isinya seperti berikut:

<!DOCTYPE html>
<html>
<head>
<title>Latihan form</title>

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">BRAND</a>
</div>


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Beranda <span class="sr-only">(current)</span></a></li>
<li><a href="profile.html">Profile</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Category <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="category-olahraga.html">Olahraga</a></li>
<li><a href="category-gosip.html">Gosip</a></li>
<li><a href="category-politik.html">Politik</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="register.html">Register</a></li>
<li><a class="btn" data-toggle="modal" data-target="#myModal">Login</a></li>
</ul>
</div>
</div>
</nav>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input type="text" name="username" class="form-control" placeholder="Username"><br>
<input type="password" name="password" class="form-control" placeholder="Password">
</div>
<div class="modal-footer">
<input type="checkbox" name="check" class="left">Ingat Saya
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Login</button>
</div>
</div>
</div>
</div>


<div class="container">


<div class="row">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image/1d.jpg" alt="...">
<div class="carousel-caption">
<h3>First Thumbnail Label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
</div>
</div>
<div class="item">
<img src="image/2c.jpg" alt="...">
<div class="carousel-caption">
<h3>Second Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
</div>
</div>
<div class="item">
<img src="image/3c.jpeg" alt="...">
<div class="carousel-caption">
<h3>Third Thumbnail Label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
</div>
</div>
</div>


<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>


<div class="row">
<div class="col-md-12">

<div class="jumbotron">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.</p>
<a class="btn btn-default" href="#">More Info</a>
</div>


<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="image/2c.jpg" alt="Gambar 1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="image/2c.jpg" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="image/2c.jpg" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

</div>

</div>




<footer style="margin-top:20px;">
<div class="row">
<div class="col-lg-12">
<p>Copyright © MY Website 2016</p>
</div>
</div>
</footer>

</div>

</body>
</html>

kemudian untuk file profile.php isinya seperti berikut:

<!DOCTYPE html>
<html>
<head>
<title>Latihan form</title>

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">BRAND</a>
</div>


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">Beranda <span class="sr-only">(current)</span></a></li>
<li class="active"><a href="profile.html">Profile</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Category <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="category-olahraga.html">Olahraga</a></li>
<li><a href="category-gosip.html">Gosip</a></li>
<li><a href="category-politik.html">Politik</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="register.html">Register</a></li>
<li><a class="btn" data-toggle="modal" data-target="#myModal">Login</a></li>
</ul>
</div>
</div>
</nav>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input type="text" name="username" class="form-control" placeholder="Username"><br>
<input type="password" name="password" class="form-control" placeholder="Password">
</div>
<div class="modal-footer">
<input type="checkbox" name="check" class="left">Ingat Saya
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Login</button>
</div>
</div>
</div>
</div>


<div class="container">


<div class="row">
<div class="col-md-12">
<h3><a href="detail_news.html">Thumbnail label</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<h3><a href="detail_news.html">Thumbnail label</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<h3><a href="detail_news.html">Thumbnail label</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>

<nav>
<ul class="pagination">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">Prev</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2 <span class="sr-only"></span></a></li>
<li><a href="#">3 <span class="sr-only"></span></a></li>
<li><a href="#">4 <span class="sr-only"></span></a></li>
<li><a href="#">5 <span class="sr-only"></span></a></li>
<li><a href="#" aria-label="Previous"><span aria-hidden="true">Next</span></a></li>
</ul>
</nav>
</div>


<footer style="margin-top:20px;">
<div class="row">
<div class="col-lg-12">
<p>Copyright © MY Website 2016</p>
</div>
</div>
</footer>

</div>

</body>
</html>

agar javascripnya jalan kita memerlukan library jquery silkan download file jquerynya di api.jquery.org/download untuk versinya kita gunakan yang versi 1.11.1 kemudian simpan file jquerynya di folder js.

sekianlah tutorial yang saya berikan semoga bermanfaat jika ada yang kurang di mengerti silakan ditanyakan di bawah terimakasih.

Langganan: Postingan ( Atom )

Download Materi Kuliah Lengkap dari semester 1 - 3

Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail

Cara Membuat Countdown dengan javascript

Aplikasi File Manager menggunakan PHP dan jQuery

Aplikasi Search Engine Sederhana menggunakan PHP dan AJAX

Cara Membuat Sticky Navigation (Fixed Position saat di scroll)

Cara Membuat Template Web One Page Responsive

Cara Membuat Navbar Responsiv dengan CSS Sendiri

Cara Membuat Layout di bootstrap

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

Pages

Share story

Share story

Share story

Share story

Share story

Share story

Share story

Share story

Share story

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive