Cara Membuat Box Iklan Melayang dengan HTML

Cara Membuat Box Iklan Melayang dengan HTML

Rianda ID   October 31, 2014   Comment  

Kali ini Saya akan berbagi Cara membuat Box iklan melayang di Dengan HTML
pertama Kita buat CSS Kotak iklannya Seperti dibawah ini:

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:25%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#000;
font:normal Dosis, Georgia, Serif;
color:#ff0000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#ff0000;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>

Lalu kita Beri efek JQuery agar terlihat lebih keren dengan kode dibawah ini:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>

Setelah itu Tambahkan kode HTML iklan dibawah ini:

<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">IKLAN</a></center>
<center>
Masukan Script iklan anda disini
</center>
<script language="javascript">
document.write( unescape( '%3C%21%2D%2D%20%48%54%4D%4C%20%45%6E%64%20%2D%2D%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%63%6C%6F%73%65%27%20%68%72%65%66%3D%27%23%27%3E%26%74%69%6D%65%73%3B%3C%2F%61%3E%3C%70%20%73%74%79%6C%65%3D%22%20%66%6C%6F%61%74%3A%72%69%67%68%74%3B%20%20%6D%61%72%67%69%6E%2D%72%69%67%68%74%3A%33%35%70%78%3B%20%20%66%6F%6E%74%2D%73%69%7A%65%3A%31%30%70%78%3B%22%20%3E%50%6F%77%65%72%65%64%20%42%79%20%3C%61%20%73%74%79%6C%65%3D%22%20%66%6F%6E%74%2D%73%69%7A%65%3A%31%30%70%78%3B%20%63%6F%6C%6F%72%3A%23%39%39%39%39%39%39%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%62%65%6C%61%6A%61%72%2D%63%6F%64%65%2E%69%6E%66%6F%67%75%6E%61%2E%63%6F%6D%2F%22%3E%42%65%6C%61%6A%61%72%2D%63%6F%64%65%3C%2F%61%3E%20%61%6E%64%20%3C%61%20%73%74%79%6C%65%3D%22%20%66%6F%6E%74%2D%73%69%7A%65%3A%31%30%70%78%3B%20%63%6F%6C%6F%72%3A%23%66%66%30%30%30%30%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%62%65%6C%61%6A%61%72%2D%63%6F%64%65%2E%69%6E%66%6F%67%75%6E%61%2E%63%6F%6D%2F%32%30%31%34%2F%31%30%2F%43%61%72%61%2D%6D%65%6D%62%75%61%74%2D%69%6B%6C%61%6E%2D%6D%65%6C%61%79%61%6E%67%2D%64%65%6E%67%61%6E%2D%68%74%6D%6C%2E%68%74%6D%6C%22%3E%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%3C%2F%61%3E%3C%2F%70%3E%3C%62%72%20%2F%3E%0A%3C%2F%64%69%76%3E%09' ) );
</script>

Dan Box iklan anda siap digunakan

Membuat back to top sederhana dengan HTML

HTML

Membuat back to top sederhana dengan HTML

Rianda ID   October 24, 2014   Comment  

Back to top merupakan sebuah tombol yang jika di klik maka halaman akan bergulir ke arah paling atas, Kali ini kita akan membuatnya dalam bentuk yang sederhana.

Langkah pertama yang harus dilakukan adalah menambahkan CSS back to top. Masukan kode CSS dibawah ini:

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>

 Lalu setelah menambahkan CSS kita tinggal memanggil ID CSS yang sudah dibuat tadi dengan memasukan kode berikut:

<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbD9Uf4BLy9MmwKT6AxseyTxBQ3PR2hGXGCLKkn_L7Krxx5rDZ_Q8od-wowzyTUSZ4W1vWXp6_PHyBDLdSWmG9MhaFXFSnd1m9lC_MM-kEW4Voh8yVM4RE23fDMux0d2mKJvT0AJCUc3R/s1600/to+top.png'/></div>

 Dan tombol back to top sudah bisa digunakan.

Pengertian dan contoh penggunaan tag DIV dalam html

HTML

Pengertian dan contoh penggunaan tag DIV dalam html

Rianda ID   October 01, 2014   Comment  

Kali ini Blog Belajar-Code akan berbagi mengenai Pengertian dan contoh penggunaan tag DIV dalam html.

Beberapa pengertian tag DIV:

 menurut w3schools, tag HTML div adalah:

• Tag <div> mendeklarasikan sebuah section dan division pada suatu dokumen HTML.
• Tag <div> mendefinisikan block-elemen untuk diformat dengan css.

Penggunaan Tag DIV:

Contoh penggunaan kode tag html div pada sebuah dokumen html.
1. Memanggil id dan class css pada dokumen html.
Penggunaan div untuk memanggil id atau class pada css:

<div id="id-css" name="div-name" title="Example Div Element">
  <h5>Contoh</h5>
  <p>Paragraf dengan efek section atau division yang di deklarasikan.</p>
  <p>Paragraf ke 2.</p>
</div>

Isi dari kode di dalam tag div akan mengambil style css pada id yang di deklarasikan pada atribut id="id-css"
2. Mendefinisikan block elemen.
Penggunaan div untuk definisi blok elemen

<div id="myDiv" name="myDiv" title="Example Div Element" style="color: #0900C4; font: Helvetica 12pt;border: 1px solid black;">
  <h5>Subtitle</h5>
  <p>This paragraph would be your content paragraph...</p>
  <p>Here's another content article right here.</p>
</div>

Isi dari kode tag div akan mengambil css dari block-elemen yang didefinisikan dalam kode div.