Tampilkan postingan dengan label Tutorial HTML. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial HTML. Tampilkan semua postingan

Senin, 03 Desember 2007

Comment Box Inside Post


Update : Tulisan ini sudah tidak up to date, karena sekarang kotak komentar blogger sudah ada yang baru. Silahkan baca di sini!.



Setelah melihat-lihat beberapa pertanyaan yang di ajukan oleh para sobat, rupanya banyak yang tertarik ingin mengetahui bagaimana cara membuat kotak komentar langsung berada di bagian bawah postingan tanpa harus membuka jendela baru seperti yang ada dalam blog ini. Memang, sepertinya kotak komentar yang bisa langsung berada di bawah postingan merupakan dambaan dari blogger yang menggunakan jasa di blogspot. Dulu, saya pernah mengulas mengenai cara membuat kotak komentar yang bisa langsung di bawah postingan dengan menggunakan fasilitas dari HaloScan yang saya posting di sini, akan tetapi entah mengapa katanya banyak yang tidak berhasil alias gatot (gagal total), padahal saya pernah mempraktekan langsung tutorial yang saya tulis sendiri dan hasilnya tidak ada masalah, tidak percaya? sok lah bisa di lihat contohnya di sini! dan saya pun sering blogwalking ke para sobat setia blog ini dan banyak juga yang berhasil. Udah ah, rasanya tidak terlalu penting membahas antara yang sukses dengan yang gagal, semuanya tergantung kepada usaha sendiri-sendiri, mending kita langsung ke topik utama pembahasan kali ini yaitu mengenai cara membuat kotak komentar seperti yang ada pada blog ini. Trik ini sebenarnya telah lama di bahas di blognya jackbook, kalau mau baca langsung di sana silahkan saja, namun bahasa yang di gunakan adalah dalam bahasa inggris. Mau yang bahasa indonesia? ya sudah baca saja di blog ini, gitu aja ko repot *kata guspur* begitu biasanya. Yang berminat silahkan ikuti langkah-langkah berikut ini :





Langkah #1


  1. Silahkan Sign in di blogger dengan id sobat

  2. Klik Layout

  3. Klim menu Pengaturan

  4. Klik menu Komentar

  5. Cari tulisan Tampilkan komentar dalam sebuah window popup?, pilih ya. Perhatikan gambar di bawah :


  6. Klik tombol simpan pengaturan


Step #2


  1. Klik menu Edit HTML

  2. Klik tulisan Download Template Lengkap. Silahkan save dulu, biar aman dari marabahaya yang mengancam.

  3. Centang kotak kecil yang berada di samping tulisan Expand Template Widget


  4. Tunggu beberapa saat sampai proses selesai.

  5. Cari kode yang seperti di bawah ini :


  6. <b:includable id='comments' var='post'>
    <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
    <h4><b:if cond='data:post.numComments == 1'>1
    <data:commentLabel/>:<b:else/><data:post.numComments/>
    <data:commentLabelPlural/>:
    </b:if>
    </h4>
    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/>
    <b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/>
    </a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'>
    <data:comment.body/>
    </span><b:else/>
    <p><data:comment.body/></p>
    </b:if></dd><dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>
    <p class='comment-footer'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p>
    </b:if>
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
    <b:if cond='data:post.showBacklinks'>
    <b:include data='post' name='backlinks'/>
    </b:if>
    </div>
    </div>
    </div>
    </b:includable>

  7. ganti kode di atas dengan kode di bawah ini :



  8. <b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'>
    <!-- jackbook.com part 1 start --> <!-- <h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4> --> <div class='onepx'> <dl id='comments-block' style='height: 1px;overflow:hidden;'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a>
    <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> </div> <!-- <p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </p> --> <!-- jackbook.com part 1 ends --> <!-- actually i almost do nothing with your template, just add that comment, you did it :) -->
    <div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'> <h3 id='hoverme' style='display:block;'> <img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://img229.imageshack.us/img229/5559/htmlcodeleavecommentfi5.gif' title='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.'/> </h3>
    <!-- this iframe below is your comment form. you can change the height, or add more style property into it --> <div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'> <iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/> <br/> <a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Comment Form under post in blogger/blogspot</a> </div> <!-- end of iframe -->
    </div>
    </b:if>
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
    <b:if cond='data:post.showBacklinks'>
    <b:include data='post' name='backlinks'/>
    </b:if>
    </div>
    </div>
    </div>
    </b:includable>

  9. Simpan kode ini di atas kode </body>



  10. <!-- www.jackbook.com --><!-- this to hide and show el -->
    <script languange='javascript'> function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}
    </script><!-- www.jackbook.com -->

  11. Cari kode seperti di bawah ini :



  12. <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <b:if cond='data:post.numComments == 1'>1
    <data:top.commentLabel/>
    <b:else/>
    <data:post.numComments/>
    <data:top.commentLabelPlural/>
    </b:if></a>
    </b:if>
    </b:if>
    </span>

  13. gantilah kode di atas dengan kode di bawah ini :


  14. <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.url + "#comments"' >
    <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
    <b:else/><data:post.numComments/>
    <data:top.commentLabelPlural/>
    </b:if></a>
    </b:if>
    </b:if>
    </span>

  15. Klik tombol simpan template

  16. Selesai. Silahkan lihat hasilnya.



Pada langkah yang ke 5 ada kode yang seperti ini :




<div style='height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'>



Kode width: 440px;, angka 440px menandakan bahwa lebar kotak komentar adalah sebesar 440 pixel, saran saya agar tampil lebih menarik sebaiknya nilai ini di ganti sesuai dengan lebar kolom posting pada template yang sobat pakai, contoh pada blog saya yaitu width:520px Untuk lebih mempermudah pencarian kode, sebaiknya sobat menggunakan mesin pencari pada masing-masing browser. contoh pada Internet explorer, bila sobat mencari kode yang sebagiannya mengandung kode seperti ini : <span class='post-comment-link'>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis <span class='post-comment-link'> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut. Perhatikan gambar di bawah ini : find



Karena langkah-langkah di atas banyak sekali mengubah kode-kode template yang ada di edit HTML, maka sebaiknya jangan sampai lupa untuk membuatkan sebuah backup template, jika seandainya sobat melakukan kesalahan, maka jangan panik. Upload kembali backup nya, nanti setelah itu kondisi akan kembali seperti semula yaitu sebelum kode template di ubah-ubah.

Minggu, 25 November 2007

Cara Membuat Tabel di Blog


Setelah beberapa hari absen, akhirnya muncul lagi di sini. Bukannya
saya tidak bisa untuk membuat tulisan baru, cuma agak sedikit males untuk
menyentuh tut keyboard. Walaupun sedikit kurang semangat, saya paksain juga
deh buat gelitikin si keyboard. Alasan utamanya yaitu ada sedikit rasa
takut. Emang takut apaan, takut ama hantu? bukan donk! masa sudah zaman lampu neon begini
masih takut sama hantu. Takut yang saya maksud adalah takut blog ini di tinggalkan sama
para pembaca apabila kelamaan tidak saya update. Oh begitu ya! yups.... soalnya tidak bisa
di pungkiri bahwa blog ini merupakan salah satu penyumbang dana buat saya tiap bulan nya.
Ya lumayanlah... dari kedua program yang saya ikuti yaitu gabung di http://www.resepbisnis.com/?id=rohman
dan di http://www.obralplus.com/?id=rohman
ada saja rezeki yang saya dapat tanpa di duga-duga.





Intermezo nya tidak usah lama-lama, nanti yang baca malah kabur lagi. Baiklah, sekarang saya membicarakan
topik utama yang mau saya ulas yaitu cara membuat tabel di blog/website. Pertanyaan ini di ajukan
oleh salah satu sobat yang saya lupa namanya karena sudah agak lama melalui buku tamu, dan saya juga sedikit
males membuka dokumen-dokumen lama di buku tamu. Bagi yang merasa menanyakan soal ini, silahkan absen saja
di kotak komentar.




Untuk membuat tabel di blog, bisa kita lakukan dengan kode HTML yang khusus untuk membuat tabel tentunya.
Perintah yang di pakai adalah <table> ..... </table>. Di dalam tabel,
kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:




  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".




  • align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya :
    align="left"|"center"|"right" .




  • cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .




  • border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel" .




  • cellspacing
  • : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" .



  • height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .




  • height : untuk mengatur lebal tabel. Penempatan kodenya : height="pixel"|"%" .





Sintaks atau kode yang terbentuk yaitu seperti ini :





<table
align="left"|"center"|"right"

bgcolor="color"

border="pixel"

cellpadding="pixel"

cellspacing="pixel"

width="pixel"|"%"

height="pixel"|"%">


.....................


</table>






Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).




Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel. elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel),
juga bottom (yaitu judul berada di sebelah bawah dari tabel).



Sintaks atau kode yang terbentuk yaitu seperti ini :





<caption align="top"|"bottom">


............................


</caption>





elemen TR (Table Row) yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang
bisa di pakai di dalam TR antara lain :




  • align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya :
    align="left"|"center"|"right" .




  • valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"




  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".





Sintaks atau kode yang terbentuk yaitu seperti ini :





<tr align="left"|"center"|"right"

bgcolor="color"

valign="top"|"middle"|"bottom">


.....................


</tr>





elemen TH(Table Header) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:

  • align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya :
    align="left"|"center"|"right" .




  • valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"




  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".




  • colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .




  • rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"





Sintaks atau kode yang terbentuk yaitu seperti ini :





<th align="left"|"center"|"right"

bgcolor="color"

valign="top"|"middle"|"bottom"

colspan="number"
rowspan="number">


.....................


</th>





Elemen TR(Table Row) adalah elemn untuk membuat kolom. atribut yang bisa di pakai antara lain :

  • align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya :
    align="left"|"center"|"right" .




  • valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"




  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".




  • colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .




  • rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"





Sintaks atau kode yang terbentuk yaitu seperti ini :





<td align="left"|"center"|"right"

bgcolor="color"

valign="top"|"middle"|"bottom"

colspan="number"
rowspan="number">


.....................


</td>






Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :



Untuk membuat sebuah tabel tunggal, kodenya kira-kira seperti ini :




<table width="200" border="1">

<tr>

<td>



Contoh




</td>

</tr>

<table>






Hasilnya akan seperti ini :









Contoh





Terlihat bahwa tulisan yang ada, tampak mepet ke dinding tabel, apabila kita
ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja
kode align="center" pada kolomnya. misal seperti ini :





<table width="200" border="1">

<tr>

<td align="center">



Contoh




</td>

</tr>

</table>






Hasilnya akan seperti ini :









Contoh





Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya
menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :





<table width="200" border="9">

<tr>

<td align="center">



Contoh




</td>

</tr>

</table>






Hasilnya akan seperti ini :









Contoh





Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya.
contoh dua kolom, kodenya seperti ini :





<table width="300" border="9">

<tr>

<td align="center">



Contoh




</td>


<td align="center">



Contoh juga denk




</td>



</tr>

</table>






Hasilnya akan seperti ini :










Contoh



Contoh juga denk





Kalau ingin dua baris, kira-kira kodenya seperti ini :





<table width="300" border="1">

<tr>

<td align="center">



Contoh




</td>


<td align="center">



Contoh juga denk




</td>



</tr>




<tr>

<td align="center">



Contoh




</td>


<td align="center">



Contoh juga denk




</td>

</tr>


</table>






hasilnya seperti ini :














Contoh


Contoh juga denk

Contoh

Contoh juga denk




Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna".
contoh :




<table width="300" border="1" bgcolor="black">

<tr bgcolor="green">

<td align="center">



Contoh




</td>


<td align="center">



Contoh juga denk




</td>



<tr bgcolor="yellow">



<tr>

<td align="center">



Contoh




</td>


<td align="center">



Contoh juga denk




</td>

</tr>

</table>






hasilnya seperti ini :





















Contoh


Contoh juga denk

Contoh

Contoh juga denk







Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption
serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi.
Data-data yang ingin di buatkan tabel, misalkan seperti ini :

























Tabel 1.1
Data Teknisi
No. Nama
1. Juned
2. Jaka kelana
3. Ibro





Kode yang di pakai bisa seperti ini :


<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >

<caption align="top"><b>Tabel 1.1</b></caption>

<tr bgcolor="fuchsia">

<th colspan="2">Data Teknisi</th>

</tr>

<tr bgcolor="green">

<th>No.</th>

<th>Nama</th>

</tr>

<tr bgcolor="yellow">

<td>1.</td>

<td>Juned</td>

</tr>

<tr bgcolor="red">

<td>2.</td>

<td>jaka kelana</td>

</tr>

<tr bgcolor="blue">

<td>3.</td>

<td>Ibro</td>

</tr>

</table>








Hasilnya kira-kira seperti ini :

























Tabel 1.1
Data Teknisi
No.Nama
1.Juned
2.jaka kelana
3.Ibro












 


 




 


Selain untuk menempatkan tulisan, sebuah tabel pun banyak di gunakan
untuk menempatkan gambar agar terlihat lebih rapih. Contoh :






<table width="300" border="1" cellpadding="20">

<tr>

<td align="center">


<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>


</td>

<td align="center">


<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"/></a>


</td>

</tr>

<tr>

<td align="center">


<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"></a>


</td>

<td align="center">


<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>


</td>

</tr>

</table>










Hasilnya akan seperti ini :














mau pinter membuat blog atau website? klik saja di sini



mau software murah tapi sangat berguna? klik saja di sini



mau software murah tapi sangat berguna? klik saja di sini



mau pinter membuat blog atau website? klik saja di sini


 


jika sobat beranggapan bahwa garis tabel menggangu pemandangan, maka kita bisa mensiasatinya dengan
cara menghilangkan garisnya yaitu nilai borde rnya kita buat 0 (nol).


contoh :






<table width="300" border="0" cellpadding="20">

<tr>

<td align="center">


<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>


</td>

<td align="center">


<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"/></a>


</td>

</tr>

<tr>

<td align="center">


<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"></a>


</td>

<td align="center">


<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>


</td>

</tr>

</table>










Hasilnya akan seperti ini :














mau pinter membuat blog atau website? klik saja di sini



mau software murah tapi sangat berguna? klik saja di sini



mau software murah tapi sangat berguna? klik saja di sini



mau pinter membuat blog atau website? klik saja di sini


 


Bagaimana hasilnya yang terakhir ini, mata kita dapat di tipu bukan?




Catatn kecil saja. Karena kode diatas merupakan kode HTML, maka pada saat posting harus pada posisi Edit HTML
jangan pada posisi Compose. Apabila ingin di simpan di sidebar, pilih yang untuk HTML/javaScript.




Rasanya cukup deh untuk kali ini, silahkan sobat buat variasi-variasi lainnya dari fungsi tabel ini.



Selamat bereksperimen !

Jumat, 02 November 2007

Menampilkan karakter khusus


Beberapa waktu yang lalu sobat The-Ridho membrendel shoutbox ku dengan satu
pertanyaan yang isinya sama, entah berniat spam atau tidak sengaja terposting. Harusnya
tidak demikian, etikanya satu pertanyaan sudah cukup. Yang mau sekedar beriklanpun saya
perbolehkan akan tetapi harus wajar, jangan sampai tulisan yang sama di masukan berulang-ulang sehingga
mengganggu pemandangan serta menghalangi kesempatan orang lain untuk berkomentar.
Baiklah, kembali kepada pertanyaan sobat The-Ridho. Kutipan pertanyaannya seperti ini :





Bang kalau di ms word kita bisa menulis equation editor (lambang matematika) seperti integral, sigma, dll, klu di blog gmn carany b?




Untuk memuat sebuah equation editor (lambang matematika) tidak hanya pada ms word ataupun pada
software lainnya, pada blogpun bisa di lakukan, akan tetapi perlu trik khusus yaitu kita harus
mengganti equation editor tersebut atau katakanlah sebagai karakter khusus dengan notasi penggantinya atau
juga lebih kerennya lagi dinamakan entitas nya (kata orang IT begitu). Sebagai contoh untuk menuliskan
sebuah lambang sigma ( Σ ) sobat harus mengganti dengan entitasnya yaitu
&Sigma;
dengan catatan pada saat posting artikel harus pada posisi Edit HTML bukan pada
posisi Compose. Memang, untuk beberapa karakter, sobat bisa mengcopy langsung dari ms word dan di paste
pada kolom posting, akan tetapi banyak sekali karakter yang tidak bisa di terjemahkan oleh browser sehingga akan
menghasilkan tampilan karakter yang tidak di inginkan, oleh karena itu sobat harus mengganti karakter-karakter tersebut dengan entitasnya.




Dibawah ini saya tuliskan beberapa karakter beserta entitasnya yang saya ketahui :
















































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































    Karakter    
    Entitas    
"
&quot;
&
&amp;
<
&lt;
>
&gt;
&euro;
Fungsi Spasi
&nbsp;
Á
&Aacute;
á
&aacute;
Â
&Acirc;
â
&acirc;
´
&acute;
Æ
&AElig;
æ
&aelig;
À
&Agrave;
à
&agrave;
Å
&Aring;
Ã
&Atilde;
ã
&atilde;
Ä
&Auml;
ä
&auml;
&forall;
¦
&brvbar;
Ç
&Ccedil;
ç
&ccedil;
¸
&cedil;
¢
&cent;
ˆ
&circ;
©
&copy;
¤
&curren;
°
&deg;
÷
&divide;
É
&Eacute;
é
&eacute;
Ê
&Ecirc;
ê
&ecirc;
È
&Egrave;
è
&egrave;
Ð
&ETH;
ð
&eth;
Ë
&Euml;
ë
&euml;
&euro;
Ë
&Euml;
½
&frac12;
¼
&frac14;
¾
&frac34;
Í
&Iacute;
í
&iacute;
Î
&Icirc;
î
&icirc;
¡
&iexcl;
Ì
&Igrave;
ì
&igrave;
¿
&iquest;
Ï
&Iuml;
ï
&iuml;
«
&laquo;
¯
&macr;
µ
&micro;
·
&middot;
¬
&not;
Ñ
&Ntilde;
ñ
&ntilde;
Ó
&Oacute;
ó
&oacute;
Ô
&Ocirc;
ô
&ocirc;
Œ
&OElig;
œ
&oelig;
Ò
&Ograve;
ò
&ograve;
ª
&ordf;
º
&ordm;
Ø
&Oslash
ø
&oslash;
Õ
&Otilde;
õ
&otilde;
Ö
&Ouml;
ö
&ouml;
&para;
±
&plusmn;
£
&pound;
»
&raquo;
®
&reg;
ƒ
&fnof;
Š
&Scaron;
š
&scaron;
§
&sect;
­
&shy;
¹
&sup1;
²
&sup2;
³
&sup3;
ß
&szlig;
Þ
&THORN;
þ
&thorn;
˜
&tilde;
×
&times;
Ú
&Uacute;
ú
&uacute;
Û
&Ucirc;
û
&ucirc;
Ù
&Ugrave;
ù
&ugrave;
¨
&uml
Ü
&Uuml;
ü
&uuml;
Ý
&Yacute;
ý
&yacute;
¥
&yen;
Ÿ
&Yuml;
ÿ
&yuml;
&ensp
&zwnj;
&zwj;
&ndash;
&lsquo;
&rsquo;
&sbquo;
&ldquo;
&rdquo;
&bdquo;
&lsaquo;
&rsaquo;
&dagger;
&Dagger;
&permil;
&bull;
&hellip;
&Prime;
&prime;
&oline;
&frasl;
&trade;
&part;
&prod;
&minus;
&radic
&infin;
&int;
&asymp;
&ne;
&le;
&ge;
&loz;
Α
&Alpha;
α
&alpha;
Β
&Beta;
β
&beta;
Γ
&Gamma;
γ
&gamma;
Δ
&Delta;
δ
&delta;
Ε
&Epsilon;
ε
&epsilon;
Ζ
&Zeta;
ζ
&zeta;
Η
&Eta;
η
&eta;
Θ
&Theta;
θ
&theta;
Ι
&Iota;
ι
&iota;
Κ
&Kappa;
κ
&kappa;
Ε
&Epsilon;
Λ
&Lambda;
λ
&lambda;
Μ
&Mu;
μ
&mu;
Ν
&Nu;
ν
&nu;
Ξ
&Xi;
ξ
&xi;
Ο
&Omicron;
Π
&Pi;
π
&pi;
Ρ
&Rho;
ρ
&rho;
Σ
&Sigma;
σ
&sigma;
ς
&sigmaf;
Τ
&Tau;
τ
&tau;
Υ
&lambda;
Φ
&Phi;
φ
&phi;
Χ
&Chi;
Ψ
&Psi;
ψ
&psi;
Ω
&Omega;
ω
&omega;





Seperti halnya hurup biasa pada umumnya, karakter khusus ini bisa
sobat variasikan, misal di buat tebal, miring, bergaris bawah, di coret
ataupun yang lainnya. Contoh :



untuk membuat tebal, sobat cukup membubuhkan perintah ini :




<b>&Sigma;</b>




hasilnya seperti ini :



Σ



untuk ukuran, sobatpun bisa mengubahnya.misalkan lambang sigma ingin
berukuran besar sebesar 8, kode yang di pasang seperti ini :




<font size="8">&Sigma;</font>




hasilnya seperti ini :



Σ



tak hanya itu saja, warna dari karakter inipun bisa diubah sesuai keinginan. Misalkan
saya ingin membuat lambang sigma yang berwarna merah dan dalam ukuran hurup sebesar 6, kode
yang di pasang seperti ini :




<span style="color:red"><font size="6">&Sigma;</font></span>




hasilnya seperti ini :



Σ





Sebagai catatan kecil ringan saja, karakter-karakter khusus ini bisa juga
di pasang di bagian sidebar ataupun di tempat mana saja di dalam blog milik sobat.



Selamat berkreasi !






Rabu, 24 Oktober 2007

Mengenal perintah IFRAME



Untuk tutorial kali ini saya ingin sedikit mengulas tentang salah satu fungsi kode HTML
yakni perintah <iframe>. Dengan perintah iframe kita dapat menampilkan isi
dari situs ataupun blog milik orang lain pada blog milik kita, namun walaupun demikian kita tidak
boleh sembarangan tentunya harus mendapatkan izin terlebih dahulu dari pemilik blog yang ingin di tampilkan.

Perintah dasar dari iframe adalah sebagai berikut :





<iframe> .... isi dari iframe .... </iframe>





Beberapa atribut yang sering di pasang dalam iframe adalah :



ALIGN="left/right" --> Untuk mengatur posisi iframe



WIDTH="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen



HEIGHT="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen



FRAMEBORDER="garis pembatas" --> Untuk memberi garis pembatas



SCROLLING="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada iframe



SRC="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada iframe



Agar lebih mudah untuk di fahami, maka saya akan memberikan dua contoh dari fungsi
perintah iframe. Misalkan alamat sumber yang ingin saya tampilkan adalah isi dari blog saya
yang lain yang beralamat di http://unique-r1-8.blogspot.com/, lebar yang ingin saya
gunakan adalah sebesar 500 pixel, dan tinggi sebesar 300 pixel.



  • IFRAME yang tidak mempunyai garis pembatas dan tidak mempunyai fasilitas scrolling




  • contoh kode yang di pasang seperti ini :






    <iframe align="left" frameborder="0" src="http://unique-r1-8.blogspot.com/"
    width="500" height="300" scrolling="no">
    </iframe>






    hasilnya seperti ini :



























  • IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling




  • contoh kode yang di pasang seperti ini :






    <iframe align="left" frameborder="10" src="http://unique-r1-8.blogspot.com/"
    width="500" height="300" scrolling="auto">
    </iframe>






    hasilnya seperti ini :



























    Bagaimana sobat, tentunya dengan iframe kita dapat mengintip isi dari blog milik orang lain pada blog milik kita. Akan tetapi
    jangan lupa untuk meminta ijin terlebih dahulu kepada pemiliknya apabila tidak ingin kena damprat sang pemilik blog.



    selamat bereksperimen !