Sebelumnya saya telah menulis artikel tentang pengenalan CSS (Cascading Style Sheet) dan bagaimana cara penerapan CSS pada dokumen HTML. Namun artikel yang berjudul Pengertian CSS dan Cara Penerapan CSS pada HTML itu bukan benar-benar untuk para pemula (newbie) yang benar-benar awam dengan dokumen HTML dan CSS. Oleh karena itu disini saya akan melakukan pembahasan lagi khusus untuk para newbie yang baru memulai niatnya untuk bersama-sama belajar mengembangkan website.
CSS (Cascading Style Sheet) dibuat oleh World Wide Web Consortium (W3C) untuk menyelesaikan masalah yang timbul pada saat dokumen HTML masih versi 3.2. HTML versi 3.2 ini merupakan mimpi buruk untuk para Pengembang Web karena untuk memberi style pada document HTML para pengembang harus membuat tag-tag tersendiri misalkan tag <font>, tag atribut warna dan lain sebagainya pada setiap dokumen HTML yang akhirnya membuat pengembangan web dengan skala besar menjadi lebih kompleks, rumit dan mahal. Dokumen HTML pada awal dibuat memang tidak di maksudkan untuk memformat dokumen sedemikian rupa, HTML di maksudkan untuk mendefinisikan suatu isi dari dokumen. CSS mulai dikembangkan pada HTML versi 4, semua format tag-tag tadi mulai di hilangkan, di ganti, dan di simpan pada file yang diberi nama CSS secara terpisah dan sekarang semua jenis browser sudah mendukung CSS.
CSS memudahkan pembuatan website dalam mendefinisikan bagaimana element-element yang ada di dokumen HTML di tampilkan. Style dokumen HTML nanti disimpan dalam file berekstensi .css. Dengan penerapan style secara external pada satu file css kita dapat merubah penampilan dan layout semua halaman website tanpa harus membuka setiap file HTML dan meng-editnya.
Contoh coding CSS adalah sebagai berikut :
h1 { color :blue; font-size:18px; }
- h1 disebut sebagai selector atau tag elemen HTML yang di pilih untuk di format.
- Color merupakan properti CSS
- blue adalah nilai dari properti CSS
- Setiap deklarasi atau statement CSS di buat didalam tanda kurawa { }
- Setiap properti diakhiri dengan tanda titik koma ;
Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser. CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */
1
2
3
| /* comment : membuat heading */h1 { color :blue; font-size:18px; } |
Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus yang disebut class dan id.
selector id digunakan untuk menempatkan style pada element yang unik (catatan penting : pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama) attribut id dari elemen HTML di definisikan dengan tanda pagar #. contoh penggunaanya misalkan kita memiliki sebuah tag HTML sebagai berikut :
1
| <p id="parameter">ini paragraph</p> |
definisi id diatas pada CSS akan ditulis sebagai berikut :
1
2
3
4
5
6
| #parameter { text-align:center; color:red; font-size:12px; font-weight:bold;} |
Apabila selector id ditujukan untuk elemen yang unik, maka selector class digunakan untuk mendefiniskan sebuah grup elemen HTML. Selector class seringkali digunakan untuk memberi gaya pada beberapa elemen HTML. Attribut class dari elemen HTML di definisikan CSS dengan tanda titik .. Contoh penggunaan misalkan kita memiliki beberapa elemen HTML sebagai berikut:
1
2
3
| <h1 class="center">ini paragraph</h1><p class="center">ini paragraph</p> |
Dengan penerapan CSS berikut maka semua text didalam elemen HTML yang memiliki class="center" akan berada di tengah-tengah
1
| .center {text-align:center;} |
Sebuah elemen HTML diperbolehkan memiliki lebih dari satu selector class namun penamaan class tidak boleh di awali angka, cara penerapan class lebih dari satu adalah dipisahkan dengan spasi misalnya
1
| <h1 class="center blue largefont">ini paragraph</h1> |
Semua definisi css di bawah akan diterapkan pada tag HTML diatas
1
2
3
| .center {text-align:center;} .blue {color:blue;}.largefont{ font-size:18px; } |
Cara penulisan selector id dan class selain dengan cara yang saya jelaskan di atas juga bisa ditempatkan didepan nama elemen HTML. berikut merupakan contoh penulisannya
1
2
3
| p.center {text-align:center;} h1.blue {color:blue;}a#largefont{ font-size:18px; } |
Setelah anda mengetahui dasar CSS berikutnya adalah bagaimana Cara penerapan CSS pada dokumen HTML. Ada tiga cara yang bisa dilakukan yaitu dengan cara External style sheet, Internal style sheet dan Inline style. Lebih lanjut lagi dengan cara penerapan CSS silahkan baca artikel saya yang saya ceritakan di awal : Pengertian CSS dan Cara Penerapan CSS pada HTML. di artikel ini juga ada tutorialnya jadi jangan di lewatkan ya :)
By : www.w3function.com
By : www.w3function.com
Ariel dkk Umumkan Nama Baru Peterpan
Hari ini (2/8) boleh dianggap hari yang bersejarah bagi Ariel, Uki, David, Reza, dan Lukman. Sepuluh hari setelah Ariel menghirup udara bebas, band yang terbentuk pada 2003 ini akhirnya mengumumkan nama baru: NOAH.
"Sebuah kekuatan sudah menemukan kami satu persatu dengan cara yang tak bisa diterka siapa pun. Kami akan meneruskan perjalanan," ujar Ariel sebelum dirinya mengumumkan nama baru NOAH di kantor Musica Studio, Jakarta.
NOAH saat menggelar jumpa pers di kantor Musica. (Foto: Yogi Cerdito/Yahoo!)
"Nama NOAH itu sebenarnya sudah ada sejak 2,5 tahun lalu. Prosesnya memusingkan. Nama ini simpel, dan satu warna dengan musik kami."
Ditinjau dari etimologinya, nama NOAH berarti "damai" dan "sang pembuat nyaman". Pada Jumat, 3 Agustus 2012, NOAH akan meluncurkan single pertama "Separuh Aku" di 200 radio seluruh Indonesia tepat pukul 15.08.
"Tanggal 3 bulan 8 jam 3 lewat 8 menit," jelas Ariel.
Ariel mengungkapkan bahwa tak akan ada banyak perubahan dalam tubuh NOAH. "Yang baru hanyalah semangatnya."
Selamat datang NOAH di dunia musik Tanah Air!
"Sebuah kekuatan sudah menemukan kami satu persatu dengan cara yang tak bisa diterka siapa pun. Kami akan meneruskan perjalanan," ujar Ariel sebelum dirinya mengumumkan nama baru NOAH di kantor Musica Studio, Jakarta.
NOAH saat menggelar jumpa pers di kantor Musica. (Foto: Yogi Cerdito/Yahoo!)"Nama NOAH itu sebenarnya sudah ada sejak 2,5 tahun lalu. Prosesnya memusingkan. Nama ini simpel, dan satu warna dengan musik kami."
Ditinjau dari etimologinya, nama NOAH berarti "damai" dan "sang pembuat nyaman". Pada Jumat, 3 Agustus 2012, NOAH akan meluncurkan single pertama "Separuh Aku" di 200 radio seluruh Indonesia tepat pukul 15.08.
"Tanggal 3 bulan 8 jam 3 lewat 8 menit," jelas Ariel.
Ariel mengungkapkan bahwa tak akan ada banyak perubahan dalam tubuh NOAH. "Yang baru hanyalah semangatnya."
Selamat datang NOAH di dunia musik Tanah Air!
***
Bagaimana pendapatmu tentang nama baru band Ariel, dkk? Yuk, diskusi di kolom komentar.
Bagaimana pendapatmu tentang nama baru band Ariel, dkk? Yuk, diskusi di kolom komentar.
Diduga 'Main Sabun', Delapan Pemain Bulutangkis Dunia Terancam Sanksi
Ganda Cina Wang Xiaoli/Yu Yang (REUTERS/Bazuki Muhammad)Federasi Bulutangkis Dunia (Badminton World Federation-BWF) sedang menyelidiki dugaan 'main sabun' yang dilakukan oleh delapan pemain dunia di Olimpiade 2012.
Kedelapan pemain itu terdiri dari dua ganda putri Korea Selatan serta satu ganda putri Cina dan Indonesia. Keempat ganda tersebut akan dihukum karena tidak bermain dengan sungguh-sungguh dan mencederai nilai-nilai sportivitas dalam olahraga.
Kasus ini bermula dari pertandingan laga terakhir penyisihan Grup A cabang bulutangkis nomor ganda putri, Selasa (31/7) atau Rabu (1/8) dinihari WIB, di Wembley Arena. Saat itu ganda putri Cina, Yu Yang/Wang Xiaoli berhadapan dengan ganda putri Korea Selatan, Jung Kyung-eun/Kim Ha-na.
Wang/Yu kalah 14-21, 11-21 dari Jung/Kim. Kekalahan itu diduga disengaja agar Wang/Yu tidak bertemu ganda putri Cina lainnya, Tian Qing/Zhao Yunlei di semi final. Bahkan wasit Thorsten Berg sampai harus turun ke lapangan dan memperingatkan ganda putri Cina tersebut.
Kedua pemain Cina itu terlihat secara sengaja melakukan serve asal-asalan. Shuttlecock mereka juga berulang kali terkena net atau pukulan mereka melebar ke luar lapangan dengan 'mudah'.
Bahkan penonton di Wembley Arena pun tak jarang berteriak 'boo' karena kecewa melihat permainan Wang/Yu, seperti yang diberitakan oleh BBC.co.uk, Rabu (1/8).
Jika Wang/Yu menang dan menjadi juara Grup A maka peluang bertemu Tian/Zhao di semi final sangat besar. Dan skenario All-China Final di nomor ganda putri pun akan kandas.
Pasangan Tian/Zhao menempati peringkat kedua Grup D setelah kalah dari ganda putri Denmark, Christinna Pedersen/Kamilla Rytter-Juhl di laga terakhir.
Kalahnya Wang/Yu berimbas ke pertandingan terakhir Grup C yang mempertemukan Meiliana Jauhari/Greysia Polii (Indonesia) melawan Ha Jung Eun/Kim Min Jung (Korea Selatan).
Pertandingan itu berjalan janggal karena kedua ganda seperti tak mau menang. Mereka sepertinya ingin menghindari Wang/Yu di perempat final. Wasit Thorsten Berg bahkan sampai harus mengeluarkan kartu hitam di laga itu sebagai tanda mendiskualifikasi kedua ganda.
Namun Berg mencabut keputusannya akibat diprotes oleh kedua kubu.
Meiliana/Greysia akhirnya kalah pada laga itu dengan skor 21-18, 14-21, 12-21. Mereka menduduki peringkat dua Grup C dan akan menantang Jung/Kim di perempat final, seperti yang dilansir oleh Detiksport, Rabu (1/8).
Sumber : Yahoo.com
Cara Membuat Related Posts Atau Artikel Terkait Blogspot dengan Gambar berjalan atau slideshow memang agak memberatkan loading kemungkinan namun untuk yang doyan deperti saya yah saya gunakan aja.
ikuti langkah berikut.
Edit your template,
Log in to your blogger dashboardKlick on Design - Edit HTML
and check the Expand Widget Templates.
Cari code:
</head>Ganti Dengan kode ini
<b:if cond='data:blog.pageType == "item"'>Next, Cari kode :
<style type='text/css'>
#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
.tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBC_Vd_CPRhBFUF8tpTJOHCweV12bI_MGK2EsqNvNzndmZMUm8Q1eWft2ygp6faaALUQJU8EvpbsriGLoCRa60Huxds9G2QZ4vSY9Rf05qUIfC0PO-ruYnSU-93wBtC3lmz-XqSyGZyrQ/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBC_Vd_CPRhBFUF8tpTJOHCweV12bI_MGK2EsqNvNzndmZMUm8Q1eWft2ygp6faaALUQJU8EvpbsriGLoCRa60Huxds9G2QZ4vSY9Rf05qUIfC0PO-ruYnSU-93wBtC3lmz-XqSyGZyrQ/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyL0a5JGY8G-PUENUR11rYriGaLgxCYAwqBNwDTxj80UKzv604uH13m_YpTNe6xa2VmWJyPiZQMA0tl2hZGPNV_VNVXVX2QJPlzZiyOyoFYZOVhoz0BVySSTejn0Cn97WmaEG3-9nyywk/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>
</head>
<div class='post-footer-line post-footer-line-1'>atau
<p class='post-footer-line post-footer-line-1'>simpan kode ini dibawah kode tadi
<b:if cond='data:blog.pageType == "item"'>Save your template and you're done. Anda bisa mengganti jumlah postingan maksimal 20 posts, dengan merubah angka merah (10) dan selamat mencoba
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3>Related Posts</h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
