2014 ~ Be Programer

Cara Install Codeigniter di Netbeans

UnknownDesember 20, 2014Codeigniter, Instaling Tidak ada komentar

Cara Install Codeigniter di Netbeans - Sebagai salah satu IDE terkenal Netbeans juga dapat digunakan sebagai editor Framework Codeigniter. Akan tetapi jika anda menggunakan Netbeans seabagai editor utuk mendevelop website berbasis Framework Codeigniter tanpa menginstal atau mengkonfigurasi plugin maka fitur Autocomplete yang disediakan oleh Netbeans tidak sepenuhnya bekerja dengan baik karena tidak ada library yang tersedia. Sehingga hal ini dapat memperlambat proses kita dalam proses pembuatan website karena tidak ada suggestion yang ditampilkan.

Untuk dapat memunculkan Autocompletenya anda terlebih dahulu harus Install plugin dan mengkonfigurasikannya dengan netbeans anda. Lalu bagaimana caranya install dan konfigurasi codeigniter di netbeans ?

Netbeans

Sayangnya sampai saat artikel ini dibuat versi netbeans yang dapat di integrasikan dengan codeigniter hanyalah netbeans versi 7.2, 7.2.1, 7.3, 7.3.1 sehingga pada versi di atas atau sebelumnya kita tidak dapat mengintegrasikannya penuh dengan codeigniter.

*Notes

Anda dapat menginstal netbeans berbagai versi tanpa saling bertabrakan, sebagai contoh dalam Laptop saya mengisntal dua buah versi netbeans yaitu versi 7.2 dan 7.3.1 tanpa ada efek samping. jadi intinya anda dapat menginstal beberapa versi yang berebeda dari netbeans akan tetapi tergantung kekuatan perangkat anda juga.

1. Apabila anda belum menginstal netbeans download terlebih dahulu netbeans antara versi 7.2, 7.2.1, 7.3, 7.3.1 di situs resminya di sini : DOWNLOAD

2. Pastikan anda menginstal Netbeans yang dilengkapi dengan bundles PHP.

3. Buka netbeans anda kemdian klik menu Tool > Plugin.

Tool Plugins Netbeans

4. klik Settings > Add

Add Update Codeigniter Plugin

5. Isi Name dengan : Codeigniter

6. Isi Url sesuai versi :

Untuk NetBeans 7.2 : https://kenai.com/downloads/nbphpci/Latest_NetBeans720/updates.xml

Untuk NetBeans 7.2.1 : https://kenai.com/downloads/nbphpci/Latest_NetBeans721/updates.xml

Untuk NetBeans 7.3 : https://kenai.com/downloads/nbphpci/Latest_NetBeans730/updates.xml

Untuk NetBeans 7.3.1 : https://kenai.com/downloads/nbphpci/Latest_NetBeans731/updates.xml

*notes
Apabila di masa depan nanti sudah ada update untuk netbeans versi terbaru anda dapat mendapatkan url untuk pluginnya dari situs Kenai.com di sini : Cek TKP

7. Klik Avalibe Plugins > Cari PHP CI Framework Repository dan PHP CI Framework > Klik Install

Avalibe Plugins Codeigniter Netbeans

8. Klik Next > Centang pada I accept > klik Install > Apabila muncul popup klik Continue > Klik Finish

9. Sekarang plugin anda telah selesai di install.

Selanjutnya adalah menghubungkan pluginsnya dengan PHP di netbeans agar ketika kita membuat sebuah project baru kita tidak perlu mengekstrak codeigniter lagi melainkan langsung tersdia ketika kita membuat project baru.

1. klik menu Tool > Klik Option > Pilih PHP > Klik Codeigniter > Pilih Base File

Tool Option netbeans

2. klik Add Zip > Klik Browse > Cari File Codeigniter anda yang masih bebentuk RAR / Zip > isi namanya dengan : Codeigniter > Klik OK

Add Archive Codeigniter

Sekarang anda dapat mencobanya dengan membuat sebuah project baru.

New Project Codeigniter Netbeans

Klik File > New Project > PHP > PHP Application > Next > Next > Next > Centang Codeigniter > Finish.

Cara Membuat Menu Navigasi Blog Melayang di Atas atau Sticky Navigation

UnknownDesember 15, 2014Blogging, Java Script, JQUERY Tidak ada komentar

Cara Membuat Menu Navigasi Blog Melayang di Atas atau Sticky Navigation - Sticky Navigation adalah menu navigasi yang menempel pada bagian atas halaman atau menu navigasi yang melayang dia atas ketika blog di scroll. hal ini bertujuan agar ketika user menscroll page ke bawah menu navigasi tetap ada. sehingga memudahkan user menjadi tidak bolak balik ke atas lagi.

Lalu bagaimanakah Cara Membuat Menu Navigasi Blog Melayang di Atas atau Sticky Navigation ?

Hal ini sebenarnya cukup mudah untuk di lakukan akrena hanya membutuhkan beberapa baris script saja.

1. Buka masuk ke pannel admin blog anda > pilih Template > klik Edit HTML

2. Cari tag </body> anda dapat menekan di Keyboard CTRL + F kemudian ketikan </body> agar lebih cepat.

3. Copy kode berikut dan letakan di bagian atas </body>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

    var stickyNavTop = $('#menu-nav').offset().top;

    var stickyNav = function(){

        var scrollTop = $(window).scrollTop();

        if (scrollTop > stickyNavTop) {

            $('#menu-nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });

        } else {

            $('#menu-nav').css({ 'position': 'relative' });

        }

    };

    stickyNav();

    $(window).scroll(function() {

        stickyNav();

    });

});

//]]>

</script>

*Notes
ganti #menu-nav dengan tag root menu anda karena setiap template punya tag id atau class yg berbeda - beda. apabila anda kesulitan mencarinya coba anda find salah satu isi menu navigasi anda dan lihat div teratasnya.

Cara Membuat Menu Navigasi Blog Melayang di Atas atau Sticky Navigation

Code Menu Yang Akan Sticky Navigation

Apabila anda berhasil hasilnya anda dapat lihat seperti yang ada di blog ini. jika anda scroll ke bawah maka menunya mengikuti ke bawah dan melayang di atas.

Preview Menu Melayang Sticky Navigation

Selamat mencobanya di blog anda masing - masing.

Cara Passing Variable Controller ke View di Codeigniter

UnknownDesember 14, 2014Codeigniter, PHP Tidak ada komentar

Cara Passing Variable Controller ke View di Codeigniter - Passing variable adalah proses pelemparan isi dari variabel dari suatu proses ke proses lain. Dalam kasus ini kali ini kita akan belajar cara melempar variable dari controller ke view di codeigniter. Hal ini di lakukan untuk membuat isi dari view menjadi lebih fleksibel karena isinya kita tentukan dari controller dan tugas view menampilkan isi variabel yang di lemparkan dari controller. Sekarang langsung saja kita meluncur ke prakteknya, biar lebih greget.

Baca juga : Cara Instal dan Konfigurasi PHP Framework Codeigniter

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup atau jika anda ingin lebih terstruktur gunakan netBeans.

Controller

Pertama bukalah terlebih dahulu folder codeingiter anda yang ada di dalam web server anda, jika anda belum menginstalnya baca di sini : Cara Instal dan Konfigurasi PHP Framework Codeigniter

Buka folder Application > Controllers.

Buatlah sebuah file baru kemudian ketikan kode berikut :

<?php
 class main extends CI_Controller {
  function index(){
   $data['isi_halaman'] = 'Hallo dunia sekarang saya sudah bisa passing variabel codeigniter';
   $this->load->view('v_main', $data);
  }
 }
?>

Penjelasan :

- Kita mendeklarasikan sebuah variabel array dengan nama $data dan diberi index "isi_halaman". kenapa array ? karena passing variabel dari controller ke view hanya dapat menggunakan data yang berbertuk array.

- Kita meload sebuah view dengan nama "v_main" yang nanti akan kita buat di dalam folder view. dan kita melemparkan variabel $data.

Simpan file tersebut dengan nama main.php.

View

Buka folder Application > View.

Buatlah sebuah file baru kemudian ketikan kode berikut :

<html>
 <body>
  <?php echo $isi_halaman; ?>
 </body>
</html>

Penjelasan :

- Kita mencetak variabel yang di lemparkan oleh conttroller dengan cara memanggil index dari arraynya.

Simpan file tersebut dengan nama v_main.php.

Sekarang kita lihat hasilnya, buka browser anda kemudian ketikan di url :

http://localhost/codeigniter/index.php/main

*notes

-codeigniter adalah nama folder anda di webserver.

Cara Passing Variable Controller ke View di Codeigniter

Passing Variabel Codeigniter

Untuk latihan anda coba buat dua index array yang berbeda contoh :

$data['isi_1'] = 'ini isi 1';
$data['isi_2'] = 'ini isi 2';

Kemudian cetak keduanya di view.

Cara Instal dan Konfigurasi PHP Framework Codeigniter

UnknownDesember 12, 2014Codeigniter, Instaling, PHP Tidak ada komentar

Cara Instal dan Konfigurasi PHP Framework Codeigniter - Codeigniter ( CI ) adalah framework PHP yang digunakan untuk mempermudah user dalam pengembangan web. Codeigniter berisi kerangka untuk berkerja yang berisi kumpulan library class yang dapat digunakan untuk membuat program yang menggunakan PHP menjadi lebih mudah dan sitematis. Karena Codeigniter sudah kumpulan library class yang dapat di gunakan sehingga pemrograman tidak perlu memulai dari awal.

Sekarang bagaimanakah kita bisa menggunakan framework ini? ikuti langkah - langkah di bawah ini untuk memulai instalasi serta mengkonfigruasi PHP Frame Codeigniter pertama anda.

Instalasi

1. Pertama anda harus mengunduh terlebih dahulu file Codeigniternya di sini : DOWNLOAD

2. Ekstrak filenya ke dalam webserver anda.

3. Instalasi sudah selesai. Mudah bukan hanya tinggal ekstrak saja bkakakakak.

4. Sekarang untuk mengetesnya anda dapat membuka browser anda kemudian ketikan di urlnya :

http://localhost/Nama folder codeigniter yang anda ekstrak/

Jika muncul tampilan seperti ini maka anda berhasil.

Welcome Codeigniter

Jika anda klik User Guide di sana ada semua tutorial dasar yang anda butuhkan untuk mempelajari Codeigniter.

Konfigurasi

Sekarang kita akan mempelajari konfigurasi dasar codeigniter. Buka folder codeigniter anda kemudian buka folder Application > Config

Sekarang anda melihat ada banyak file di dalam folder cofig file inilah menyimpan data konfigurasi yang diperlukan oleh aplikasi.

1. Config

Buka file config.php anda. Perhatikan pada baris kode ini :

$config['base_url'] = '';

Disini tempat anda mendefinisikan alamat server dan folder anda. ubah baris ini menjadi :

$config['base_url'] = 'http://localhost/nama_folder_codeigniter_anda';

Perhatikan kembali pada baris kode ini :

$config['encryption_key'] = '';

Disini tempat anda mendefinisikan encription key anda, hal ini perlu di isi jika anda ingin melakukan session nantinya. anda dapat membuat sendiri encription key anda atau anda dapat menggunakan key generator di sini : KEY GENERATOR

Pilih yang Codeigniter Encription Key. contoh encription key anda sekarang :

$config['encryption_key'] = 'za2fYQ1iTEi7EJ5zI5AB099kQS4QZ3Cw';

2. Routes

Buka file routes.php anda. Perhatikan pada baris kode ini :

$route['default_controller'] = "welcome";

Disinilah anda mendefinisikan controller default anda, contoh :

$route['default_controller'] = "main";

Main : adalah nama controller anda

anda juga dapat hanya menyebutkan nama controller dan nama fungsi yang ada di dalamnya, contoh :

$route['default_controller'] = "main/home";

Home : adalah nama fungsi yang ada dalam controller main.

Apabila anda belum membuat controller, tinggalkan saja / jangan di ubah dahulu baris ini.

3. Autoload

Buka file autoload.php anda. Perhatikan pada baris kode ini :

$autoload['libraries'] = array();

Disini tempat anda mendefinisikan library yang akan anda gunakan. ubah menjadi seperti ini :

$autoload['libraries'] = array('database', 'session', 'xmlrpc');

Perhatikan pada baris kode ini :

$autoload['helper'] = array();

Disini tempat anda mendefinisikan helper yang akan anda gunakan. ubah menjadi seperti ini :

$autoload['helper'] = array('url', 'file', 'text');

4. Database

Konfigurasi ini di butuhkan apa bila anda menggunakan database. Buka file database.php perhaitkan pada baris kode ini :

$db['default']['hostname'] = '';
$db['default']['username'] = '';
$db['default']['password'] = '';
$db['default']['database'] = '';
$db['default']['dbdriver'] = '';

Hostname : Nama server anda atau host database anda

Username : Isi dengan username database anda. defaultnya adalah root

Password : Password database anda, defaultnya kosong

Database : Nama database anda.

Dbdriver : Driver database anda, biasanya mysql

sebagai contoh :

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'db_ci';
$db['default']['dbdriver'] = 'mysql';

Apabila anda belum membuat database kosongkan saja pada bagian databasenya.

Dengan konfigurasi dasar di atas sekarang anda sudah siap untuk mulai membuat website PHP dengan Framework Codeigniter anda. Kita bertemu lagi di postingan berikutnya untuk mulai belajar dasar - dasar untuk menggunakannya.

Cara Print Page Web Dengan Javascript

UnknownDesember 07, 2014CSS, HTML, Java Script Tidak ada komentar

Cara Print Page Web Dengan Javascript - Ketika kita membuat aplikasi website kita ingin mencetak sebuah web page atau halaman web untuk dokumentasi atau sebagai report hasil dari suatu aplikasi web. Hal ini sebenarnya dapat dengan mudah anda lakukan dengan menekan tombol di keyboard CTRL + P. Akan tetapi jika anda menggunakan cara ini semua halaman yang ada dalam website akan tercetak, padahal dalam beberapa kasus kita hanya ingin beberapa bagian atau elemen saja yang tercetak. seperti data tabel karyawan, sllip gaji karyawan, kwitansi pembayaran, report keuangan, dll.

Bagaimanakah caranya kita dapat mencetak bagian yang kita inginkan saja ? jawabannya sangatlah sederhana yaitu anda cukup menyembunyikan bagian yang tidak anda inginkan ketika mencetaknya. tapi bagaimanakah kita melakukanna sedangkan jika kita langsung menekan CTRL + P di keyboard akan langsung muncul popup preview dari printnya, dan sudah tidak dapat di ubah lagi isinya.

Untuk mencetak halaman sebenarnya terdapat beberapa cara selain langsung menggunakan control print. salah satunya yaitu dengan menggunakan fitur Javascript window.print();. kemudian bagaimana kita meyembunyikan bagian yang tidak yang di ingikan ketika di cetak ?

Dengan menggunakan salah satu fitur yang sudah disediakan oleh CSS @media print kita dapat memisahkan tampilan web page asli dengan web page yang akan di cetak. Jika kita memasukan tag CSS di dalam @media print ini CSS akan aktif jika halaman web menjadi popup print. masih bingung ? lebih jelasnya langsung saja kita ke prakteknya.

CSS

Pertama buatlah sebuah folder dengan nama Print Page Web, sekarang untuk mempercantik bentuk tampilan tabel yang akan di print buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

h2 ,h3{
  margin: 0px;
}

.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
  font-family:monospace;
}

.container table {
  width: 100%;
}

.container td, .container th {
  padding: 10px;
}

.container td:first-child, .container th:first-child {
  padding-left: 20px;
}

.container td:last-child, .container th:last-child {
  padding-right: 20px;
}

.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
  cursor: pointer;
}

.container th.desc:after {
  border-top-color: #666;
}

.container th.asc:before {
  border-bottom-color: #666;
}

.container th:after, .container th:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  width: 0;
  height: 0;
}

.container th:after {
  border-top-color: #ddd;
  top: 22px;
}

.container th:before {
  border-bottom-color: #ddd;
  top: 10px;
}

Simpan dalam folder Print Page Web dengan nama style.css

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
<title>Tabel Sorting CSS dan Javascript</title>
<link href="style.css" rel="stylesheet">
 <style type="text/css">
    @media print
    {
     #not-print { display: none; }
    }
    </style>
 </head>
 <body>
<section class="container">
 <div id="not-print">
  <h2>Jin Toples Programming</h2>
  <h3>jintoples.blogspot.com</h3>
 </div>
 <h2>Print Page Web Dengan Javascript</h2>
 <table>
  <thead>
   <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Price</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Jin Toples</td>
    <td>jin.doe@gmail.com</td>
    <td>0123456789</td>
    <td>99</td>
   </tr>
   <tr>
    <td>Jane Toples</td>
    <td>jane@toples.org</td>
    <td>9876543210</td>
    <td>349</td>
   </tr>
   <tr>
    <td>Rengo Kolas</td>
    <td>begi@batman.com</td>
    <td>6754328901</td>
    <td>199</td>
   </tr>
  </tbody>
 </table>
 <a href="#" id="not-print" onClick="window.print();return false" >- Print -</a>

</section>

 </body>
</html>

Simpan dengan nama index.html di dalam folder yang sama.

Sekarang Print Page anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Jika anda perhatikan ada beberapa bagian yang tidak muncul di jendela print, yaitu header judul Jin Toples Programming dan tombol printnya. Hal ini di karenakan kita menset displaynya mejadi none ketia memasuki halaman print. perhatikan pada bagian script ini :

<style type="text/css">
    @media print
    {
     #not-print { display: none; }
    }
    </style>

Jika ada bagian yang di tampilkan anda dapat melakukan hal yang sama, cukup tambahkan tag CSS baru atau menambahkan id="not-print" pada bagian yang tidak ingin dimunculkan.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Membuat Tags Atau Label Dengan jQuery Tags Input

UnknownNovember 29, 2014AJAX, CSS, HTML, Java Script, JQUERY Tidak ada komentar

Membuat Tags Atau Label Dengan jQuery Tags Input - Label atau dalam bahasa inggris tag adalah kata kunci yang berhubungan dengan konten yang diberikan tag, tags ini digunakan untuk menunjukan potongan - potongan infromasi sebagai petunjuk dari suatu konten. Hal ini juga dapat membantu memudahkan pencarian terhadap sesuatu yang berhubungan dengan tags tersebut.

Sebagai contoh apabila anda seorang blogger ketika anda selesai membuat sebuah konten kita memasukan label atau tags yang berhubungan dengan konten tersebut untuk mengkategorikan konten tersebut dan juga untuk mempermudah mesin pencari untuk menemukan konten yang kita buat.

Sekarang bagaimana jika kita ingin membuat website sendiri tentu kita harus membuat fitur tags kita sendiri. Nah, bagaimankah untuk membuatnya ?

Baca Juga : Cara Membuat Textarea Dengan Character Count dan Limit

Hal ini dapat dilakukan scara konvesional yaitu dengan menggunakan inputan kemudian setiap tags dipisah dengan koma. Akan tetapi hasil tampilannya tidak menarik karena tags yang di input hanya kita pisahkan dengan koma. untuk itu kita membutuhkan tambahan CSS untuk mempercantiknya tetapi hal ini juga di butuhkan bantuan Javascript dan jQuery.

Untuk lebih jelasnya sekarang langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Jquery Tags, sekarang untuk mempercantik bentuk tampilan inputan tags buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic);
*, *:before, *:after { box-sizing: border-box; }
html { font-size: 100%;  }
body { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background: #0172c6;
  color: #fff;
}

.wrapper {
  max-width: 65%;
  margin: auto;
}


h2 { 
  color: #fff;  
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  display: block;
  text-align: Center;
}

h1 { 
  color: #fff; 
  margin: 3rem 0 1rem 0; 
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: block;
  text-align: Center;
}

ul {
  width: 100%;
  min-height: 100px;
  resize: none;
  border: 1px solid #ddd;
  outline: none;
  padding: 0.5rem;
  color: #666;
  box-shadow: inset 0 0 0.25rem #ddd;
  &:focus {
    outline: none;
    border: 1px solid darken(#ddd, 5%);
    box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
  }
  &[placeholder] { 
    font-style: italic;
    font-size: 0.875rem;
  }
}

#keywords{
 width:80%;
}
</style>

Simpan dalam folder Jquery Tags dengan nama style.css

Sekarang untuk memperncantik tampilan tagsnya buat lagi sebuah file baru dan ketikan script berikut :

.ui-autocomplete {
    background-color: #fff;
    position: absolute;
    cursor: default;
    list-style: none;
    margin: 25px 0 0;
    padding: 0;
    border: 1px solid #E5E5E5;
    border-top: none;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -moz-box-shadow: 0 3px 5px #888;
    -webkit-box-shadow: 0 3px 5px #888;
    box-shadow: 0 3px 5px #888;
    font-size: 12px;
}

.ui-autocomplete .ui-menu-item {
    padding: 0;
    margin: 0;
}

.ui-autocomplete  .ui-menu-item a {
    display: block;
    padding: 4px 6px;
    margin: 0;
    text-decoration: none;
    line-height: 12px;
    border-bottom: 1px solid #E5E5E5;
    border-top: 1px solid #fff;
    color: #78959D;

}

.ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-active {
    background-color: #c0d1e2;
    color: #555;
    border-color: #a6cef7;
}

.ui-autocomplete-loading {
    
}

ul.tagit {
    cursor: text;
    overflow: auto;
    font-size: 14px;
    width: 97%;
    padding: 3px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 16px;
    border: 1px solid #E5E5E5;
    background: #fff;
    color: #333;
}

ul.tagit li {
    display: block;
    float: left;
    margin: 2px 5px 2px 0;
    position: relative;
}

ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{
    float: left;
    width: 12px;
    margin-left: -5px;
    cursor: move;
}

ul.tagit li.tagit-choice {
    background-color: #5bc0de;
 margin: 2px 5px 2px 0;
 display: block;
 padding: 2px 15px 3px 4px;
 color: #fff;
 text-align: center;
 white-space: nowrap;
 vertical-align: baseline;
 border-radius: .25em;
 position: relative;
 float: left;
 font-weight: 500;
}

ul.tagit li.tagit-choice.selected {
    background: #ff3019; /* old browsers */
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff3019', endColorstr = '#cf0404', GradientType = 0); /* ie */
    border-color: #f76464;
}

ul.tagit li.tagit-choice:hover {
    background: #0172c6;
}

ul.tagit li.tagit-new {
    padding: 2px 4px 3px;
    padding: 2px 4px 1px;
    padding: 2px 4px 1px 0;
}

ul.tagit li.tagit-choice input {
    display: block;
    float: left;
    margin: 0 5px 0 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

ul.tagit li.tagit-choice a.tagit-close {
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    outline: medium none;
    padding: 3px 0 2px 3px;
    text-decoration: none;
    position: absolute;
    display: block;
    top: 0;
    right: 3px;
    text-shadow: -1px -1px 0 rgba(150, 150, 0, 0.7);
}

ul.tagit li.tagit-choice a.tagit-close:hover {
    color: #f00;
}

ul.tagit div.tagit-label.hidden {
 display: none;
}

ul.tagit input.tagit-edit {
 margin: 0px 0px 0px 2px;
 border: none;
 line-height: 16px;
}

ul.tagit input[type="text"] {
    -moz-box-sizing: border-box;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: inherit !important;
    outline: none;
}

.tagit-hiddenSelect {
    display:none;
}

Simpan dalam folder Jquery Tags dengan nama tagit-stylish-yellow.css

Javascript

Sekarang untuk jQuery dan jQuery ui anda dapan mengunduhnya di sini :

Download jQuery

Download jQuery-Ui

Simpan dalam folder Jquery Tags.

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
  <title>Jquery Tag | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet">
  <link href="tagit-stylish-yellow.css" rel="stylesheet">  
  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
  <script src="tagit.js" type="text/javascript"></script>
  
  <script type="text/javascript">
   $(function() {
    $('#demo9').tagit({ 
     editable: true,
     triggerKeys:['comma', 'tab'] 
    });
    
   $('#send').click(function (){
     showTags($('#demo9').tagit('tags'))
   });
    
   function showTags(tags){
     var string = "";
     for (var i in tags) string += tags[i].value + ",";
     $('#keywords').val(string);
   }
   });
  </script>
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Jquery Tagit</h2>
   <ul id="demo9" name="demo9"></ul>   
   <button type="submit" id="send" >Get Tags</button>
   <input type="text" class="form-control" name="keywords" id="keywords" readonly/>
  </div>   
 </body>
</html>

Simpan dengan nama index.html.

Sekarang jQuery Tags anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Coba ketikan beberapa ketika kemudian untuk setiap tags anda dapat pisahkan dengan koma maka dia akan otomatis berpisah.

Coba anda klik get tags maka sekarang inputan yang di bawah akan berisi value dari tags tersebut. apa bila anda ingin menyimpan tags tersebut di dalam database gunakanlah inputan yang di bawah untuk menangkapnya dan untuk tombol get tags anda dapat ubah menjadi bertipe submit.

Jika anda tidak ingin menampilkan inputan yang di bawah anda cukup ubah typenya menjadi hidden.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Cara Membuat Textarea Dengan Character Count Dan Limit

UnknownNovember 19, 2014CSS, HTML, Java Script, JQUERY Tidak ada komentar

Cara Membuat Textarea Dengan Character Count Dan Limit - Textarea adalah sebuah komponen dari HTML yang digunakan untuk mengetikan atau menginput text yang biasanya panjang. Pada dasarnya fungsi textarea sama dengan text field yaitu untuk menginput karakter tapi textarea lebih ditujukan untuk ke arah jumlah karakter yang lebih banyak karena bentuk field text area yang luas atau lebih besar dibandingkan dengan text field.

CSS

Pertama buatlah sebuah folder dengan nama Textarea, sekarang untuk mempercantik bentuk tampilan textarea buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic);
*, *:before, *:after { box-sizing: border-box; }
html { font-size: 100%;  }
body { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background: #0172c6;
  color: #fff;
}

.wrapper {
  max-width: 65%;
  margin: auto;
}


h2 { 
  color: #fff;  
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  display: block;
  text-align: Center;
}

h1 { 
  color: #fff; 
  margin: 3rem 0 1rem 0; 
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: block;
  text-align: Center;
}

textarea {
  width: 100%;
  min-height: 100px;
  resize: none;
  border: 1px solid #ddd;
  outline: none;
  padding: 0.5rem;
  color: #666;
  box-shadow: inset 0 0 0.25rem #ddd;
  &:focus {
    outline: none;
    border: 1px solid darken(#ddd, 5%);
    box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
  }
  &[placeholder] { 
    font-style: italic;
    font-size: 0.875rem;
  }
}

#the-count {
  float: right;
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}
</style>

Simpan dalam folder Textarea dengan nama style.css

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
  <title>Textarea Character Count | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet">   
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Textarea Character Count</h2>
    <textarea name="the-textarea" id="the-textarea" maxlength="140" placeholder="Enter Your Text Here"></textarea>
    <div id="the-count">
   <span id="current">0</span>
   <span id="maximum">/ 140</span>
    </div>
  </div> 
 </body>
</html>

Simpan dalam folder Textarea dengan nama index.html

Javascript

Sekarang untuk counter kita tambahkan javascript di dalam markup HTMLnya, buka file Index.hml anda di Notepad++ kemudian ubah scriptnya menjadi :

<!DOCTYPE html>
<html>
 <head>
  <title>Textarea Character Count | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet"> 
  <script src="jquery.min.js"></script>
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Textarea Character Count</h2>
    <textarea name="the-textarea" id="the-textarea" maxlength="140" placeholder="Enter Your Text Here"></textarea>
    <div id="the-count">
   <span id="current">0</span>
   <span id="maximum">/ 140</span>
    </div>
  </div> 
  <script>
   $('textarea').keyup(function() {   
     var characterCount = $(this).val().length,
      current = $('#current'),
      maximum = $('#maximum'),
      theCount = $('#the-count');
    
     current.text(characterCount);
      
     if (characterCount == 140) {
    maximum.css('color', '#8f0001');
    current.css('color', '#8f0001');
    theCount.css('font-weight','bold');
     } else {
    maximum.css('color','#fff');
    theCount.css('font-weight','normal');
     }
     
      
   });
  </script>
 </body>
</html>

Kemudian simpan.

Jika kalian perhatikan script di atas maka terlihat javascript tambahan di bagian bawah dan jquery di bagian atas. Untuk jquery anda dapat menggambilnya di website resminya atau anda dapat mengunduhnya di sini : Download

Sekarang Textarea Character Count anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Cara Membuat Tabel Search Dengan Bootstrap dan Javascript

UnknownAgustus 27, 2014CSS, HTML, Java Script Tidak ada komentar

Cara Membuat Tabel Search Dengan Bootstrap dan Javascript - Tabel search adalah sebuah tabel yang ditambahkan fitur search yang berfungsi secara otomatis mencari di dalam baris dari tabel ketika memasukan kata kunci pencariannya. Hal ini akan memudahkan anda dalam memfilter dan mencari data yang terdapat dalam tabel. Fitur ini juga sangatlah ringat sehigga tidak memberikan load page yang berat ketika dalam proses pencarian, hasil akan otomatis muncul seketika. Untuk lebih jelasnya langsung saja kita membuatnya dengan menggunakan Bootstrap dan Javascript.

Baca Juga : Cara Membuat Tabel Sorting Dengan Bootstrap dan Javascript

CSS

Pertama buatlah sebuah folder dengan nama Tabel Search, sekarang untuk mempercantik bentuk tabel buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

h2 {
  margin-bottom: 50px;
}

.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
}

.container table {
  width: 100%;
}

.container td, .container th {
  padding: 10px;
}

.container td:first-child, .container th:first-child {
  padding-left: 20px;
}

.container td:last-child, .container th:last-child {
  padding-right: 20px;
}

.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
}

Simpan dalam folder Tabel Search dengan nama style.css

Javascript

Sekarang untuk sortingnya kita tambahkan javascript, buatlah sebuah file baru di Notepad++ kemudian ketikan script berikut :

(function(document) {
 'use strict';

 var LightTableFilter = (function(Arr) {

  var _input;

  function _onInputEvent(e) {
   _input = e.target;
   var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
   Arr.forEach.call(tables, function(table) {
    Arr.forEach.call(table.tBodies, function(tbody) {
     Arr.forEach.call(tbody.rows, _filter);
    });
   });
  }

  function _filter(row) {
   var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
   row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
  }

  return {
   init: function() {
    var inputs = document.getElementsByClassName('light-table-filter');
    Arr.forEach.call(inputs, function(input) {
     input.oninput = _onInputEvent;
    });
   }
  };
 })(Array.prototype);

 document.addEventListener('readystatechange', function() {
  if (document.readyState === 'complete') {
   LightTableFilter.init();
  }
 });

})(document);

Simpan dalam folder Tabel Search dengan nama script.js

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
<title>Tabel Search Bootstrap dan Javascript</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script type="text/javascript" async="" src="script.js"></script>
 </head>
 <body>
<section class="container">

 <h2>Tabel Search Bootstrap dan Javascript</h2>

 <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filtrer" />

 <table class="order-table">
  <thead>
   <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Price</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Jin Toples</td>
    <td>jin.doe@gmail.com</td>
    <td>0123456789</td>
    <td>99</td>
   </tr>
   <tr>
    <td>Jane Toples</td>
    <td>jane@toples.org</td>
    <td>9876543210</td>
    <td>349</td>
   </tr>
   <tr>
    <td>Rengo Kolas</td>
    <td>begi@batman.com</td>
    <td>6754328901</td>
    <td>199</td>
   </tr>
  </tbody>
 </table>

</section>

 </body>
</html>

Simpan dalam folder Tabel Search dengan nama index.html

Sekarang Tabel Search anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Cara Membuat Tabel Sorting Dengan Bootstrap dan Javascript

UnknownAgustus 26, 2014CSS, HTML, Java Script Tidak ada komentar

Cara Membuat Tabel Sorting Dengan Bootstrap dan Javascript - Tabel sorting adalah sebuah tabel yang ditambahkan sebuah fitur untuk mengurutkan data yang ada dalam setiap baris dari suatu kolom dalam tabel baik secara Ascending maupun descending. Apabila kita memuat list data dalam bentuk baris dalam tabel kemudian data yang di tampilkan tersebut berjumlah cukup banyak maka akan sulit bagi kita untuk melihatnya apalagi jika data tersebut tidak tersusun dan berantakan.

Dengan adanya sort kita dapat lebih mudah mengurutkan data kita hanya perlu mengklik pada bagian header dari setiap kolom maka baris data yang ada akan tersusun otomatis. hal ini dapat terwujudkan dengan adanya tambahan Javascript dan bootstrap untuk tampilannya. Untuk lebih jelasnya langsung saja kita membuatnya.

Baca Juga : Cara Membuat Expanding Search Keren Dengan CSS3 dan Javascript

CSS

Pertama buatlah sebuah folder dengan nama Tabel Sorting , sekarang untuk mempercantik bentuk tabel buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

h2 {
  margin-bottom: 50px;
}

.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
}

.container table {
  width: 100%;
}

.container td, .container th {
  padding: 10px;
}

.container td:first-child, .container th:first-child {
  padding-left: 20px;
}

.container td:last-child, .container th:last-child {
  padding-right: 20px;
}

.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
  cursor: pointer;
}

.container th.desc:after {
  border-top-color: #666;
}

.container th.asc:before {
  border-bottom-color: #666;
}

.container th:after, .container th:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  width: 0;
  height: 0;
}

.container th:after {
  border-top-color: #ddd;
  top: 22px;
}

.container th:before {
  border-bottom-color: #ddd;
  top: 10px;
}

.github {
  margin-top: 50px;
}

Simpan dalam folder Tabel Sorting dengan nama style.css

Javascript

Sekarang untuk sortingnya kita tambahkan javascript, buatlah sebuah file baru di Notepad++ kemudian ketikan script berikut :

(function(document) {
 'use strict';

 var LightTableSorter = (function(Arr) {

  var _th, _cellIndex, _order = '';

  function _text(row) {
   return row.cells.item(_cellIndex).textContent.toLowerCase();
  }

  function _sort(a, b) {
   var va = _text(a), vb = _text(b), n = parseInt(va, 10);
   if (n) {
    va = n;
    vb = parseInt(vb, 10);
   }
   return va > vb ? 1 : va < vb ? -1 : 0;
  }

  function _toggle() {
   var c = _order !== 'asc' ? 'asc' : 'desc';
   _th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
   _order = c;
  }

  function _reset() {
   _th.className = _th.className.replace('asc', '').replace('desc', '');
   _order = '';
  }

  function onClickEvent(e) {
   if (_th && _cellIndex !== e.target.cellIndex) {
    _reset();
   }
   _th = e.target;
   _cellIndex = _th.cellIndex;
   var tbody = _th.offsetParent.getElementsByTagName('tbody')[0],
    rows = tbody.rows;
   if (rows) {
    rows = Arr.sort.call(Arr.slice.call(rows, 0), _sort);
    if (_order === 'asc') {
     Arr.reverse.call(rows);
    }
    _toggle();
    tbody.innerHtml = '';
    Arr.forEach.call(rows, function(row) { tbody.appendChild(row); });
   }
  }

  return {
   init: function() {
    var ths = document.getElementsByTagName('th');
    Arr.forEach.call(ths, function(th) { th.onclick = onClickEvent; });
   }
  };
 })(Array.prototype);

 document.addEventListener('readystatechange', function() {
  if (document.readyState === 'complete') {
   LightTableSorter.init();
  }
 });

})(document);

Simpan dalam folder Tabel Sorting dengan nama script.js

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :


 
Tabel Sorting CSS dan Javascript



 
 


 
Tabel Sorting CSS dan Javascript






























      Name     Email     Phone     Price    
      Jin Toples     jin.doe@gmail.com     0123456789     99    
    Jane Toples     jane@toples.org     9876543210     349    
    Rengo Kolas     begi@batman.com     6754328901     199

Name	Email	Phone	Price
Jin Toples	jin.doe@gmail.com	0123456789	99
Jane Toples	jane@toples.org	9876543210	349
Rengo Kolas	begi@batman.com	6754328901	199

Simpan dalam folder Tabel Sorting dengan nama index.html

Sekarang Tabel Sorting dengan Bootstrap dan Javascript anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Cara Membuat Expanding Search Keren Dengan CSS3 dan Javascript

UnknownMei 24, 2014CSS, HTML, Java Script Tidak ada komentar

Expanding Search

Cara Membuat Expanding Search Keren Dengan CSS3 dan Javascript - Expanding search adalah inputan search atau pencarian yang di berikan efek expand ( memanjang atau membesar ) ketika user melakukan suatu aksi pemicu tertentu. expanding search sangat cocok digunakan untuk meminimalkan space pada website karna ketika ia tidak digunakan ia akan mengecil, dan juga dengan teknik ini kita akan lebih mudah dalam merespoinsive input search tersebut hal ini dapat di buat dengan CSS3 dan Javascript. untuk lebih jelansya langsung saja kita membuatnya.

CSS

Pertama buatlah sebuah folder dengan nama Expanding Search kemudian bualah sebuah folder lagi dengan nama css , sekarang untuk mempercantik bentuk inputan serta tombol searchnya buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

/* Search icon by IcoMoon, made with http://icomoon.io/app/ */
@font-face {
 font-family: 'icomoon';
 src:url('../fonts/icomoon/icomoon.eot');
 src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/icomoon/icomoon.woff') format('woff'),
  url('../fonts/icomoon/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

.sb-search {
 position: relative;
 margin-top: 10px;
 width: 0%;
 min-width: 60px;
 height: 60px;
 float: right;
 overflow: hidden;
 -webkit-transition: width 0.3s;
 -moz-transition: width 0.3s;
 transition: width 0.3s;
 -webkit-backface-visibility: hidden;
}

.sb-search-input {
 position: absolute;
 top: 0;
 right: 0;
 border: none;
 outline: none;
 background: #fff;
 width: 100%;
 height: 60px;
 margin: 0;
 z-index: 10;
 padding: 20px 65px 20px 20px;
 font-family: inherit;
 font-size: 20px;
 color: #2c3e50;
}

.sb-search-input::-webkit-input-placeholder {
 color: #efb480;
}

.sb-search-input:-moz-placeholder {
 color: #efb480;
}

.sb-search-input::-moz-placeholder {
 color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
 color: #efb480;
}

.sb-icon-search,
.sb-search-submit  {
 width: 60px;
 height: 60px;
 display: block;
 position: absolute;
 right: 0;
 top: 0;
 padding: 0;
 margin: 0;
 line-height: 60px;
 text-align: center;
 cursor: pointer;
}

.sb-search-submit {
 background: #fff; /* IE needs this */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;
 color: transparent;
 border: none;
 outline: none;
 z-index: -1;
}

.sb-icon-search {
 color: #fff;
 background: #e67e22;
 z-index: 90;
 font-size: 22px;
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 -webkit-font-smoothing: antialiased;
}

.sb-icon-search:before {
 content: "\e000";
}

/* Open state */
.sb-search.sb-search-open,
.no-js .sb-search {
 width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
 background: #da6d0d;
 color: #fff;
 z-index: 11;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
 z-index: 90;
}

Simpan dalam folder css dengan nama component.css.

Buat sebuah file baru lagi dengan notepad++ ketikan script berikut :

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
 font-family: 'codropsicons';
 src:url('../fonts/codropsicons/codropsicons.eot');
 src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
  url('../fonts/codropsicons/codropsicons.woff') format('woff'),
  url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
  url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
 font-weight: normal;
 font-style: normal;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
 font-family: 'Lato', Calibri, Arial, sans-serif;
 color: #eaeaea;
 background: #2c3e50;
}

a {
 color: #b4c7da;
 text-decoration: none;
}

a:hover,
a:active {
 color: #fff;
}

/* Header Style */
.main,
.container > header {
 margin: 0 auto;
 padding: 2em;
}

.container > header {
 text-align: center;
 background: rgba(0,0,0,0.01);
}

.container > header h1 {
 font-size: 2.625em;
 line-height: 1.3;
 margin: 0;
 font-weight: 300;
}

.container > header span {
 display: block;
 font-size: 60%;
 color: #e67e22;
 padding: 0 0 0.6em 0.1em;
}

/* Main Content */
.main {
 max-width: 69em;
}

.column {
 float: left;
 width: 50%;
 padding: 0 2em;
 min-height: 300px;
 position: relative;
}

.column:nth-child(2) {
 box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}

.column p {
 font-weight: 300;
 font-size: 2em;
 padding: 0;
 margin: 0;
 text-align: right;
 line-height: 1.5;
}

.column a {
 border: 3px solid #b4c7da;
 padding: 0 15px;
 display: inline-block;
 margin: 20px 0;
}

.column a:hover {
 border-color: #fff;
}

/* To Navigation Style */
.codrops-top {
 background: #566472;
 background: rgba(255, 255, 255, 0.2);
 text-transform: uppercase;
 width: 100%;
 font-size: 0.69em;
 line-height: 2.2;
}

.codrops-top a {
 padding: 0 1em;
 letter-spacing: 0.1em;
 color: #fff;
 display: inline-block;
}

.codrops-top a:hover {
 background: rgba(255,255,255,0.8);
 color: #2c3e50;
}

.codrops-top span.right {
 float: right;
}

.codrops-top span.right a {
 float: left;
 display: block;
}

.codrops-icon:before {
 font-family: 'codropsicons';
 margin: 0 4px;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
 content: "\e001";
}

.codrops-icon-prev:before {
 content: "\e004";
}

@media screen and (max-width: 46.0625em) {
 .column {
  width: 100%;
  min-width: auto;
  min-height: auto;
  padding: 1em; 
 }

 .column p {
  text-align: left;
  font-size: 1.5em;
 }

 .column:nth-child(2) {
  box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
 }
}

@media screen and (max-width: 25em) {

 .codrops-icon span {
  display: none;
 }

}

Simpan dalam folder css dengan nama default.css

Javascript

Buat sebuah folder baru dalam folder Expand Search dengan nama js , sekarang untuk efek expand pada inputan searchnya anda dapat mengunduh javasriptnya disini : Download simpan dalam folder js tersebut.

Font

Buat sebuah folder baru dalam folder Expand Search dengan nama fonts , sekarang untuk font facenya anda dapat mengunduh fontnya disini : Download simpan dalam folder font tersebut

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
  <title>Expanding Search Bar</title>
  <link rel="stylesheet" type="text/css" href="css/default.css" />
  <link rel="stylesheet" type="text/css" href="css/component.css" />
  <script src="js/modernizr.custom.js"></script>
 </head>
 <body>
  <div class="container">
   <div class="main clearfix">
    <!-- Optional columns for small components -->
    <div class="column">
     <div id="sb-search" class="sb-search">
      <form>
       <input class="sb-search-input" placeholder="Search..." type="text" value="" name="search" id="search">
       <input class="sb-search-submit" type="submit" value="">
       <span class="sb-icon-search"></span>
      </form>
     </div>
    </div>
   </div>
  </div><!-- /container -->
  <script src="js/classie.js"></script>
  <script src="js/uisearch.js"></script>
  <script>
   new UISearch( document.getElementById( 'sb-search' ) );
  </script>
 </body>
</html>

Simpan dalam folder Expanding Search dengan nama index.html.

Sekarang Expanding Search anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWLOAD

Cara Membuat Banner Animasi Dengan CSS3 dan HTML5

UnknownMei 17, 2014CSS, HTML Tidak ada komentar

Cara Membuat Banner Animasi Dengan CSS3 dan HTML5 - Banner animasi adalah sekumpulan teks atau gambar bergerk yang digunakan sebagai media promosi atau iklan. Banner sering kita jumpai pada kehidupan sehari - hari baik di dunia nyata ataupun di dunia maya. Pada dasarnya ada terdapat dua jenis banner yaitu banner statis dan dinamis atau animasi bergerak.

Pada umumnya sebelum adanya CSS3 dan HTML5 banner yang berbentuk animasi dibuat dengan menggunakan flash, akan tetapi untuk menjalankan flash kita memerlukan plugin flash yang terpasang pada browser kita. Dengan adanya CSS3 dan HTML5, sekarang kita bisa membuat banner tanpa harus menggunakan flash jadi kita juga tidak perlu memasang pluginnya pada web browser kita. Banner ini juga berjalan lebih ringan dibandingkan dengan menggunakan flash, pada kali ini kita akan membuat banner dengan CSS3 dan HTML5, untuk lebih jelasnya langsung saja kita meluncur ke programmya.

CSS

Pertama buatlah sebuah folder dengan nama Banner CSS3 kemudian buatlah lagi folder di dalamnya dengan nama CSS , Sekarang style tampilan demonya buatlah sebuah file baru dengan notepad++ kemudian ketikan script berikut :

/* CSS reset */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 margin:0;
 padding:0;
}
fieldset,img { 
 border:0;
}
ol,ul {
 list-style:none;
}
h1,h2,h3,h4,h5,h6 {
 font-size:100%;
 font-weight:normal;
}
/* General Demo Style */
body{
 font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 background: #fbf8f4 url(../images/wood_pattern.jpg) repeat top left;
 font-weight: 400;
 font-size: 15px;
 color: #936a46;
 overflow-y: scroll;
 overflow-x: hidden;
}
.ie7 body{
 overflow:hidden;
}
a{
 color: #333;
 text-decoration: none;
}
.container{
 position: relative;
 text-align: center;
}
.clr{
 clear: both;
}
.container > header{
 padding: 20px 30px 10px 30px;
 margin: 0px 20px 10px 20px;
 position: relative;
 display: block;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
 font-family: 'Alfa Slab One', 'Arial Narrow', Arial, sans-serif;
 font-size: 35px;
 line-height: 35px;
 position: relative;
 font-weight: 400;
 color: #333;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    padding: 0px 0px 5px 0px;
}
.container > header h1 span{
 color: #008dc1;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2, p.info{
 font-family: 'Boogaloo', 'Arial Narrow', Arial, sans-serif;
 font-size: 22px;
 font-style: italic;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.container > header h2 a{
 color: #936a46;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2 a:hover{
 color: #614429;
}
/* Header Style */
.codrops-top{
 font-family:'Arial Narrow', Arial, sans-serif;
 line-height: 24px;
 font-size: 11px;
 width: 100%;
 background: #000;
 opacity: 0.9;
 text-transform: uppercase;
 z-index: 9999;
 position: relative;
 -moz-box-shadow: 1px 0px 2px #000;
 -webkit-box-shadow: 1px 0px 2px #000;
 box-shadow: 1px 0px 2px #000;
}
.codrops-top a{
 padding: 0px 10px;
 letter-spacing: 1px;
 color: #ddd;
 display: block;
 float: left;
}
.codrops-top a:hover{
 color: #fff;
}
.codrops-top span.right{
 float: right;
}
.codrops-top span.right a{
 float: none;
 display: inline;
}

p.codrops-demos{
 text-align:center;
 display: block;
 padding: 14px;
 font-family: 'Alfa Slab One', 'Arial Narrow', Arial, sans-serif;
}
p.codrops-demos a,
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
    display: inline-block;
 border: 1px solid #ddd;
 border-color: #ddd #aaa #aaa #ddd;
 padding: 4px 10px 3px;
 font-size: 15px;
 line-height: 18px;
 margin: 0px 3px;
 -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
 -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
 box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
 color: #29abe1;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #fff;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
 background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
 background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
 background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
 background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
 background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}
p.codrops-demos a:hover{
 background: #fff;
 color: #29abe1;
}
p.codrops-demos a:active{
 background: #e5e5e5;
 background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
 background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
 -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9);
 box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
}
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
 color: #fff;
 background: #29abe1;
 border-color: #29abe1;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
/* Media Queries */
@media screen and (max-width: 767px) {
 .container > header{
  text-align: center;
 }
 p.codrops-demos {
  position: relative;
  top: auto;
  left: auto;
 }
}

Simpan dengan nama demo.css letakan dalam folder CSS tadi, kemudian buatlah sebuah file baru untuk style banner serta animasi bannernya ketikan script berikut di notepad++ :

/* Begin Ad 1 */

#ad-1 {
 width: 720px;
 height: 300px;
 margin: 40px auto 0;
 background-image: url(../images/ad-1/background.png);
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
 position: relative;
 box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
#ad-1 #content {
 width: 325px;
 float: right;
 margin: 40px;
 text-align: center;
 z-index: 4;
 position: relative;
 overflow: visible;
}
 #ad-1 #content h2 {
  font-family: 'Alfa Slab One', cursive;
  color: #137dd5;
  font-size: 50px;
  line-height: 50px;
  text-shadow: 0px 0px 4px #fff;
  -webkit-animation: h2-animation 7s 1 ease-in-out;
  -moz-animation: h2-animation 7s 1 ease-in-out;
  -o-animation: h2-animation 7s 1 ease-in-out;
  -ms-animation: h2-animation 7s 1 ease-in-out;
  animation: h2-animation 7s 1 ease-in-out;
 }
 #ad-1 #content h3 {
  font-family: 'Boogaloo', cursive;
  color: #202224;
  font-size: 31px;
  line-height: 31px;
  text-shadow: 0px 0px 4px #fff;
  -webkit-animation: h3-animation 10s 1 ease-in-out;
  -moz-animation: h3-animation 10s 1 ease-in-out;
  -o-animation: h3-animation 10s 1 ease-in-out;
  -ms-animation: h3-animation 10s 1 ease-in-out;
  animation: h3-animation 10s 1 ease-in-out;
 }
 #ad-1 #content form {
  margin: 30px 0 0 6px;
  position: relative;
  -webkit-animation: form-animation 12s 1 ease-in-out;
  -moz-animation: form-animation 12s 1 ease-in-out;
  -o-animation: form-animation 12s 1 ease-in-out;
  -ms-animation: form-animation 12s 1 ease-in-out;
  animation: form-animation 12s 1 ease-in-out;
 }
 #ad-1 #content #email {
  width: 158px;
  height: 48px;
  float: left;
  padding: 0 20px;
  font-size: 16px;
  font-family: 'Lucida Grande', sans-serif;
  color: #fff;
  text-shadow: 1px 1px 0px #a2917d;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border:1px solid #a2917d;
  outline: none;
  box-shadow: -1px -1px 1px #fff;
  background-color: #c7b29b;
  background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -o-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
 }
 #ad-1 #content #email:focus {
  background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -o-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  
 }
 #ad-1 #content #submit {
  height: 50px;
  float: left;
  padding: 0 20px;
  font-size: 20px;
  font-family: 'Boogaloo', cursive;
  color: #137dd5;
  text-shadow: 1px 1px 0px #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border:1px solid #bcc0c4;
  border-left: none;
  background-color: #fff;
  background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -o-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  cursor: pointer;
 }
 #ad-1 #content #submit:hover {
  background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
 }
#ad-1 ul#water{
}
 #ad-1 li#water-back {
  width: 1200px;
  height: 84px;
  background-image: url(../images/ad-1/water-back.png);
  background-repeat: repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 10px;
  left: -20px;
  -webkit-animation: water-back-animation 3s infinite ease-in-out;
  -moz-animation: water-back-animation 3s infinite ease-in-out;
  -o-animation: water-back-animation 3s infinite ease-in-out;
  -ms-animation: water-back-animation 3s infinite ease-in-out;
  animation: water-back-animation 3s infinite ease-in-out;
 }
 #ad-1 li#water-front {
  width: 1200px;
  height: 158px;
  background-image: url(../images/ad-1/water-front.png);
  background-repeat: repeat-x;
  z-index: 3;
  position: absolute;
  bottom: -70px;
  left:-30px;
  -webkit-animation: water-front-animation 2s infinite ease-in-out;
  -moz-animation: water-front-animation 2s infinite ease-in-out;
  -o-animation: water-front-animation 2s infinite ease-in-out;
  -ms-animation: water-front-animation 2s infinite ease-in-out;
  animation: water-front-animation 2s infinite ease-in-out;
 }
#ad-1 ul#boat {
 width: 249px;
 height: 215px;
 z-index: 2;
 position: absolute;
 bottom: 25px;
 left: 20px;
 overflow: visible;
 -webkit-animation: boat-in-animation 3s 1 ease-out;
 -moz-animation: boat-in-animation 3s 1 ease-out;
 -o-animation: boat-in-animation 3s 1 ease-out;
 -ms-animation: boat-in-animation 3s 1 ease-out;
 animation: boat-in-animation 3s 1 ease-out;
}
 #ad-1 ul#boat li {
  width: 249px;
  height: 215px;
  background-image: url(../images/ad-1/boat.png);
  position: absolute;
  bottom: 0px;
  left: 0px;
  overflow: visible;
  -webkit-animation: boat-animation 2s infinite ease-in-out;
  -moz-animation: boat-animation 2s infinite ease-in-out;
  -o-animation: boat-animation 2s infinite ease-in-out;
  -ms-animation: boat-animation 2s infinite ease-in-out;
  animation: boat-animation 2s infinite ease-in-out;
 }
  #ad-1 #question-mark {
   width: 24px;
   height: 50px;
   background-image: url(../images/ad-1/question-mark.png);
   position: absolute;
   right: 34px;
   top: -30px;
   -webkit-animation: question-mark-animation 4s 1 ease-in-out;
   -moz-animation: question-mark-animation 4s 1 ease-in-out;
   -o-animation: question-mark-animation 4s 1 ease-in-out;
   -ms-animation: question-mark-animation 4s 1 ease-in-out;
   animation: question-mark-animation 4s 1 ease-in-out;
  }
#ad-1 #clouds {
 position: absolute;
 top: 0px;
 z-index: 0;
}
#ad-1 #cloud-group-1 {
 width:720px;
 position: absolute;
 left:0px;
 -webkit-animation: cloud-group-1-animation 30s infinite linear;
 -moz-animation: cloud-group-1-animation 30s infinite linear;
 -o-animation: cloud-group-1-animation 30s infinite linear;
 -ms-animation: cloud-group-1-animation 30s infinite linear;
 animation: cloud-group-1-animation 30s infinite linear;
}
#ad-1 #cloud-group-2 {
 width: 720px;
 position: absolute;
 left: 720px;
 -webkit-animation: cloud-group-2-animation 30s infinite linear;
 -moz-animation: cloud-group-2-animation 30s infinite linear;
 -o-animation: cloud-group-2-animation 30s infinite linear;
 -ms-animation: cloud-group-2-animation 30s infinite linear;
 animation: cloud-group-2-animation 30s infinite linear;
}
 #ad-1 .cloud-1 {
  width: 172px;
  height: 121px;
  background-image: url(../images/ad-1/cloud-1.png);
  position: absolute;
  top: 10px;
  left: 40px;
 }
 #ad-1 .cloud-2 {
  width: 121px;
  height: 75px;
  background-image: url(../images/ad-1/cloud-2.png);
  position: absolute;
  top: -25px;
  left: 300px;
 }
 #ad-1 .cloud-3 {
  width: 132px;
  height: 105px;
  background-image: url(../images/ad-1/cloud-3.png);
  position: absolute;
  top: -5px;
  left: 530px;
 }
 
/* WebKit Animations */

@-webkit-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-webkit-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-webkit-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-webkit-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-webkit-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-webkit-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-webkit-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-webkit-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-webkit-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-webkit-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* FireFox Animations */

@-moz-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-moz-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-moz-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-moz-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-moz-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-moz-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-moz-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-moz-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-moz-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-moz-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* Opera Animations */

@-o-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-o-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-o-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-o-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-o-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-o-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-o-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-o-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-o-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-o-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* IE Animations */

@-ms-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-ms-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-ms-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-ms-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-ms-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-ms-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-ms-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-ms-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-ms-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-ms-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* Animations */

@keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* End Ad 1 */

/* Begin Ad 2 */

#ad-2 {
 width: 160px;
 height: 600px;
 margin: 40px auto 40px;
 background-image: url(../images/ad-2/background.png);
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
 position: relative;
 box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
 text-align: center;
}
#ad-2 h2 {
 font-family: 'Alfa Slab One', cursive;
 color: #137dd5;
 font-size: 50px;
 line-height: 50px;
 text-shadow: 0px 0px 4px #fff;
 margin-top: 110px;
 -webkit-animation: h2-animation-2 10s 1 ease-in-out;
 -moz-animation: h2-animation-2 10s 1 ease-in-out;
 -o-animation: h2-animation-2 5s 1 ease-in-out;
 -ms-animation: h2-animation-2 5s 1 ease-in-out;
 animation: h2-animation-2 5s 1 ease-in-out;
}
#ad-2 ul#boat {
 width: 96px;
 height: 84px;
 overflow: visible;
 z-index: 2;
 position: absolute;
 top: 326px;
 left: 10px;
 -webkit-animation: boat-in-animation-2 15s 1 ease-in-out;
 -moz-animation: boat-in-animation-2 15s 1 ease-in-out;
 -o-animation: boat-in-animation-2 15s 1 ease-in-out;
 -ms-animation: boat-in-animation-2 15s 1 ease-in-out;
 animation: boat-in-animation-2 15s 1 ease-in-out;
}
 #ad-2 ul#boat li {
  width: 96px;
  height: 84px;
  z-index: 2;
  position: relative;
  top: 0px;
  left: 0px;
  background-image: url(../images/ad-2/boat.png);
  -webkit-animation: boat-animation-2 2.5s infinite ease-out;
  -moz-animation: boat-animation-2 2.5s infinite ease-out;
  -o-animation: boat-animation-2 2.5s infinite ease-out;
  -ms-animation: boat-in-animation-2 2.5s infinite ease-out;
  animation: boat-animation-2 2.5s infinite ease-out;
 }
#ad-2 #water {
 position: absolute;
 top: 382px;
 -webkit-animation: water-in-animation-2 2s 1 ease-out;
 -moz-animation: water-in-animation-2 2s 1 ease-out;
 -o-animation: water-in-animation-2 2s 1 ease-out;
 -ms-animation: water-in-animation-2 2s 1 ease-out;
 animation: water-in-animation-2 2s 1 ease-out;
}
 #ad-2 #water-back {
  width: 200px;
  height: 75px;
  background-image: url(../images/ad-2/water-back.png);
  background-repeat: repeat-x;
  z-index: 1;
  position: absolute;
  top: 0px;
  left: -22px;
  -webkit-animation: water-back-animation-2 3s infinite ease-in-out;
  -moz-animation: water-back-animation-2 3s infinite ease-in-out;
  -o-animation: water-back-animation-2 3s infinite ease-in-out;
  -ms-animation: water-back-animation-2 3s infinite ease-in-out;
  animation: water-back-animation-2 3s infinite ease-in-out;
 }
 #ad-2 #water-front {
  width: 200px;
  height: 368px;
  background-image: url(../images/ad-2/water-front.png);
  background-repeat: repeat-x;
  z-index: 3;
  position: absolute;
  top: 2px;
  left:-30px;
  -webkit-animation: water-front-animation-2 2s infinite ease-in-out;
  -moz-animation: water-front-animation-2 2s infinite ease-in-out;
  -o-animation: water-front-animation-2 2s infinite ease-in-out;
  -ms-animation: water-front-animation-2 2s infinite ease-in-out;
  animation: water-front-animation-2 2s infinite ease-in-out;
 }
#ad-2 #content {
 width: 100%;
 position: absolute;
 bottom: 0px;
 z-index: 4;
 -webkit-animation: content-in-animation-2 15s 1 ease-in-out;
 -moz-animation: content-in-animation-2 15s 1 ease-in-out;
 -o-animation: content-in-animation-2 15s 1 ease-in-out;
 -ms-animation: content-in-animation-2 15s 1 ease-in-out;
 animation: content-in-animation-2 15s 1 ease-in-out;
}
 #ad-2 #content h3 {
  color: #fff;
  font-family: 'Boogaloo', cursive;
  font-size: 30px;
  line-height: 32px;
  text-shadow: 0px 0px 4px #137dd5;
 }
 #ad-2 #content a:link, #ad-2 #content a:visited {
  display: inline-block;
  height: 20px;
  padding: 15px;
  font-family: 'Boogaloo', cursive;
  font-size: 20px;
  line-height: 20px;
  color: #137dd5;
  text-shadow: 1px 1px 0px #fff;
  background-color: #fff;
  border-radius: 5px;
  margin: 20px 0px;
  box-shadow: 2px 2px 0px #137dd5;
  border: 1px solid #fff;
  background-image: linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -o-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
 }
 #ad-2 #content a:hover, #ad-2 #content a:active {
  background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
 }

/* WebKit Animations */

@-webkit-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-webkit-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-webkit-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-webkit-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-webkit-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-webkit-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-webkit-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* FireFox Animations */

@-moz-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-moz-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-moz-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-moz-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-moz-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-moz-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-moz-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* Opera Animations */

@-o-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-o-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-o-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-o-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-o-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-o-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-o-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* IE Animations */

@-ms-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-ms-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-ms-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-ms-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-ms-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-ms-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-ms-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* Animations */

@keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* End Ad 2 */

Kemudian simpan dalam folder CSS dengan nama style.css.

Image

Sekarang untuk gambar banner serta backgroundnya anda dapat mengunduhnya disini : DOWNLOAD
Letakan foder image tersebut dalam folder Banner CSS3

HTML

Sekarang untuk markupnya kita akan membuat dua buah jenis banner yaitu banner Vertikal dan Banner Horisontal, pertama untuk banner horisontal buatlah sebuah file baru di notepad++ kemudian ketikan script berikut :

Horisontal

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Web Banners Dengan CSS3</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
   <header>
    <h1>Animated Web Banners Dengan CSS3</h1>
    <h2>Membuat banner tanpa flash hanya dengan CSS3.</h2>
    <p class="codrops-demos">
     <a class="current-demo"  href="index.html">Horisontal</a>
     <a href="index2.html">Vertikal</a>
    </p>
   </header>
            <section class="wrapper">
    <div id="ad-1">
     <div id="content">
      <h2>Kesasar di laut?</h2>
      <h3>Tenang - Konsultasikan dengan kami.</h3>
      <form>
       <input type="text" id="email" value="Email address..." />
       <input type="submit" id="submit" value="Submit" />
      </form>
     </div>
     <div id="clouds">
      <ul id="cloud-group-1">
       <li class="cloud-1"></li>
       <li class="cloud-2"></li>
       <li class="cloud-3"></li>
      </ul>
      <ul id="cloud-group-2">
       <li class="cloud-1"></li>
       <li class="cloud-2"></li>
       <li class="cloud-3"></li>
      </ul>
     </div>
     <ul id="boat">
      <li>
       <div id="question-mark"></div>
      </li>
     </ul>
     <ul id="water">
      <li id="water-back"></li>
      <li id="water-front"></li>
     </ul>
    </div>
            </section> 
        </div>
    </body>
</html>

Simpan dalam folder Banner CSS3 dengan nama index.html

Vertikal

Sekarang untuk yang vertikal buat sebuah file baru dan ketikan script berikut :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Web Banners Dengan CSS3</title>
  <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
   <header>
    <h1>Animated Web Banners Dengan CSS3</h1>
    <h2>Membuat banner tanpa flash hanya dengan CSS3.</h2>
    <p class="codrops-demos">
     <a href="index.html">Horisontal</a>
     <a class="current-demo" href="index2.html">Vertikal</a>
    </p>
   </header>
            <section class="wrapper">
    <div id="ad-2">
     <h2>Ilang<br />di<br />laut?</h2>
     <ul id="boat">
      <li>
       <div id="question-mark"></div>
      </li>
     </ul>
     <ul id="water">
      <li id="water-back"></li>
      <li id="water-front"></li>
     </ul>
     <div id="content">
      <h3>Tenang.<br />Konsultasilah dengan kami.</h3>
      <a href="#">Sekarang !</a>
     </div>
    </div>
            </section> 
        </div>
    </body>
</html>

Sekarang Banner dengan CSS3 dan HTML5 anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWLOAD

Netbeans

Controller

View

Instalasi

Konfigurasi

1. Config

2. Routes

3. Autoload

4. Database

CSS

HTML

CSS

Javascript

HTML

CSS

HTML

Javascript

CSS

Javascript

HTML

CSS

Javascript

HTML

Tabel Sorting CSS dan Javascript

CSS

Javascript

Font

HTML

CSS

Image

HTML

Horisontal

Vertikal

Cari Blog Ini

Label

Arsip Blog

Recent Posts

Unordered List

Label Cloud

Sample Text

Pages

Theme Support

Text Widget