Category: Tutorial


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/

10 Ciri Web Designer Yang Berkualitas Baik

By Irvan Galuh,

Web designer yang memiliki kualitas baik itu gampang-gampang susah untuk dicari, ada banyak sekali web designer saat ini, apa lagi dengan semakin ramainya industri web di Indonesia khususnya.Jika anda sedang ingin membangun sebuah website dengan desain yang baik, atau anda sedang mencari seorang web designer yang akan anda ajak untuk menjadi partner kerja anda dalam membangun sebuah website, maka coba luangkan waktu anda untuk membaca artikel berikut ini agar anda tidak salah dalam memilih orang (web designer). Karena beberapa designer cukup profesional di bidangnya namun sangat banyak juga yang amatir dan kurang bertanggung jawab.

Disini kami akan memberikan setidaknya 10 kualitas yang harus dimiliki oleh web designer yang baik atau bisa kita bilang cukup profesional dibidangnya, sehingga bisa jadi acuan anda dalam memilih web designer yang berkualitas.



1. Pendengar Yang Baik.


Image by Radu Chibzii
 

Seorang web designer yang baik itu mutlak harus bisa jadi pendengar yang baik, sehingga dia bisa memahami apa kebutuhan anda dan mempertimbangkan apa yang harus dia berikan untuk memenuhi keinginan anda dalam sebuah desain website.


2. Mempertimbangkan Gagasan Anda.


Banyak web designer yang egois, dia hanya fokus pada apa yang ingin dia lakukan terhadap website anda dan tidak memperdulikan apa yang anda inginkan terhadap website yang ingin dibuat. Web designer memang memiliki pengetahuan tentang apa yang dia akan buat, namun dia juga harus mempertimbangkan apa keinginan klien nya.



3. Komunikasi.

Selain harus bisa jadi pendengar, Seorang designer yang baik harus memiliki komunikasi yang baik juga, dia harus bisa menjelaskan terminologi tentang website dalam bahasa yang anda lakukan dengan dia. Dia Juga gampang dihubungi dan enak diajak berbicara.



4. Pengetahuan Tentang Teknologi.

Jika anda ingin menguji kemampuan atau pengetahuan web designer anda, maka tes lah pengetahuan nya tentang teknologi web. Dia harus familiar dengan tools yang digunakan dalam pembuatan sebuah website.




5. Penggunaan Terminologi.

Seorang web designer tidak hanya mengenal teknologi, tapi dia juga harus mengerti bagaimana menggunakan teknologi tersebut.

Misalnya saat ini sedang marak istilah “Responsive Web Design“, designer mungkin tau secara teori namun apakah dia sudah bisa menggunakannya? apakah dia sudah pernah membuat. Silahkan anda lihat bagaimana dia menggunakan teknologi tersebut, bisa dengan melihat portfolio atau dari gagasan yang dia berikan.


6. Menjaga Bisnis dan Tujuan Bersama.

Anda tentu ingin website anda terlihat bagus, web designer yang baik juga harus punya komitmen untuk membuat sebuah desain yang memiliki kualitas bagus juga, web designer harus paham kalau apa yang dia buat akan menjadi/menambah portfolionya. Dengan memahami itu biasanya web designer akan selalu memberikan yang terbaik disetiap pekerjaan nya.

Untuk itu anda bisa dengan melihat portfolio nya, apakah dia konsisten membuat yang bagus atau hanya sesekali.


7. Menghemat Waktu dan Biaya Anda.

Kadang web designer hanya berfikir bagaimana agar dia mendapat penghasilan yang banyak dari anda. Jadi berhati-hatilah dengan web designer yang meminta waktu pengerjaan yang terlalu lama atau terlalu cepat, apa lagi jika dia dibayar perjam atau per hari. Sebaiknya tentukan berapa lama target dan biaya yang akan dikeluarkan sebelum memulai pekerjaan, designer yang baik tidak akan menghabiskan waktu anda dan tidak akan terburu-buru juga, buru-buru bisa membuat hasil jadi tidak maksimal.

Namun perlu diingat, jangan menekan harga web designer, karena bisa membuat dia bekerja dengan hati kurang senang, sehingga hasil jadi tidak maksimal, berikan harga terbaik sehingga dia happy dan dapat menghasilkan karya yang baik.


8. Pandai Menggabungkan Desain Lama Dengan Yang Baru.

Web designer yang baik bisa menggabungkan apa yang ada sebelumnya dengan gagasan-gagasan yang baru, dalam hal pembuatan desain website yang baru misal nya, dia akan memberikan sentuhan baru dengan tidak meninggalkan karakter website lama anda.

Namun jika anda ingin yang sesuatu yang benar-benar 100% berubah sebaiknya bicarakan dengan tegas juga, karena sebagian designer bekerja dengan melihat bagaimana anda/perusahaan anda sebelumnya.

Jadi minta dia memberikan masukan apa yang akan dia perbuat terhadap website anda, sebelum dia benar-benar anda pekerjakan, web designer yang baik harus bisa menjabarkan apa yang akan dia lakukan.


9. Memiliki Portfolio Yang Baik.


Image By kodamapixel
 
Yang paling utama tentu kita harus melihat apa yang pernah dia kerjakan, inilah hal cukup penting ketika kita ingin bekerjasama dengan orang lain. Lihat hasil karyanya, jika menurut anda menarik, janga hanya melihat satu, tapi lihat beberapa, apakah dia konsisten membuat yang baik atau tidak.
 
10. Rekomendasi / Nama Besar.
 
Image by Skampy
 
Jika dia banyak direkomendasikan oleh orang lain sudah barang tentu dia adalah seorang yang berkualitas dan punya citra baik dimata orang lain. Jadi cobalah untuk melihat sepak terjangnya di dunia maya, dengan aktifitasnya di sosial media atau di group/forum, kalau dia sering memberikan solusi untuk pertanyaan-pertanyaan di group bisa dibilang dia memiliki kemampun yang bisa diandalkan.Sekian.
 
 
 

6 Tips Untuk Membuat Website Responsive

By Irvan Galuh,

Ingin desain website responsive Anda bisa dibanggakan? Ini jelas bukan pekerjaan yang mudah. Meskipun proyek Anda terlihat cukup baik dari sudut pandang desain, masih banyak hal yang bisa menghancurkannya seiring dengan waktu.Berikut ini kami memiliki beberapa tips untuk membuat web responsive anda menjadi lebih maksimal dan agar menghamat waktu anda dalam proses pembuatan sehingga anda mencapai tujuan anda dengan website responsif yang kerennya maksimal 😀

Fokus Pada Konten

Mobile-first, desktop-first atau pendekatan apapun yang anda gunakan atau sejenisnya, hal yang paling penting untuk diingat adalah konten. Konten harus selalu mendorong struktur dan organisasi website. Jadi, hal pertama yang harus dilakukan adalah untuk menjadi lebih familiar dengan konten website. Hal ini harus dilakukan sebelum anda menulis kode program, sebelum membuat setiap wireframe atau mockup(maket). Semakin cepat anda melakukan langkah ini, semakin baik.

Baca juga:
Manfaatkan Wireframe Sebagai Tahap Awal Pembuatan Desain Web
Panduan Membuat Wireframe Untuk Web Designer — Ebook

 

Bandwidth

Satu hal yang perlu dipertimbangkan ketiwa membuat website responsive adalah bandwidth. Semua ini berarti bahwa anda harus mempertimbangkan secara menyeluruh apa yang harus anda sediakan untuk mengoptimalkan segala sesuatu yang anda bisa. Tentunya ini berkaitan dengan optimasi, penggunaan ukuran file gambar yang lebih kecil, mengoptimalkan file CSS dan Javascript dengan membuat nya menjadi terkompres atau istilahnya di minify.

 

Phone, Tablet, Desktop, dan….

Kita tidak bisa pungkiri, ketika membuat website responsive kita tidak hanya fokus pada 3 jenis atau kategori perangkat (PC, Tablet, Phone), Anda harus ingat kalau perangkat bukan hanya itu saja, di zaman sekarang ini orang membuka website anda dari berbagai perangkat, seperti smartwatches, ebook reader, ponsel, smartphone, tablet, netbook, notebook, ultrabook, desktop, widescreen, dan banyak lagi. Jadi berikan sedikit waktu anda untuk membuat website anda agar bisa mengakomodir perangkat-perangkat tersebut.

 

Typography

Pada dasarnya website itu adalah 95% tipografi. Sebagian besar konten yang kita konsumsi setiap hari adalah tergantung dari tipografi, baik itu postingan di blog atau infographic. Jadi gunakanlah font yang baik untuk website anda. Pertimbangkan besar file font yang akan di load, pertimbangkan ukuran font ketika website dibuka di layar yang kecil, pertimbangkan warna font agar terlihat jelas di layar pengunjung, gunakan jenis font yang mudah dibaca dan tidak membingungkan.

Javascript & Performa

Katika kita berbicara performance, maka Javascript dapat menjadi influencer utama. Javascript menjadi sangat populer dalam beberapa tahun belakangan ini, plugin nya begitu banyak dan bagus-bagus, animasi yang dibuat begitu menakjubkan. Akhirnya web designer dengan sesuka hati menggunakan banyak sekali plugin agar website nya tampil luar biasa, tanpa memikirkan performa website nantinya, bankan tidak tanggung-tanggung puluhan plugin jquery di load secara bersamaan karena website tersebut sangat banyak menggunakan efek dan lainnya. Ini tentu sangat memberatkan website nantinya. Biasanya ini bisa kita lihat di template yang multipurpose, dimana template bisa digunakan untuk semua jenis website, dan untuk membuat itu biasanya sang developer menyertakan semua plugin yang digunakan jenis-jenis website tersebut.

 
Retina Display

Poin terakhir yang perlu kita perhatikan yaitu bagaimana penampilan website anda pada perangkat yang sudah menggunakan retina display. Layar ini memiliki pixel density yang lebih tinggi yang berarti kemampuan untuk menampilkan lebih banyak pixel dan jauh lebih baik, tampilan yang lebih halus. Singkatnya, Anda dapat melihat lebih detail dalam resolusi tinggi atau lebih kecil dalam gambar yang beresolusi rendah.
Intinya adalah pikirkan untuk menyertakan gambar untuk resolusi yang lebih tinggi yang akan ditampilkan hanya ketika user menggunakan perangkat yang disertai fitur retina display.

 
Ringkasan

Desain responsif bukan hanya tentang pembuatan website yang tampak keren di smartphone, tablet dan desktop. Untuk membuat pengalaman yang benar-benar responsif ada banyak lagi yang perlu diingat dan diperhatikan. Semoga tips ini akan membantu anda mencapai tujuan anda.







SUMBER = http://www.tutorial-webdesign.com/6-tips-untuk-membuat-website-responsive/

Cara Mudah Mengetahui Jenis Font Pada Sebuah Website

By Irvan Galuh,

Sering kali kita penasaran dengan font yang digunakan oleh sebuah website, ketika kita membuka website dan melihat sebuah tipografi yang menarik biasanya kita ingin mengetahui nama font yang digunakan website tersebut.Untuk mengetahui font yang digunakan pada suatu website kita biasanya melihat source code (view source) halaman website tersebut, lalu melakukan pengecekan pada meta tag, atau dengan membongkar isi file css di website tersebut dan mencari pada properti font-family. Cara lainnya biasanya dengan menggunakan firebug.

Namun semua cara tersebut kurang efektif dan cenderung memakan waktu, ada cara yang lebih mudah dan lebih cepat untuk mengetahui font yang digunakan pada website yang sedang kita buka, yaitu dengan menggunakan Fontface Ninja. Dengan fontface ninja kita cukup mengerahkan cursor pada tulisan yang ingin kita ketahui, maka seketika akan muncul nama font dan ukuran fontnya.




Menginstall Fontface Ninja

Fontface ninja adalah sebuah extension chrome dan safari (belum tersedia untuk firefox), untuk menginstall nya kita harus menggunakan browser google chrome, lalu buka link berikut Fontface Ninja Extension.



Klik tombol Free berwarna biru






Akan muncul popup, lalu klik tombol Add


Muncul notifikasi bahwa Extension telah selesai terinstall




Untuk menguji nya kita tinggal membuka sebuah website (pada contoh ini membuka tutorial-webdesign.com), lalu klik icon ninja yang ada di kanan atas, lalu arahkan cursor pada tulisan yang ada di halaman website.




Dari situ kita bisa lihat bahwa yang font yang digunakan pada judul website Tutorial Web Design adalah KoolBean Regular
Kita bisa mendownload font yang digunakan tersebut dengan cara melakukan klik pada tulisan yang kita sorot, lalu menuliskan contoh tulisan, mengatur ukuran font, dan menekan tombol download.




Membedakan Fontface dan Font pada gambar.

Pada halaman website terdiri dari teks dan image, kadang didalam sebuah image terdapat tulisan(teks), kita tidak bisa mengetahui jenis font pada teks yang ada pada sebuah image dengan fontface ninja, untuk menghilangkan gambar yang ada di sebuah website dan agar kita fokus pada teks saja maka kita bisa menekan tombol MASK yang ada di kanan atas saat extension Fontface Ninja sedang aktif.




Sekian trik singkat untuk mengetahui font yang digunakan oleh suatu website, semoga bisa membantu anda.

*Tulisan ini tidak ditunjukan untuk mengajarkan cara mencuri font orang lain, namun hanya sebagai pembelajaran untuk anda yang penasaran ingin mengetahui nama font, jika font tersebut berbayar maka sebaiknya anda membelinya.





SUMBER = http://www.tutorial-webdesign.com/cara-mudah-mengetahui-jenis-font-pada-sebuah-website/

Membuat slide control dengan Jquery

By Irvan Galuh,

Pada tutorial kali ini kita akan mencoba membuat Slide Control dengan Jquery, Apa sih slide control itu? Pada dasarnya kita akan mengontrol isi dari sebuah input text hanya dengan menyeret pengontrol nya saja.

Jquery Slide Control
 
Ini bagus jika anda ingin menggunakannya untuk mempercantik form ketika terdapat field untuk mengisi berat badan misal nya, atau tinggi badan, atau jika di sebuah website e-commerce ini bisa digunakan untuk mempercantik field jumlah barang yang ingin dibeli, atau jika ada sedang membuat website musik, nah ini bisa digunakan untuk mengatur volume dll. Ya kira-kira penggunaanya seperti itu lah.

Oke kita mulai

Pertama siapkan sebuah folder js, berisi file berikut:

  • jquery.js
  • jquery.slideControl.min.js
Plugin Jquery Slide Control bisa didapat disini.
Selanjutnya siapkan folder css berisi file berikut:
  • slideControl.css
  • style.css
Oke sekarang buat sebuah file bernama index.html, diletakan diluar folder js, dan css


Isinya kira-kira sebagai berikut


<section>

<ul>
<li><label>Responsiveness: </label><input type=”text” value=”6.0″ class=”slideControl” /></li>
<li><label>Safety: </label><input type=”text” value=”4.0″ class=”slideControl” /></li>
<li><label>Information: </label><input type=”text” value=”9.0″ class=”slideControl” /></li>
</ul>
</section>


Sedangkan isi file css/style.css adalah sebagai berikut:


section{width:700px;margin:20px auto;}
section li {margin:10px 0;}
section ul {list-style-type:none;}
section ul.options {margin-left:20px; margin-bottom:20px; list-style-type:disc;}
section ul.options li {margin:5px 0; font-size:0.85em;}
section input.slideControl {width:40px; font-size:1.5em; padding:3px 5px; border:1px solid #ccc; border-radius:5px; text-align:center; color:#333; font-weight:bold;}
section label {font-size:1em; font-weight:bold; float:left; width:145px; margin-top:10px;}




Sekian tutorial kali ini, semoga ini bisa membantu mempercantik website yang sedang anda buat.

Salam Web Design Indonesia…



SUMBER = http://www.tutorial-webdesign.com/membuat-slide-control-dengan-jquery/

Tips Membuat Horizontal Menu Dengan CSS

By Irvan Galuh,

Navigasi merupakan hal yang ponting untuk ada di website, ini untuk memudahkan user dalam menjelajahi isi website, Navigasi bisa disebut menu, menu ada yang berbentuk Vertical, dan ada juga yang berbentuk Horizontal.Menu Vertical adalah menu yang berderet kebawah, sedangkan Horizontal Memanjang Kesamping.

Pada tips singkat berikut ini kita akan mencoba teknik dasar bagaimana teknik dasar membuat Horizontal menu dengan CSS.




Disini kita juga akan belajar Pseudo-element :before dan :first-child milik CSS.

Oke kita mulai dengan Membuat Struktur HTML seperti berikut ini



HTML



<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>Basic Horizontal Menu CSS : DEMO</title>
<style type=”text/css”>
<!– /CSS Code Here –>
</style>
</head>
<body>

<div class=”demo-container”>
<h1>Tutorial-Webdesign.com</h1>
<ul class=”horizon-menu”>
<li><a href=”#” class=””>Home</a></li>
<li><a href=”#” class=”lang”>About</a></li>
<li><a href=”#” class=”lang”>Work</a></li>
<li><a href=”#” class=”lang”>Portfolio</a></li>
<li><a href=”#” class=”lang”>Contact</a></li>
</ul>

</div>

</body>
</html>



Setelah membuat struktur HTML nya, sekarang kita mempercantik dengan CSS

CSS




h1{margin:5px}
.demo-container{margin:50px;}
.horizon-menu{list-style-type:none;padding:0;margin:0;background:#fff000;padding:10px;border-radius:5px;box-shadow:inset 0 0 5px 2px #f4f4f4}
.horizon-menu a{text-decoration:none; color:#111;font-weight:bold}
.horizon-menu li{display:inline;margin:5px 0}
.horizon-menu li:before{content:’ | ‘;color:rgba(0,0,0,.1)}
.horizon-menu li:first-child:before{content:’ ‘}
.horizon-menu li a{margin-right:5px; margin-left:5px;padding:5px;border-radius:5px;
-webkit-transition:background-color 500ms ease-in-out;
-moz-transition:background-color 500ms ease-in-out;
}
.horizon-menu li a:hover{background-color:orange}



Penjelasan:


Inti utama dalam membuat menu horizontal yaitu pada baris code 4, dimana tertulis display:inline


.horizon-menu li{display:inline;margin:5px 0}


Sedangkan untuk membuat pemisah kita menggunakan li:before{content:’ | ‘}, dimana akan menulis karakter [ | ]

Agar pemisah tidak muncul diawal maka kita membutuhkan li:first-child:before{content:’ ‘}

Tambahan:

Untuk membuat menu tersebut Responsive terhadap lebar layar, dimana akan berfungsi dengan baik jika dibuka di layar yang lebih kecil seperti Smartphone atau PC Tablet, maka kita tambahkan code berikut:


@media (max-width:767px){
.demo-container{margin:5px;}
.horizon-menu li{display:block}
.horizon-menu li:before{content:”;color:rgba(0,0,0,.1)}
}



Oke sekian tips kali ini, semoga berguna






SUMBER = http://www.tutorial-webdesign.com/tips-membuat-horizontal-menu-dengan-css3/


Membuat Slide Menu Dengan CSS dan Jquery

By Irvan Galuh,

Menu yang ketika Mouse Hover akan berganti seperti slide, dibuat dengan CSS dan Jquery.
Kali ini kita akan mencaba membuat contoh menu yang bisa diterapkan di website anda, menu ini cukup menarik karena terlihat agak animatif dengan slide nya.

Oke kita mulai saja langsung

Ingredients

  1. Font Electrolize dari Google Web Fonts
  2. Jquery
  3. Subtlepattern Egg-Shell

Struktur HTML Menu

<div class=”mn-container”>

<ul id=”topnav”>
<li><a href=””>Home</a></li>
<li><a href=””>Services</a></li>
<li><a href=””>Portfolio</a></li>
<li><a href=””>Blog</a></li>
<li><a href=””>About</a></li>
<li><a href=””>Contact</a></li>
</ul>
</div>

Disitu kita membuat container untuk menu, dan sebuah unordered list untuk list menu nya.


Code untuk bagan menu

.mn-container{
margin:50px auto;
width:680px;
padding:20px;
background:rgba(255,255,0,.1);
overflow:hidden;
border:1px solid rgba(225,225,225,.9)
}


Berikut ini code untuk List Menu nya

ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
font-family: ‘Electrolize’, sans-serif;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #333;
background:rgba(255,255,255,.5);
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
}
ul#topnav a{
color: #ff0000;
background-position: left bottom;
}
ul#topnav span{
background-position: left top;
}


Code Jquery untuk membuat menu terlihat berganti seperti sebuah slide


$(document).ready(function() {

$(“#topnav li”).prepend(“<span></span>”);

$(“#topnav li”).each(function() {
var linkText = $(this).find(“a”).html();
$(this).find(“span”).show().html(linkText);
});

$(“#topnav li”).hover(function() { //On hover…
$(this).find(“span”).stop().animate({
marginTop: “-40”
}, 500);
} , function() { //On hover out…
$(this).find(“span”).stop().animate({
marginTop: “0”
}, 500);
});

});


Oke sekian tulisan saya kali ini, semoga bermanfaat ya.

Salam Web Design Indonesia 🙂



SUMBER = http://www.tutorial-webdesign.com/membuat-slide-menu-dengan-css-dan-jquery/

Mendesain halaman Gallery dengan CSS3

By Irvan Galuh,

Membuat halaman Profile atau halaman Team work dalam sebuah website perusahaan itu penting, halaman itu biasanya berisi foto anggota tim dan jabatannya pekerjaannya.

Dalam tutorial ini kita akan mencoba membuat halaman tersebut agar terlihat lebih menarik. Idenya yaitu membuat biodata muncul ketika mouse berada diatas gambar dan disaat itu juga gambar yang lain akan ikut meredup. Seperti gambar berikut. Kita gunakan CSS Transition dan bantuan Opacity 😀







Bahan-Bahan

Rebel Background Pattern dari subtlepattern

2 Buah Font Doppio One dan Noticia Text yang diembed dari Google Webfonts

Foto Avatar dari Sarah Parmenter

Struktur HTML


   <ul class=”profiles”>

<li class=”maurice”>
<a href=”#”>
<div class=”bio”>
<div class=”name”>Maurice</div>
<div class=”position”>Co-Founder</div>
<div class=”description”>Vivamus ornare massa in nisl posuere sit amet interdum nisl accumsan. Cras accumsan viverra justo sit amet faucibus.</div>
</div>
</a>
</li>

<li class=”adrian”>
<a href=”#”>
<div class=”bio”>
<div class=”name”>Adrian</div>
<div class=”position”>Manager</div>
<div class=”description”>Fusce ornare quam ut leo aliquam et dignissim urna pulvinar</div>
</div>
</a>
</li>

<!– Next Member Thumbnail –>
</ul>


     
disitu bisa kita lihat bahwah ada unordered list (ul), dan setiap list anggota disertai dengan biodata singkat.


CSS

Untuk mempercantik struktur HTML dan membuatnya lebih animatif kita akan banyak menggunakan css transition

Halaman akan kita buat selebar 660px, karena kita butuh 3 kolom untuk gambar yang berukuran 200px * 6 dan margin 10px * 6


.profiles{
overflow:hidden;
list-style:none;
width:660px;
margin:40px auto;
padding:10px 20px;
}




Untuk membuat list foto yang dibuat menjadi 3 kolom kita akan butuhkan float:left


.profiles li{
display:inline;
float:left;
margin:10px;
transition: opacity 500ms ease-in-out;
box-shadow: inset 0 0 1px 0px #000;
}



Untuk membuat biodata meredup yaitu background:rgba(0,0,0,0.8);


.profiles li a .bio{
color:#fff;
height:90%;
width:90%;
background:rgba(0,0,0,0.8);
opacity:0;
padding:5%;
box-shadow: inset 0 0 5px 5px #000;
}




Untuk mempercantik elemen-elemen biodata menggunakan font yang telah ditentukan



name{font-size:20px;font-weight:bold;font-family: ‘Doppio One’, sans-serif;color:#fff000}
.position{font-size:18px;font-family: ‘Noticia Text’, serif;}
.description{padding-top:10px;font-size:13px;font-family: ‘Noticia Text’, serif;}




Untuk memunculkan foto kita jadikan background



li.maurice{background-image:url(img/Maurice.jpeg)}
li.sarah{background-image:url(img/Sarah.png)}
li.adrian{background-image:url(img/Adrian.png)}
li.amber{background-image:url(img/Amber.jpg)}
li.giles{background-image:url(img/Giles.jpg)}
li.petra{background-image:url(img/Petra1.png)}
li.shane{background-image:url(img/Shane.jpg)}



Oke cukup sekian tutorial kali ini, perlu diperhatikan bahwa browser yang bisa menjalankan halaman ini dengan baik hanya yang sudah support CSS Transition.




SUMBER = http://www.tutorial-webdesign.com/animasi-hover-dengan-css3/



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

Membuat Game Android Dengan Adobe Flash[2]

By Irvan Galuh,

Pada posting
sebelumnya saya sudah menjelaskan bagaimana langkah awal dalam membuat game android ini. Sekarang kita akan belajar bagaimana memasukan objek kedalam game  kita. Langkah pertama (karena saya malas bikin objek) kita download dulu objek
yang akan kita pakai. Kali ini saya akan memakai objek monster yang saya dapatkan dari google image
Saya mengambilnya dari situs ini

http://www.redbubble.com/people/maiconmcn/works/9529460-cute-monster-4?p=sticke

Nah kemudian import gambar yang sudah kita download tadi ke library Adobe Flash. Caranya klik File –  Import – Import to Library
Kemudian pilih file yang sudah kita download tadi.
Klik Open.
Setelah itu coba cek  library kita dengan menekan tombol Ctrl+L seharusnya terdapat file yang sudah kita import tadi
 Ok jika sudah ada  filenya sekarang kita akan membuat sebuah MovieClip baru di dalam flash. Yang tidak tahu movieclip itu apa. Nanti akan saya bahas di postingan tentang adobe  flash. Oke cara membuat sebuah movie clip adalah dengan cara menekan tombol Ctrl+F8 maka akan muncul tampilan seperti di bawah ini :
 
Perhatikan bagian yang saya beri tanda kotak berwarna merah. Kotak  yang bagian atas adalah nama dari Movieclip yang akan kita buat. Saya beri nama “Monster” perhatikan penulisan huruf besar dan kecil karena ini  berpengaruh kepada project yang akan kita buat.
Kotak kedua adalah kamu harus ceklis tanda pada  radio button Export for Actionscript karena kita akan memasukan Movieclip ini
menggunakan bahasa pemograman actionscript 3.0 setelah kitu kemudian klik tombol OK.
Setelah tombol ok di  klik, maka kita akan otomatis berada didalam movieclip tersebut. Bagaimana kita tahu kita sudah berada didalam movieclip? Coba cek bagian ini
 Disana terdapat tanda Scene 1 kemudian Monster di sebelahnya. Itu tandanya kita sedang berada di dalam sebuah movieclip bernama monster. Jika kita tidak berada didalam sebuah movie clip, maka yang tertera hanya tulisan Scene 1 saja.
Ok kembali ke project kita..
Setelah berada di dalam movieclip monster, sekarang kita akan memasukan objek monster yang terdapat di library kedalam movieclip ini. Caranya buka library (Ctrl + L ) kemudian klik dan drag objek monster ke tengah-tengah movieclip kita
Darimana kita tahu dia berada di tengah.. Perhatikan kotak merah kecil yang saya tambahkan pada monste di atas. Itu adalah titik tengahnya. Jika sudah kita kembali lagi ke Scene 1 dengan cara menekan tombol Scene 1.
Klik bagian yang saya beri tanda kotak berwarna merah
Oke langkah selanjutnya adalah membuat Class baru untuk monster yang sudah kita masukan.
Caranya klik File – New maka akan muncul tampilan seperti ini
Setelah kotak new document muncul langkah selanjutnya adalah memilih menu ActionScript 3.0 (perhatikan kotak berwarna kuning) kemudian perhatikan kotak yang berwarna merah. Itu adalah nama Class yang akan kita buat.
Catatan : nama class haru sama dengan nama linkage movieclip yang sudah kita buat
 Dimana kita mengetahui nama linkage yang sudah kita buat? Ada di librari lihat pada bagian movieclip yang kita buat di sebelah terdapat menu linkage. Perhatikan gambar dibawah
Bagian yang saya beri tanda kotak berwarna merah adalah nama linkage.
Oke kembali ke  pembuatan Class.. Kemudian klik OK setelah memberikan nama pada Class yang akan kita buat. Maka akan muncul class baru seperti ini :
Setelah itu kemudian tambahkan beberapa script kedalam class monster sehingga menjadi seperti ini :
Class ini belum kita save, harus kita save terlebih dahulu dengan cara menekan tombol Ctrl + S Beri nama class yang kita buat dengan nama Monster.as (nama file harus sama dengan nama Class yang kita buat )
Apakah ini sudah selesai? Belum sodara sodara, kita baru membuat class.. Sekarang kita akan belajar bagaimana mamasukan objek monster tadi ke game yang akan kita buat…
Loh.. Tadi kan sudah di import?
Yap, tadi baru di import ke library, sekarang kita akan memasukanya ke dalam stage dengan menggunakan bahasa pemograman actionscript 3.0
Ok here we go!
Buka kembali file mainClass.as yang sebelumnya sudah kita buat
 Ini adalah script mainClass yang belum kita edit, sekarang tambahkan script untuk menambahkan objek. Rubah menjadi seperti ini :
Jika sudah save semua file dan class yang sudah kita buat. Sekarang saatnya kita compile aplikasi yang sudah kita buat dengan cara menekan tombol Ctrl + Enter
 jika semua langkah yang sudah saya buat di ikuti dengan benar, maka seharusnya muncul tamplan seperti ini  :
Jika ada yang gagal coba perhatikan lagi langkah-langkahnya ya. Atau kalo mau bertanya langsung boleh join di grup facebook Purwakarta Creative Movement
Oke segitu dulu posting kali ini, selanjutnya saya akan membuat posting tentang bagaimana memanpulasi objek yang sudah kita buat. Ok ditunggu ya 😀