Langsung ke konten utama

Belajar Mengolah Div Style CSS


Bismillaah..
Alhamdulillaah, kembali saya hadir dengan postingan yang pastinya membuat Anda puyeng membacanya, (apalagi saya yang membuat tulisan ini, super duper mumet).


Tapi tidak mengapa, ini postingan sebenarnya saya tujukan buat seorang teman yang meminta saya membuat tutorial tentang css style, dan langsung saja saya beri judul 'Cara Mengolah Css Style', entah nyambung entah tidak, yang terpenting Anda puas sayapun lega, karena hasil ketak-ketik saya barangkali, bermanfaat.
Saya mulai sekarang sobat, kita langsung ke inti 'panduan', tapi saya akan sedikit memberi gambaran sesederhana mungkin tentang apa itu 'css style'.
Setuju atau tidak, saat Anda membuka menu internet pada hp, tablet, hh, pc maupun laptop, Anda akan disuguhi tampilan beraneka-rupa dari situs yang Anda kunjungi misal fb, google, twitter dan lain nya (tak lupa mwb tentunya).

Semua situs tsb punya ciri khas tampilan masing-masing, dan ini dia, tampilan yang berbeda, tentu ada yang mengaturnya, entah warna halaman, teks, dan lain nya.




CSS (kalau tidak salah singkatan dari Cascading Style Sheet, kalau salah mohon dikoreksi) merupakan hal pokok dari sebuah situs manapun, tanpa css, tentu sebuah situs akan kurang menarik, dan pengunjung tentu cepat merasa bosan. Google, situs bermesin pencarian terbesar di dunia (saat ini), pun menggunakan css style (sebut saja template, div) walau tampilan nya amat sederhana, putih dgn teks warna biru.




Kurang lebih maksud saya, css amatlah penting, entah itu buat yang pertama kenal blog, wap, nah kalo fb? hehe tak perlu dibahas, fb sudah menjadi besar dgn gaya nya yang dermawan.




Kata mbah google: 'css merupakan suatu bahasa stylesheet yg digunakan untuk mengatur tampilan sebuah dokumen yg dicetak dalam bahasa markup.

Umumnya css digunakan untuk memformat halaman website yg ditulis dgn HTML, XHTML, XML, SVG, PHP juga XUL, dan tentunya spesifikasi css itu sendiri tak lepas dari pengaturan W3C (World Wide Web Consortium).




Untuk menampilkan fungsi css, biasanya menggunakan program HTML, dari 'div style', 'div class' sampai 'div id'. Div id diawali dgn tanda pagar '#', sedangkan div class diawali dengan tanda titik '.', dan div style langsung berisi value/isi dari div itu sendiri.



Bingung? Saya akan berikan gambaran singkat nya.



-
#content { disini berisi warna bg, gambar bg, warna teks, jenis font teks, border/garis sisi, jarak keluar/margin, jarak kedalam/padding }
Ini namanya div id content, untuk menampilkan fungsinya (untuk mwb, bisa diterapkan pada postingan blog dan juga mengatur menu navigasi) kita gunakan code html:

<div id="content">disini letak Link HTML maupun BBCode</div>


-
.content { isi value }
Dan ini namanya div class content, untuk menampilkan fungsinya, gunakan code berikut:


<div class="content">disini boleh ditulis html atau bbcode link, gambar dan lainnya</div>


-Untuk div style, kita bisa berkreasi secara bebas, baik itu di postingan blog, catatan fb (sudah support beberapa code html), menu navigasi mwb, maupun halaman web manapun.


Saya berikan beberapa contoh pengolahan css style, mulai dari:


1. CSS Style dasar


Hanya warna latar/bg/background dan teks yang termuat:




Tampilan nya akan seperti ini :


teks, link atau gambar



2. Div Style dgn Margin (antara garis border dan bagian luar div) dan Padding (jarak antara isi div misal teks dll ke garis border), Anda boleh mencoba dgn poin pixel pada margin dan padding, makin besar poin pixel, akan semakin jauh jaraknya (penulisan 1 pixel biasanya menggunakan 1px):



Tampilan nya akan seperti ini :
teks, link atau gambar



3. Div Style dgn Gambar Gradient Atas-Bawah (repeat-y)


Untuk membuat suatu div style yg mempunyai efek dua warna berbeda, kita memerlukan gambar gradient, bentuknya yg saya anggap seperti lidi atau jarum, dan ini dia gambarnya:


 - - -

Dengan fungsi repeat-y/ditarik-ulur ke atas-bawah, efek dua warna berbeda akan mempercantik tampilan halaman web yang memakai div style ini:



Tampilan nya akan seperti ini :

teks, link atau gambar



4. Div Style dgn Gambar Gradient Menyamping (repeat-x)


Kali ini saya akan gunakan lidi yang berdiri tegak untuk membuat efek dua warna menyamping:


A

Untuk fungsi repeat-x/ditarik-ulur ke kanan-kiri, efek dua warna yg berbeda akan menambah cantik dan menarik pada tampilan halaman situs manapun yang memakai div style ini:




Tampilan nya akan seperti ini :


teks, link atau gambar



5. Div Style dgn Border


Sepertinya kurang menarik jika tidak diberi garis tepi yang bernama 'border'.


Border terdiri dari beberapa jenis (dashed, dotted, inset, outset, double, silahkan praktekkan sendiri ya untuk mengetahui seperti apa penampilan dari aneka border tsb), dan diatur lewat poin pixel. Makin tinggi nilai poin pixelnya, maka makin tebal bordernya:



Tampilan nya akan seperti ini :

teks, link atau gambar
6. Div Style dgn gambar icon


Untuk mengatur letak gambar icon, silahkan pilih:
'left top' - kiri atas,
'right top' - kanan atas,
'left bottom' - kiri bawah,
'right bottom' - kanan bawah,
atau center seperti contoh ini:


Tampilan nya akan seperti ini :

teks, link atau gambar



7. Div Style dgn Gambar icon full


Jika Anda mau laman yg full icon maka gunakan code ini:

Tampilan nya akan seperti ini :

teks, link atau gambar



Seindah apapun div style yg Anda pakai, ingat, situs web, blog yg Anda kelola mempunyai pengunjung tak terduga, dan jangan sampai dia kapok gara-gara loading blog Anda super duper berat dan lama.



Tinggal Anda tentukan sendiri bagaimana baiknya.

Komentar

Postingan populer dari blog ini

Cara nge-Clone Applikasi Zello Editan (Apk Android)

https://youtu.be/-nK50f6Giuw Apa itu Zello?
Zello merupakan applikasi Android, dan fungsinya adalah untuk berkomikasi antar sesama pengguna applikasi tsb. Dengan aplikasi zello ini, kita bisa berkomunikasi dengan teman-teman, saudara ataupun keluarga dimanapun mereka berada.
Bukan cuma foto dan tulisan saja yang bisa kita kirim via applikasi zello ini, kita juga bisa langsung mengirimkan suara kita saat ini juga dan mereka akan langsung merespon suara kita lewat sebuah tombol bulat besar yang dinamakan PTT. Disamping untuk nge-clone apk Zello, tutorial yang saya suguhkan lewat video diatas juga berlaku untuk apk android lainnya.
Tapi ada beberapa apk yg tidak bisa di clone / digandakan, misalnya WhatsUp, Line, BBM dan apk messanger lain nya. Oke kawan, semoga artikel beserta video ini bermanfaat dan berguna untuk yang sedang mencari cara seperti judul video dan artikel ini. Kurang-lebihnya saya mohon dimaklumi, akhir kata, salam sukses.

Tips Menghemat Paketan Data XL

Bismillaah...




Pertama, saya mau mengucapkan kalimat syukur dan rasa terimakasih yang tak terhingga kepada Allah S.W.T yang telah memberikan apa yang saya mau.
Saya masih bisa membeli paket internet, walau harus memutar-otak agar awet dan selalu aksis sepanjang hari.


Rejeki, Rahmat dan terutama kesehatan yang tentunya merupakan anugrah yang sangat-sangat saya Syukuri.




Kedua saya juga hendak menyampaikan Sholawat dan Salam hormat untuk junjungan kita, Nabi Muhammad S.A.W yang telah membawa kita dari jaman jahiliyyah, menuju jaman yang terang-benderang, bertekhnologi maju dan penuh tantangan pastinya.




Oke sahabat, pada artikel kali ini, saya sekedar berbagi tips irit full hemat, bukan "tips gratis internet" yang banyak dicari orang.
Semuanya kembali ke diri Anda, seberapa mampu Anda membeli paket quota internet.
Seberapa banyak budget yang Anda peruntukkan untuk main internet.
Untuk apa saja Anda pergunakan quota data internet yang Anda miliki?




Smartphone Androidkah yang Anda …

Mengubah Sinyal E ke 3G/4G

Assalamu 'alaikum Wr. Wb.


Setelah hampir setahun lamanya saya tak menulis disini, (kangen dan akibatnya jadi kaku begini bro), saya kini mencoba hadir kembali ke hadapan Anda semua, tentunya masih dengan niat tulus ikhlas karna Allah S.W.T.


Terakhir update, di kisah
Lika Liku Dunia Blog, ternyata hidup ini memang penuh lika-liku, tapi tetap dengan niat awal, "Dunia saya tuk akherat".


Oke bro-sis dimanapun kini Anda berada, pada postingan awal saya di 2017 ini, saya akan berbagi sedikit panduan, tips atau trik tentang bagaimana Merubah Sinyal Internet "E" ke "3G/4G".


Tutorial ini tidak bisa diterapkan disemua type dan merk hp android Anda, melihat dan merasakan dari pengalaman saya saat ganti hp android ataupun ketika mencoba berbagai macam custom room. Jadi silahkan dicoba praktekkan, karna jika gagal tak ada pengaruh apapun.


Saya sertakan juga pada artikel ini, sebuah kisah teladan yg penuh makna, saya dapatkan dari pesan grup Whats App, sayang …