Juanas Smith Shared: jquery

Tampilkan postingan dengan label jquery. Tampilkan semua postingan

Untuk membuat website yang menarik kita membutuhkan beberapa plugin. dengan menggunakan plugin kita akan lebih cepat dan lebih mudah dalam mendevlop web kita, juga lebih powerfull

1. lightbox

lightbox adalah plugin yang bisa digunakan untuk membuat gallery dan modal image
lightbox bisa anda dapatkan di sini

2. slick

slick bisa digunakan untuk membuat image slider selain image slider dengan slick kita bisa juga membuat div slider. slick bisa anda download di link ini

3. smint

smint adalah plugin jquery yang bisa dipakai untuk membuat sticky navigation
smint bisa anda download disini

4. pagify.js

pagify yaitu plugin jquery yang bisa dipakai untuk membuat website one page, pagify akan menggabungkan beberapa file html menjadi sebuah halaman dengan metode ajax. pagify.js bisa didownload disini

5. WebCodeCamjs

dengan plugin webcodecam kita dapat menyecan qrcode melalui webcam. dan dapat menterjemahkan qrcode tersebut. webcodecam bisa di download disini

jika menggunakan jquery kita akan lebih mudah dalam penulisan kodenya dibanding dengan javascript asli. jika teman-teman belum familiar ajax, ajax adalah singkatan dari assyncronous javascript and xml jika anda suka bermain facebook saat kita mengklik tombol like kita tidak perlu me reload halaman secara utuh, perubahannya akan terjadi secara langsung karena ajax bekerja dibelakang layar. ajax akan me reload file yang dibutuhkan saja tidak semua halaman di reload.

jika menggunakan ajax dengan jquery tentu yang teman-teman butuhkan adalah file jquery nya. program dibawah akan menjalankan fungsinya setelah semua halaman berhasil di load. Jika menggunakan jquery kita bisa menggunakan tiga metode yaitu metode load, metode get dan pos, dan metode ajax.

yang pertama metode load parameter yang wajib yaitu url nya dimana file kita akan disimpan. selain parameter yang wajib ada parameter yang optional misalnya data, status, xhr, callback. di program ini kita console.log yang bisa anda lihat di inspeksi elemen -> console jika filenya berhasil di load maka di console anda bisa melihat kata berhasil dan statusnya 200 yang artinya file berhasil di load namun misalnya filenya tidak ada maka di konsole anda akan melihat kata tidak berhasil dan stautusnya 404 file not found

<!DOCTYPE html>
<html lang="en">
<head>
<title>JQUERY AJAX</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
</head>
<body>
<h2>JQUERY AJAX metode load</h2>
<div></div>
<button id="tombol">Klik di Sini!</button>
<script>
$(document).ready(function(){
$('#tombol').click(function(){
// load -> container.load(url)
$('div').load('index2.html')
});

});

</script>
</body>
</html>

yang kedua dengan metode post dan get, post biasanya dipakai untuk mengirim data dan get dipakai untuk mengambil data program ini jika tombol diklik maka akan merequest file tertentu cara menggunakanya post dan get penulisanya sama $.get atau $.post dan parameternya url disini kita menggunakan test.php
jadi di program ini kita mengambil data dari file test.php dan menyimpanya di div kosong

// Metode get
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQUERY AJAX</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
</head>
<body>
<h2>JQUERY AJAX metode get</h2>
<div></div>
<button id="tombol">Klik di Sini!</button>
<script>
$(document).ready(function(){
$('#tombol').click(function(){
//parameter wajib->url
//data, function(status, data, xhr), dataType
$.get('test.php',
{'nama':'Hilman'}
).done(function(data){
$('div').html(data);
});
});

});

</script>
</body>
</html>

//metode Post
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQUERY AJAX</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
</head>
<body>
<h2>JQUERY AJAX metode post</h2>
<div></div>
<button id="tombol">Klik di Sini!</button>
<script>
$(document).ready(function(){
$('#tombol').click(function(){
//parameter wajib->url
//data, function(status, data, xhr), dataType
$.post('test.php',
{'nama':'Hilman'}
).done(function(data){
$('div').html(data);
});
});

});

</script>
</body>
</html>

dan yang ketiga adalah metode ajax dengan metode ajax tidak jauh berbeda dengan kedua metode sebelumnya tapi dengan metode ajax sangat banyak parameter yang bisa kita gunakan jika temen - temen mau melihat daftar parameter yang bisa digunakan dengan metode ajax bisa dilihat di w3schools.com disitu ada async, jsonp, username, password, timeout dan masih banyak lagi tapi kita tidak usah menggunakan
semua parameter yang ada hanya parameter yang kita butuhkan yang akan kita gunakan

<!DOCTYPE html>
<html lang="en">
<head>
<title>JQUERY AJAX</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
</head>
<body>
<h2>JQUERY AJAX metode ajax</h2>
<div></div>
<button id="tombol">Klik di Sini!</button>
<script>
$(document).ready(function(){
$('#tombol').click(function(){
//parameter wajib->url
//data, function(status, data, xhr), dataType
$.ajax({
method : "POST",
url : "test.php",
data : { nama: "Hilman" }
}).done(function(data2){
$('div').html(data2);
});
});
});
</script>
</body>
</html>

dan ini isi dari file test.php nya:

<?php
if($_POST['nama']){
$test = $_POST['nama'];
}else{
$test= 'nama belum diterima';
}
echo $test;
?>

Ok itulah cara menggunakan AJAX dengan JQUERY semoga bermanfaat

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

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 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

Pemirsa ide kreatif bisa muncul dari mana saja, termasuk dalam hal membuat undangan. Membuat undangan berbasis website merupakan cara yang paling bagus, anda sekali buat tinggal sebarkan link undangan anda ke kerabat dan teman anda. disini akan dibahas cara membuat undangan berbasis website sederhana yang mirip dengan http://nikah.co.id. dalam membuat undangan ini saya menggunakan dua buah plugin jQuery yaitu pagify master dan bootstrap carousel.
Pagify master bisa anda download di https://github.com/cmpolis/Pagify dan carousel berada di file bootstrap.min.js jika anda belum mempunyai file bootstrap bisa anda dapatkan di getbootstrap.com. setelah plugin jquery sudah didownload kita buat file index.html isinya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="jQuery-2.2.0.min.js" type="text/javascript"></script>
<script src="pagify.js" type="text/javascript"></script>
<script type='text/javascript'>
        $(document).ready(function() {
        $('#page_holder').pagify({
        pages: ['beranda', 'acara', 'lokasi', 'komentar'],
        animation: 'fadeIn',
        'default': 'beranda',
        cache: true        });
        });
</script>
<title>Undangan Online</title>
</head>
<body>
<div id='container'>
<header>
<h2>Undangan Pernikahan</h2><br>
<h1>Romeo & Juliete</h1>
<nav>
<a href='#beranda'>Beranda</a>
<a href='#acara'>Acara</a>
<a href='#lokasi'>Lokasi</a>
<a href='#komentar'>Komentar</a>
</nav>
</header>
<div id='page_holder' />
</div>
<br>
<div class="footer">
        Powered by Juanas Smith - Undangan Pernikahan Online
</div>
</body>
</html>

dan kita buat lagi file beranda.html seperti berikut:

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

<script src="bootstrap.min.js"></script>
<script> var bootstrapButton = $.fn.button.noConflict()
// return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton// give $().bootstrapBtn the Bootstrap functionality        // Activate Carousel         $("#myCarousel").carousel();
        // Enable Carousel Indicators        $(".item").click(function(){
        $("#myCarousel").carousel(1);
        });
        // Enable Carousel Controls         $(".left").click(function(){
         $("#myCarousel").carousel("prev");
         });
         </script> <br><br> <div id="myCarousel" class="carousel slide" data-ride="carousel">   
<!-- Indicators -->   <ol class="carousel-indicators">  
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>   
<li data-target="#myCarousel" data-slide-to="1"></li>  
<li data-target="#myCarousel" data-slide-to="2"></li>  
<li data-target="#myCarousel" data-slide-to="3"></li>  
</ol> 
<!-- Wrapper for slides -->  
<div class="carousel-inner" role="listbox">   
<div class="item active">      
<img src="idp.jpg" alt="Chania">      
<div class="carousel-caption">    
</div>   
</div>  
<div class="item">   
<img src="bali.jpg" alt="Chania">     
<div class="carousel-caption">
</div>  
</div>    
<div class="item">   
<img src="fix.jpg" alt="Flower">  
<div class="carousel-caption">    
</div>    
</div>     
<div class="item">    
<img src="pre.jpg" alt="Flower">  
<div class="carousel-caption">    
</div>    
</div>  
</div> 

<!-- Left and right controls --> 
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">   
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>   
<span class="sr-only">Next</span>   </a> </div> <br> <div> 
<h1>Love Story</h1>   
<p>Lorem ipsum bla bla bla......</p> 
</div>

lalu kita buat file acara.html seperti berikut:


<h2>Kami yang berbahagia</h2>
<br>
Andi Gunawan<br>
Jhon & Merry<br>
Riana<br>
&<br>
Emily Smith<br>
Eric Scmidth & doe
<br>
Akad nikah

selanjutnya file lokasi.html diisi dengan google map seperti berikut:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.245085518097!2d106.91340081413246!3d-6.231386995489269!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e698cb445466a11%3A0xb4152126bf059e74!2sJl.+Duren+Sawit+Baru%2C+Duren+Sawit%2C+Kota+Jakarta+Timur%2C+Daerah+Khusus+Ibukota+Jakarta+13440%2C+Indonesia!5e0!3m2!1sen!2s!4v1481449237343"        width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
        dan terakhir kita buat file komentar.html diisi dengan disqus berikut kodenya:
<h2>Buku Tamu</h2>
<!-- disini untuk meletakan kode disqus -->

terakhir tambahkan css untuk mempercantik tampilan undangan berikut adalah kode css nya:

@import url(http://fonts.googleapis.com/css?family=Patrick+Hand);        header {
        width: 100%;
        height: 444px;
        background-image: url(../img/head.png);
    /* color: rgb(255, 255, 255); */        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100%;
        margin: 43px 0px 18px 0px;
        position: relative;
        padding: 0px;
        text-align: center;
        }
        body {
        color: rgb(255, 255, 255);
        background-color: #15b87d;
        background-image: url(../img/bg.png);
        background-position: center;
        background-repeat: repeat;
    /* background-size: 100% 100%; */        padding: 0px;
    /* background-attachment: fixed; */        margin: 0px;
        position: relative;
        font-size: medium;
        text-shadow: 1px 1px 0px rgb(0, 75, 161);
        font-family: "Patrick Hand", cursive, sans-serif, cursive, A, sans-serif;
        }
        .button {
        display: inline-block;
        padding: 5px 10px;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #ff00cc;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        }
        .button:hover {background-color: #ff00dd}
        .button:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
        }
        #mynavbar {
        background-color: rgba(255, 255, 255, 0);
        width: 100%;
        margin-bottom: 30px;
        text-shadow: none;
        color: rgb(247, 109, 109);
    /* top: 0px; */    /* margin: 0px; */    /* position: relative; */    /* margin-top: -62px; */    /* z-index: 333; */    /* position: absolute; */    /* top: 0px; */    /* border-radius: 0px 0px 10px 10px; */    /* border-radius: 10px; */    /* text-align: center; */        font-size: x-large;
    /* border-bottom: solid 2px rgb(148, 255, 253); */        }
        .mempelai h3 {
        margin: 0px;
        }
        .mempelai {
        font-size: x-large;
        border: dashed 4px rgb(6, 147, 237);
        padding: 15px 0px;
        border-radius: 20px;
    /* border-bottom-left-radius: 0px; */    /* border-bottom-right-radius: 0; */    /* border-bottom: solid 5px rgb(242, 80, 121); */    /* width: 50%; */        margin: 15px;
        color: rgb(223, 238, 255);
    /* text-shadow: 2px 2px 5px black; */        background-color: rgba(34, 127, 186, 1);
    /* background: linear-gradient(90deg, #EB3F6B 0, #F5577F 50%, #EB3F6B 100%); *//* W3C */;/* W3C */;
        }
        #lokasi {
        text-align: center;
    /* background-color: rgb(210, 228, 200); */        margin: 0px;
        }
        #lokasi h2 {
    /* padding: 13px 0px; */    /* z-index: 888; */    /* background-color: rgba(240, 41, 41, 1); */    /* border-radius: 10px; */    /* margin: 0px auto; */    /* color: rgb(255, 255, 255); */        }
        #widget_slider ol.carousel-indicators > li {
    /* vertical-align: bottom; */        margin-top: 163px;
    /* position: absolute; */        }
        #mynavbar li a {
    /* margin-bottom: -3px; */    /* display: inline-block; */    /* border-radius: 0px; */    /* height: 12px; */        padding: 0px 8px;
        border-radius: 10px;
        background-color: rgb(223, 238, 255);
        margin: 0px 10px;
        }
        .nav-tabs > li> a, .nav-tabs > li> a {
        box-shadow: none;
        color: inherit;
        }
        #widget_slider .carousel-control {
        background: none;
        z-index: 10;
        }
        footer {
        margin: 30px 0px 0px 0px;
    /* background-color: rgba(0, 0, 0, 0.1); */        padding: 7px;
    /* color: rgb(69, 54, 7); */    /* font-size: small; */    /* text-shadow: none; */        }
        .container {
        text-align: center;
        }
        #mynavbar li.active {
    /* background-color: rgb(255, 255, 255); */    /* color: white; */    /* -webkit-box-shadow: inset 0 -2px 0 #2E90FF; */    /* box-shadow: inset 0 -2px 0 #2E90FF; */    /* border-radius: 0px; */    /* color: black; */        }
        .luar {
    /* overflow: hidden; */    /* background-color: #8ED1FF; */    /* margin: 100px auto; */        width: 100%;
        max-width: 900px;
        padding: 0px;
    /* color: rgb(255, 255, 255); */    /* padding-top: 72px; */        padding-bottom: 30px;
        position: relative;
    /* border: solid 10px rgba(255, 255, 255, 0.55); */    /* border-radius: 10px; */    /* box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.82); */        }
        .tab-content {
    /* font-family: sans-serif, verdana, cursive, sans-serif; */    /* color: rgb(0, 119, 255); */        font-size: x-large;
    /* background-color: rgb(31, 31, 31); */        margin: 0px;
        padding: 6px 30px;
        }
        header h1 {
        padding-top: 344px;
        left: auto;
        margin: 0px;
        color: rgb(223, 238, 255);
        text-align: center;
        }
        #widget_slider {
        position: relative;
        z-index: 1;
        overflow: hidden;
        }
        .carousel-inner {
        overflow: hidden;
        position: relative;
        }
        a {
        color: rgb(255, 194, 0);
        }
@media screen and (max-width: 450px) {
        #mynavbar {
        font-size: medium;
        }
        header h1{
        padding-top: 161px;
        }
        .tab-content
        {
        font-size: medium;
        }
        header
        {
        height: 235px;
    }
}

simpan kode css diatas dengan nama thema.css

Ok seperti itu tutorial yang bisa saya berikan, terimakasih. jikabermanfaat silakan share ke teman anda

Lihat Demo

Langganan: Postingan ( Atom )

Beberapa plugin jquery untuk mempercantik tampilan web

Belajar AJAX dengan JQUERY

Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail

Aplikasi File Manager menggunakan PHP dan jQuery

Cara Membuat Sticky Navigation (Fixed Position saat di scroll)

Cara Membuat Template Web One Page Responsive

cara membuat undangan online sendiri seperti nikah.co.id dengan html, css, dan jquery

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

Pages

Beberapa plugin jquery untuk mempercantik tampilan web

Share story

Belajar AJAX dengan JQUERY

Share story

Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail

Share story

Aplikasi File Manager menggunakan PHP dan jQuery

Share story

Cara Membuat Sticky Navigation (Fixed Position saat di scroll)

Share story

Cara Membuat Template Web One Page Responsive

Share story

cara membuat undangan online sendiri seperti nikah.co.id dengan html, css, dan jquery

Share story

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive