Rahman tipos ~ Percobaan

Membuat Menu Dropdown :

Di bagian sidebar blog Anda bagian archives, ada kode html sbb:

&<BloggerArchives>

<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>

</BloggerArchives>

Ganti :

<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value;">

<option selected>- Archives -</option>

<BloggerArchives>

<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>

</BloggerArchives>

</select>

   6. Selesai.

Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :

   1. login dulu, tentunya dengan id anda

   2. klik LAYOUT

   3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive

   4. Klik Edit pada kotak Blog Archive tadi

   5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek

   6. Klik Save Changes

   7. Selesai

Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION>

<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik saya :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Blog Tutorial -</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html">Membuat Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">setting Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih Template</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">warna & hurup</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Posting Artikel</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">Read more (1)</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Text area</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Blogger Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Yahoo!Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Download Gratis</option>

</select></form> Hasilnya akan seperti ini :

http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html

Membuat menu D'tree
Beberapa waktu yang lampau, saya pernah menulis artikel mengenai cara membuat menu yang menyerupai menu yang ada pada Windows explorer yaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporan bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini adalah sebagai referensi agar kejadian tersebut tidak terulang kembali.

Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain, sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnya tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan seperti ini, apabila saya menyuruh memasang script seperti ini :

pasanglah kode ini di atas kode </head> :

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada account milik saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila saya iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil sobat akan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya : copy kode sumber script ini lalu paste pada address bar browser internet sobat :

http://amen24.googlepages.com/Readmore.js

Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java. Langkah selanjutnya adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu simpan di komputer sobat. Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode tersebut pada hosting yang biasa sobat gunakan, misalkan saya sering menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkan script ini mempunyai alamat :

http://juned.googlepages.com/Readmore.js

Nah, langkah terakhir adalah mengganti sumber script yang saya punyai dengan milik sobat, misal kode di atas seperti ini :

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :

<script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />

Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi script tersebut.

Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat untuk mencuri kode milik orang lain.

Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada pembahasan yang tempo hari agak menyulitkan pembaca, sehingga kali ini saya akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.

Untuk membuat menu dtree, sobat bisa mendownload pada situs resminya yaitu di http://www.destroydrop.com, silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain sobat harus memahaminya, oleh karena alasan tadi maka saya akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami.

Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai berikut :

Kode ini di simpan di atas kode </head> :

<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>

Kode di bawah ini di simpan di bagian sidebar :

<h2>Example</h2>

<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">

</script>

</div>

Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin tidak usah saya terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link milik sobat dapat di pasang pada kode-kode di atas.
Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka saya akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah membuat sebuah menu dtree buatan saya yang telah saya sertakan link-link di dalamnya : source code dari menu yang saya buat seperti ini :

Kode ini di simpan di atas kode </head> :

<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

Kode di bawah ini di simpan di bagian sidebar :

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<script type="text/javascript">

</script>

</div>

Untuk melihat hasilnya, silahkan klik dulu di sini !

Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :

Jika sobat perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali, antara lain :

d.add(1,0
d.add(2,0
d.add(4,0
d.add(6,0
d.add(7,0

Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu dtree, jadi jika sobat menginginkan menu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda kemudian di belakang koma harus di susul dengan angka nol.

d.add(3,1
d.add(5,1
Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang pertama. Akan tetapi angka di depan angka 1 (satu) adalah angka penentu bahwa menu ini akan menjadi cabang dari kode --> d.add(1,0

d.add(10,5
d.add(20,5
d.add(30,5
d.add(40,5
d.add(50,5
d.add(60,5

Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu --> d.add(5,1
begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu --> d.add(3,1

Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''), formasinya misal seperti ini :

d.add(10,3,'','','','','');

Jika di jabarkan denga isi menu, seperti ini :

d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');

isi ke 1 = adalah tulisan yang akan muncul terlihat langsung
isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1
isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan tetapi ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.
isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image
isi ke 5 = adalah untuk alamat image icon yang mau di munculkan
isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5

Misal :

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
Blogroll = tulisan yang kan muncul pada menu induk
http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau dunculkan di samping tulisan Blogroll
http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau dunculkan ketika tulisan Blogroll di klik (akan tetapi dalam hal ini alamatnya sama, maka gambar icon seolah tidak mengalami perubahan)

dan masih banyak ciri-ciri lainnya yang dapat memudahkan sobat untuk mengnalinya.

Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending langsung bikin menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan lupa untuk membuat Backup data dari template sobat:

# Untuk template Klasik

   1. Sign in di blogger

   2. Klik menu Template

   3. Klik menu Edit HTML

   4. Copy seluruh kode HTML yang ada, lalu save untuk back up

   5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :

      <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
      <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

   6. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):

      <div class="dtree">

      <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

      <script type="text/javascript">
      
      </script>

      </div>

   7. Klik tombol Simpan Perubahan Template

   8. Selesai.

# Untuk Template Baru

   1. Sign in di blogger

   2. Klik menu Layout

   3. Klik menu Edit HTML

   4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman

   5. Copy paste kode berikut di atas kode </head>

      <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
      <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

   6. Klik tombol Simpan Template

   7. Klik menu Elemen Halaman yang ada di sebelah atas monitor

   8. Klik tulisan Tambahkan sebuah Elemen Halaman

   9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)

      <div class="dtree">

      <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

      <script type="text/javascript">
      
      </script>

      </div>

11. Klik tombol Simpan

Read More Versi baru :

   7. Copy kode berikut, lalu paste tepat di atas kode </head>

      <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

   8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :

      <h3 class='post-title'>
      <b:if cond='data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
      <data:post.title/>
      </b:if>
      </h3>
      </b:if>
      <div class='post-header-line-1'/>
      <div class='post-body' expr:id='"post-" + data:post.id'>
      <b:if cond='data:blog.pageType == "item"'>
      <p><data:post.body/></p>
      <b:else/>
      <style>#fullpost {display:none;}</style>
      <p><data:post.body/></p>
      <span id='showlink'>
      <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
      </span>
      <span id='hidelink' style='display:none'>
      <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
      </span>
      <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
      </b:if>
      <div style='clear: both;'/> 
      </div>
      </div>
      .... rest of template code ....

   9. Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :

   1. Klik menu Pengaturan

   2. Klik menu Format

   3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting

      <span id="fullpost">

      </span>

   4. Klik tombol Simpan Setting

   5. Selesai.

Cara posting artikel :

Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :

<span id="fullpost">

</span>

Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span id="fullpost"> dan sebelum kode </span>.

Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....

Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.

Perataan Posting :
Selamat mencoba !

Untuk menu Edit HTML

Bagi sobat yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan akhir artikel, kodenya seperti ini :

Rata kiri :

<div align="left">

isi artikelnya di sini

</div>

Rata kanan :

<div align="right">

isi artikelnya di sini

</div>

Rata kiri-kanan :

<div align="justify">

isi artikelnya di sini

</div>

Supaya tengah semua :

<div align="center">

isi artikelnya di sini

</div>

Agar hasilnya kelihatan, saya berikan contoh dengan mengutif isi artikel di blog ini.

Contoh cara membuatnya seperti ini :

Untuk yang rata kiri :

<div align="left">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>

Pasang Kode Tuker Link :

<a href="http://kolom-tutorial.blogspot.com" target="_blank"> <img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

Nah itu tadi merupakan contoh link untuk membuat link ke blog ini, untuk ngelink ke blog sobat ya tinggal sesuaikan saja.

Apabila kode link sudah ada, langkah selanjutnya adalah membuat text area untuk menampung seluruh kode agar nanti bisa di copy oleh pengunjung yang mau nge link ke blog sobat, kodenya seperti ini :

<textarea name="code" rows="6" cols="20">

<a href="http://kolom-tutorial.blogspot.com" target="_blank">
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

</textarea>

Beberapa langkah sudah di lewati, langkah selanjutnya adalah merangkaikan kode-kode tadi, misalkan kode tukeran link ingin di bawah gambar chicklet agar tampak lebih menarik, kodenya kira-kira seperti ini :

<h2>Tukeran link</h2>
<br/><br/>
Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali
<br/><br/>
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial ">
<br/><br/>
<textarea name="code" rows="6" cols="20">
<a href="http://kolom-tutorial.blogspot.com" target="_blank">
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

</textarea>

http://www.free-blog-content.com bikin Kalender

Buat daftar isi blog :

Copy paste kode CSS berikut di atas kode ]]></b:skin>

#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}
Klik tombol SIMPAN TEMPLATE

Copy paste kode berikut ke dalam elemen yang muncul
<div id="toc"></div>

# Pindahkan elemen yang baru di buat tepat di atas elemen Post

# Klik tombol Simpan yang berada di sebelah atas

# Klik tulisan Tambah sebuah Elemen Halaman kembali

# Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML

# Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen

<div id="toclink"><a href="javascript:showToc();">Lihat Daftar Isi</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

# Ganti tulisan YOURBLOG dengan nama blog sobat

# Klik tombol Simpan

Cara pasang search Engine :

<form id="searchform" action="http://AlamatBlogAnda.blogspot.com/search" name="searchform" method="get">
<input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>

Pasang Google Talk di Blog :

<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350">
</iframe><p style="margin:-8px 0"><br /><center>
<a style="text-decoration:none;font-size:60%;" href="http://kolom-tutorial.blogspot.com/2008/01/pasang-google-talk-di-blog.html">Add to your blog</a></center></p>

Tombol Google talk : jika tidak cocok dengan kode diatas :

<script src="http://talkgadget.google.com/talkgadget/button"></script>

Cara membuat Elemen Persis Di bawah Header :

#

Copy kode berikut, lalu paste di atas kode ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

#

Cari kode yang mirip dengan kode di bawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
    </div>
#

Copy kode berikut lalu paste persis di bawah kode tadi :

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

#

Klik tombol SIMPAN TEMPLATE.

Membuat Warna Link Berkedip Warna Warni:

   3.

      Uploadlah file tersebut ke server yang biasa anda gunakan, contoh ke google page creator.


   4.

      Jika sudah di upload, ambillah alamat URL file tersebut, contoh ( ini contoh saja, jangan di pakai) :


      http://kangrohman.googlepages.com/rainbow.js


   5.

      Ubahlah alamat URL tersebut menjadi seperti ini (contoh saja) :



      <script src='http://kangrohman.googlepages.com/rainbow.js'/>



Langkah Kedua :

   1. Silahkan login ke blogger dengan ID .
   2. Klik Tata Letak.
   3. Klik tab Edit HTML.
   4. Cari kode seperti ini </head>.
   5. Simpan kode scriptnya di bawah kode </head> (contoh saja).


Meta tag blogger terbaik:

Agar lebih mudah, cari kode berikut : <b:skin><![CDATA[
Paste diatasnya

<b:if cond='data:blog.pageType != "item"'>
<meta expr:content='data:blog.pageTitle + " - deskripsi"' name='description'/>
<meta expr:content='data:blog.pageTitle + ", keywords"' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - deskripsi"' name='description'/>
<meta expr:content='data:blog.pageName + ", keywords"' name='keywords'/> </b:if>

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 :

Posted in: a

Percobaan

Categories

Blog Archive

6 March 2011

Rahman tipos

0 comments:

Post a Comment