Template View Post (Slicing From dribbble.com)

wah akhirnya slicing yang kedua selesai juga yang dari design jpg yang ada di dribbble.com sangat terharu ๐Ÿ˜€

ini hasil convert to htmlnya ๐Ÿ˜€

hasil2

 

silahkan download source disini

 

 

Iklan

Cara menggunakan font awesome

Font awesome menyediakan icon yang bisa digunakan oleh kita pada halaman web yang kita buat. Disini kita akan mencoba menggunakan icon yang disediakan oleh font awesome. Pertama tama download font awesome di halaman ini : http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip, baiklah mari kita mulai:

  1. Buatlah folder dengan nama โ€œfawesomeโ€
  2. Buat file dengan nama index.html
  3. Copi kan folder css dan font yang sudah di download tadi kedalam folder fawesome yang tadi kita buat. Sehingga struktur nya akan seperti ini (abaikan file.docs)

1

4.ย link kan font-awesome.min.css dalam file index html

 

<html>

<head>

<title>font awesome</title>

<link href="css/font-awesome.min.cs" rel="stylesheet" type="css/text">

</head>

<body>

</body>

</html>

 

  1. icon font awesome dapat digunakan di dalam inline element dalam html seperti <i> atau <span> dengan menambahkan class dengan css prefix fa diikuti nama icon yang ingin ditampilkan. Nama nama icon dapat dilihat di http://fortawesome.github.io/Font-Awesome/icons/
  2. kali ini kita akan menambahkan icon mobil dengan nama fa-car dan icon Instagram dengan nama fa-instagram didalam halaman kita
  3. tambahkan code dalam file index seperti berikut

 

<html>

<head>

<title>font awesome</title>

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

</head>

<body>

<i class="fa fa-instagram"></i>

<span class="fa fa-car"></span>

</body>

</html>

 

  1. save filer tersebut dan jalankan pada webrowser. Maka tampilan nya akan seperti ini

2

Semoga bermanfaat

Cara Mengetahui Versi firefox terbaru

saya mempunyai pengalaman sulitnya mengetahui versi firefox yang sedang dipakai pada saat mencari bug pada aplikasi web yang dibuat, karena harus compotible di semua versi web browser, ketika menggunakan firefox ter update saya bingung mencari informasi versi firefox tersebut karena tampilan yang berubah derastis. tapi kali ini sejak saya ke klinik tong…. *eh knp jadi iklan hahaha, akhirnya saya tahu dimana letaknya si informasi versi firefox terupdate itu. langkahnya sebagai berikut.

  1. klick menu dropdown paling kanan pada firefox

  2. di paling bawah dropdown menu tersebu ada tombol yang bergambar tanda tanya yang apa bila di sorot (mouse over) akan muncul tulisan open help menu.

  3. klik about firefox

muncul deh informasi firefox tersebut.

terimakasih. semoga bermanfaat ๐Ÿ˜€

Menggunakan Google Font API

kali ini kita akan encoba bagai mana menggunakan Google Font API. google telah menyediakan banyak jenis font yang bisa digunakan dalam halaman web kita, jadi kita tidak perlu membuata rule font-face dan mendownload jenis jenis font yang kita inginkan. menyenangkan kan? ๐Ÿ˜€
ada dua yang harus kita lakukan untuk menggunakan Google Font API:
1. tambahkan link stylesheet dalam file halaman

<code>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
</code>
  1. sertakan style pada element yang ingin di set jenis fontnya
<code>
CSS_selector{
font-family:'font name', serif;
}
</code>

pada tahap satu terdapat parameter family yang akan meload jenis font yang kita gunakan, apa bila jenis font menggunakan spasi misal “arial black” maka harus menggunakan tanda + untuk menggunakannya sehingga menjad family=arial+black jika ungin menggunakan 2 atau lebih font maka gunakan tanda |, misalnya kita ingin menggunakan arial dan arial black, sehingga penulisannya seperti ini family=arial|arial+black. harap diingat semakin banyak font yang kita load maka akan berpengaruh terhadap performa kecepatan halaman web kita.

mari kita buat contoh penggunaan google font API
buat file baru dengan nama gfapi.html, kemudian ketikan kode dibawah ini

<code>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald">
    <style>
      body {
        font-family: 'Oswald', serif;
        font-size: 28px;
      }
    </style>
  </head>
  <body>
    <div>saya gunakan google font API</div>
  </body>
</html>
</code>

pada contoh diatas kita gunakan jenis font Oswald. jiika sudah diketikan maka save lah file tersebut dan coba buka pada web browser pada komputer kita.
untuk jenis jenis tulisan yang ada pada google font API bisa dilihat di http://www.google.com/fonts

Membuat Slider Gambar dengan Flexslider

Flexslider adalah jquery slider yang sangat mantap dan mudah di pakai yang dikembangkan oleh WooThemes yang juga pendevelop tema tema wordpress. Silahkan kunjungi webnya di http://www.woothemes.com/flexslider/

gambar1

 

Mari kita buat slider menggunakan flexslider. Pertama tama slilahkan download flexslider di http://www.bluenotesentertainment.com/siteelements/iweb-demos/flex/flex.zip

Jikalau anda sudah mempunyai flexslider yang sudah di download, langkah selanjutnya

  1. Buat lah folder dengan nama slider saya
  2. Didalam folder tersebut buat lah 3 folder dengan nama css, images dan js. Pasti anda tahu kegunaan folder tersebut :D.
  3. Copikan file jquery.flexslider.js yang sudah anda download dan paste pada folder js, jangan lupa masukan juga file jquery.js yang bisa di download di http://jquery.com/download/
  4. Copikan flexslider.css yang sudah anda download dan paste kan didalam folder css
  5. Masukan gambar yang anda inginkan dalam folder images (contoh 3 gambar ajalah)
  6. Copikan folder font yang sudah di download dan pastekan didalam folder slider saya
  7. Buatlah file dengan nama index.html
  8. Maka kurang lebih susunan folder dan file akan seperti ini

gambar2

Edit file index.html menjadi seperti code dibawah ini

<html>
	<head>
		<title>slider with flexslider | Madelhaq</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.flexslider.js"></script>
		<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			$(window).load(function(){
				$('.flexslider').flexslider({
					animation:"fade",
					slideshowSpeed: 100000000,
					ControlsContainer:".flex-container"
				});
			});
		</script>
		<style>
			#wrapper{
				width:400px;
				height:400px;
				margin:0 auto;
				border:1px dashed black;
				padding:5px;
			}
		</style>

	</head>
	<body>
		<div id="wrapper">
			<div class="flexslider">
				<ul class="slides">
					<li><img src="images/1.jpg" /></li>
					<li><img src="images/2.jpg" /></li>
					<li><img src="images/3.png" /></li>
				</ul>
			</div>
		</div>
	</body>

</html>

Save file tersebut, dan jalankan pada webbrowser yang ada pada computer anda