Pengertian Padding,Margin dan Border pada CSS
Bagi rekan blogger yang suka otak-atik template blognya (tidak hanya di template blog seeh), pasti sering kali melihat kata-kata dan istilah Padding, Margin Dan Border pada CSS yang digunakan sebagai pengukuran dasar pada CSS.. Nah pada pertemuan ini saya akan memberikan sedikit pengertian dari ketiga Hal tersebut dan juga gunanya..
Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar dibawah ini dulu :
Nah dari keterangan diatas kita dapat menyimpulkan seperti dibawah
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Cara Penggunaan
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai
Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas
Satuan Dalam CSS
1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Apa itu CSS & Konsep Dasar CSS
Apa itu CSS?
CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.
Dulu, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table
Desain dengan tabel :
1. Buat desainnya. menggunakan .psd ( photoshop ) atau .cdr ( coreldraw )
2. buat tabelnya. menggunakana tag <table>,
3. potong – potong desain sesuai dengan kolom pada tabel, lalu “selipkan” desain pada kolom tabel menggunakan sebagai elemen image tabel atau background.
Dengan CSS, cara kerja ini dirubah. Anda membuat halaman HTML, lalu anda berikan identitas pada bagian2 tertentu dengan tag <div> baik itu menggunakan atribut id <div id=”"> atau class <div class=”">. Lalu anda buat satu file css, bisa di selipkan pada bagian <head> atau dalam file berbeda dan di hubungkan dengan tag <link rel=”stylesheet” type=”text/css” href=”">. File CSS tadi memberikan nilai dan definisi pada bagian tertentu dari halaman html tadi yang diberikan identitas melalu tag <div>.
Panduan istilah dalam teknologi internet
Panduan istilah dalam teknologi kabel internet
ABR Available Bit Rate
ADSL Asymmetric Digital Subscriber Line
ATM Asynchronous Transfer Mode
BPSK Bi-Phase Shift Keying
BRI Basic Rate Interface ISDN
CAP Carrierless Amplitude Phase Modulation
CATV Cable TV
CBR Constant Bit Rate
CO Central Office
COLS Commercial Online Service
CSMA/CD Carrier Sense Multiple Access/Collision Detection
CSR Customer Service Representative
DAVIC Digital Audio Video Council
dB Decibel
DBS Direct Broadcast Satellite
DES Data Encryption Standard
DHCP Dynamic Host Configuration Protocol
DMT Discrete Multitone
DOSCIS Data Over Cable Service Interface Specification
DSL Digital Subscriber Line
DVB Digital Video Broadcast
FAQ Frequently Asked Question
FDDI Fiber Data Distribution Interface
FEC Forward Error Correction
FSK Frequency Shift Key
FTTC Fiber-to-the-Curb
HDSL High bit-rate Digital Subscriber Line
HFC Hybrid Fiber/Coaxial
HSCDS High-Speed Cable Data Service
HTML Hypertext Markup Language
HTTP Hypertext Transmission Protocol
IDSL ISDN Digital Subscriber Line
IEEE The Institute of Electronic and Electrical Engineering
IETF Internet Engineering Task Force
IGMP Internet Group Management Protocol
INMS Integrated Network Management System
IP Internet Protocol
IPCDN IP Over Cable Data Network working group of the IETF
IRC Inter Relay Chat
ISDN Integrated Services Digital Network
ISO International Organization for Standardization
ISP Internet Service Provider
ITFS Instructional Television Fixed Service
ITU International Telecommunications Union
KB Kilobyte
LAN Local Area Network
LEC Local Exchange Carrier
LMDS Local Multipoint Distribution Service
MAC Media Access Control (layer of OSI Reference Model)
MB Megabyte
Mbps Megabits per second
MCNS Multimedia Cable Network System Partners Ltd.
MDS Multichannel Multipoint Distribution Service
MHz Megahertz
MMDS Multichannel Multipoint Distribution Service
MSO Multiple System Operator
NAP Network Access Point
NOC Network Operations Center
NTSC National Television Standards Committee
OFDM Orthogonal Frequency Division Multiplexing
OSI Open System Interconnect (Reference Model for networking protocols)
OSS Operations Support Systems
PC Personal Computer
PHY Physical (layer of OSI Reference Model)
POTS Plain Old Telephone Service
PPP Point-to-Point Protocol
PRI Primary Rate Interface ISDN
PSTN Public Switched Telephone Network
QAM Quadrature Amplitude Modulation
QOS Quality of Service
QPSK Quaternary Phase Shift Keying
RAM Random Access Memory
RDC Regional Data Center
RF Radio Frequency
RFP Request for Proposals
RSVP Resource Reservation Protocol
RTP Real-Time Transport Protocol
S-CDMA Synchronous Code Division Multiple Access
S-HDSL Single-pair High bit-rate Digital Subscriber Line
SDSL Symmetric Digital Subscriber Line
SMTP Simple Mail Transfer Protocol
SNMP Simple Network Management Protocol
SONET Synchronous Optical Network
TCP/IP Transmission Control Protocol/Internet Protocol
TDMA Time Division Multiple Access
TVRO TV Receive Only
VC/MTM Variable Constellation/Multi-Tone Modulation
VDSL Very high bit-rate Digital Subscriber Line
WAN Wide Area Network
WCS Wireless Communications Service
Cara Membuat CSS3 Animated Image Enlarge
1. Login : Login to BloGGeR (login ke BloGGeR)
2. Dasboard : Setelah masuk di halaman ini, cari dan KLIK link "Design".
3. Beberapa saat kemudian kita akan melihat halaman baru iaitu "Page Element (Element Laman)". KLIK "Edit HTML".
4. Kita akan melihat kode HTML penyusun blog. Disinilah kode CSS baru akan kita tambahkan. Cari kode ]]></b:skin>
5. Copy dan pastekan kode CSS Box Posting Kode HTML dg Animasi-1 tepat di atas kode tersebut seperti yang terlihat di bawah ini:
.GRenlarge{list-style-type: none;margin: 0;padding: 0;}
.GRenlarge li, .GRenlarge li.anim1, .GRenlarge li.anim2, .GRenlarge li.anim3 {display: inline;
width: 110px;}
.GRenlarge li img, .GRenlarge li.anim1 img, .GRenlarge li.anim2 img, .GRenlarge li.anim3 img {
width: 100px; float: left;
border: 4px solid #996600;
margin: 5px;
opacity: 0.6;
background: #888;
padding: 2px;
z-index: 100;
cursor: pointer;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
-moz-box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
-webkit-box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
}
.GRenlarge li img:hover {
-moz-transform: scale(2.8);
-webkit-transform: scale(2.8);
-o-transform: scale(2.8);
opacity: 1.0;
background: #999;
border-color: #fff;
}
.GRenlarge li.anim1 img:hover {
-moz-transform: scale(2.8) rotate(720deg);
-webkit-transform: scale(2.8) rotate(720deg);
-o-transform: scale(2.8) rotate(720deg);
}
.GRenlarge li.anim2 img:hover {
-moz-transform: scale(2.8) rotate(0deg) translate(50px);
-webkit-transform: scale(2.8) rotate(0deg) translate(50px);
-o-transform: scale(2.8) rotate(0deg) translate(50px);
}
.GRenlarge li.anim3 img:hover {
-moz-transform: scale(2.5) rotate(30deg) translate(50px);
-webkit-transform: scale(2.5) rotate(30deg) translate(50px);
-o-transform: scale(2.5) rotate(30deg) translate(50px);
}
6. KLIK Simpan (SAVE) Template.
Untuk posting kode HTML caranya sangat sederhana sekali. Tuliskan seperti yang terlihat di bawah ini ketika posting kode HTML dilakukan.
<ul class="GRenlarge">
<li><img src="http://www.tipsexam.com/myimages/merdeka_greet3.gif" /></li>
</ul>
7. Tukarkan url imej (yg berwarna merah) dengan url anda.
8. Macam mana? Tahniah menjadi juga akhirnya
Hidden Shoutmix Di Blog Tutorial
Dari sekian banyak tutorial tentang cara menaruh letak Shoutmix di halaman Template Blog yang saya sukai adalah yg tersembunyi, yaitu ketika tombol Buku Tamu di Klik maka akan keluar widget shoutmix dari sisi kiri maupun dari sisi kanan halaman blog.
Adapun contoh Codenya bisa tinggal di copy paste di halaman Page Element - Add Gadget dengan sedikit mengubah dan menambahkan Code shoutmix caranya yaitu :
1. Klik add Gadget di halaman account Blogger anda, kemudian pilih add "HTML/JavaScript"e
2. Copy Code berikut
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlA9c3HjFoJ2AQOqMH01luwn0xW12tYpIf_rfHQ7H_4MzB_J6HiPn6yY_NqQXaQo-Dxk921_YSvUtkdvG37Fm0U06kpB7Ryphz1zscFDxxWCT5bMo4CKFk4fMps9MMorSw3N3A_qXTIl_/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
<br/>
<a href="http://skjs2u.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
-
Copy code below, insert into your blogAds
