Belajar CSS

CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website.

Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu:

1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:
<p style="color:blue">Membuat tulisan warna biru</p>
<p style="font-family:arial;font-size:150%;color:green">Membuat jenis font, ukuran dan warna</p>
<p style="color:yellow;background-color:red;width:60px;text-align: center">Test</p>
<p style="font-style:italic;">Membuat tulisan miring</p>

Hasilnya seperti di bawah:

Membuat tulisan warna biru
Membuat jenis font, ukuran dan warna
Test
Membuat tulisan miring

2. Dengan menaruhnya di dalam header dokumen html.
Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah sebagai berikut:
<style>
<!--
p { color:green;font-family:arial;font-size:120%;}
-->
</style>
Kemudian kita masukkan style tersebut di antara tag <head> dan </head> seperti di bawah ini :
<html>
<head>
<style>
<!--
p { color:green;font-family:arial;font-size:120%;}
-->
</style>
</head>
<body>
<p>Saat ini saya sedang belajar CSS</p>
<p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara <p>dan</p>akan memiliki format yang sama</p>
</body>
</html>
Preview

3. Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang tespisah dari dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header dokumen html:
<link rel="stylesheet" href="style.css" type="text/css">
Sehingga di dokumen html akan terlihat seperti berikut ini:

<html>
<head>
<title>Titel websiteku</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>
Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website, berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS.

Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama “csstest.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman"><!-- div id halaman dimulai -->
<div id="judul"><!-- div id judul dimulai -->
<h1 class="judul">Disini judul websiteku</h1>
<h2 class="sub-judul">Disini sub-judul websiteku</h2>
</div><!-- div id judul berakhir -->
<div id="konten"><!-- div id konten dimulai -->
<div class="kiri"><!-- div class kiri dimulai -->
<p>Disini navigasi bagian kiri</p>
</div><!-- div class kiri berakhir -->
<div class="tengah"><!-- div class tengah dimulai -->
<p>Disini konten websiteku</p>
</div><!-- div class tengah berakhir -->
<div class="kanan"><!-- div class kanan dimulai -->
<p>Disini navigasi bagian kanan</p>
</div><!-- div class kanan berakhir -->
</div><!-- div id konten berakhir -->
<div class="footer"><!-- div class footer dimulai -->
<p>Disini Footer websiteku</p>
</div><!-- div class footer berakhir -->
</div><!-- div id halaman berakhir -->
</body>
</html>
Yang berada diantara <–– dan ––> hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut dengan browser, maka kita akan melihat halaman yang polos dengan tulisan seadanya.
Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”
#halaman {/* "id" dilambangkan dengan "#" */
width: 800px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri {/* "class" dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}
.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
width: 25%;
height: 300px;
float: right;
background: #ADD8E6;
}
.footer{
height: 40px;
background: #8FBC8F;
clear: both;
}
.judul {
color: Red;
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */
}
.sub-judul {
color: #ff0;
padding: 0 10px 10px;
}
p {
padding-left: 10px;/* penulisan untuk satu sisi saja */
}
Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.
Sekarang buka file “csstest.html” dengan browser anda.


Itulah kira-kira secara dasar cara kerja dari CSS untuk mengontrol halaman website.
Untuk melakukan eksperimen lebih lanjut dan untuk mengetahui perintah-perintah CSS lainnya anda bisa mendownload CSS editor TopStyle Lite. Dengan program tersebut buka file CSS diatas kemudian lakukan perubahan-perubahan dan refresh browser untuk melihat hasilnya.

Cara Membuat Border CSS Rounded Corner

Rounded Corner Adalah suatu teknik membuat garis lengkung di pojok baik di halaman web/situs atau dimana saja tanpa menggunakan gambar tapi dengan menggunakan kode CSS, jika sobat seorang designer web maka teknik ini perlu di kuasai, karena dengan teknik CSS ini situs akan terlihat menarik dan lebih stylish. oke mungkin dari penjelasan diatas sobat sudah paham dengan yang namanya Rounded Corner, jika belum mari lihat contoh di bawah.

Untuk membuat rounded Corner sangatlah mudah sobat tinggal menghapalkan beberpa code di bawah ini.

  • -webkit-border-radius: ukuran;
  • -moz-border-radius: ukuan;

Cara Membuat Border CSS Rounded Corner

Cara Membuat Widget Gambar Slider (Gambar Bergerak)

Untuk membuat Gambar Auto Slider/ Gambar bergerak otomatis pada blog carannya sangat mudah dan nggak butuh waktu lama untuk mengerjakannya.
Contohnya bisa sobat liat di Blog sederhana saya http://miztiz-pemudaindonesia.blogspot.com/ ,

Cekidot:
1.  Login dengan akun blogger anda.
2.  Pilih Rancangan
3.  Pilih Edit HTML
4. Cari kode ]]></b:skin> lalu copas kode CSS berikut tepat diatasnya.
/* CSS easySlider */
#containerSlider {
width:175px;
height:120px;
margin:0 0px;
padding:0;
position:relative;
}
#prevBtn, #nextBtn {
display:block;
margin:0;
overflow:hidden;
padding:0;
text-indent:-8000px;
}
#slider ul, #slider li {
list-style:none;
margin:0;
padding:0;
text-indent:0;
}
#slider, #slider li {
overflow:hidden;
width:175px;
height:120px;
margin:0 auto;
}
#slider {
margin-left:0;
background:#ccc;
border:1px solid #999;
}
#prevBtn, #nextBtn {
display:block;
height:34px;
left:-20px;
position:absolute;
top:38px;
width:31px;
}
#nextBtn {
left:200px;
}
#prevBtn a, #nextBtn a {
background:transparent url() no-repeat scroll 0 0;
display:block;
height:34px;
width:31px;
}
#nextBtn a {
background:transparent url() no-repeat scroll 0 0;
}
#slider img {
background:#ccc;
padding:0px;
width:175px;
height:120px;
}
Perhatikan untuk teks yang berwarna merah dapat anda ganti ukurannya sesuai kebutuhan anda
5. Kemudian cari kode </head> lalu copas kode berikut tepat diatasnya. 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/easySlider1.5.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>
6. Klik SAVE
7. Selanjutnya buatlah widget baru dengan cara klik Page Element lalu Add Widget baru dan pilih
    HTML/Javascript dan masukkan  kode berikut:
<div id="contentSlider">
<div id="slider">
<ul>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 1" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 2" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 3" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 4" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 5 dst" /></a></li>
</ul>
</div>
</div>

8. Untuk Url dapat ditambah sesuai keinginan.
    Selesai..
 


Cara Mengetahui Bloger Satu Kota

Mungkin dengan keinggin tahuan kita untuk mengetahui bloger satu kota atau satu daerah dengan kita. Jangan – jangan tetangga kita bloger juga,atau kita inggin tahu dengan alasan yang lain misalkan sobat pengen bikin perkumpulan bloger atau ingin memperat tali silahturahmi dengan mereka. 
Caranya yaitu dengan memasukan alamat berikut di address bar browser sobat seperti gambar dibawah ini,
 
 
Blogger seluruh Indonesia :
http://www.blogger.com/profile-find.g?t=l&loc0=ID
Blogger dalam satu provinsi :
http://www.blogger.com/profile-find.g?t=l&loc0=ID&loc1=Jawa+Barat
Blogger dalam satu kota/ kabupaten :
http://www.blogger.com/profile-find.g?t=l&loc0=ID&loc1=Jawa+Barat&loc2=Tasikmalaya
Keterangan : Silakan ganti hurup yang berwarna merah sesuai dengan kode negara, nama
provinsi dan nama kota yang ingin anda cari.
ID : kode untuk Indonesia.
Jawa+Barat : nama provinsi. Tanda + berfungsi sebagai spasi pada nama provinsi dengan dua
kata atau lebih. 
Tasikmalaya : nama kota/kabupaten.

Cara Membuat Gambar Berjalan (efek Marquee)

Untuk membuat gambar berjalan kita hanya perlu menambahkan alamat url gambar tesebut. Mungkin trik ini usang atau tidak berguna bagi para master dan para webmaster, tapi apa salahnya bagi pemula seperti saya yang awam ini, mungkin bagi sahabat bloger yang pengen tau caranya kita ikuti langkah - langkahnya  seperti dibawah ini:



free instant backlink for blog and website



<marquee direction="up" onmouseover="this.stop()" width="180" onmouseout="this.start()" scrollamount="2" height="200">

LETAKAN KODE GAMBAR SAHABAT DISNI

</marquee> 

Copy kode atas ,  login keblog sobat klik Layout-->Add a Gadget-->HTML/JavaScript Paste Kode dan Save.

direction="up" Bisa sobat  diganti
down ===========>>> Bergerak turun
left ===========>>> Bergerak ke kiri
right ===========>>> Bergerak ke kanan
width="180 ===========>>> Menetukan lebar area
height="200" ===========>>> Menentukan tinggi area
scrollamount="2" ===========>>> Menetukan kecepatan gerak
  

Membuat menu navigasi | Garagedoor with jQuery

Cara membuat menu navigasi Garagedoor with jQuery ini sangat simple,n keren klo menurut saya...sobat bisa lihat demo menu navigasi yang saya dapat diSINI

langsung aja,cekidot :

1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
/* ---------------
Menu navigasi Garagedor with jQuery
---------------------------------- */
.garagedoor a:active, .under_header a:active, .header a:focus, .under_header a:focus {
    outline: none; -moz-outline-style: none;
}

.garagedoor img {
    border: 0px; display: block;  
}

.item .mouse {
    height: 80px;
    width: 100px;
  
    margin:0;padding:0;border:0;display:block;left:0;position:absolute;cursor:pointer;top:0;
}

.item .mouse img {
    height: 80px;
    width: 100px;
  
    margin:0;padding:0;
}

.item {
    height: 80px;
    width: 100px;
    color: black;
  
    overflow:hidden;display:block;overflow:hidden;position:relative;margin:0;padding:0;float:left;background-repeat:no-repeat;text-decoration: none;
}

.item .underlay {
    padding: 10px;
    padding-top: 30px;
    color: #000;
    background: #fff;
        height: 80px;
    position:absolute;left:0px;top:0px;
}

.item .overlay {
    height: 80px;
    width: 100px;
  
    margin:0;padding:0;border:0;left:0;position:absolute;top:0;
}

Selanjutnya simpan script berikut diatas kode </head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://kangdadang.googlecode.com/files/garagedoorjQuery.js" type="text/javascript"></script>

dan simpan juga script ini diatas kode </body> :
<script type='text/javascript'>
GarageDoor.scrollY = -55;
GarageDoor.setBindings(&#39;garagedoor&#39;);
</script>

Cara pemanggilannya pada HTML:
<div class="garagedoor" id="garagedoor">
<div style="text-align: center;">

</div>
<div class="item" style="text-align: center;" title="#">
<div class="underlay">
Read my blog entries</div>
<img alt="" class="overlay" src="https://lh6.googleusercontent.com/-m6EuedOOcJM/TYlSeIJomGI/AAAAAAAAAbQ/ZymFTJcSQa4/s1600/garage5.jpg" />
<div class="mouse">
<img alt="" src="https://lh4.googleusercontent.com/-YoN-FUopgio/TYlSfp_s--I/AAAAAAAAAbU/nPVdBabh8vc/s1600/nothing.gif" /></div>
</div>
<div class="item" style="text-align: center;" title="#">

<div class="underlay">
information about me</div>
<img alt="" class="overlay" src="https://lh5.googleusercontent.com/-o9X6RHQq9Ks/TYlSZAtHXsI/AAAAAAAAAbE/j5Zen-U_rxw/s1600/garage2.jpg" />
<div class="mouse">
<img alt="" src="https://lh4.googleusercontent.com/-YoN-FUopgio/TYlSfp_s--I/AAAAAAAAAbU/nPVdBabh8vc/s1600/nothing.gif" /></div>
</div>
<div class="item" style="text-align: center;" title="#">
<div class="underlay">
People that rock</div>
<img alt="" class="overlay" src="https://lh3.googleusercontent.com/-CuKaMes0mcc/TYlSbAepSMI/AAAAAAAAAbI/KQ--16DD5_s/s1600/garage3.jpg" />
<div class="mouse">
<img alt="" src="https://lh4.googleusercontent.com/-YoN-FUopgio/TYlSfp_s--I/AAAAAAAAAbU/nPVdBabh8vc/s1600/nothing.gif" /></div>
</div>
<div class="item" title="#">
<div class="underlay" style="text-align: center;">
Send me a message.</div>
<div style="text-align: center;">
<img alt="" class="overlay" src="https://lh4.googleusercontent.com/-cRX-Z0N_11s/TYlScsK4X-I/AAAAAAAAAbM/N4lXBH3DPiY/s1600/garage4.jpg" /></div>
<div class="mouse" style="text-align: center;">
<img alt="" src="https://lh4.googleusercontent.com/-YoN-FUopgio/TYlSfp_s--I/AAAAAAAAAbU/nPVdBabh8vc/s1600/nothing.gif" /></div>

</div>
</div>

Cara Membuat HTML Parse Kode Box

HTML Tool Parse box Ini sangat berguna untuk para blogger dalam melakukan instalasi kode, apalagi untuk blog yang bergerak di bidang blog tutorial. maka memasang tool parse merupakan suatu kewajiban.

parse

Cara Pemasangan:
  •        Sobat dapat memasangnya di dalam postingan dengan menaruh kode di atas di Edit HTML (bukan di compose) nya.
  •        Sobat dapat memasangnya sebagai widget dengan menaruhnya di sidebar, caranya saya rasa sudah tau, pilih Rancangan » add widget » HTML/Javascript (paste kode dan simpan).

Ini Kode Untuk Membuat HTML Parser Box :

<script type="text/javascript">function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}</script><table border="0" cellpadding="0" cellspacing="0" style="width: 400px;"><tbody><tr> <td valign="top" width="400"><textarea cols="50"id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 2px solid rgb(204, 204, 204);"></textarea><input onclick="convert();" type="button" value="Parse Script" /></td> </tr></tbody></table><br/></span></span><span class="Apple-style-span" style="font-family: 'trebuchet ms'; font-size: x-small; line-height: 20px;"> © Kucoba.com Webmaster Tools |&nbsp;<a href="http://www.kucoba.com" style="color: #0b5394; text-decoration: none;">Blogger Tool</a>

  • Nama Parse Script boleh diubah mengikut kehendak masing-masing.
  • Ukuran Box boleh diubah dengan menukar angka-angka di bagian ini:
      a)  width: 400px
      b)  "top" width="400"
      c)  textarea cols="50"
  • Cara Pengunaan: Copy-paste kode HTML yang hendak diparse kedalam kotak dan klik parse kode SEKALI saja.
Selamat mencoba_