Category: html


Membuat Popup Image Gallery Dengan Jquery dan HTML5

By Irvan Galuh,

 
Image Popup atau Photo Popup yaitu gambar gambar yang akan menampilkan ukuran yang lebih besar jika salah satu gambar thumbnail nya di klik.

 

Beberapa hari yang lalu ada seorang follower di twitter yang menanyakan tentang cara membuat gambar popup untuk gallery website.

 

Untuk itu kita akan mencoba membuatkan nya, lengkap dengan bahan dan cara singkatnya 🙂


Ingredients

 

Bahan-bahan yang kita perlukan adalah :


*Kayak mau masak 🙂


1. White Carbonfiber Patter dari subtlepattern
2. Photo dari Bartek Elsner
3. Jquery
4. Jquery Lightbox


Code HTML (index.html)

 

Berikut ini kode HTML untuk bagian [head] [/head]



<link rel=”stylesheet” type=”text/css” href=”css/twd-base.css” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css” media=”screen” />

<script type=”text/javascript”>
$(function() {
$(‘#gallery a’).lightBox();
});
</script>

Bagian ini digunakan mengaktifkan Jquery Lightbox dengan target ID #gallery

<script type=”text/javascript”>
$(function() {
$(‘#gallery a’).lightBox();
});
</script>

 

Code untuk BODY [body] [/body]


<section>

<div id=”gallery”>
<ul>
<li>
<a href=”photo/1.jpg” title=”Satu”>
<img src=”photo/thumb/1.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/2.jpg” title=”Dua”>
<img src=”photo/thumb/2.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/3.jpg” title=”Tiga”>
<img src=”photo/thumb/3.jpg” alt=”tutorial web design”/>
</a>
</li>
<li>
<a href=”photo/4.jpg” title=”Empat”>
<img src=”photo/thumb/4.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/5.jpg” title=”Lima”>
<img src=”photo/thumb/5.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/6.jpg” title=”Lima”>
<img src=”photo/thumb/6.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/7.jpg” title=”Lima”>
<img src=”photo/thumb/7.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/8.jpg” title=”Lima”>
<img src=”photo/thumb/8.jpg” alt=”tutorial web design” />
</a>
</li>
</ul>
</div>

</section>


Code CSS (css/style.css)

 

Untuk mempercantik tampilan awal gunakan code css berikut ini, sedangkan untuk popup lightbox tidak perlu dirubah, kecuali jika diinginkan dan diperlukan.


body{background:url(‘../images/white_carbonfiber.png’);}

section{width:672px;margin:20px auto;background:rgba(255,255,255,.3)}
#gallery{padding:10px}
#gallery ul{
list-style-type:none;
}
#gallery ul li{
display:inline-block;
padding:5px;
}
#gallery ul li img:hover{
opacity:0.8;
}.



Oke sekian tutorial kali ini, semoga bermanfaat 🙂




SUMBER = http://www.tutorial-webdesign.com/membuat-popup-photo-jquery/

  Category: html, jquery, Tips, Tutorial
  Comments: Comments Off on Membuat Popup Image Gallery Dengan Jquery dan HTML5

Membuat Animasi Efek Mengetik Teks Dengan CSS

By Irvan Galuh,

Animasi mengetik teks biasanya dibuat dengan bantuan Jquery, namun pada artikel kali ini kita akan mencoba membuatnya hanya dengan CSS.Animasi ini tentunya bisa digunakan jika ingin membuat semacam presentasi di website, atau untuk sekedar mempercantik halaman website.
Ilustrasi Mengetik, credit photo by Janelene Juanillo
 
Animasi ini juga bisanya sering kita lihat di website-website yang diretas, biasanya siperetas meninggalkan jejak dengan pesan yang seolah-olah sedang diketik.

Bagaimana Membuatnya?
Untuk membuatnya tidak terlalu sulit, cukup beberapa baris kode css maka kita bisa mendapatkan efek ketikan teks tersebut pada website kita.Kode HTML

Berikut kode HTML yang digunakan


 
<p class=”wadah-mengetik”>Welcome to Tutorial Web Design Indonesia | <a href=”http://www.tutorial-webdesign.com”>http://www.tutorial-webdesign.com</a></p>
 
Bisa dilihat disitu kita membuat sebuah class dengan nama .wadah-mengetik.

Kode CSS

Untuk kode CSS nya kita menggunakan CSS Animation yang merupakan fitur dari CSS3

.wadah-mengetik
{
font-size: 22px;
width: 740px;
white-space:nowrap;
overflow:hidden;
-webkit-animation: ketik 5s steps(50, end);
animation: ketik 5s steps(50, end);
}
@keyframes ketik{
from { width: 0; }
}@-webkit-keyframes ketik{
from { width: 0; }
}

Bisa dilihat pada kode css diatas kita membuat animasi dengan nama ketik dan mengatur animasi nya pada keyframe.Selanjutnya tambahkan overflow:hidden sehingga ketika animasi mengubah ukuran paragraf ke 0 kita tidak akan dapat melihat teks. Akhirnya kita dapat menambahkan animasi ketik dengan fungsi steps()

Animasi akan meningkatkan ukuran paragraf dari 0 sampai 740px, dalam 50 frame sehingga menciptakan efek bahwa teks yang sedang diketik.


 
 
Sekian tutorial kali ini, semoga menambah wawasan dan meningkatkan skill kita semua.
 
 
 

  Category: CSS, html, Tips, Tutorial
  Comments: Comments Off on Membuat Animasi Efek Mengetik Teks Dengan CSS

Membuat Frame Fullscreen Dengan HTML

By Irvan Galuh,

Membuat frame yang full screen 100% dengan html akan adalah topik kita kali ini, membuat frame yang fullscreen tidak terlalu gampang, tidak cukup sekedar memberikan height 100% dan width 100%.


Image is under Creative Common by cpradi
 
Berawal dari sebuah pertanyaan di sebuah group di facebook, dimana seorang bertanya bagaimana membuat Iframe yang fullscreen, maka dengan itu kami berniat membuat sebuah tulisan yang mungkin bisa menjawab pertanyaan tersebut, tulisan ini tidak akan panjang karena membuat nya juga tidak terlalu sulit, hanya perlu sedikit tambahan kode saja.
 
 
Lalu apa gunanya membuat frame? ada banyak alasan, salah satu alasan biasa digunakan iframe yaitu saat sebuah halaman dipindahkan ke domain baru, tapi user masih mengakses halaman yang lama (sebenarnya bisa di redirect).Alasan lain yaitu ketika sebuah domain belum siap launching website nya, dan demo website masih diletakan di tempat yang berbeda, maka kadang untuk menampilkannya secara online kepada client, maka developer menggunakan frame. Dan masih banyak alasan lainnya.

Lalu bagimana cara membuatnya?

 
Pertama siapkan sebuah file HTML yang kita beri nama iframe.html.Disini kita akan mencoba memuat halaman depan tutorial-webdesign.com dengan file tersebut, berikut ini adalah potongan kode yang bisa digunakan.


 
Bisa dilihat, kalau anda klik menu-menu yang ada di demo tersebut, url nya tidak berubah, itu menandakan bahwa halaman tersebut dimuat dalam sebuah frame.
 
Index.html
Letakan script berikut dibawah tag /head.
 
frameset rows=”*,1″ framespacing=”0″ border=”0″ frameborder=”NO”>
<frame src=”http://tutorial-webdesign.com/” name=”test” scrolling=”auto” noresize>
</frameset>
<noframes>
<body>
</body>
</noframes>


 
Kenapa diletakan setelah tag /head dan tidak didalam tag body dan /body ? Karena begitulah cara penggunaan frame.
 
Sekian tutorial singkat ini, salam web development indonesia
 
 
 

SUMBER = http://www.tutorial-webdesign.com/membuat-frame-fullscreen-dengan-html/

Menambahkan Custom CSS Style Pada Editor WordPress

By Irvan Galuh,

Banyak hal yang istimewa dari wordpress, mulai dari ringannya database “bila dibandingkan dengan senyumanmu membuat akuuu… jatuh bangun…” halah. Mulai dari ringannya database bila dibandingkan dengan CMS lain, kemudian user friendly, search engine friendly dan banyak lagi yang lain, alasan-alasan inilah yang membuat lembaga-lembaga korporat menjadikan wordpress sebagai base engine websitenya. Kuat, begitulah wordpress.

Begitu powerfullnya wordpress hingga semuanya bisa di tangani oleh plugin apabila terdapat fitur yang kurang. Pernyataan ini bukan berarti penulis mendewakan wordpress, tapi berawal dari kekaguman akan engine wordpresslah yang membuat penulis mengatakan seperti ini.

Oke, kita melenceng dari topik bahasan intinya. Seorang web developer biasanya menyediakan style style css tertentu yang membuat entah itu post atau page memiliki tampilan yang di inginkan. WordPress menyediakan editor yang ciamik, namun tetap saja kurang karena untuk menambahkan style tertentu si pembuat artikel yang entah dia seorang yang advanced atau pemula terlebih dahulu masuk ke dalam mode HTML kemudian menambahkan style css ke dalam tag html yang di inginkan, untuk seorang advanced tidak masalah, namun bagaimana dengan seorang pemula yang tidak mengerti CSS dan HTML sama sekali? Baginya menambahkan style ke dalam tag dengan cara mengetik dalam mode HTML itu wasting time saja. Betul?

Solusinya adalah plugin Insert Link Class. Anda dapat mendownloadnya di sini http://downloads.wordpress.org/plugin/insert-link-class.zip, cukup download terlebih dahulu kemudian lakukan instalasi plugin tersebut.

Caranya adalah masuk ke dalam plugin | Install Plugins | upload setelah upload kemudian pilih activate saja.

Setelah plugin tersebut aktif siapkan terlebih dahulu classnya dengan cara menyisipkan class css style ke dalam file style.css themes yang sedang Aktif. Misalnya seperti ini themes yang Anda gunakan saat ini adlaah Twenty Ten, cari file style.css di dalam? direktori wordpress Anda/wp-content/themes/twentyten kemudian sisipkan class css style nya ke dalam file style.css. Atau Anda juga bisa menggunakan Appearance | Editor kemudian klik stylesheet di sebelah kanan, seperti gambar di bawah ini …

Kemudian tambahkan class baru, dan update.

Setelah itu masuk ke bagian Link Class Setting …

Tambahkan dengan cara mengklik button Add Class, kemudian masukkan name yang akan tampil di editor wordpress dan class yang baru saja di buat. Dan secara otomatis class tersebut akan muncul di editor wordpress Anda.

Oke Terima Kasih. Selamat Mencoba.

 

SUMBER = http://www.ilmuwebsite.com/menambahkan-custom-css-style-pada-editor-wordpress

  Category: html, Tutorial, tutorial php
  Comments: Comments Off on Menambahkan Custom CSS Style Pada Editor WordPress