Warning: curl_init() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 95

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 97

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 98

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 100

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 103

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 106

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 333

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 334

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 363

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 370

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 375

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 376

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 377

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 379

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 382

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 150

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 151

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 159

Warning: curl_exec() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 162

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 181

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 182
Membuat kolom paragraf dengan css 3 | Gusdwi.info

Membuat kolom paragraf dengan css 3

kolom paragrafSaya yakin yang membaca Tulisan ini tahu bentuk artikel dalam surat kabar (koran).
Pada umumnya, paragraf dalam suatu artikel di surat kabar dibagi menjadi beberapa kolom, biasanya 3 sampai 4 kolom. Menurut Saya, Tujuannya adalah untuk memudahkan para pembaca melihat semua isi yang ditampilkan dalam sebuah koran.
Jika anda ingin membuat hal yang sama seperti pada surat kabar didalam sebuah halaman website, saya akan memberikan Tips untuk anda.
syaratnya, Anda harus harus mengetahui cara membuat html dan belajar css, dalam hal ini adalah css 3.

Lihatlah tampilan contoh paragraf pada artikel dibawah ini…!
Jika anda tertarik untuk membuatnya, silahkan ambil contoh kode html dan css sintak-nya dibawah ini……..

Membuat Ogoh-ogoh


Sebulan sebelum hari raya NYEPI, biasanya anak muda di Bali mulai sibuk untuk membuat Ogoh ogoh dalam rangka menyambut tahun baru Caka.
Seingat saya, sekitar tahun 1996 saya sudah mulai mengenal cara pembuatan ogoh ogoh, saat itu bahan yang digunakan adalah Bambu sebagai kerangka utama dan kertas pembungkus semen sebagai penutup kerangka, sedangkan kepala dari ogoh ogoh terbuat dari spon atau stereo foam.

Kalau dilihat dari bentuk ogoh ogoh saat itu, kebanyakan berbentuk raksasa dan binatang dan thema nya kurang bervariasi.
Seiring dengan perkembangan jaman, Ogoh ogoh telah ber-Evolusi, baik dari segi material, bentuk dan tema yang dibuat telah mengalami perubahan.
Kalau dulu Bambu sebagai kerangka utama, sekarang berubah menjadi Besi yang di las agar lebih kokoh dan dapat membuat bentuk yang lebih dinamis. Pada saat ogoh ogoh diarak pun sudah mengalami perubahan, sekarang banyak yang memanfaatkan teknologi electronik untuk menciptakan suatu efek yang berkesan lebih hidup, seperti penataan cahaya dan sound-nya.

Nah, dari apa yang saya paparkan tidak bisa dipungkiri lagi bahwa perkembangan jaman telah memberikan inspirasi bagi kita dalam berkreasi, dan jika ini terus berlanjut dari tahun ke tahun akan selalu ada perubahan sesuai jamannya.

Bila saya bayangkan kedepannya nanti, ketika sesuatu bisa didapat dengan mudah, dan melihat kreativitas anak muda di Bali yang tiada henti…

mungkinkah Ogoh ogoh akan seperti robot?

Jika mungkin…, adakah perdebatan publik pro dan kontra ?

Bila ada…, siapakah yang harus disalahkan ?

Caranya adalah sebagai berikut:

  • Pertama, buatlah sebuah dokumen baru pada Notepad, lalu ketikan <div class=”kolom-wrap></div>.
  • Ketik <h1>JUDUL ARTIKEL</h1><hr/>diantara tag <div class=”kolom-wrap></div>.
  • Dibawah tag </hr/>, ketik lagi sebuah tag <div class=”kolom”></div>.
  • Diantara tag <div class=”kolom”></div> adalah isi paragraf dari sebuah artikel yang diawali dengan tag <p> dan ditutup dengan tag </p>.

Contoh kode HTML nya seperti ini:

<div class=”kolom-wrap>
<h1>JUDUL ARTIKEL</h1>
<hr/>
<div class=”kolom”>
<p>Sebulan sebelum hari raya NYEPI,
biasanya anak muda di Bali mulai sibuk untuk membuat Ogoh ogoh dalam rangka menyambut tahun baru Caka.</p>
<p>Seingat saya, sekitar tahun 1996 saya sudah mulai mengenal cara pembuatan ogoh ogoh,
saat itu bahan yang digunakan adalah Bambu sebagai kerangka utama dan kertas pembungkus semen sebagai penutup kerangka,
sedangkan kepala dari ogoh ogoh terbuat dari spon atau stereo foam.</p>
</div>
</div>

Setelah selesai membuat file HTML nya, sekarang kita buat style untuk mengatur tampilan nya agar seperti artikel di surat kabar, dengan menggunakan CSS seperti dibawah ini:

div.kolom-wrap {
border:1px solid #333333;
background: #ccc;
margin:0;
box-shadow: 3px 3px 3px #333333;
-moz-box-shadow: 3px 3px 3px #333333;
-webkit-box-shadow: 3px 3px 3px #333333;}

div.kolom-wrap h1 {
text-align:center;
color:#999999;
text-shadow: 2px 2px 0 #000;}

div.kolom-wrap hr {
border:3px solid #666666;
margin:0 2em;}

div.kolom {
-moz-column-count: 2;
-webkit-column-count: 2;
padding:5px 10px 0 10px;}

Langkah selanjutnya adalah melakukan test pada Browser anda…!
Catatan: Tampilan ini hanya berlaku pada Browser Mozilla versi 3.5.3 ke-atas, Google Chrome, Safari versi terbaru. Tidak berlaku untuk Intrenet Explorer.

2 thoughts on “Membuat kolom paragraf dengan css 3

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *