Home > Panduan > Warung HTML

Warung HTML

February 26th, 2012
  1. kode header
  2. widget-01
Warung HTML berisi kumpulan kode HTML yang pernah diterbitkan secara parsial di blog ini.
Semoga Bermanfaat.
Memberi bingkai gambar

<img src="url gambar" style="border:5px solid #FF0000">

atau

<img src="url gambar" style="border:5px solid #FF0000" alt="" class="alignright" width="100" height="auto" />

Meletakkan teks di tengah secara vertikal & horisontal

<div style="overflow:auto;width:120px;padding-top:15px;padding-bottom:15px;background:#00B6F1"><p style="text-align: center;font-family: Arial;color:#FFFFFF;line-height: 30px;font-size: 160%;">teks</p></div>

Widget Logic

current_user_can('level_10')
is_home()||is_page('saya-blog')||is_archive()
!is_home()

Mewarnai Area

<div style="background:#FF0000;padding-top:10px;padding-bottom:5px;padding-left:20px;padding-right:20px;">tulis teks disini</div>

Serba Teks

<span style="text-align:left;color:#B6B6B6;font-family: courier;line-height:120%;font-size:240%;padding-top:5px">teks</span>

atau

<p style="text-align:left;color:#B6B6B6;font-family: courier;line-height:120%;font-size:240%;padding-top:5px">teks</p>

atau

<span style="letter-spacing:3px;">jarak antar karakter</span>

Mengatur Warna Link

<a href="alamat link" style="color:#CC0099">teks yang di link</a>

Teks berganti

<script language="JavaScript">
image = new Array(3);
image[0] = "quote 1";
image[1] = "quote 2";
image[2] = "quote 3";
index = Math.floor(Math.random() * image.length);
document.write(image[index]);
</script>

Teks berganti sesuai waktu

<script language="JavaScript">
var h=(new Date()).getHours();
if (h > 3 && h < 10) document.writeln("Selamat Pagi");
if (h > 9 && h < 15) document.writeln("Selamat Siang");
if (h > 14 && h < 18) document. writeln("Selamat Sore");
if (h > 17 && h < 24) document. writeln("Selamat Malam");
if (h > 23 || h < 4) document. writeln("Selamat Tidur");
</script>

Memasang gambar sebagai background

Gambar ada di tengah
<div style="background-image: url('url gambar'); background-repeat: no-repeat; background-position: center;">teks</div>

Gambar ada di kanan atas
<div style="background:url(url gambar) no-repeat right top;">teks</div>

abbr

<abbr title="Koepoe Biroe Republik Indonesia">KBRI</abbr>

marquee

Tulisan Berjalan
<marquee onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()">teks</marquee>

Tulisan Bergoyang
<marquee direction="right" scrollamount="2" align="center" behavior="alternate">teks</marquee>

Teks Berubah Warna

<span onMouseOver="this.style.color='#00FF00';" onMouseOut="this.style.color='';">teks</span>

Efek stabillo

<span style="background:#00ffff">teks</span>

Area Berganti Warna

<div style="overflow:auto;cursor:hand; background-color:#006666" onmouseover="this.style.backgroundColor=’#66CC66’" onmouseout="this.style.backgroundColor=’#006666’"><p style="text-align:center;color:#FFFFFF;padding-top:2px;font-family: Arial;line-height:120%;font-size:160%;">teks</p></div>

List

Huruf Kecil
<ol style="list-style-type: lower-alpha">
<li>baris1</li>
<li>baris2</li>
</ol>

Angka
<ol>
<li>baris1</li>
<li>baris2</li>
</ol>

Bullet
<ul>
<li>baris1</li>
<li>baris2</li>
</ul>

Tabel

Kode Dasar
<table>
<tr><td>baris 1, kolom 1</td><td>baris 1, kolom 2</td></tr>
<tr><td>baris 2, kolom 1</td><td>baris 2, kolom 2</td></tr>
</table>

Variasi 1
<table border="0" width="100%">
<tr><td width="33%" valign="top">B1K1</td><td>B1K2</td></tr>
<tr><td width="33%" valign="top">B2K1</td><td>B2K2</td></tr>
<tr><td width="33%" valign="top">B3K1</td><td>B3K2</td></tr>
</table>

Variasi 2
<table border="0" width="400">
<tr><td width="150" valign="top">B1K1</td><td>B1K2</td></tr>
<tr><td width="150" valign="top">B2K1</td><td>B2K2</td></tr>
<tr><td width="100" valign="top">B3K1</td><td>B3K2</td></tr>
</table>

Kode Warna

#E3E3E3
#DCDCDC
#CCCCCC
#BCBCBC
#999999
#7B7B7B
#000000
#CCFFCC
#99FF99
#33FF33
#00FF00
#669966
#336633
#006600
#FFFFCC
#FFFF99
#FFFF66
#FFFF00
#CCCC33
#CCCC00
#999900
#FFCCCC
#FF9999
#FF6666
#FF3333
#FF0000
#CC6666
#CC3333
#CCFFFF
#99FFFF
#66FFFF
#00FFFF
#66CCCC
#009999
#006666
#FFCCFF
#FF99FF
#FF66FF
#FF33FF
#FF9999
#CC33CC
#990099
Kode Widget

<div style="text-align:none;margin:0 auto;padding-top:15px;padding-right:0px"><p style="text-align: none;font-family: Arial;line-height: 15px;font-size:12px;color: #ffffff;"><script language="JavaScript">
images = new Array(5);
images[0] = "<a href = 'http://marsudiyanto.net/ensiklopedia-metamarsphose.html' style=color:#FF0000><img src='http://marsudiyanto.net/wp-content/uploads/2012/11/ikon-koran.jpg' class='alignleft' width='45' height='45' /><strong><u>Koran Tjap Koepoe Biroe</u></strong></a><br>Dapatkan koran koepoe biroe yang terbit hari ini. Jangan sampai terlambat";
images[1] = "<a href = 'http://marsudiyanto.net/nonton-mobil-lewat.html' style=color:#FF0000 target='_blank'><img src='http://marsudiyanto.net/wp-content/uploads/2012/08/mobilewat.jpg' class='alignleft' width='45' height='45' /><strong><u>Animasi : Nonton Mobil Lewat</u></strong></a><br>MotoGP dan Formula1 adalah hal biasa. Sekarang saatnya nonton mobil lewat";
images[2] = "<a href = 'http://marsudiyanto.net/buku-wasiat.html' style=color:#FF0000 target='_blank'><img src='http://marsudiyanto.net/wp-content/uploads/2012/08/wayang.jpg' class='alignleft' width='45' height='45' /><strong><u>Surat Wasiat Dari Kakek</u></strong></a><br>Kumpulan foto dan tulisan tangan kakek penuh kenangan tak terlupakan";
images[3] = "<a href = 'http://marsudiyanto.net/layanan-konsumen.html' style=color:#FF0000 target='_blank'><img src='http://marsudiyanto.net/wp-content/uploads/2012/09/mata.jpg' class='alignleft' width='45' height='45' /><strong><u>Bermasalah Dengan Mata Anda?</u></strong></a><br>Sekarang saatnya lepas kaca mata tanpa operasi dan tanpa terapi. Buktikan!";
images[4] = "<a href = 'http://tinyurl.com/bwkyrgm' style=color:#FF0000 target='_blank'><img src='http://marsudiyanto.net/wp-content/uploads/2012/08/dolar.jpg' class='alignleft' width='45' height='45' /><strong><u>Ingin Dapat Uang Dari Internet?</u></strong></a><br>Pelajari cara mendapatkan penghasilan paling realistis dari internet";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script></p>
</div>

JUDUL

KODE

JUDUL

KODE

~ Grazie ~
Categories: Panduan
  1. No comments yet.
  1. March 28th, 2013 at 05:13 | #1
@marsudiyanto
silakan buka katalog untuk melihat postingan lainnya
~ terima kasih ~