MAINBAR

Untuk posting tulisan/gambar di Mainbar, silakan kamu pelajari caranya di kotak ini:

HTML BASIC

LESSON 1a. Basic text tags: italics, bold, center, etc.

<b>Howdy</b>
Howdy

<u>Underline Me!</u>
Underline Me!

<i>Isn't this fun?</i>
Isn't this fun?

<strike>You're Out!</strike>
You're Out!

<center>This centers text on the page</center>
This centers text on the page

<b><i>I am bold AND Italic, which makes me cool!</i></b>
I am bold AND Italic, which makes me cool!

<b><i><u>Would you stop tagging me!</b></i></u>
Would you stop tagging me!

<u><i><b>Would you stop</b></i>tagging me!</u>
Would you stoptagging me!

<center>I'm in the middle!</center>
I'm in the middle!

<center><b><i>Look at me now!</i></b></center>
Look at me now!

<!--
You can't see me....
unless you look at the page source code.
-->

Some Extra Text Tags

LESSON 1b. Tataletak Teks

Hello &nbsp;&nbsp;&nbsp; I am here
Hello I am here

<div align="justify">
isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini
</div>

isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini

<div align="center">
isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini
</div>.

isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini isi artikelnya di sini

<li>Sig in di blogger dengan id sobat </li>
<li>Klik menu layout </li>

Sig in di blogger dengan id sobat

Klik menu layout

<ul>
<li>Sig in di blogger dengan id sobat </li>
<li>Klik menu layout </li>
<li>Klik menu Edit HTML </li>
</ul>

• Sig in di blogger dengan id sobat


• Klik menu layout


• Klik menu Edit HTML

<ol>
<li>Sig in di blogger dengan id sobat </li>
<li>Klik menu layout </li>
<li>Klik menu Edit HTML </li>
</ol>

1. Sig in di blogger dengan id sobat


2. Klik menu layout


3. Klik menu Edit HTML

<p>This is a regular paragraph</p>
Area₁
x² + y² = 0
<li>Klik menu Edit HTML </li>

This is a regular paragraph

Area₁
x² + y² = 0

Klik menu Edit HTML

<pre>
Tulisan 1 mepet kiri
Tulisan 2 mepet kiri
Tulisan 3 agak ke kanan
Tulisan 4 agak ke kanan lagi
Tulisan 5 mepet kiri
Tulisan 6 kanan dikit
Tulisan 7 agak ke kanan
Tulisan 8 mepet kiri
Tulisan 9 jauh ke kanan
</pre>

Tulisan 1 mepet kiri
Tulisan 2 mepet kiri
Tulisan 3 agak ke kanan
   Tulisan 4 agak ke kanan lagi
Tulisan 5 mepet kiri
Tulisan 6 kanan dikit
   Tulisan 7 agak ke kanan
Tulisan 8 mepet kiri
                         Tulisan 9 jauh ke kanan

<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
This is some text. This is some text. This is some text. </td>
<td width="50%" valign="top">
Another text. Another text. Another text. </td>
</tr>
</table>

This is some text. This is some text. This is some text.

Another text. Another text. Another text.

LESSON 1c. Animasi Teks

<script language="JavaScript1.2">

var message="TULISAN BERUBAH-UBAH WARNA SEPERTI LAMPU NEON"
var neonbasecolor="red"
var neontextcolor="green"
var flashspeed=50 //in milliseconds

///No need to edit below this line/////

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>

<marquee>Bentuk Dasar Tulisan Berjalan</marquee>

<marquee direction="right">TULISAN BERJALAN KEKANAN</marquee>

<marquee scrollamount="3"direction="left">MENGATUR ARAH DAN KECEPATAN BERJALAN</marquee>

<marquee behavior="alternate"onmouseover="this.stop()" onmouseout="this.start()">TULISAN BOLAK-BALIK TANPA BACKGROUND"</marquee>

<marquee behavior="alternate"onmouseover="this.stop()" onmouseout="this.start()"bgcolor="RED" height="20px"><font color="WHITE" face="aerial" size="3"><b>TULISAN BOLAK-BALIK DENGAN BACKGROUND</b></font></marquee>

<marquee behavior="alternate"
onmouseover="this.stop()" onmouseout="this.start()"width="70%">JALUR TULISAN DIPERPENDEK 70%</marquee>

<marquee scrollamount="4" direction="left" onmouseover="this.stop()"onmouseout="this.start()">TULISAN BERJALAN, DISENTUH DIAM</marquee>

<marquee scrollamount="3" direction="left" onmouseover="this.stop()"onmouseout="this.start()" width="100%" bgcolor="GREEN" height="20px"><font color="YELLOW" face="aerial" size="3"><b>TULISAN BERJALAN DISENTUH DIAM DENGAN BACKGROUND</b></font></marquee>

Bentuk Dasar Tulisan Berjalan

TULISAN BERJALAN KEKANAN

MENGATUR ARAH DAN KECEPATAN BERJALAN

TULISAN BOLAK-BALIK TANPA BACKGROUND"

TULISAN BOLAK-BALIK DENGAN BACKGROUND

JALUR TULISAN DIPERPENDEK 70%

TULISAN BERJALAN, DISENTUH DIAM

TULISAN BERJALAN DISENTUH DIAM DENGAN BACKGROUND

..............
--------------

LESSON 2. Headings, Paragraphs, Line Breaks

<h1>Large Heading 1</h1>

Large Heading 1

<h3>Heading 3</h3>

Heading 3

<h5>Heading 5</h5>

Heading 5

<h6>Heading 5</h6>

Heading 6

Hello,<br />
I want<br />
a new line.

Hello,

I want

a new line.

This is some cool stuff.<br />
This is the next line.
<p>This is a new paragraph. Is this cool or what?</p></div>

This is some cool stuff.

This is the next line.

This is a new paragraph. Is this cool or what?

LESSON 3. Manipulating Font Size and Color

<font size="+3">I'm a big sentence now!</font>
I'm a big sentence now!

<font size="+2">Hey, I'm Small!</font>
Hey, I'm Small!

<font size="+1">Hey There</font>
Hey There

<font size="-3">Hey There</font>
Hey There

<font size="-2">Hey There</font>
Hey There

<font size="-1">Hey There</font>Hey There

<font color="red">I'm red!</font>
I'm red!

<font color="#FF0000">I'm red!</font>
I'm red!

<font size="+2"><font color="violet">I am violet!</font></font> I am violet!

<font size="+2" color="blue">I am blue!</font>
I am blue!

LESSON 4. Special Characters

Hello &nbsp;there!
Hello there!

Hello &nbsp;&nbsp;&nbsp;&nbsp;There!
Hello There!

This page Copyright &copy; 1999 by me!
This page Copyright © 1999 by me!

Special Caracter

LESSON 5. Linking

a. Linking to Other Pages :

<a href="http://www.pageresource.com" target="_blank">The Web Design Resource</a>
The Web Design Resource

<a href="http://www.pageresource.com/html/linkcol.htm" target="_blank">Changing the Link Color</a>
Changing the Link Color

b. Linking Within the Same Page :

<a href="http://rumuspakanang.blogspot.com/">Rumus Pak Anang</a>
Rumus Pak Anang

<a href="#top">Back to the Top</a>
Back to the Top

<a name="LESSON 4"></a> <!--The anchor name-->
<a href="#LESSON 4">To the LESSON 4 Section of this page</a>
<!--Linking to the named section-->

To the LESSON 4 Section of this page

c. The E-Mail Link :

<a href="mailto:anangandaka@gmail.com">Give me some mail!</a>
Give me some mail!

<a href="mailto:anangandaka@gmail.com?subject=Hey John">Mail Me!</a>
Mail Me!

d. Using an Image as a Link

<a href="http://www.pageresource.com"><img src="next.jpg" border="0"></a>

LESSON 6. Adding Images to Your Page

<form method="get" action="http://pelajaran-blog.blogspot.com/"target="_blank"><input type="submit" value="Contoh saja!" name="q"></form>

<img src="next.jpg" />

<img src="next.jpg" width="75" height="40" />

<img src="image.gif" alt="something you want to write" />

<body background="image2.gif">

Hmmm....I think this image is in the way...<br />
<img src="http://www.pageresource.com/images/next.jpg" align="left" />
Hello, this text should wrap around<br />
this image like this.<br />
I'll just keep on writing and<br />
writing and writing and writing<br />
until I'm tired of writing....<br />

Hmmm....I think this image is in the way...


Hello, this text should wrap around

this image like this.

I'll just keep on writing and

writing and writing and writing

until I'm tired of writing....

Advanced HTML Tutorials

<div style="border: 2px black solid; width: auto; height: auto; margin: 10px 0px; padding: 10px;background-color: #A4A4A4; text-align: left;">Tulisan ini akan diberi background warna di belakangnya. Warna backgroundnya boleh anda tentukan sesuka anda.O iya, Jenis bordernya dapat anda pilih: solid, ridge, grove, inset, outset, double, dotted, dashed. Silakan coba, pasti puas deh.</div>

Tulisan ini akan diberi background warna di belakangnya. Warna backgroundnya boleh anda tentukan sesuka anda.O iya, Jenis bordernya dapat anda pilih: solid, ridge, grove, inset, outset, double, dotted, dashed. Silakan coba, pasti puas deh.

<center><div><form name="copy"><div align="center"><input value="Highlight All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"></div><div align="center"></div><p align="center"><textarea rows="100" cols="55" style="width: 200px; height: 144px;" name="txt" wrap="VIRTUAL"> Isikan teks /rumus anda disini</textarea></p></form></div></center>

Isikan teks /rumus anda disini

<marquee direction="up" onmouseover="this.stop()" width="50%" onmouseout="this.start()" scrollamount="2" height="80" align="left">
<a href="http://dotcom05.blogspot.com/" target="_blank">>> Home</a><br />
<a href="http://dotcom001.blogspot.com/" target="_blank">>> dotCom-01</a><br />
<a href="http://dotcom002.blogspot.com/" target="_blank">>> dotCom-02</a><br />
<a href="http://dotcom003.blogspot.com/" target="_blank">>> dotCom-03</a><br/>
<a href="http://hafez.wordpress.com/2008/02/15/cara-membuat-blog-di-wordpress/ " target="_blank">>>WordPress-01</a>
</marquee>

>> Home

>> dotCom-01

>> dotCom-02

>> dotCom-03

>>WordPress-01

<div style="border: 1px solid #BDBDBD; background-color:#e8e7e9;-moz-border-radius: 10px; padding: 10px; width: auto; height: auto; background-color: transparance; text-align: center;"><br/>JUDUL BLOGROLL <br/><br/><br/><marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="120" align="center"><br/><br/>
<a href="http://dotcom05.blogspot.com/" target="_blank">>> Home</a><br />
<a href="http://dotcom001.blogspot.com/" target="_blank">>> dotCom-01</a><br />
<a href="http://dotcom002.blogspot.com/" target="_blank">>> dotCom-02</a><br />
<a href="http://dotcom003.blogspot.com/" target="_blank">>> dotCom-03</a><br/>
<a href="http://hafez.wordpress.com/2008/02/15/cara-membuat-blog-di-wordpress/ " target="_blank">>>WordPress-01</a>
</marquee></div>

JUDUL BLOGROLL





>> Home

>> dotCom-01

>> dotCom-02

>> dotCom-03

>>WordPress-01

<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width:220px;color:yellow;background:green" name="menu" size="1">
<option /> - JUDUL UTAMA 1 -
<!-- change the links with your own -->
<option style="width:200px;color:white;background:black" value="http:......" target="_blank" />>Judul
<option style="width:200px;color:RGB(255,255,255);background:RGB(00,00,00)" value="http:......" target="_blank" />>Judul
<option style="width:200px;color:RGB(255,255,255);background:RGB(00,00,00)" value="http:......" target="_blank" />>Judul
<option style="width:200px;color:RGB(255,255,255);background:RGB(00,00,00)" value="http:......" target="_blank" />>Judul
</select>
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width:220px;color:white;background:red" name="menu" size="1">
<option /> - JUDUL UTAMA 2 -
<!-- change the links with your own -->
<option style="width:200px;color:black;background:pink" value="http:......" target="_blank" />>Judul
<option style="width:200px;color:RGB(255,255,255);background:RGB(00,00,00)" value="http:......" target="_blank" />>Judul
<option style="width:200px;color:RGB(255,255,255);background:RGB(00,00,00)" value="http:......" target="_blank" />>Judul
<option style="width:200px;color:RGB(255,255,255);background:RGB(00,00,00)" value="http:......" target="_blank" />>Judul
</select>

- JUDUL UTAMA 1 -

>Judul
>Judul
>Judul
>Judul


- JUDUL UTAMA 2 -

>Judul
>Judul
>Judul
>Judul

<table width="168" border="2"><tbody><tr bgcolor="lightpink"><td><a href="http://www.blogger.com/......" target="_blank"><center>Judul</center></a> </td><td><a href="http://www.blogger.com/............." target="_blank"><center>Judul</center></a> </td></tr><tr bgcolor="powderblue"><td><a href="http://www.blogger.com/............." target="_blank"><center>Judul</center></a> </td><td><a href="http://www.blogger.com/............." target="_blank"><center>Judul</center></a> </td></tr><tr bgcolor="yellow"><td><a href="http://www.blogger.com/............." target="_blank"><center>Judul</center></a> </td><td><a href="http://www.blogger.com/............." target="_blank"><center>Judul</center></a> </td></tr></tbody></table>

Judul	Judul
Judul	Judul
Judul	Judul

<div style="border: 10px grey inset; padding: 5px; background-color: black; overflow: auto; height: 260px; width: 350px; text-align: left;">
<marquee scrollamount="2" direction="down" width="350" height="250" align="center" onmouseover="this.stop()" onmouseout="this.start()">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfGC8upxNCVYZ2o99qNQPrK3BkZbQwjZNneuqavIQRt7ikolRKi1VBuEbIOyIXAv-isSUiqsxwawjiauAF-qsQEDI62ZTXTeeojz8LnMc6_NNxblTcAR7Jp9JZmdEmhrRf8czR5H1EgP0/s1600-h/Hardware+PLC.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 340px; height: 256px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfGC8upxNCVYZ2o99qNQPrK3BkZbQwjZNneuqavIQRt7ikolRKi1VBuEbIOyIXAv-isSUiqsxwawjiauAF-qsQEDI62ZTXTeeojz8LnMc6_NNxblTcAR7Jp9JZmdEmhrRf8czR5H1EgP0/s320/Hardware+PLC.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5417323307652219234" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVixitw07DDWUDzbRK07jHb-rksnSXWZTyo6zxIzBUP6_CUMgyMNYhPr5Y0dvuAT529Bc0RC7qnMCRUiZ9zf49txIUWY3mEjjQUGJPe0Ap9cBSSngOZBm36OD5QfT1CXlkpb8-r8e5r1o/s1600-h/02-PLC.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 340px; height: 256px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVixitw07DDWUDzbRK07jHb-rksnSXWZTyo6zxIzBUP6_CUMgyMNYhPr5Y0dvuAT529Bc0RC7qnMCRUiZ9zf49txIUWY3mEjjQUGJPe0Ap9cBSSngOZBm36OD5QfT1CXlkpb8-r8e5r1o/s320/02-PLC.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5417265829664316210" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQVwGqXgX3MEH19s8YnTEF_XuYmt1P76EvPh0xp4-FwboCEi5tdIjHa6blDpHfnyJnhh9JI-xXD4NgCnHQWj4Zf4cQpSMEaTF69sibpOP_deOkd5_oYTHRzBfa22UdwBsed3Xr1ip3BU/s1600-h/03-PLC.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 340px; height: 256px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQVwGqXgX3MEH19s8YnTEF_XuYmt1P76EvPh0xp4-FwboCEi5tdIjHa6blDpHfnyJnhh9JI-xXD4NgCnHQWj4Zf4cQpSMEaTF69sibpOP_deOkd5_oYTHRzBfa22UdwBsed3Xr1ip3BU/s320/03-PLC.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5417266426058274562" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvhhS4aCkIgfXjDVCfaQ2pTGysECHA4SwVRbhW08TC-_lvr92_EGSJOSF4dN1r8rQpbdMKa_6vvBvuE9RCCG00fYedLt2b0Z5JnoyK4O3ldwwHOL5vDud9eRIrAiKGR-YhXbsJGdRU9Fk/s1600-h/04-PLC.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 340px; height: 256px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvhhS4aCkIgfXjDVCfaQ2pTGysECHA4SwVRbhW08TC-_lvr92_EGSJOSF4dN1r8rQpbdMKa_6vvBvuE9RCCG00fYedLt2b0Z5JnoyK4O3ldwwHOL5vDud9eRIrAiKGR-YhXbsJGdRU9Fk/s320/04-PLC.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5417267313705184514" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS254jCP7_75QveZ8dJstKU8ddvEivviHmhLPJXdp368MCWb7MnNe7YjwuMXALElgaeWGrHiEKZ77Q16lyc7Lr1VJdpJooFLg7T37KFhoNQaF611lR5itYhzzE4cNBLIDkk5vqM6-u0gk/s1600-h/06-PLC.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 340px; height: 256px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS254jCP7_75QveZ8dJstKU8ddvEivviHmhLPJXdp368MCWb7MnNe7YjwuMXALElgaeWGrHiEKZ77Q16lyc7Lr1VJdpJooFLg7T37KFhoNQaF611lR5itYhzzE4cNBLIDkk5vqM6-u0gk/s320/06-PLC.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5417267839114050258" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDAtKPn7w0nzMzUmYufLQNRmzZCbLloBdPpQNZeWmFvk3STOTC9z2yt0M9a5HSPOiV64JAHYV-6kvxoPrx9KEB8Y2MAm4o1aH3RFrlI_0izBsjD7FBC-_4vh1l66zsaACdlEsHLw1MIVY/s1600-h/05-PLC.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 340px; height: 256px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDAtKPn7w0nzMzUmYufLQNRmzZCbLloBdPpQNZeWmFvk3STOTC9z2yt0M9a5HSPOiV64JAHYV-6kvxoPrx9KEB8Y2MAm4o1aH3RFrlI_0izBsjD7FBC-_4vh1l66zsaACdlEsHLw1MIVY/s320/05-PLC.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5417267639297125218" /></a>
</marquee>
</div>

Mungkin kamu pernah terpikir untuk pasang animasi flash ke dalam Blog kamu. Tapi, gimana caranya?

1. Upload file animasi kamu ke hosting ini:
http://www.fileden.com/account.php?action=login

2. Ambil URL-nya misalnya :
http://www.fileden.com/files/2012/8/1/3332306/bird.swf

3. Siapkan URL Blog kamu misalnya : http://dotcom004.blogspot.com/

4. Pasang kode berikut di sidebar blog kamu :

<embed quality="high" allowscriptaccess="always" flashvars="alink1=http://dotcom004.blogspot.com/" type="application/x-shockwave-flash" height="100%" src="
http://www.fileden.com/files/2012/8/1/3332306/bird.swf" width="100%" wmode="transparent"></embed>

5. Hasilnya silakan dilihat di sidebar, gambar burung bernyanyi sambil petik gitar

6. Semoga info ini bisa membantu kamu. Coba yukkk....