Showing posts with label html. Show all posts

Cara Menampilkan Jam dengan PHP dan AJAX

Menampilkan Jam di browser dengan PHP yang auto update setiap detik ditampilkan bisa dibuat dengan memanfaatkan AJAX (Assincronus Javascript and XML). Logikanya kita buat dulu kode PHP untuk menampilkan Jam dari komputer kita, kemudian kita buat file baru yang berisi AJAX auto update dengan waktu satu detik. Jadi Perogram AJAX akan me-load fungsi PHP yang bertugas menampilkan Jam dari komputer kita tiap satu detik sekali, Karena di load tiap satu detik sekali maka tiap kali Jam berganti detik akan ditampilkan.
Ok langsung kita praktekan pertama buat dulu folder ajax di htdoc jika kalian menggunakan xampp atau di folder www jika anda menggunakan wamp lalu buat file jam.php isinya seperti berikut :

<?php
header('Access-Control-Allow-Origin: *');
date_default_timezone_set("Asia/Jakarta");  // untuk mengubah zona waktu
$arrDay = array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu");
$day = date("w"); //0-6 of day

echo "Sekarang adalah : <b>" . $arrDay[$day]."</b><br>";
echo "" . date("d/m/Y") . "<br>";
echo " " . date("H:i:s"); // untuk menampilkan jam
?>

kemudian buat file autoload.html isinya seperti berikut:

<html>
<head>
<style>
body {
background: url("bg.jpg") 30% center no-repeat;
}
#response {
margin: 250px auto;
width: 400px;
padding: 10px;
border: none;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 30px;
font-family: verdana;
}
</style>
<script src="jquery.js"></script>
<script>
var refreshId = setInterval(function(){
$('#response').load('jam.php');
}, 1000);
</script>
</head>
<body>
<div id="response">
</div>
</body>
</html>
pada kode html diatas saya menggunakan background gambar, gambarnya bisa kalian ubah sesuai gambar yang kalian miliki

kemudian karena AJAX nya menggunakan jquery silakan anda download file jquery terbaru di jquery.org kemudian file jquery yang telah anda download ganti namanya menjadi jquery.js dan pindahkan ke folder ajax tadi

setelah itu silkan di tes di browser dengan alamat http://localhost/ajax/autoload.html jika berhasil akan tampil seperti gambar diatas. Jika ingin mempercantik font jam nya bisa anda tambahkan google font. terimakasih semoga bermanfaat

Menyatukan beberapa file PHP menjadi sebuah halaman berbentuk kotak-kotak dan memisahkanya per Bab

Misalkan anda mempunyai beberapa file PHP dan anda ingin menyatukan beberapa file PHP tersebut menjadi sebuah halaman menjadi beberapa blok. ini juga pernah saya alami waktu saya dikasih tugas desain Pemerograman web. kita akan membuat desain web dengan html dan css untuk menempatkan file-file PHP tersebut. pertama kita buat dulu kerangka htmlnya seperti berikut:

<html>
<head><title>Tugas</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Francois One', sans-serif;
background: url("1.jpg");
}
.header {
height: 150px;
background-color: rgba(10, 100, 205, 0.9);
padding: 0;
font-family: 'Francois One', sans-serif;
}
.left {
width: 50%;
float: left;
background-color: transparent;
}
.right {
width: 50%;
float: right;
}
.box1{
margin: 25px auto;
padding: 10px;
width: 400px;
border-radius: 10px;
border: 1px solid #ddd;
background: linear-gradient(-90deg, rgba(0,0,255,0.6), rgba(0,255,0,0.6));
text-shadow: 1px 1px 2px white, 0 0 1em blue, 0 0 0.2em yellow;
}
label {
width: 85px;
height: auto;
float: left;
margin: 8px auto;
}
input[type=text]{
padding: 5px;
width: 300px;
border-radius: 5px;
border: 1px solid lightblue;
margin: 5px auto;
background: blue;
}
input[type=text]:hover{
box-shadow: 0 0 6px rgba(35, 173, 278, 1);
background: #fff;
}
input[type=submit], input[type=reset]{
padding: 5px;
width: 90px;
cursor: pointer;
border-radius: 5px;
border: none;
background: #fff;
margin: 5px 95px;
display: inline-block;
}
input[type=submit]:hover, input[type=reset]:hover{
background: rgba(0,0,0,0.5);
color: #fff;
}
.footer {
heigh: 100px;
background-color: #ccc;
padding: 10px;
font-weight: bold;
}
.clear {
clear: both;
}
.h1, .h2{
text-align: center;
}
ul {
list-style: none;
background-color: yellow;
width: 100%;
bottom: 0;
text-align: center;
}
li{
display: inline-block;
padding: 10px;
background-color: yellow;
}
li:hover {
background-color: blue;
color: #fff;
}
li:current {
background-color: orange;
}
a {
text-decoration: none;
}
a:hover{
color: #fff;
}
right {
float: right;
}
select, textarea{
padding: 5px;
width: 300px;
border-radius: 5px;
border: 1px solid lightblue;
margin: 5px auto;
}
</style>
</head>
<body>
<div class="header">
<br>
<h1 class="h1">Tugas Pemerograman PHP dengan style CSS</h1>
<h2 class="h2">Diki Munggaran 1501110039</h2>
<br>
<ul>
<li><a href="?page=bab1">Bab 1</a></li>
<li><a href="?page=bab2">Bab 2</a></li>
<li><a href="?page=bab3">Bab 3</a></li>
<li><a href="?page=bab4">Bab 4</a></li>
<li><a href="?page=bab5">Bab 5</a></li>
<li><a href="?page=bab6">Bab 6</a></li>
<li><a href="?page=bab7">Bab 7</a></li>
<li><a href="?page=bab8">Bab 8</a></li>
</ul>
</div>
<?php 
        if(isset($_GET['page'])){
        $page=htmlentities($_GET['page']);
        }else{
        $page="bab1";
        }
        
        $file="$page.php";
        $cek=strlen($page);
        
        if($cek>30 || !file_exists($file) || empty($page)){
        include ("bab1.php");
        }else{
        include ($file);
        }
?>
<div class="clear">
<div class="footer">
Copyright &copy; <?php echo date("Y");?> Diki Munggaran All Right Reserved. <right>We made with love</right>
</div>
</body>
</html>


Simpan file diatas dengan nama index.php atau nama lain sesuai keinginan anda. selanjutnya kita buat file bab4.php berikut ini scriptnya:

<div class="left">
<div class="box1"><?php include "input01.php"; ?></div>
<div class="box1"><?php include "input03.php"; ?><br><?php include "proses03.php"; ?></div>
<div class="box1"><?php include "input05.php"; ?><br><?php include "proses05.php"; ?></div>
<div class="box1"><?php include "input07.php"; ?><br><?php include "proses07.php"; ?></div>
<div class="box1"><?php include "input09.php"; ?><br><?php include "proses09.php"; ?></div>
</div>
<div class="right">
<div class="box1"><?php include "input02.php"; ?><br><?php include "proses02.php"; ?></div>
<div class="box1"><?php include "input04.php"; ?><br><?php include "proses04.php"; ?></div>
<div class="box1"><?php include "input06.php"; ?><br><?php include "proses06.php"; ?></div>
<div class="box1"><?php include "input08.php"; ?><br><?php include "proses08.php"; ?></div>
</div>

Untuk file bab1 sampai bab8 cara penulisanya sama seperti bab4.php cuma beda isinya saja. untuk file phpnya bisa anda download disini. atau jika ingin yang udah jadi bisa di download disini

cara membuat div slider dengan plugin slick



Kali ini kita akan membuat div slider kalu membuat image slider sudah banyak di internet nah kalo membuat div slider kaya gimana, untuk membuat div slider tidak jauh berbeda dengan membuat image slider kalau image slider yang dibuat slide nya adalah gambar, pada div slider yang dibuat slidernya div berisi paragraph dll.

Untuk membuatnya silakan anda exstrak slicknya kemudian buat file baru dan masukan kode dibawah:


<!DOCTYPE html>

<html>

<head>

  <title>Slick Playground</title>

  <meta charset="UTF-8">

  <link rel="stylesheet" type="text/css" href="./slick/slick.css">

  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">

  <style type="text/css">

    html, body {

      margin: 0;

      padding: 0;

    }



    * {

      box-sizing: border-box;

    }

    section {

      background: transparent;

    }



    .slider {

        width: 50%;

        margin: auto;

    }



    .slick-slide {

      margin: 0px 20px;

    }



    .slick-slide img {

      width: 100%;

    }



    .slick-prev:before,

    .slick-next:before {

        color: black;

    }

    .sm-box {

   width: 184px;

   height: 200px;

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

   padding: 20px;

   float: left;

   display: inline-block;

   margin: auto 5px;

   font-size: 20px;

    }

  </style>

</head>

<body>



  <section class="autoplay slider">

    <div>

      <div class="sm-box">Coba Slide 1</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 2</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 3</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 4</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 5</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 6</div>

    </div>

  </section>





  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">

    $(document).on('ready', function() {

      $('.autoplay').slick({

      slidesToShow: 3,

      slidesToScroll: 1,

      dots: true,

      autoplay: true,

      autoplaySpeed: 2000,

    });

    });

  </script>





</body>

</html>


sekianlah cara membuat div slider dengan menggunakan plugin slick. semoga bermanfaat

Ebook untuk belajar web programming lengkap

Terlepas dari kesibukan saya di dunia kerja kali ini saya akan membagikan beberapa ebook untuk belajar pemrograman web. Menjadi devloper website sangat mengasikan dan untuk memulainya anda bisa mempelajari dari ebook-ebook dibawah ini

1. ebook HTML
HTML kepanjangan dari Hyper Text Markup Language HTML merupakan bahasa pemrograman web yang paling dasar yang harus dikuasai jika anda ingin menjadi pemrogramer web
Download ebook Mastering kode HTML disini

2. ebook CSS
CSS adalah kepanjangan dari Cascading Style Sheet. dengan CSS anda bisa membuat style gaya apapun di website
Download ebook CSS Tutorial disini

3. ebook Javascript
Javascript merupakan bahasa pemrograman yang paling banyak diminati. website tanpa javascript rasanya hambar
Unduh Ebook Latihan Javascript disini

4. ebook PHP
PHP (Hyper Text Preprocessor) Adalah bahasa pemrograman web yang bekerja disisi server (back end) yang paling banyak digunakan di seluruh dunia
Download ebook PHP dasar Tutorial disini

5. ebook jquery
jquery adlah library javascript yang siap pakai. dengan jquery menulis kode javascript menjadi lebih pendek sesuai dengan semboyan nya write less do more
download ebook jquery id disini

6. ebook Code Ingniter
CodeIgniter merupakan framework PHP. dengan code igniter penulisan kode PHP akan lebih seragam karena berkonsep MVC (model view controller)
Download Modul Pelatihan CI disini

7. ebook AJAX
berikut ini ada beberapa ebook tentang AJAX
Download ebook tutorial ajax disini

Cara Membuat Countdown dengan javascript


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

Cara Membuat Sticky Navigation (Fixed Position saat di scroll)


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>
  <!-- Container -->
  <div class="container">

    <h1>Sample Header</h1>

      <!-- navigation -->
      <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>
      <!-- Content -->
      <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/

Cara Membuat Template Web One Page Responsive


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">
&copy; 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

Cara Membuat Navbar Responsiv dengan CSS Sendiri


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
    <script>
      $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');
      });
    </script>
Kode tersebut berfungsi jika tombol menu diklik maka akan menampilkan isi menunya dengan efek togle. Ok Sekianlah tutorial dari saya tentang cara membuat navbar yang responsive, semoga bermanfaat.

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

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