: September 2009

Tuesday, September 29, 2009

Membuat efek marquee pada text

Istilah Marquee sudah tidak asing lagi bagi para blogger dan saya sebelumnya juga masih belum begitu mengenalnya, namun mungkin bagi pemula yang baru mendengar kata marquue ini, tentunya ingin mengetahui bagaimana fungsi marquee didalam blog.

Pertanyaan, apa itu Marquee? singkatnya adalah teks atau gambar-gambar yang berjalan atau dapat bergerak secara horizontal dari kiri kekanan, kanan ke kiri,atau secara vertikal dari bawah ke atas/bolak balik, bahkan teks yang dapat berkedip-kedip.

Marquue merupakan program dalam bentuk HTML yang dapat di gunakan untuk lebih menghemat space posting di blog,juga dapat digunakan untuk memasukan link-link ke dalam Widget atau posting Anda.Program Marquee dinamis dan terlihat menarik untuk dilihat bagi pengunjung

1. Teks bergerak dari kanan kekiri

<marquee>Teks Anda Diletakan disini</marquee>

Teks Anda Diletakan disini

2. Teks bergerak dari kanan kekiri dan bila mouse diarahkan ke teks berhenti

<marquee onmouseover="this.stop()" onmouseout="this.start()">Teks Anda Diletakan Disini</marquee>

Teks Anda Diletakan Disini

3. Teks bergerak dari kiri kekanan

<marquee direction="right">Teks Anda Diletakan Disini</marquee>

Teks Anda Diletakan Disini

4. Teks bergerak bolak balik

<marquee behavior="alternate">Teks Anda Diletakan Disini</marquee>

Teks Anda Diletakan Disini

5. Teks bergerak bolak balik dengan sangat agresif

<marquee behavior="alternate" scrollamount="18">Teks Anda Diletakan Disini</marquee>

Teks Anda Diletakan Disini

6. Teks bergerak bolak balik, bila mouse diarahkan ke teks berhenti

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">Teks Anda Diletakan Disini</marquee>

Teks Anda Diletakan Disini

7. Teks bergerak dari bawah keatas

<marquee direction="up">Teks Anda Diletakan Disini</marquee>

Teks Anda Diletakan Disini

8. Teks bergerak berkedip-kedip

<blink>Teks Yang Akan Dibuat Berkedip-kedip</blink>

Teks Yang Akan Dibuat Berkedip-kedip

selamat mencoba,,,..

cara membuat READMORE otomatis

Berikut trik blogger membuat otomatis readmore dalam postingan :

Login ke account blogger kamu.
Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Cari Kode kode dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :

Kode var thumbnail_mode = "float" ; diartikan bahwa readmore kamu akan diatur disebelah kiri, kalau kamu ingin tanpa pengaturan float silakan ganti dengan "no-float".
Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).
Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).
Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.
Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.

Cari kembali kode seperti di bawah ini.

<data:post.body/>

atau

<p><data:post.body/></p>

Kalau sudah ketemu, ganti kode tersebut dengan kode berikut.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Readmore »» <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Catatan :

Ganti kode yang berwarna merah dengan letak readmore yang kamu inginkan left (kiri) atau right (kanan).
Kalau perlu ganti Readmore dengan kata favorit kamu.
Hapus kode <data:post.title/>, jika kamu tidak menginginkan readmore diikuti dengan judul posting.

Jangan lupa disimpan.

Selamat membuat otomatis readmore...

Avatar Movie review

Released date : 18 December 2009 (USA)

The storys protagonist, Jake Sully (Sam Worthington), is a former Marine who was wounded and paralyzed from the waist down in combat on Earth. Jake is selected to participate in the Avatar program, which will enable him to walk. Jake travels to Pandora, a lush jungle-covered extraterrestrial moon filled with incredible life forms, some beautiful, many terrifying. Pandora is also home to the Navi, a sentient humanoid race that are more physically capable than humans, although considered primitive. Standing three meters tall, with tails and sparkling blue skin, the Navi live in harmony with their unspoiled world. As humans encroach deeper into Pandora's forests in search of valuable minerals, the Navi unleash their formidable warrior abilities to defend their threatened existence. Jake has unwittingly been recruited to become part of this encroachment. Since humans are unable to breathe the air on Pandora, they have created genetically-bred human-Navi hybrids known as Avatars. The Avatars are living, breathing bodies that are controlled by a human "driver" through a technology that links the driver's mind to their Avatar body. On Pandora, through his Avatar body, Jake can be whole once again. Sent deep into Pandora's jungles as a scout for the soldiers that will follow, Jake encounters many of Pandora's beauties and dangers. There he meets a young Navi female, Neytiri, whose beauty is only matched by her ferocity in battle. Over time, Jake integrates himself into Neytiri's clan, and begins to fall in love with her. As a result, Jake finds himself caught between the military-industrial forces of Earth, and the Navi, forcing him to choose sides in an epic battle that will decide the fate of an entire world. [D-Man2010]

Avatar is set during the 22nd century on a small moon called Pandora, which orbits a gas giant, and is inhabited by the tribal Na'vi, ten foot blue humanoids that are peaceful unless attacked. Humans cannot breathe Pandoran air, so they genetically engineer human/Na'vi hybrids known as Avatars that can be controlled via a mental link. A paralyzed Marine named Jake Sully (Sam Worthington) volunteers to exist as an Avatar on Pandora, falling in love with a Na'vi princess and becoming caught up in the conflict between her people and the human military that is consuming their world.

source : http://www.imdb.com/title/tt0499549/

Here the AVATAR trailer movie :

CSS Selector

Pada artikel sebelumnya tentang CSS Syntax disebutkan bahwa salah satu bagian CSS adalah selector. Pada CSS, terdapat 3 macam selector, yaitu ID, class, dan tag HTML.
Selector ID diawali dengan tanda #, selector class diawali dengan tanda . (dot), sedangkan selector tag HTML tidak memerlukan tanda awalan apapun. Cukup dengan mengetikkan langsung nama tag HTMLnya. Pada tutorial ini akan dijelaskan semua hal yang berhubungan dengan CSS Selector.

Selector Class

Sebuah selector class dapat digunakan pada lebih dari satu tag HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa memiliki style yang sama dalam satu halaman.
Contoh kode selector class:

.post{

background-color:#cdcdcd;

}

Kode HTML untuk menggunakan selector class:

Class .post bisa digunakan lebih dari 1 kali pada sebuah halaman. Contoh nyatanya adalah blog-blog yang dibuat dengan Wordpress (baik wordpress.com ataupun wordpress.org).

Selector ID

Kebalikan dari selector class, selector ID hanya boleh digunakan sekali pada satu halaman.
Contoh kode selector ID:

#header{

background-color:silver;

padding:5px;

}

Kode HTML untuk menggunakan selector ID:

<div id="header"> google.com </div>

Selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Misalnya saja ID #header diatas hanya digunakan sekali karena dalam satu halaman web hanya ada 1 header.
Jika Anda seorang programmer, ID dalam HTML ibaratnya sebuah variabel dalam sebuah pemrograman. Jika dalam pemrograman tidak boleh ada 2 variabel yang memiliki nama yang sama dalam suatu blok kode, begitu juga dengan HTML yang tidak boleh ada elemen yang memiliki nama ID yang sama pada satu halaman web.

Selector HTML

Berbeda dengan selector ID dan selector class, selector HTML akan mempengaruhi tag HTML yang diberi style. Untuk lebih jelasnya, berikut contoh kodenya:

p {font-family: Arial;font-size:10pt;}

Kode diatas akan membuat semua tag
(paragraf) agar ditampilkan menggunakan font Arial dengan ukuran 10pt (point). Jadi tidak perlu menambahkan atribut id="nama_id" ataupun atribut class ="nama_class" karena browser secara otomatis akan mencari tag yang akan diberi style.

Bermain dengan selector

Masih ada banyak cara untuk memanfaatkan selector pada CSS. Coba lihat beberapa contoh berikut:

#header p {

font-family:Georgia;

}

h1.title {

font-size:large;

}

Pada contoh pertama bisa berarti bahwa style tersebut akan berlaku pada semua tag
yang ada didalam ID #header. Contoh kode HTMLnya:

<div id="header"><p>teks teks</p></div>

Sedangkan pada contoh kedua style akan berlaku pada semua tag h1 yang memiliki class title. Contoh kode HTMLnya:

<h1 class="title">Judul title</h1>

Selector lainnya

Sedikit melangkah ke tingkat lanjut, selain 3 selector utama diatas (yang lebih umum dipakai) masih terdapat beberapa macam selector, yaitu:

Selector universal

Universal selector yang dimaksud disini adalah selector yang menggunakan tanda *. Contoh kode CSS:

* {

line-height:1.5em;

}

blockquote{

font-family:Verdana;

}

blockquote * {

font-family:"Times New Roman";

}

Tanda * (asterisk) mengacu pada semua element. Jadi, pada blok kode yang pertama bisa berarti bahwa “spasi antar baris pada semua elemen akan berukuran 1.5em“.
Pada style yang kedua, potongan kode ini bisa berarti “semua teks didalam blockquote akan ditampilkan dengan font Verdana“. Sedangkan pada style yang ketiga, tanda * berada setelah selector HTML blockquote. Potongan kode ini bisa berarti “semua teks pada elemen yang berada didalam blockquote akan ditampilkan dengan font Times New Roman“. Untuk lebih jelas, berikut contoh penggunaan dalam kode HTML:

<blockquote>Halo dunia <span>Ketikkan
sebuah kode</span> halo dunia lagi.</blockquote>

Sesuai dengan kode HTML diatas, teks yang berada didalam tag akan ditampilkan menggunakan font Times New Roman, sedangkan sisanya ditampilkan menggunakan font Verdana.

Selector atribut

Selector atribut memungkinkan kita untuk mengaplikasikan sebuah style pada elemen HTML tertentu dengan atribut tertentu.
Sebagai contoh, sebuah style hanya untuk diaplikasikan pada tag hyperlink (<a>) yang memiliki atribut href, jadi tag hyperlink yang tidak memiliki atribut href tidak akan mengikuti style yang sudah ditentukan. Contoh kodenya :

a[href] {

color:green;

}

a[name] {

color:red;

}

Berikut contoh dalam kode HTML:

<a href=http://agus-mediashow.com/halamancontoh.html>Halaman contoh</a>
<a name="bab2">Bab 2</a>

Pada contoh tag hyperlink yang pertama, teks akan berwarna hijau, mengikuti style a[href]. Sedangkan pada tag hyperlink yang kedua, teks akan berwarna merah, mengikuti style a[name].

Selector atribut dengan pencocokan nilai atribut

Selain itu, dengan selector atribut juga dimungkinkan untuk mengaplikasikan style pada suatu elemen HTML dengan nilai atribut tertentu. Untuk lebih jelasnya, berikut contoh kode CSS:

a[href="http://google.com"] {
color:yellow;
}

Dan contoh kode HTML:

<a href=http://majalahweb.com>Warna kuning</a> <a href=http://yahoo.com>Entah warna apa</a>

Hasilnya adalah hanya hyperlink yang menuju ke majalahweb.com saja yang akan memiliki teks berwarna kuning.

Selector atribut dengan mencocokkan sebagian nilai atribut

Mengaplikasikan style CSS ke elemen HTML juga bisa dilakukan dengan melakukan pencocokan sebagian nilai dari atribut. Untuk lebih jelasnya, berikut kode CSSnya:

span[class~="error"] {background-color:red;}

Style CSS diatas akan diaplikasikan pada elemen span yang nama classnya memiliki kata error. Misalnya :<span class="error login"> .. teks .. </span>, atau <span class="error register"> .. teks .. </span>..

Selector pseudo-element

Selector pseudo-element digunakan untuk menambahkan efek tertentu pada sebuah selector. Jika Anda bingung dengan istilah pseudo-element, jangan terlalu dipikirkan. Untuk sekarang terima dulu kata pseudo-element sebagai sebuah istilah dalam CSS. Syntax dari penggunaan pseudo-element adalah sebagai berikut:

selector:nama_pseudo-element {property:value;}

Atau bisa juga dengan manambahkan nama class setelah nama selector, menjadi:

selector.class:nama_pseudo-element {property:value;}

Berikut adalah beberapa nama pseudo-element:

:first-line. Memberikan style tertentu pada baris pertama dalam sebuah teks.
:first-letter. Memberikan style tertentu pada huruf pertama pada sebuah teks.
:before. Menambahkan sebuah content sebelum nama elemen yang dijadikan selector.
:after. Menambahkan sebuah content sesudah nama elemen yang dijadikan selector.

Pseudo-element :before dan :after tidak bekerja pada browser Internet Explorer (sewaktu tutorial ini dicoba menggunakan Internet Explorer 6 ). Berikut contoh style CSS yang menggunakan pseudo-element:

p:first-line{
    text-transform:uppercase;
}

Kode HTML:
<p>Ini adalah elemen paragraf yang menggunakan pseudo-element.</p>

Pada contoh diatas, browser akan menampilkan baris pertama dengan huruf besar. Jika ukuran browser Anda lebar dan menampilkan semua teks dalam satu baris, maka semua teks akan ditampilkan huruf besar. Untuk melihat efek dari style CSS diatas, coba resize ukuran browser menjadi lebih sempit sehingga teks pada paragraf tersebut dipisah menjadi 2 baris.
Beberapa yang perlu diingat, pseudo-element :first-line hanya bisa diaplikasikan pada element yang bersifat block-level. Pada tutorial berikutnya akan saya jelaskan apa itu block-level element. Beberapa properties yang bisa diaplikasikan pada pseudo-element :first-line adalah sebagai berikut: font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear.
Contoh berikutnya adalah pseudo-element menggunakan :first-letter:

p:first-letter{

font-size:16pt;

}

Style CSS diatas akan menampilkan huruf pertama dari sebuah paragraf dengan ukuran 16 point.

div.feed:before{

    content:url(feed-icon.png);

}

div.feed:after{

    content:url(feed-icon.png);

}

Style diatas akan diaplikasikan pada kode HTML seperti dibawah ini:

<div class=”feed”>Berlangganan feed</div>

Hasilnya adalah sebuah teks “Berlangganan feed” dimana sebelum (:before) dan sesudah (:after) teks tersebut akan ditambahkan gambar feed-icon.png. Seperti yang sudah disebutkan sebelumnya, :before dan :after tidak akan bekerja pada browser Internet Explorer (saat dicoba versi 6).
Sumber penjelasan tentang pseudo-element:

Selector pseudo-class

Syntax dari pseudo-class sama dengan syntax pseudo-element, yaitu:

selector:nama_pseudo-class {property:value;}

Atau bisa juga:

selector.class:nama_pseudo-class {property:value;}



Berikut beberapa nama-nama pseudo-class:

:link. Memberikan style pada link yang belum dikunjungi.
:visited. Memberikan style pada link yang telah dikunjungi.
:hover. Memberikan style pada elemen yang disorot oleh pointer/mouse.
:active. Memberikan style pada elemen yang berada pada keadaan diaktifkan.
:focus. Memberikan style pada elemen ketika elemen tersebut menerima focus.
:first-child. Memberikan style pada elemen anak pertama pada dari elemen lainnya.
:lang. Menentukan bahasa yang digunakan pada elemen tersebut.
 

Bermain dengan link

Dengan pseudo-class :link, :visited, :hover, dan :active, kita bisa menambahkan efek pada sebuah link. Misalkan ada sebuah kode CSS seperti berikut:

a:link{

color:orange;

}

a:visited{

font-style:italic;

}

a:hover{

font-weight:bold;

}

a:active{

color:blue;

}

Style diatas akan diaplikasikan pada sebuah link dengan kode HTML sebagai berikut:

<a href="http://www.google.com">Google</a>

Maka, link tersebut secara default akan memiliki warna oranye, saat di-hover (disorot dengan pointer/mouse) font akan ditampilkan menjadi cetak tebal, saat di-klik sekilas akan berubah menjadi warna biru, dan setelah link tersebut dikunjungi akan berubah warnanya menjadi warna merah.

pseudo-class lainnya

Contoh kode CSS:

span:first-child{font-weight:bold;}

Contoh kode HTML:

<body><span>Teks pertama</span><span>Teks kedua</span></body>

Pada contoh diatas, kata “Teks pertama” akan dicetak tebal sesuai dengan style yang sudah dibuat. Sedangkan kata “Teks kedua” tidak akan dicetak tebal karena tidak cocok dengan selector yang telah didefinisikan, dimana selector hanya mengaplikasikan style pada elemen span pertama pada sebuah elemen (dalam hal ini elemen body).
Contoh kedua penggunakan pseudo-class :first-child. Berikut contoh kode CSS:

p > span:first-child{
    font-style:italic;
}

Contoh kode HTML:

<p><span>Teks pertama</span><span>Teks kedua</span></p>

Pada contoh diatas, Teks pertama akan diberi style karena sesuai dengan selector yang sudah ditentukan. Dimana pada style CSS, selector yang diberi style adalah “elemen span pertama didalam elemen p (paragraf)“. Tanda > (kurang dari) berarti elemen berikutnya adalah elemen didalamnya.

Selector child

Yang dimaksud dengan selector child disini mengacu pada elemen anak. Untuk lebih jelasnya, berikut contoh kodenya:

div>p {
    ... kode css ...
}

Kode CSS diatas akan berlaku pada elemen HTML seperti berikut:

<div><p>teks dalam paragraf</p><span>teks dalam span</span></div>

Contoh kedua:

div ol>li p {
    ... kode css ...
}

Kode CSS diatas akan berlaku pada elemen HTML seperti berikut:

<div><ol><li><p>teks dalam paragraf dan dalam list item</p></li><li>teks dalam list item</li></ol></div>

Selector sibling

Yang dimaksud selector sibling disini adalah elemen yang berada setelah elemen saat ini dan berada pada level yang sama.
Contoh sibling:

<div><h1></h1><h2></h2></div>>

h2 adalah sibling dari h1 karena h2 berada setelah (disebelah kanan) h1. Dimana h1 dan h2 berada pada level yang sama. Maksud dari level yang sama adalah h1 dan h2 memiliki elemen induk yang sama (div).
Contoh penggunaan dalam CSS:

h1 + h2 { ... kode css ..}

Meningkatkan pengetahuan tentang CSS

Salah satu cara untuk meningkatkan pengetahuan tentang CSS adalah dengan melihat bagaimana orang lain (yang lebih berpengalaman tentunya) menyusun kode CSS mereka. Saran saya, jika Anda serius mempelajari CSS dan kebetulan menggunakan browser Firefox, maka segera install add-on Web Developer. Karena dengan tambahan add-on Web Developer maka Anda bisa melihat kode CSS suatu halaman dengan hanya menekan klik kanan Web Developer > CSS > View CSS (CTRL+SHIFT+C). Tentunya tidak hanya dilihat, tapi juga kode CSS tersebut dipelajari.

source :

www.w3schools.com
www.majalahweb.com

CSS Syntax

Syntax bisa diartikan sebagai bentuk kode. Jadi Syntax CSS bisa berarti bentuk kode CSS. Kode CSS berbeda dengan kode HTML. Kode CSS tidaklah sulit.
Kode CSS hanya dibagi menjadi 3 bagian, yaitu selector, property, dan value.

selector {property : value;}

Selector adalah elemen HTML yang akan diberikan style. Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan Value adalah nilai dari atribut tersebut. Untuk memberikan gambaran yang lebih jelas, berikut contoh kodenya:

body { background-color:#cccccc; font-family: "Calibri", Verdana, Tahoma; }

Kode CSS diatas bisa berarti elemen body (tag ) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abu-abu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri. Jika font Calibri tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya. Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS. Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal “Times New Roman”.

Inheritance/Pewarisan

Maksud dari Interitance pada CSS adalah begitu kita memberikan style pada elemen body, maka elemen yang didalamnya akan mengikuti style dari elemen body kecuali elemen tersebut diberi style tertentu.
Misalnya saja ada file html seperti berikut :

body {
    background-color:#cccccc;
    font-family: "Calibri", Verdana, Tahoma;
     }

Kode CSS diatas bisa berarti elemen body (tag <body>) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abu-abu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri. Jika font Calibri tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya. Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS. Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal “Times New Roman”.

Inheritance/Pewarisan

<html>
<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
body {
background-color:#cccccc;
font-family: "Calibri", Verdana, Tahoma;
}
</style><head>
<body>
<h1>Halo apa kabar</h1>
<p>paragraf halo apa kabar</p>
</body>
</html>

Dari contoh kode diatas, kita memberikan style pada elemen body (tag <body>). Dengan begini, maka tag-tag HTML yang ada diantara <body> dan </body> (tag <h1> dan tag <p>) akan mengikuti style <body>, yaitu memiliki warna latar abu-abu dan menggunakan font Calibri. Agar heading (tag <h1>) memiliki style yang berbeda, misalnya saja heading menggunakan font Times New Roman, maka harus dibuatkan style lagi khusus untuk heading. Berikut contoh kodenya:

<html>
<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
body {
background-color:#cccccc;
font-family: "Calibri", Verdana, Tahoma;
}
h1 {
font-family: "Times New Roman";
}
</style><head>
<body>
<h1>Halo apa kabar</h1>
<p>paragraf halo apa kabar</p>
</body>
</html>

Pada contoh diatas, ditambahkan style baru untuk elemen heading 1. Dengan begini, heading akan memiliki font Times New Roman, tidak lagi mengikuti style dari elemen induxnya (body).

Walaupun begitu, ada beberapa property pada CSS yang tidak akan di-warisi oleh elemen didalamnya, misalnya saja property margin seperti pada kode dibawah:

body {margin:20px}

Misalnya kita menambahkan property margin pada style body, maka heading 1 dan paragraf tidak akan memiliki margin sebanyak 20px, hanya elemen body saja.
Kombinasi Selector

Untuk menghindari pengetikan ulang style CSS, elemen HTML yang memiliki style yang sama bisa menggunakan selector yang sama dengan cara menambahkan nama elemen dan dipisahkan dengan tanda koma, contoh :

h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}

Pada contoh diatas, heading 1, heading 2, sampai heading 6 diset menggunakan style yang sama.
Memberikan Komentar pada CSS

Untuk memberikan komentar pada kode CSS, dimulai dengan tanda /* dan diakhiri dengan tanda */. Contohnya saja:

/* Ini adalah komentar */

Komentar pada CSS tidak akan diproses oleh browser. Komentar berguna untuk mengetikkan sesuatu pada file CSS tapi Anda tidak ingin teks tersebut diproses.

source :

www.w3schools.com
www.majalahweb.com

Pengenalan CSS

CSS merupakan singkatan dari Cascading Style Sheet. Dengan CSS, Anda bisa memisahkan antara desain tampilan website dengan konten/isi website.
HTML/xHTML sebenarnya digunakan untuk memberi tahu browser bagaimana sebuah tag HTML ditampilkan di browser. Misalnya saja tag HTML <i>Teks miring</i>, tag tersebut sama artinya dengan “Halo web browser, teks ini tolong dicetak miring”. Dengan begitu, web browser yang Anda gunakan akan menampilkan teks secara miring(italic). Contoh lainnya, tag HTML <b>halo semua</b>, sama artinya dengan “Browser, tolong teks halo,semua ditampilkan dengan cetak tebal” yang selanjutnya web browser akan menampilkannya dengan cetak tebal.
Tapi bagaimana jika Anda ingin menampilkan teks tersebut agar tampil dengan teks yang miring dan bercetak tebal? Jika menggunakan HTML, solusinya adalah menuliskan tag HTML sebagai berikut :

<i><b>teks ini blod dan italic</b></i>

CSS sebenarnya berguna untuk memberikan perintah tambahan terhadap web browser agar suatu teks/elemen HTML bisa ditampilkan dengan tampilan tertentu sesuai yang dideskripsikan pada perintah stylesheet. Intinya, CSS berfungsi untuk memberikan style pada suatu tag/elemen HTML.
Ada 3 cara dimana kita bisa meletakkan kode CSS, yaitu:

Internal StyleSheet

Internal StyleSheet adalah sebutan kalau kita meletakkan kode CSS di bagian head sebuah file HTML. Atau dengan kata lain, kita meletakkan kode CSS diantara tag dan tag . Formatnya bisa seperti contoh dibawah:

<head
<style type="text/css">
.. letak kode css ..
</style>
</head>
<body>

Dengan meletakkan kode CSS pada bagian head, berarti halaman HTML yang Anda buat akan mengandung kode CSS. Cara ini bagus jika Anda hanya perlu untuk memberikan style pada halaman HTML itu saja. Jika Anda ingin agar tiap halaman HTML memiliki style yang berbeda-beda, Anda bisa menggunakan cara ini.

Inline Style

Inline Style berbeda dengan Internal StyleSheet. Jika Internal StyleSheet berarti Anda meletakkan kode CSS pada file HTML (bagian head), maka Inline Style berarti Anda meletakkan kode CSS pada elemen HTML. Untuk lebih memberikan gambaran seperti apa Inline Style, berikut adalah contoh kodenya:

<p style="color:#ff0000;">teks warna merah </p>

Hasil dari kode diatas adalah:

teks warna merah

Seperti yang bisa Anda lihat, disini kode CSS diletakkan langsung pada elemen paragraf (tag
), dengan menambahkan atribut style dan mengetikkan kode CSS. Cara ini bagus jika Anda ingin suatu elemen memiliki tampilan yang berbeda. Misalnya saja Anda ingin ada teks yang berwarna merah dan ada teks yang berwarna biru.

External StyleSheet

External StyleSheet adalah peletakkan kode CSS pada file yang berbeda. Dimana nantinya Anda akan membuat sebuah file khusus yang berekstensi .css dimana nantinya kode-kode CSS akan diletakkan pada file tersebut. Setelah kode CSS diketikkan pada file tersebut, Anda bisa menghubungkan file CSS dengan file HTML yang Anda buat dengan mengetikkan perintah:

Perintah diatas diketikkan pada bagian head. Atau dengan cara kedua seperti berikut ini:

Dengan menggunakan Eksternal StyleSheet, maka file HTML akan terhubung dengan file CSS. Jika Anda perlu untuk mengubah suatu style, cukup dengna mengubah kode CSS pada file .css. Ada beberapa alasan mengapa cara ini dianjurkan:

Maintenance kode CSS lebih mudah
Mengurangi ukuran file HTML, karena kode CSS diletakkan pada file yang berbeda
Dapat menghemat bandwidth

source :

www.w3schools.com
www.majalahweb.com

CSS drop down menu WITHOUT javascript

Here is a tiered CSS drop-down menu that works in IE 6, 7, and 8; Opera 9 and 10; Firefox 3.5.3.00; Flock 2.0 and 2.52; and Chrome 2.0.172.43 and 3.0.195.21
without hacks or javascripting and is accessible without using a mouse. One downside is that it still uses images for the tabs and the sub-menus are only one level. View source to download code.

Example :

How to make border in your Posting ?

This time i will teach you how to make border on your posting. The function is to make your posting about script code more great if seen.
1. login in your blog
2. choose your posting
3. choose border style below that you like and copy the script

STYLE 1

<div style="border: 1px #000000 solid; padding: 10px; background-color: yellow; text-align: left;">WRITE YOUR SCRIPT HERE</div>

STYLE 2

<div style="border: 1px #000000 dotted; padding: 10px; background-color: yellow; text-align: left;">WRITE YOUR SCRIPT HERE</div>

STYLE 3

<div style="border: 1px #000000 dashed; padding: 10px; background-color: yellow; text-align: left;">WRITE YOUR SCRIPT HERE</div>

STYLE 4

<div style="border: 2px #000000 solid; padding: 10px; background-color: yellow; overflow: auto; height: 50px; width: 300px; text-align: left;">WRITE YOUR SCRIPT HERE</div>

NOTE :

border: 1px ( border width )
border: 1px #000000 ( border colour )
background-color: yellow ( background colour )
text-align: left ( text position)

Lets try ^^

Tips for set YM status in your blog (Blogger)

First get into your Blog account. Choose your blog in Dashboard page. then click layout. a new page will appear like this.

click add a gadget in red circle (choose one where you want to put). a new windows appears like this.

click on HTML/JavaScript then copy this code :

Note : for green text change it with your Yahoo! ID and red text with type of picture that you want.

t =0

t =1

t =2

t =3

t =4

t =5

t =6

t =7

t =8

t =9

t =10

t =11

t =12

t =13

t =14

t =15

t =16

source : http://www.dangdyud.kandangbuaya.com

Nokia is preparing to soon unbox its widget, Nokia 6790 Surge Smartphone – a synthesis of expertise of AT&T and Nokia, have announced to make this gizmo available within a short period of time that is commercially a supercharged cell phone controlled by the fastest 3G network.
This gadget is now available on net and in AT&T stock either. The smart cell phone is a finer gadget for intuitive users mostly interested to remain connected with instant messaging or remain busy in sending SMSs or MMSs. Nokia 6790 would be available first of all, at a few AT&T retailer shops or business centers.
Nokia 6790 is offering a QWERTY keyboard, with a cute stylish framework with multitasking functionalities. A recent survey conducted by Nokia was reminiscent that the users of cell phone are stick that they can compromise with many things in life, yet not with the cell phone, so it has proved entirely unavoidable for the today’s life.
Nokia 6790 is offering a strong browsing experience, including flash capability to see most websites in full HTML or watch YouTube videos. This Nokia Surge also gives a free hand to send messages, upload images and videos and comments to websites like Facebook.com.
This latest mobile is gadget entirely reserved for social minded zealots as well as pre-installed JuiceCaster app for quick updating of your Facebook or Twitter, at a price, not specified as yet.
Nokia Surge lends a 2.4 inch 16M-tints screen of QVGA visualization. Quad-band GSM/GPRS/EDGE as well as dual-band UMTS also having HSDPA 3.6Mbps facility support the network data transfers, whilst Bluetooth, USB and a 2.5mm audio jack hood the local linkage.
This new gadget is adds along huge 1500 mAh battery that is bigger capability as compared to many other mobile series. Its internal memory is 128MB, can be extended to 8GB through the microSD card slot as well as FM radio, A-GPS, and a 2MP camera either.
Technical Specifications
Dimensions: 97.5 x 47.9 x 15.5 mm
Size: 2.40 inch
Weight: 123g (with battery)
Display Type: Graphical
Colored: Yes, TFT, 16M colors
Resolution: 320 x 240 pixels
QWERTY keyboard: Yes
Shared memory: 128 MB, microSD (TransFlash), up to 8 GB
Polyphonic ringtones: Yes
Ringtone profiles: Yes
Networking HSDPA speed: 3.6 Mbps
GPRS: Yes, Class 10 (4+1/3+2 slots), 32 - 48 kbps
EDGE: Yes, Class 10, 236.8 kbps
HSCSD: Yes
USB: Yes, 2.0 microUSB
Bluetooth: Yes, 2.0 with A2DP
Browser: Yes, WAP 2.0/xHTML, HTML
Email client: Yes
Features Vibration: Yes
Camera: Built-in, 2 MP, 1600 x 1200 pixels, video (QVGA)
Java: Yes, MIDP 2.1
Games: Yes, (changeable)
Handsfree: Yes
Headset jack: Yes
FM Radio: Yes, MPEG4/3GP player, MP3/WAV/AAC player, Quickoffice, PDF Reader
Standard Battery Type: Li-Ion
Amperage: 1500 mAh
Standby time GSM: 400h / 3G: 400h, Talk time GSM: 4h 50m / 3G: 4h

source : www.reviewsbuzz.com
This video about nokia 6790

Rangkuman Seminar Sehari PC Modding dan Design Games

Berikut adalah Rangkuman Seminar Sehari PC Modding dan Design Games yang diadakan pada tanggal 26 Agustus 2009 di Auditorium Gedung Utama lt. 3 Universitas Tarumanagara, terbagi dalam dua sesi :

Sesi 1

Pembicara : David Tjahjadi ( Channel Platform Manager Intel Indonesia )

Intel® Atom™ Processor adalah prosessor terkecil yang dibuat dengan transistor terkecil di dunia. Intel® Atom™ prosessor secara keseluruhan dibuat dengan desain baru, dibuat dengan konsumsi daya yang kecil, dan di desain secara spesifik untuk kebutuhan akan perangkat Mobile Internet dan mudah digunakan dengan biaya pembuatan yang relatif murah. Keinginan utama pembuatan Intel Atom adalah kebutuhan akan sebuah perangkat dengan desain baru, bentuk yang kecil namun memiliki kemampuan yang tinggi untuk menangani besarnya kebutuhan akan internet .

Sebagai prosessor terkecil dan termurah, prosessor Intel® Atom™ mendukung penggunaan Mobile Internet Devices (MIDs) terbaru dengan sebuah kategori baru untuk perangkat internet yang dinamakan netbook dan nettop. Prosesor ini juga merupakan dasar untuk teknologi seluruh produk terbaru Intel seperti prosesor Intel® Centrino® Atom™.

Prosessor ini dibuat dengan desian baru berdasarkan pada teknologi 45 nanometer (45nm) dengan bahan Hi-K Metal Gate. Prosesor Intel® Atom™ memiliki 47 juta transistor dalam sebuah chip dengan ukuran kurang dari 26 mm², membuat prosessor ini sebagai prosesor Intel dengan ukuran terkecil dan kebutuhan daya listrik yang terkecil saat ini hingga membuat daya baterai menjadi lebih lama. Seluruh fitur tersebut membuat prosesor ini memiliki kemampuan dan power yang tinggi untuk kebutuhan ber-internet secara mobile anda.

Beberapa kelebihan prosesor ini adalah :

• Menggunakan perangkat baru untuk lebih mengefisienkan daya dengan performa yang baik sekali yang digunakan oleh seluruh teknologi baterai hafnium-infused 45nm high-k silicon yang baru

• Kenaikan efisiensi daya dalam desain baru yang lebih kecil sehingga daya yang digunakan kurang dari 1W hingga 2.5 watts untuk penggunaan perangkat mobile

• Memperpanjang umur baterai ketika waktu idle sehingga membuat daya yang digunakan relatif sangat kecil yang membuat perangkat tetap memiliki daya dan juga akan mengawetkan energi

Secara keseluruhan berdasar pada microarsitektur yang baru, prosesor Intel® Atom™ dibuat secara spesifik untuk sasaran performa dan penggunaan daya yang kecil (low power) ketika menggunakan seluruh microarsitektur instruction set compatibility dari Intel® Core™. Intel® Atom™ processor juga mendukung berbagai thread untuk performa dan peningkatan sistem yang lebih baik.

Sedangkan kekurangannya adalah :

• kinerja rendah

• tidak multicore

• hanya cocok digunakan untuk kalangan terbatas saja

(tidak untuk gamer, design grafis, video editing, dll)

Selain Intel® Atom™ terdapat juga beberapa processor dari Intel®Core Family, yaitu:

• Intel® Core™ i7 merupakan processor tercepat saat ini, dan juga termahal. Processor ini digunakan untuk animasi, design graphic, video editor, gaming. Keunggulan processor ini dibanding dengan yang lain adalah menggunakan teknologi micro-architecture Nehalem, yang ditujukan untuk pangsa pasar High-end Desktop (HEDT).

Apa yang dimaksud dengan Nehalem micro-architecture family?

Nehalem adalah keluarga micro-arsitektur prosesor Intel generasi terbaru dan revolusioner yang dibuat dengan menggunakan proses transistor 45nm dan Hi-K metal-gate. Nehalem memiliki banyak fitur yang baru dan berbeda jika dibandingkan dengan keluarga prosesor berbasis Core micro-architecture (Core 2 Duo, Core 2 Quad).

• Intel® Core 2 Quad merupakan processor yang memiliki empat inti. Digunakan untuk multimedia, animasi, video editor, gaming.

• Intel® Core 2 Duo digunakan untuk keperluan gaming, dan lainny. Memiliki 2 inti dan dualcore. Pada Core 2 Duo kebutuhan energi dan panas yang dihasilkan jauh lebih kecil dibadingkan pada keluarga prosesor Intel Pentium yang berintikan dua prosesor.

Pembicara : Dedy Irfan ( Kepala Lab Majalah Chip )

Pembahasan mengenai perbedaan antara Notebook dengan PC Desktop. Perbedaannya akan dibahas dalam kelebihan dan kekurangan masing-masing.

• Notebook

Kelebihan : harga kian terjangkau, kinerja semakin baik, bias dibawa kemana saja dan layanan purna jual.

Kekurangan : harga sama dengan kinerja dibawah desktop, tidak mudah di upgrade, layar kecil, model spesifikasi bergantung pada produsen.

• Desktop

Kekurangan : tidak mudah dibawa / dipindahkan, layanan purna jual lebih rumit.

Kelebihan : spesifikasi lebih tinggi, mudah dirakit.

Bagian-bagian PC :

• Motherboard

Merupakan papan circuit yang menjadi tempat peletakan berbagai komponen termasuk peripheral

• Processor

Otak atau inti dari suatu PC yang mengatur dan mengontrol seluruh kinerja dari suatu komputer

• Memori RAM

Tempat penyimpanan sementara sebelum intruksi dari processor di eksekusi

• VGA

Komponen yang mendukung kualitas gambar yang dihasilkan

• Hard disk

Tempat penyimpanan sekunder dari suatu komputer

• PSU

Komponen penyuplai tegangan untuk menghidupkan suatu PC

• Monitor

Komponen output yang menampilkan hampir semua aktivitas dari suatu PC

• Optical Disk Drive

Komponen input untuk DVD, CD

Macam-macam PC :

• Basic Computing PC

Jenis PC yang dikhususkan untuk keperluan-keperluan basic seperti, mengetik, internet, dll

• Multimedia PC

Jenis PC untuk para editor ataupun penikmat multimedia

• Gaming PC

Jenis Pc untuk para gamer sejati, dimana diperlukan spesifikasi PC yang cukup tinggi

• Workstation

PC untuk server, memerlukan memori yang besar dan kecepatan yang tinggi.

Pembicara : Edi Syahputra,ST ( ketua robotic UNTAR )

Apakah itu robot ?

Robot adalah gabungan dari mekanika, elektronika dan artificial intelligent. Robot terdiri dari IC biasa dan IC mikrokontroler. Aplikasi robot dapat dilihat dalam bidang militer, kedokteran, hiburan, industry, dan lain-lain.

Bagaimana jalan sebuah robot ?

Hubungan jurusan elektronika dengan robotika terdapat dalam mata kuliah dasar elektronika, rangkaian logika, system mikroprosesor, system cerdas, perancangan berbasis computer, arsitektur system computer, teknik interfacing dan lain-lain.

Sesi 2

Pembicara : Chandra ( Job Environment Artist Cartix Studio )

Lahir pda tanggal 25 februari. Dia menceritakan dalam proses pembuatan game ada yaitu konsep, story, prototype, creating the game asset, game testing, bug fixing, final touch/marketing materials. Kemampuan yang diperlukan dalam industri game : konsep artis,modeler ( character, vehicles, background, high rest modeler ), texture artis, animator, kadang-kadang lighting artis dan rigger. Dalam game ada istilah next gane dan past gene. Kalau next gene ada alamat web nya.

Pembicara : Joko Hartanto ( Pemimpin Redaksi Majalah Concept )

Sepuluh filosofi GOOD DESIGN oleh Dieter Ram

01. Good design is innovative.

Tidak meniru produk yang sudah ada.

02. Good design makes a product useful.

Produk yang diciptakan mampu memiliki kegunaan

03. Good design is aesthetic.

Kualitas astgetic suatu produk dapat meningkatkan kegunaannya sebab produk digunakan setiap hari maka mempengaruhi kemauan kita

04. Good design helps us to understand a product.

Hal ini mengklasifikasi suatu struktur dari suatu produk. Seolah-olah produk itu sendiri sudah berbicara.

05. Good design is unobtrusive.

Produk didesain bukan tujuan seni tetapi memiliki tujuan sebagai sebuah alat

06. Good design is honest.

Hal ini membuat suatu produk tidak lebih canggih, lebih hebat dari bentuk yang telah diciptakannya

07. Good design has longevity.

Tidak mengikuti trens yang ada yang mana akan tenggelam jika masanya telah berkahir

08. Good design is consequent to the last detail.

Barang yang diciptakan memperlihatkan rasa hormat kepada penggunanya

09. Good design is concerned with the environment.

Tidak memcemarkan lingkungan ataupun memberi dampak yang buruk bagi penggunanya

10. Good design is as little design as possible.

Simple dan tidak berlebihan dalam membuat suatu produk. Setiap detail ada kegunaannya.

Tuesday, September 29, 2009

Membuat efek marquee pada text

cara membuat READMORE otomatis

Friday, September 25, 2009

Avatar Movie review

CSS Selector

Selector Class

Selector ID

Selector HTML

Bermain dengan selector

Selector lainnya

Selector universal

Selector atribut

Selector atribut dengan pencocokan nilai atribut

Selector atribut dengan mencocokkan sebagian nilai atribut

Selector pseudo-element

Selector pseudo-class

Bermain dengan link

Selector child

Selector sibling

Meningkatkan pengetahuan tentang CSS

Thursday, September 24, 2009

CSS Syntax

Inheritance/Pewarisan

Inheritance/Pewarisan

Pengenalan CSS

Internal StyleSheet

Inline Style

External StyleSheet

CSS drop down menu WITHOUT javascript

Tuesday, September 22, 2009

How to make border in your Posting ?

Tips for set YM status in your blog (Blogger)

NOKIA 6790 Review

Tuesday, September 8, 2009

Rangkuman Seminar Sehari PC Modding dan Design Games

Labels

Archive

About Me