Saturday, April 29, 2017

Membuat Kotak Galeri

     No comments
HALAMAN khusus galeri, gambar, atau image diperlukan bagi blog toko online untuk menampilkan koleksi produk atau barang jualan.
Web pribadi juga bisa membuat halaman statis berisi galeri atau koleksi gambar pilihan.
Cara membuatnya cukup mudah, dan biasanya masalah yang sering ditemui jika kita memasukkan gambar lebih dari satu, maka posisi gambar tidak akan sejajar horizontal, tapi akan berderet vertikal.
Tutorial kali ini saya akan membagikan solusinya, mau tau ?
copas kode dibawah :





<html>

<head>


<title>Galeri</title>


<style type="text/css">


<!--


* {


margin: 0;


padding: 0;


}




body {


background: #333;


}




div {


width: 900px;


margin: 0 auto;


overflow: auto;


}




ul {


list-style-type: none;


}




li img {


float: left;


margin: 10px;


border: 5px solid #fff;




-webkit-transition: box-shadow 0.5s ease;


-moz-transition: box-shadow 0.5s ease;


-o-transition: box-shadow 0.5s ease;


-ms-transition: box-shadow 0.5s ease;


transition: box-shadow 0.5s ease;


}




li img:hover {


-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); 


box-shadow: 0px 0px 7px rgba(255,255,255,0.9);


}


-->


</style>


</head>


<body>


<div>


<ul>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


</ul>


</div>


</body>


</html>

Jadinya bakal seperti gambar


Semoga Bermanfaat !

Menu Vertikal Dengan Gambar

     No comments
Dalam membangun sebuah web, menu memiliki peran yang sangat penting, selain mempermudah mencari artikel atau info dari sebuah web yang dituju, menu juga berperan mempercantik halaman web.
Disini saya akan membuat menu navigasi vertikal disertai dengan gambar.
kodenya dibawah, langsung copas aja biar cepat, hehehehee...





<html><head>



<title>Menu Dengan Gambar</title>



<style type="text/css">



<!--



* {margin: 0; padding: 0;}





div {



margin: 20px;



}





ul {



list-style-type: none;



width: 500px;



}





h3 {



font: bold 20px/1.5 Helvetica, Verdana, sans-serif;



}





li img {



float: left;



margin: 0 15px 0 0;



}





li p {



font: 200 12px/1.5 Georgia, Times New Roman, serif;



}





li {



padding: 10px;



overflow: auto;



}





li:hover {



background: #eee;



cursor: pointer;



}



-->



</style>



</head>



<body>



<div>



<ul>



<li>



<img src="1.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="2.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="3.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="4.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>



</ul>



</div>



</body>



</html>

kalau copasnya benar gambarnya bakal begini nih

  OKE.........


Membuat Menu Navigasi Vertikal Sederhana

     No comments
Pada sebuah web perlu adanya menu navigasi guna untuk mempermudah user atau pengguna dalam mencari artikel dala halaman web yang dituju, tanpa adanya menu user akan mengalamai kesulitan mendapatkan info atau artikel yang dicari.
Nah, disini saya akan berbagi sedikit tutorial membuat menu navigasi vertikal yang sederhana dan semoga saja bermanfaat bagi agan yang membaca tutorial ini.
kodenya sebagai berikut :





<html><head>



<title>Menu Navigasi Sederhana</title>



<style type="text/css">



<!--



div {



width: 200px;



}





h2 {



font: 400 40px/1.5 Helvetica, Verdana, sans-serif;



margin: 0;



padding: 0;



}





ul {



list-style-type: none;



margin: 0;



padding: 0;



}





li {



font: 200 20px/1.5 Helvetica, Verdana, sans-serif;



border-bottom: 1px solid #ccc;



}





li:last-child {



border: none;



}





li a {



text-decoration: none;



color: #000;



display: block;



width: 200px;





-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;



-moz-transition: font-size 0.3s ease, background-color 0.3s ease;



-o-transition: font-size 0.3s ease, background-color 0.3s ease;



-ms-transition: font-size 0.3s ease, background-color 0.3s ease;



transition: font-size 0.3s ease, background-color 0.3s ease;



}





li a:hover {



font-size: 30px;



background: #f6f6f6;



}





-->



</style>



</head>



<body>



<div>



<h2>Navigasi Vertikal Sederhana</h2>



<ul>



<li><a href="#">Menu 1</a></li>



<li><a href="#">Menu 2</a></li>



<li><a href="#">Menu 3</a></li>



<li><a href="#">Menu 4</a></li>



<li><a href="#">Menu 5</a></li>



</ul>



</div>



</body>



</html>

kalau sudah  dicopas dan disimpan dengan benar maka tampilannya akan seperti gambar dibawah :


Thursday, April 13, 2017

Membuat CardFan Pada Image Dengan CSS

     No comments
Animasi dalam sebuag website itu sangatlah penting untuk membuat content web lebih interaktif , terlebih lagi animasi yang digunakan sangat menarik, misalnya slider, pop up gambar dan juga animasi-animasi lainnya. Tapi, dikesempatan kali ini saya akan berbagi trik membuat cardfan pada gambar, itu seperti membuat latar gambar dibalik gambar. Contoh seperti pada gambar :


Untuk kodingnya tidak terlalu panjang dan ribet, kodingnya dibawah :





<!doctype html>



<html><head>



<title>Cardfan</title>



<style type="text/css">



<!--



#cardfan, #cardfan img { width: 400px; height: 350px; }



#cardfan { margin: 0 auto; }



#cardfan img { border: 32px solid #ffe;



box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);



position: absolute;



transform-origin: center 300px;



}



#cardfan:hover img:first-child {



transform: rotate(25deg);



}



#cardfan:hover img:last-child {



transform: rotate(−25deg);



}



-->



</style>



</head>



<body>



<div id="cardfan">



<img src="gambar agan. disini" alt="terserah agan">



<img src="gambara agan disini" alt="terserah agan">



</div>



</body>



</html>

Catatan:
Untuk tulisan berwarna merah ganti dengan nama gambar yang ingin ditampilkan
misalnya, /image/gambar.jpg

Selamat mencoba dan semoga berhasil !

Wednesday, April 12, 2017

Membuat Tabel Keren Dengan Caption

     No comments
Pada tutorial kali ini saya akan membagikan contoh membuat tabel sederhana yang mudah dipahami struktur syntaxnya. Untuk membuat membuat desain tabel ini silahkan ikuti langkah-langkah berikut :



kode CSS :
table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}
caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}

caption h2 { font-size: 20px;

             margin: 0 0 10px 0;

}

caption p { font-size: 16px;

            margin: 0;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

#kuantitas-column { width: 200px;

}

#harga-column { background: #ddd;

}

kode html : 

<body>



<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>
</body>
karena css nya tidak banyak sebaiknya diibuat dalam satu file saja agar tidak terlalu banyak membuat file pada directory

untuk kode lengkapnya :

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Tabel Keren Dengan Caption</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}



caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}
caption h2 { font-size: 20px;
    margin: 0 0 10px 0;

}
caption p { font-size: 16px;
          margin: 0;

}
thead th,
tfoot th,
tfoot td { background: #eee;
}
th, td { padding: 10px;
}
thead th:first-child {
  text-align: left;
}
tbody th,
tfoot th { text-align: left;
}
#kuantitas-column { width: 200px;
}
#harga-column { background: #ddd;
}
-->

</style>

</head>

<body>

<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>
</html>

setelah semua telah selesai maka akan menghasilkan tampilan seperti pada gambar


Selamat mencoba dan semoga bermanfaat !