July 2015

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha4qUpV3EM_AXmQibmohC4lJL07Hg2PHXJrrSMBmC06okjXruyWhVTvle3Zil7xitL58N-2PAFTI2ea2UvO7xqDEVD23C4aK7ENtzeE6ogv4tPFyzVzUJ5g7n8OEbI7Tc86IagMnzkcYeb/s1600/images+(2).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha4qUpV3EM_AXmQibmohC4lJL07Hg2PHXJrrSMBmC06okjXruyWhVTvle3Zil7xitL58N-2PAFTI2ea2UvO7xqDEVD23C4aK7ENtzeE6ogv4tPFyzVzUJ5g7n8OEbI7Tc86IagMnzkcYeb/s1600/images+(2).jpg" title="Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog" /></a></div>
<br />
<span style="background-color: white;"><b style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">Cara Membuat/Menampilkan Jam, Hari & Tanggal dengan Javascript</b><span style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;"> - Jam, Hari dan Tanggal (Waktu) tidak lepas dari kehidupan, Pada kesempatan</span></span><span style="background-color: white; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;"> kali ini saya ingin berbagi pengetahuan tentang "</span><b style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">Bagaimana Cara Membuat/Menampilkan Jam dan Tanggal dan Hari dengan JavasScript</b><span style="background-color: white; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">" ..</span><br />
<br />
<span style="background-color: white; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; line-height: 23.09375px;"><b><i><span style="font-size: large;">CEKIDOT......</span></i></b></span><br />
<div style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;"> <br />
Berikut Pilihan Javascript untuk Menampilkan Jam / Tanggal / Hari , sesuai dengan kebutuhan sobat : </span></div>
<h2 style="border-top-color: rgb(51, 51, 51); border-top-style: dashed; border-top-width: 1px; color: #222222; font-family: Coda, cursive; font-size: 20px; line-height: 1.2em; margin: 0em 0px 0px; padding-top: 10px;">
<span style="background-color: white;">Cara Menampilkan Tanggal dengan Javascript :</span></h2>
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;">
<span class="tag"><<span class="title" style="font-weight: bold;">script</span> <span class="attribute">type</span>=<span class="value" style="color: #880000;">'text/javascript'</span>></span><span class="javascript" style="opacity: 0.5;">
</span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">

</script></div>
</center>
<span style="background-color: white;"><br style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" /></span> <br />
<h2 style="border-top-color: rgb(51, 51, 51); border-top-style: dashed; border-top-width: 1px; color: #222222; font-family: Coda, cursive; font-size: 20px; line-height: 1.2em; margin: 0em 0px 0px; padding-top: 10px;">
<span style="background-color: white;">Cara Menampilkan Hari dan Tanggal dengan Javascript :</span></h2>
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;"><span class="tag"><<span class="title" style="font-weight: bold;">script</span> <span class="attribute">type</span>=<span class="value" style="color: #880000;">'text/javascript'</span>></span><span class="javascript" style="opacity: 0.5;">
</span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">

</script></div>
</center>
<br style="background-color: #fbfbfb; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" />
<h2 style="background-color: #fbfbfb; border-top-color: rgb(51, 51, 51); border-top-style: dashed; border-top-width: 1px; color: #222222; font-family: Coda, cursive; font-size: 20px; line-height: 1.2em; margin: 0em 0px 0px; padding-top: 10px;">
Cara Menampilkan Jam saat ini! dengan Javascript ( <span style="color: #990000;">Pasif </span>) :</h2>
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;"><span class="tag"><<span class="title" style="font-weight: bold;">script</span> <span class="attribute">type</span>=<span class="value" style="color: #880000;">"text/javascript"</span>></span><span class="javascript" style="opacity: 0.5;">
</span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">

</script></div>
</center>
<span style="background-color: white;"><br style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" /><span style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">Dengan Format AM/PM : </span></span><br />
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;">
<span class="tag"><<span class="title" style="font-weight: bold;">script</span> <span class="attribute">type</span>=<span class="value" style="color: #880000;">"text/javascript"</span>></span><span class="javascript" style="opacity: 0.5;">
<!--
<span class="keyword" style="font-weight: bold;">var</span> a_p = <span class="string" style="color: #880000;">""</span>;
<span class="keyword" style="font-weight: bold;">var</span> d = <span class="keyword" style="font-weight: bold;">new</span> Date();
<span class="keyword" style="font-weight: bold;">var</span> curr_hour = d.getHours();
<span class="keyword" style="font-weight: bold;">if</span> (curr_hour < <span class="number" style="color: #008800;">12</span>) {
    a_p = <span class="string" style="color: #880000;">"AM"</span>;
} <span class="keyword" style="font-weight: bold;">else</span> {
    a_p = <span class="string" style="color: #880000;">"PM"</span>;
}
<span class="keyword" style="font-weight: bold;">if</span> (curr_hour == <span class="number" style="color: #008800;">0</span>) {
    curr_hour = <span class="number" style="color: #008800;">12</span>;
}
<span class="keyword" style="font-weight: bold;">if</span> (curr_hour > <span class="number" style="color: #008800;">12</span>) {
    curr_hour = curr_hour - <span class="number" style="color: #008800;">12</span>;
}

<span class="keyword" style="font-weight: bold;">var</span> curr_min = d.getMinutes();
curr_min = curr_min + <span class="string" style="color: #880000;">""</span>;
<span class="keyword" style="font-weight: bold;">if</span> (curr_min.length == <span class="number" style="color: #008800;">1</span>) {
    curr_min = <span class="string" style="color: #880000;">"0"</span> + curr_min;
}
document.write(curr_hour + <span class="string" style="color: #880000;">" : "</span> + curr_min + <span class="string" style="color: #880000;">" "</span> + a_p);
<span class="comment" style="color: #888888;">//--></span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span>
</code></pre>
</blockquote>
<br style="background-color: #fbfbfb; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" />
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12) {
    a_p = "AM";
} else {
    a_p = "PM";
}
if (curr_hour == 0) {
    curr_hour = 12;
}
if (curr_hour > 12) {
    curr_hour = curr_hour - 12;
}

<span class="function"><span class="keyword" style="font-weight: bold;">function</span> <span class="title" style="color: #880000; font-weight: bold;">checkTime</span><span class="params">(i)</span> {</span>
    <span class="keyword" style="font-weight: bold;">if</span> (i < <span class="number" style="color: #008800;">10</span>) {
        i = <span class="string" style="color: #880000;">"0"</span> + i;
    }
    <span class="keyword" style="font-weight: bold;">return</span> i;
}
setInterval(showTime, <span class="number" style="color: #008800;">500</span>);
<span class="comment" style="color: #888888;">//--></span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<div id="clock">
<div id="clock">
</div>
<script type="text/javascript">
<!--
function showTime() {
    var a_p = "";
    var today = new Date();
    var curr_hour = today.getHours();
    var curr_minute = today.getMinutes();
    var curr_second = today.getSeconds();
    if (curr_hour < 12) {
        a_p = "AM";
    } else {
        a_p = "PM";
    }
    if (curr_hour == 0) {
        curr_hour = 12;
    }
    if (curr_hour > 12) {
        curr_hour = curr_hour - 12;
    }
    curr_hour = checkTime(curr_hour);
    curr_minute = checkTime(curr_minute);
    curr_second = checkTime(curr_second);
 document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
    }

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
setInterval(showTime, 500);
//-->
</script></div>
</div>
</center>
<br style="background-color: #fbfbfb; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" />
<span style="background-color: white; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">Silahkan berikan komentar jika ada pertanyaan :)</span></div>

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

Cara Membuat/Menampilkan Jam, Hari & Tanggal dengan Javascript - Jam, Hari dan Tanggal (Waktu) tidak lepas dari kehidupan, Pada kesempatan kali ini s…

Jul 11, 2015 +

Penjelasan Margin, Padding, Border dalam CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiEyW-2vM9cOGW8iw5BBbraWXQAHNQozJJ_sFG6BIVULSy5MmdYaPgcLHMc3x_Rciwsjtas0dPejugIIYTGzhcL7dEXpps43MAZiPtlIGviVDv07tfO9nJK5Kfy7Iz1NpOP8cx4YFURyM/s1600/css-web-design.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Penjelasan Margin, Padding, Border dalam CSS " border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiEyW-2vM9cOGW8iw5BBbraWXQAHNQozJJ_sFG6BIVULSy5MmdYaPgcLHMc3x_Rciwsjtas0dPejugIIYTGzhcL7dEXpps43MAZiPtlIGviVDv07tfO9nJK5Kfy7Iz1NpOP8cx4YFURyM/s640/css-web-design.jpg" title="css" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><h1 class="post-title entry-title">
<span style="font-size: x-small;">Penjelasan Margin, Padding, Border dalam CSS
</span></h1>
</td></tr>
</tbody></table>
<br />
Topik kali ini mengenai CSS "<b>Pengertian Margin, Padding, dan Border</b>".
 tentu bagi CSS developer yang sudah berpengalaman ini topik yang sangat
 sederhana. Tapi saya pikir juga tidak ada salahnya sharing topik CSS basic
 ini, arti dan penyajian elemen dengan menggunakan kode CSS untuk 
margin, padding serta border property.
<br />
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<br />
Dengan <b>memahami margin, padding, border</b> dan cara menerapkan 
dengan CSS, akan memberi kesempatan bagi pemula, untuk 
bereksperimen sendiri dengan menentukan dan mengatur sifat dan nilai 
property. Ini sering dijumpai pada penerapan css style pada template, 
.body {..},.sidebar {...},. container {...}, css widget, pengaturan 
posisi dan jarak (space) antara sidebar, penerapan pada pargaraf 
posting, pada h1, h2.....dst.</div>
<h4>
Apa Margin itu?</h4>
<div style="text-align: justify;">
<b>Margin</b> (dalam pengertian CSS) adalah ruang disekitar 
elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan 
horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka 
elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar 
margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float 
atau diposisikan relative. Style ini sering diterapkan untuk dapat 
memindahkan elemen lain di sekitarnya.</div>
<div style="text-align: justify;">
Secara visual akan lebih mudah memahami definisi dari margin ini :</div>
<div style="text-align: justify;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3fhHNcReaD__uRMcidsmPpUO78MuLGpPOIv6EcIRwXHKXWw-eF9Ow_Z7hhqHh6VrxVYtYtBQ62Y8hQ_exrleQM8cjs8423xFQdPOj0NpY8zq3JCUj1CzsDHXQzMFfEwR0rjHMUHOrIVje/s1600/padding-margin.png" style="margin-left: auto; margin-right: auto;"><img border="0" height="604" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3fhHNcReaD__uRMcidsmPpUO78MuLGpPOIv6EcIRwXHKXWw-eF9Ow_Z7hhqHh6VrxVYtYtBQ62Y8hQ_exrleQM8cjs8423xFQdPOj0NpY8zq3JCUj1CzsDHXQzMFfEwR0rjHMUHOrIVje/s640/padding-margin.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">visualisasi pengertian margin</td></tr>
</tbody></table>
<div style="text-align: justify;">
</div>
Margin dapat diatur menggunakan properti margin "shorthand" (yaitu 
istilah, yang mewakili empat nilai marjin untuk elemen) atau dengan 
penulisan stye "longhand". Untuk itu dibawah saya beri contoh beberapa 
penulisan margin dalam css.<br />
<br />
Contoh penulisan margin pada suatu elemen ("shorthand")<br />
<br />
<pre><span style="color: #666666;">#element</span> { margin: <span style="color: blue;">10px;</span>}</pre>
<br />
Ini berarti elemen memilki margin yang sama "<span style="color: blue;">10px" </span>untuk setiap sisi elemen<br />
<br />
<pre><span style="color: #666666;">#element</span> { margin: <span style="color: blue;">10px</span> <span style="color: red;">20px</span>; }</pre>
<br />
Ini berarti elemen memiliki:<br />
-margin-top, margin-bottom : "<span style="color: blue;">10px</span>"<br />
-margin-left, margin-right : "<span style="color: red;">20px</span>"<br />
<br />
<pre><span style="color: #666666;">#element</span> { margin: <span style="color: blue;">10px</span> <span style="color: red;">20px</span> <span style="color: blue;">5px</span> <span style="color: red;">15px</span>; }</pre>
<br />
Elemen ini memiliki -margin-top : <span style="color: blue;">10px</span>, margin-right: <span style="color: red;">20px</span>,  margin-bottom :<span style="color: blue;"> 5px</span>, margin-left: <span style="color: red;">15px</span><br />
<br />
Berikut penulisan margin style "longhand":<br />
<pre><span style="color: #666666;">#element</span> { margin-top: 10px; margin-right: 5px; margin-bottom: 5px; margin-left: 10px;}</pre>
<br />
<h4>
Apa Padding itu?</h4>
<div style="text-align: justify;">
Jadi bagaimana dengan padding? Nah, <b>padding</b> adalah ruang 
horizontal dan vertikal yang diatur di sekitar area isi/konten dari 
elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di 
luar.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Padding juga dapat dipahami sebagai "filling". Karena  padding tidak 
mempengaruhi jarak dari elemen ke elemen lainnya tetapi hanya 
mendefinisikan jarak inner antara tepi/border dan isi dari elemen. 
(lihat visual dibawah)</div>
<div style="text-align: justify;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJR3GCiTnsEhPGUqFhXSAKTLBlEm3JYM41WXW39nG6cjNqNAcyJ94d5vDTIfuX46vOPAHE32QjudmAha7_hURI6C3gb7vv7v9nQ8vwJoDS6omZUGLYk51egE2TacP2kPbau9HJTXBjEMS/s1600/padding.png" style="margin-left: auto; margin-right: auto;"><img border="0" height="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJR3GCiTnsEhPGUqFhXSAKTLBlEm3JYM41WXW39nG6cjNqNAcyJ94d5vDTIfuX46vOPAHE32QjudmAha7_hURI6C3gb7vv7v9nQ8vwJoDS6omZUGLYk51egE2TacP2kPbau9HJTXBjEMS/s640/padding.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">visual definisi padding</td></tr>
</tbody></table>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<div style="text-align: justify;">
Dari gambar diatas dapat diartikan padding adalah ruang yang diatur 
antara border/tepi dengan isi / konten dari suatu elemen (dalam hal ini 
isi konten berupa text).</div>
<div style="text-align: justify;">
Serupa dengan margin, padding juga diatur menggunakan properti 
padding "shorthand"  dan juga dapat dilakukan dengan properti 
padding "longhand":<span style="color: #4d4d4d; font-family: Georgia, serif; font-size: 18px; line-height: 28.149999618530273px;"> </span>padding-top, padding-right, padding-bottom, dan padding-left.</div>
<br />
<b>Contoh :
</b><br />
<pre><span style="color: #666666;">#element</span> { padding: <span style="color: red;">10px</span>; }<span style="color: #38761d;">/*padding untuk semua sisi sama 10px*/</span>
<span style="color: #666666;">#element</span> { padding: <span style="color: red;">5px</span> <span style="color: blue;">10px</span> <span style="color: red;">2px</span> <span style="color: blue;">4px</span>; }<span style="color: #38761d;">/*padding: Top, Right, Bottom, Left*/</span> </pre>
<br />
<pre><span style="color: #666666;">#element</span> { padding-top: 10px; padding-right: 5px; padding-bottom: 5px; padding-left: 10px;} </pre>
<br />
<br />
<div style="text-align: justify;">
Pengertian dari properti padding sama dengan  margin, cuma kalau padding bersifat <span class="bdv_cx" id="bdvrplc0" style="color: #1e6ec1; cursor: pointer; text-decoration: underline;">inside</span>
 space dari suatu elemen yang diatur disekitar area konten. Penerapannya
 padding sering dijumpai  hampir disemua elemen, sebagai contoh 
pengggunaan padding pada heading (h1, h2, h3....) di postingan.</div>
<br />
<b>Contoh :
</b><br />
<pre>h1 { background: yellow;
padding: 20px 20px 20px 80px;}

h2 { background: orange;
padding-left:120px;}</pre>
<br />
Hasilnya pada postingan Anda akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJziYjGNGWs4ZDFrSv7oeyTDFFLqk8je_PN8H8tkv-lROPG6XDAG5MuWSwBUAuCMADr4pF8hUdbIUCqj8xeVX19LjUSpzDxhqU6tspcktXoJoI0oWrRZ1kHUH1iCW6i4XYKWLq8XA1WU1H/s1600/new-2.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="heading dan padding" border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJziYjGNGWs4ZDFrSv7oeyTDFFLqk8je_PN8H8tkv-lROPG6XDAG5MuWSwBUAuCMADr4pF8hUdbIUCqj8xeVX19LjUSpzDxhqU6tspcktXoJoI0oWrRZ1kHUH1iCW6i4XYKWLq8XA1WU1H/s640/new-2.gif" title="heading dan padding" width="640" /></a></div>
<h4>
Apa arti Border?</h4>
<b>Border/garis </b>tepi dapat digunakan untuk banyak hal, misalnya 
sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua
 hal. Border properti mendefinisikan  width, color, and style dari batas
 area pada box/kotak.<br />
<br />
CSS memberi Anda pilihan dalam menggunakan border antara lain :<br />
<ul>
<li>border-style</li>
<li>border-width</li>
<li>border-color</li>
<li>border-individual</li>
</ul>
<b>Border Style</b><br />
<div style="text-align: justify;">
Properti border-style untuk menentukan bentuk (style) dari tampilan border.</div>
<div style="text-align: justify;">
Tak satu pun dari properti border memiliki efek APAPUN kecuali telah menempatkan properti border-style dahulu!</div>
</div>
<div style="text-align: justify;">
Ada 9 type border-style values yang umum digunakan dalam CSS :</div>
<div style="text-align: justify;">
<br />
<b>1. None </b>: mendefinisikan tidak ada border<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7zzGflE51M6bHgCbtwGnMNHsciq3utLoF47NNPgtyfiKnqhyYwnlrvJnVcmn2D9yhv3CFnwkgYxis48jq4tYSmyHnBSeyEUJ9Dl-C0BZLIDZR4cY4-RKIxjOcXKg3qF3xVq1uQ_dvr-V/s1600/new-4.gif"><img alt="border style" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7zzGflE51M6bHgCbtwGnMNHsciq3utLoF47NNPgtyfiKnqhyYwnlrvJnVcmn2D9yhv3CFnwkgYxis48jq4tYSmyHnBSeyEUJ9Dl-C0BZLIDZR4cY4-RKIxjOcXKg3qF3xVq1uQ_dvr-V/s1600/new-4.gif" title="none" /></a><br />
<b>2. Dotted</b> : berarti border berupa dot (titik)<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYk2yWX5BY-g4QAaGYbMVvqyk0EpI9dKCKJQ72sH82yK52GCQVv2KGatAh6MCrN18PJshSdSS9Kpc1WoqPEbxAXTBJH8RybRbr0HcnYb0kSOuEv5TG6n1kmdp9BsdFanb5j73AlRPGFDa1/s1600/new-5.gif"><img alt="Dotted" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYk2yWX5BY-g4QAaGYbMVvqyk0EpI9dKCKJQ72sH82yK52GCQVv2KGatAh6MCrN18PJshSdSS9Kpc1WoqPEbxAXTBJH8RybRbr0HcnYb0kSOuEv5TG6n1kmdp9BsdFanb5j73AlRPGFDa1/s1600/new-5.gif" title="Dotted" /></a><br />
<b>3. Dashed</b> : border berupa dashed (garis putus-putus)<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9MQ0Uvp9BzEg1Ffja-2gXGMSZBQ_ET4euUnvZNTNMCSeWhR4rTUA6wzDoY9UxTrWjekvHpxldHOY6f_B5jTcqvnekxlX7TDXzmzMZcmp2OWfc2xpUCcLH8Iozamjn7xvk2depOW_fahxQ/s1600/new-3.gif"><img alt="Dashed" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9MQ0Uvp9BzEg1Ffja-2gXGMSZBQ_ET4euUnvZNTNMCSeWhR4rTUA6wzDoY9UxTrWjekvHpxldHOY6f_B5jTcqvnekxlX7TDXzmzMZcmp2OWfc2xpUCcLH8Iozamjn7xvk2depOW_fahxQ/s1600/new-3.gif" title="Dashed" /></a><br />
<div>
<b>4. Solid</b> : border yang solid<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlvYmfktG9xsg2QVQOpTRpv-67bvloQTQzm4l5YyDnVavDh4l4t6RMYQYDDWCERmO3M_4vSVbgEOqZsESNmsqw47vCIsZu5OetaC3aemMVACyGgS6nZ0XZo4ioUCKZUniUjDkSnaeJJIB/s1600/new-6.gif"><img alt="Solid " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlvYmfktG9xsg2QVQOpTRpv-67bvloQTQzm4l5YyDnVavDh4l4t6RMYQYDDWCERmO3M_4vSVbgEOqZsESNmsqw47vCIsZu5OetaC3aemMVACyGgS6nZ0XZo4ioUCKZUniUjDkSnaeJJIB/s1600/new-6.gif" title="Solid " /></a><br />
<b>5. Double</b> : mendefinisikan double border. Lebar double border adalah sama dengan nilai border-width<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCStnSBPeUNVVSuTWG3p3iuXQlUczSyWEKDdOLD7ZlAsTbxdYuuX4jrb2Dzc7XemWJyBKE47nscmjkxKjZh508s8UaYGOgXlAL-k0Df6eeVMViG9qlWKaUpRSglWD31BnOe_-hW5ljZl_h/s1600/new-7.gif"><img alt=" Double" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCStnSBPeUNVVSuTWG3p3iuXQlUczSyWEKDdOLD7ZlAsTbxdYuuX4jrb2Dzc7XemWJyBKE47nscmjkxKjZh508s8UaYGOgXlAL-k0Df6eeVMViG9qlWKaUpRSglWD31BnOe_-hW5ljZl_h/s1600/new-7.gif" title=" Double" /></a><br />
<b>6. Groove </b>: mendefinisikan sebuah border groove (beralur) 3D. Efeknya tergantung pada nilai border-color<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCcWWtkDT8oEuIaYcEY__kFDFoFKzlbTMPGHv1BQi264OGH2w3rvtkKojG5Syn4_4I0UWcW9yz7DPkHKI9Yh0ryDIVUrtXEAzho2TqBoMpv5mnar7NRS7Xu_eYjPygqYEadlPEzKL7Ruq9/s1600/new-8.gif"><img alt="Groove" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCcWWtkDT8oEuIaYcEY__kFDFoFKzlbTMPGHv1BQi264OGH2w3rvtkKojG5Syn4_4I0UWcW9yz7DPkHKI9Yh0ryDIVUrtXEAzho2TqBoMpv5mnar7NRS7Xu_eYjPygqYEadlPEzKL7Ruq9/s1600/new-8.gif" title="Groove" /></a><br />
<b>7.</b> <b>Ridge</b>: mendefinisikan sebuah border bergerigi (ridge) 3D. Efeknya tergantung pada nilai border-color<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcldsDC4X7Oa6hQ8dswOGl6DskankeTZX-n8iL0UOEWYrpesb5vxIwkw7yUTZQaJl5OkkV52JrujLNsSpubj8NUq4yddKFbvyXUx6a6o3wV-R-WVO4yWv_MWa8UeFLzjP7LMvSNGTkPl2/s1600/new-9.gif"><img alt=" Ridge" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcldsDC4X7Oa6hQ8dswOGl6DskankeTZX-n8iL0UOEWYrpesb5vxIwkw7yUTZQaJl5OkkV52JrujLNsSpubj8NUq4yddKFbvyXUx6a6o3wV-R-WVO4yWv_MWa8UeFLzjP7LMvSNGTkPl2/s1600/new-9.gif" title=" Ridge" /></a><br />
<b>8. Inset</b>: mendefinisikan sebuah border inset 3D. Efeknya tergantung pada nilai border-color<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyShLRdSrVAlY7rd1YSQ2Z2DYugPF16MdFamTiWB-Qq2e9YW2Mm4vqQpw3O8Ndwv_49jyYXwBCxyOCoBFYwmzaaWmOvvYBpdtTgj26fyJC2bJzXKbQMT27ou7XV_2ww3RsfCgjV5dNtPj/s1600/new-10.gif"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyShLRdSrVAlY7rd1YSQ2Z2DYugPF16MdFamTiWB-Qq2e9YW2Mm4vqQpw3O8Ndwv_49jyYXwBCxyOCoBFYwmzaaWmOvvYBpdtTgj26fyJC2bJzXKbQMT27ou7XV_2ww3RsfCgjV5dNtPj/s1600/new-10.gif" /></a></div>
<b>9.</b> <b>Outset</b> : mendefinisikan sebuah border outset 3D. Efeknya tergantung pada nilai border-color<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2Fj1HqWS_4fDTeSdbaFiWy2UVxjKkoyzRnxiyiO-ViSlIpUsEGIHEW5Fn2M9fZQopPZ6L8kgCWaQRhnD1K1xOjWsWGPnVvB9szZcVemal5qZ42SWMLhUoaTJPW6XYaU6udCkZa9KpAn4/s1600/new-11.gif"><img alt="Outset" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2Fj1HqWS_4fDTeSdbaFiWy2UVxjKkoyzRnxiyiO-ViSlIpUsEGIHEW5Fn2M9fZQopPZ6L8kgCWaQRhnD1K1xOjWsWGPnVvB9szZcVemal5qZ42SWMLhUoaTJPW6XYaU6udCkZa9KpAn4/s1600/new-11.gif" title="Outset" /></a><br />
<br />
<b>Border Width</b><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
Properti border-width digunakan untuk mengatur lebar border/garis tepi.

Border diatur dalam <span class="bdv_cx" id="bdvrplc0" style="color: #1e6ec1; cursor: pointer; text-decoration: underline;">pixel</span>, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan : thin, medium, dan thick.
</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv36akTE3QH2NHLKNm9lPeOYuE7UZD6kw3z4d81Ed-PU65-lKbbEg21zddIsCO9y3ZzLFjKsyv_p7NKVuWVUzjwkknHQs83tkZEm035hDdxUj8B5INkxN4mv3caVaIqy9yozIeUqkOATTg/s1600/figure012+%25281%2529.gif" style="margin-left: auto; margin-right: auto;"><img alt="Border Width" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv36akTE3QH2NHLKNm9lPeOYuE7UZD6kw3z4d81Ed-PU65-lKbbEg21zddIsCO9y3ZzLFjKsyv_p7NKVuWVUzjwkknHQs83tkZEm035hDdxUj8B5INkxN4mv3caVaIqy9yozIeUqkOATTg/s640/figure012+%25281%2529.gif" title="Border Width" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">ukuran border dalam pixel dan value thin, medium, thick</td></tr>
</tbody></table>
<br />
<b>Contoh :
</b><br />
<br />
<div class="pone">
p{
border-style:solid;
<span style="color: blue;">border-width:5px</span>;
}</div>
<br />
<div class="ptwo">
p{
border-style:solid;
<span style="color: blue;">border-width:medium</span>;
}</div>
<br />
<div class="pthree">
p{
border-style:solid;
<span style="color: blue;">border-width:1px</span>;
}</div>
<br />
<b>Border Color</b><br />
Properti border-color mendefinisikan warna yang dimiliki oleh border. 
Nilai-nilai yang normal penggunaan nilai warna misalnya: hex "# 123456",
 rgb "(123.123.123)" atau "blue". Anda juga dapat mengatur warna border 
menjadi "transparent".<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJCTc5o289B0bERSkPkfIk8my0URbVFQhZ5YzJQR0VPK-TP4_BQ-6Ye-AmOFU1E_FuljP6qgDtGjcsjOwYOLLjHEF8xAjbArru5CQjaRNVFx3UxS05TPsvMZb_euJodD66mItN2nVfy5en/s1600/figure013.gif" style="margin-left: auto; margin-right: auto;"><img alt="color chart" border="0" height="14" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJCTc5o289B0bERSkPkfIk8my0URbVFQhZ5YzJQR0VPK-TP4_BQ-6Ye-AmOFU1E_FuljP6qgDtGjcsjOwYOLLjHEF8xAjbArru5CQjaRNVFx3UxS05TPsvMZb_euJodD66mItN2nVfy5en/s400/figure013.gif" title="color chart" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://problogiz.blogspot.com/2012/09/kode-warna-html.html" target="_blank">chart warna hex</a></td></tr>
</tbody></table>
<b>Contoh :</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPwbg35HfwUHasOky1BdX48ekUuUbFAvSAaa4jC5oy3oCsWYGxItsGhgTQMQik56AWkLIes6w4yfr51rk1mRnnO6pIqt7UWn-O1cu9PaUhYfNssU05qXAiypLinHMLndoQpVcafElxXc6/s1600/gbr1.gif" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Border Color " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPwbg35HfwUHasOky1BdX48ekUuUbFAvSAaa4jC5oy3oCsWYGxItsGhgTQMQik56AWkLIes6w4yfr51rk1mRnnO6pIqt7UWn-O1cu9PaUhYfNssU05qXAiypLinHMLndoQpVcafElxXc6/s1600/gbr1.gif" title="Border Color " /></a></div>
<br />
<br />
<br />
<br />
<br />
<div>
</div>
<b>Border - Individual sides</b><br />
Dalam CSS Anda bisa juga menentukan border yang berbeda pada tiap sisi:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22r3CgRWl77qsiN1y3K1qqPvf-RWbt8YaHCnJnlHOhy0Z_CMcdZhytJ9IS5Jdm1dlPRaf1fXhdDupoNAU-NVl9TKtTkbOjxBY4lC9MrECPdyJBdMSQj9b6powKvJ5BzMEiCTtU6l2SRLx/s1600/new-12.gif" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Border - Individual" border="0" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22r3CgRWl77qsiN1y3K1qqPvf-RWbt8YaHCnJnlHOhy0Z_CMcdZhytJ9IS5Jdm1dlPRaf1fXhdDupoNAU-NVl9TKtTkbOjxBY4lC9MrECPdyJBdMSQj9b6powKvJ5BzMEiCTtU6l2SRLx/s640/new-12.gif" title="Border - Individual" width="640" /></a></div>
<br />
<br />
<br />
<br />
Nah, gabungan dari pengaturan margin, padding dan border pada sebuah elemen dalam CSS sering disebut juga dengan "<b>box model</b>".<br />
<span class="bdv_cx" id="bdvrplc6" style="color: #1e6ec1; cursor: pointer; text-decoration: underline;">Diagram</span> di bawah ini menunjukkan bagaimana box model dibangun:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJejv8bfeYiAa2lgKASNcsgTVLsX94ICCu0_bUKG4m5RYGfXHHbwlLYWpWsUjgCoKg_MpQTzVumImCAIAbFyX6lmImV4CRVjbwo6MCW40b9HIQpsnJIP4BiYT5fjlOrZYsCSeOvpi03at/s1600/css-box-model.gif" style="margin-left: auto; margin-right: auto;"><img alt="diagram model box" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJejv8bfeYiAa2lgKASNcsgTVLsX94ICCu0_bUKG4m5RYGfXHHbwlLYWpWsUjgCoKg_MpQTzVumImCAIAbFyX6lmImV4CRVjbwo6MCW40b9HIQpsnJIP4BiYT5fjlOrZYsCSeOvpi03at/s640/css-box-model.gif" title="diagram model box" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">diagram model box</td></tr>
</tbody></table>
</div>
<div style="text-align: justify;">
Demikian penjelasan mengenai margin, padding dan border... mudah-mudahan dapat membantu buat para pemula.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
<i>Sumber : <a href="http://problogiz.blogspot.com/2012/12/pengertian-margin-padding-dan-border.html" target="_blank">problogiz</a> </i></div>
</div>

Penjelasan Margin, Padding, Border dalam CSS Topik kali ini mengenai CSS "Pengertian Margin, Padding, dan Border". tentu bagi CSS developer yang sud…

Jul 10, 2015 +

Load more posts

M-S Blog

M-S Blog

M-S Blog

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

Penjelasan Margin, Padding, Border dalam CSS

Popular Posts

Blog Archive