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

Desember 18, 2016 , , , 0 Comments

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











































Juanas Smith Shared






                            Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. 
                          
















                    

                  





0
komentar
                          :
                        






































Langganan:

Posting Komentar
                        (
                        Atom
                        )