Home » Archives for May 2009
Posted by
Kimberly on Friday, May 22, 2009
Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog
Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.
Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran saya nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.
I. Langkah Pertama
- Login ke Blogger dengan ID sobat.
- Klik Tata Letak
- Klik tab Edit HTML
- Download dahulu template sobat dengan mengklik Download Template Lengkap
- Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
- Copy kode berikut ini setelah kode diatas :
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
- Kemudian Simpan Template.
II. Langkah Kedua
- Mengubah lebar dan tinggi kolom serta warna background
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud
- Merubah warna font, untuk kode warna bisa sobat lihat disini
so.addVariable("tcolor", "0x333333");
- Merubah ukuran font
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :
Hanya itu ilmu yang bisa saya bagi-bagi, terima kasih buat roytanck dan amanda fazani yang telah menyediakan javascript untuk label cloud ini. Jika ada pertanyaan silahkan isi di kolom komentar.
More about → Membuat Label Cloud Berputar
Posted by
Kimberly on Monday, May 18, 2009
Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika sobat mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan.
Dan pembuatan menu ini tidak menggunakan kode HTML yang banyak dan ribet, yup hanya sedikit kode HTML, sobat sudah bisa membuat menunya. Menu ini bisa juga sobat menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang sobat miliki.
Untuk membuat menunya sobat hanya membutuhkan kode HTML seperti ini :
<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee">
ISI MENU
</div>
Keterangan :
- width --> lebar menu
- height --> tinggi menu
- padding --> jarak antar tulisan dengan garis pinggir
- border --> ketebalan garis pinggir
Tinggal sobat kreasikan sendiri sesuai dengan blog sobat.
Contoh kode HTML untuk menu yang saya punya :
<div style="overflow:auto;width:310px;height:200px;padding:10px;border:1px solid #eee">
1.<a href="http://newalltutorial.blogspot.com/2009/04/panduan-membuat-blog.html"> Panduan Membuat Blog</a>
2.<a href="http://newalltutorial.blogspot.com/2009/04/mengganti-template-blogspot.html"> Mengganti Template Blogspot</a>
3.<a href="http://newalltutorial.blogspot.com/2009/04/cara-membuat-label-kategori.html"> Cara Membuat Label</a>
4.<a href="http://newalltutorial.blogspot.com/2009/04/untuk-membuat-tampilan-tulisan-atau.html"> Upload Gambar ke Dalam Postingan</a>
5.<a href="http://newalltutorial.blogspot.com/2009/04/cara-pasang-banner-di-blog.html"> Cara Pasang Banner</a>
6.<a href="http://newalltutorial.blogspot.com/2009/04/tutorial-membuat-text-area.html"> Tutorial Membuat Text Area</a>
7.<a href="http://newalltutorial.blogspot.com/2009/04/membuat-favicon.html"> Tips Membuat Favicon</a>
8.<a href="http://newalltutorial.blogspot.com/2009/04/trik-membuat-read-more.html"> Trik Membuat Read More</a>
9.<a href="http://newalltutorial.blogspot.com/2009/04/cara-pasang-search-engine-di-blog.html"> Cara Pasang Search Engine</a>
10.<a href="http://newalltutorial.blogspot.com/2009/04/menyimpan-file-di-geocitiesyahoocom.html"> Menyimpan File di Yahoo! Geocities</a>
11.<a href="http://newalltutorial.blogspot.com/2009/04/kode-html-tampil-di-postingan.html"> Kode HTML Tampil di Postingan</a>
12.<a href="http://newalltutorial.blogspot.com/2009/04/cara-pasang-meta-tag.html"> Cara Pasang Meta Tag</a>
13.<a href="http://newalltutorial.blogspot.com/2009/04/daftarkan-blog-ke-search-engine.html"> Daftarkan Blog ke Search Engine</a>
14.<a href="http://newalltutorial.blogspot.com/2009/04/alexa-rank.html"> Alexa Rank</a>
15.<a href="http://newalltutorial.blogspot.com/2009/04/tips-membuat-efek-marquee.html"> Tips Membuat Efek Marquee</a>
16.<a href="http://newalltutorial.blogspot.com/2009/05/pasang-kode-tukaran-link.html"> Pasang Kode Tukaran Link</a>
17.<a href="http://newalltutorial.blogspot.com/2009/05/backlink.html"> Backlink</a>
18.<a href="http://newalltutorial.blogspot.com/2009/05/yahoo-messenger-emoticons.html"> Yahoo Emoticons</a>
19.<a href="http://newalltutorial.blogspot.com/2009/04/link-berkelip-warna-warni.html"> Link Berkelip Warna-Warni</a>
20.<a href="http://newalltutorial.blogspot.com/2009/05/tips-membuat-menu-dropdown.html"> Membuat Menu Dropdown</a>
</div>
Hasilnya :
Sedikit keterangan tentang elemen diatas :
- overflow:auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
- width:310px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
- height:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
- padding:10px adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px.
- border:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu.
Selamat Mencoba !!
More about → Membuat Menu Dengan Fungsi Scroll
Posted by
Kimberly
Sudah sering kita jumpai sebuah
website atau blog yang menonaktifkan
klik kanan atau right click pada halaman blog tersebut. Berarti blog tersebut sangat hati - hati dalam menjaga privasi agar
page source tidak dapat di lihat oleh orang lain. Sobat pun bisa membuat blog sobat menjadi disable klik kanan.
Sebuah website atau blog pasti ada yang mengandung konten privasi, seperti gambar yang kiranya sangat riskan untuk di copy oleh orang lain dan untuk keperluan yang bisa sangat merugikan sobat. Untuk itu di perlukan teknik men-disable klik kanan pada blog, maka gambar - gambar yang sangat privasi tidak akan bisa di copy dan di salahgunakan oleh orang lain.
Berikut langkah - langkahnya :
- Login ke Blogger dengan ID sobat.
- Klik Tata Letak --> Elemen Halaman.
- Pilih yang HTML/JavaScript.
- Copy kode dibawah ini ke dalam kolom kosong yang tersedia :
<script>
var message="Maaf, Klik Kanan Tidak Diperbolehkan !";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>
kemudian Save, dan lihat hasilnya.
Mudah - mudahan dengan disable klik kanan pada blog sobat, gambar atau file privasi milik sobat akan aman dari tangan - tangan orang yang tidak bertanggung jawab.
Oke..selamat mencoba !!
More about → Disable Klik Kanan ( Right Click )
Posted by
Kimberly on Friday, May 15, 2009
Perhatikan blog ini, terlihat kolom postingan blog saya terpisah antara satu postingan dengan postingan yang lain.Kolom postingan terpisah seperti ini juga terlihat lebih enak dipandang dan lebih memudahkan pengunjung blog dalam membedakan isi artikel yang kita tulis, daripada kolom postingan yang menyatu atau dalam 1 kotak saja.
Jika sobat ingin blog sobat tampilannya seperti ini, berarti sobat benar telah membaca artikel ini..
Untuk pemasangan kolom yang seperti ini, sobat hanya memerlukan sedikit tambahan kode HTML saja yang nantinya akan disisipkan ke blog sobat.
Berikut langkah - langkahnya :
- Silahkan login dahulu ke Blogger dengan ID sobat tentunya.
- Klik Tata Letak.
- Klik tab Edit HTML.
- Setelah itu cari kode yang seperti ini
- Kemudian tambahkan kode berikut ini tepat setelah kode tersebut
Padding:15px; /* Jarak text post dengan garis pinggir */
Border-top: 2px solid #000000; /* warna garis pinggir atas */
Border-bottom: 2px solid #000000; /* warna garis pinggir bawah */
Border-left: 2px solid #000000; /* warna garis pinggir kiri */
Border-right: 2px solid #000000; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */
|
- Save Template.
Sekarang coba sobat lihat hasilnya, jika sobat benar meletakkan kode HTML nya Insya Allah pasti akan berhasil dan sama seperti punya saya. Tapi masih dalam bentuk kotak kaku alias lancip pada ujung - ujungnya. Nanti jika sempat akan saya tulis postingan tentang membuat garis melengkung pada sudut kolom.
Selamat mencoba !!
More about → Kotak Postingan Terpisah
Posted by
Kimberly on Thursday, May 14, 2009
Posted by
Kimberly on Monday, May 11, 2009
Untuk menghindari
arsip blog yang menumpuk atau berderet kebawah terlalu panjang, kita bisa menggunakan
menu dropdown agar terlihat lebih efisien. Karena semakin banyak dan semakin lama kita ngeblog maka arsip
blog kita akan bertambah panjang daftarnya. Seperti yang kita ketahui, blog di arsip setiap bulan. Bagaimana kalau sobat ngeblog bertahun-tahun, tentu akan semakin panjang kan daftar bulan arsip blog sobat.
Berikut ada sedikit tips untuk membuat menu dropdown, tapi saya hanya akan menjelaskan cara membuat menu dropdown untuk yang memakai template baru, karena saya sendiri juga menggunakan template baru.
- Login ke Blogger dengan ID sobat tentunya.
- Klik Tata Letak.
- Kemudian klik Elemen Halaman.
- Klik tambah Gadget --> kemudian pilih menu yang bertulikan Arsip Blog
- Disamping tulisan style, pilih radio button yang bertuliskan Dropdown Menu --> kemudian contreng kotak radio button tersebut.
- Klik Simpan.
- Itu tadi menu dropdown untuk Arsip Blog sobat, lantas bagaimana cara membuat menu dropdown yang didalamnya terdapat link. Seperti ini kode HTML nya :
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>judul menu</option>
<option value="isi dengan addres yang ingin di tuju">judul link disini</option> </select></form>
- Contohnya seperti berikut :
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option>Blogspot Tutorial</option>
<option value="http://newalltutorial.blogspot.com/2009/05/yahoo-messenger-emoticons.html">Yahoo! Emoticons</option>
<option value="http://newalltutorial.blogspot.com/2009/04/tips-membuat-efek-marquee.html">Membuat Efek Marquee</option>
<option value="http://newalltutorial.blogspot.com/2009/04/cara-membuat-label-kategori.html">Cara Membuat Label</option>
<option value="http://newalltutorial.blogspot.com/2009/04/tutorial-membuat-text-area.html">Membuat Teks Area</option>
<option value="http://newalltutorial.blogspot.com/2009/04/membuat-favicon.html">Tips Membuat Favicon</option>
<option value="http://newalltutorial.blogspot.com/2009/04/trik-membuat-read-more.html">Tips Membuat Read more</option>
</select></form>
- Hasilnya :
Sangat mudah bukan, silahkan dicoba !
More about → Tips Membuat Menu Dropdown
Posted by
Kimberly on Tuesday, May 5, 2009
Posted by
Kimberly on Sunday, May 3, 2009
Untuk membuat tampilan
label atau
kategori lebih menarik, sobat bisa mencoba menggantinya dengan label yang menyerupai awan atau yang lebih dikenal dengan nama
label cloud. Untuk membuatnya, lagi - lagi sobat harus mengotak - atik kode
HTML blog sobat, jadi sebaiknya backup terlebih dahulu template sobat ubtuk menghindari kerusakkan pada template sobat.
- Login ke Blogger.
- Klik Tata Letak--> Edit HTML.
- Jangan lupa backup dulu ya template nya.
- Kemudian copy paste kode berikut diatas kode ]]></b:skin>
/* Label Cloud
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
- Kemudian letakkan kode berikut ini diatas kode </head>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
- setelah itu cari kode seperti dibawah ini :
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
- Hapus kode tersebut dan ganti dengan kode berikut :
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point --------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
- Save Template.
Panjang ya..jangan sampai ada yang ketinggalan dalam proses copy paste kode - kode diatas, karena ketinggalan satu elemen saja label cloud tidak akan berhasil dibuat. Untuk membuat label cloud berputar akan saya bahas selanjutnya. So..selamat memandangi label cloud sobat yang baru..
More about → Cara membuat Label Cloud
Posted by
Kimberly
Ada beberapa cara untuk meningkatkan
rangking blog kita, salah satunya adalah dengan saling bertukar link atau yang biasa disebut
tukeran link (link exchange). Sobat bisa tukaran link dengan sesama sahabat blogger, asalkan saling menguntungkan kenapa tidak kita coba pasang kode
tukeran link di blog kita dan mencoba bertukar link dengan blogger lain.
Tukeran link ini sangat bermanfaat untuk meningkatkan
rangking blog kita di google sekaligus menjalin hubungan yang baik antara sesama blogger. Untuk yang berminat, berikut ada sedikit langkah untuk memasukkan
kode tukeran link ke blog sobat.
Pertama, sobat harus membuat banner terlebih dahulu, bisa menggunakan photoshop atau dengan jasa pembuatan banner online yang tersedia di internet. Kemudian sobat upload gambar tersebut ke jasa penyimpanan online, bisa di Google Sites atau Photobucket.
Seperti ini contoh file yang sudah saya upload ke google sites :
http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg
Setelah itu ubah menjadi seperti berikut ini :
<a href="http://newalltutorial.blogspot.com" target="_blank"><img src="http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg" border="0" alt="Blogspot Tutorial"></a>
Langkah selanjutnya :
- Login ke Blogger dengan ID sobat.
- Pilih Tata Letak.
- Klik Elemen Halaman.
- Klik Tambah Gadget --> pilih yang HTML/Java Script.
- Kemudian masukkan kode tukaran link di bawah ini :
<textarea name="code" rows="4" cols="30"><a href="http://newalltutorial.blogspot.com" target="_blank"><img src="http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg" border="0" alt="Blogspot Tutorial"></a></textarea>
sobat bisa lihat hasilnya dibawah ini :
- Untuk melihat hasil banner sobat berada tepat diatas kode tukeran link bisa dicoba memakai tips berikut ini :
<h2>Link Exchange</h2>
<br/><br/>
Copy kode di bawah ke blog sobat, saya akan linkback secepatnya
<br/><br/>
<a href="http://newalltutorial.blogspot.com" target="_blank"> <img src="http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg" border="0" alt="Blogspot Tutorial"></a>
<br/><br/>
<textarea name="code" rows="4" cols="30"><a href="http://newalltutorial.blogspot.com" target="_blank"> <img src="http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg" border="0" alt="Blogspot Tutorial"></a></textarea>
Hasilnya :
Link Exchange
Copy kode di bawah ke blog sobat, saya akan linkback secepatnya
Lihat hasilnya yang sudah terdapat gambar dari banner kita diatas kode tukeran link. Jika sobat berminat untuk tukeran link dengan saya silahkan copy kode yang terdapat didalam text area diatas kedalam blog sobat, saya akan segera linkback sobat kembali. Thanks..
More about → Pasang Kode Tukaran Link
Posted by
Kimberly on Saturday, May 2, 2009
Topik kita kali ini adalah membuat tabel di blog, sebenarnya sangat mudah hanya membutuhkan sedikit kode HTML sobat sudah bisa membuat sebuah tabel. Lagi-lagi kode HTML, yah begitulah namanya juga blog pasti selalu berhubungan dengan kode ribet yang satu ini. Untuk membuat tabel cukup dengan perintah <table> ..... </table> yang didalamnya terdapat atribut sebagai berikut : - bordercolor --> warna dari garis tabel
- bgcolor --> warna dari background tabel
- cellpadding --> jarak antara tulisan dengan garis luar tabel
- cellspacing --> jarak antar tulisan
- border --> ketebalan garis pinggir tabel
- dotted --> garis titik putus-putus
- dashed --> garis datar putus-putus
- double --> garis rangkap dua
- align --> posisi dari isi tabel, bisa kiri, tengah, atau kanan
- width --> lebar tabel
- height --> tinggi tabel
Bingung ya, begini contoh pertama yang paling simple :
<table width="250" border="1">
<tr>
<td>
Isi Tabel
</td>
</tr>
</table>
Hasilnya :
Tampak tulisan rapat kiri dengan dinding garis tabel, sobat bisa merubahnya agar menjadi ke tengah dengan menambahnkan elemen align="center"
Contohnya :
<table width="250" border="1">
<tr>
<td align="center">
Isi Tabel
</td>
</tr>
</table>
Hasilnya :
Bagaimana jika bordernya saya ganti dengan angka yang lebih tinggi, misalnya angka 7 dan lihat perubahan yang terjadi pada tabelnya :
<table width="250" border="7">
<tr>
<td align="center">
Isi Tabel
</td>
</tr>
</table>
Hasilnya:
Untuk menambah kolom menjadi 2, sobat tinggal menambahkan elemen yang sama dibawahnya, seperti ini contohnya :
<table width="350" border="7">
<tr>
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
</table>
Hasilnya :
Kolom 1 Baris 1
| Kolom 2 Baris 1
|
Sedangkan untuk membuat 3 baris, kira-kira seperti ini kodenya :
<table width="400" border="1">
<tr>
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
<tr>
<td align="center">
Kolom 1 Baris 2
</td>
<td align="center">
Kolom 2 Baris 2
</td>
</tr>
<tr>
<td align="center">
Kolom 1 Baris 3
</td>
<td align="center">
Kolom 2 Baris 3
</td>
</tr>
</table>
Hasilnya :
Kolom 1 Baris 1
| Kolom 2 Baris 1
|
Kolom 1 Baris 2
| Kolom 2 Baris 2
|
Kolom 1 Baris 3
| Kolom 2 Baris 3
|
Untuk menambahkan warna pada border dan background tabel, sobat tinggal menyisipkan kode seperti berikut :
<table width="400" border="1" bordercolor="blue">
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 2
</td>
<td align="center">
Kolom 2 Baris 2
</td>
</tr bgcolor="yellow">
<tr>
<td align="center">
Kolom 1 Baris 3
</td>
<td align="center">
Kolom 2 Baris 3
</td>
</tr>
</table>
Hasilnya :
Kolom 1 Baris 1
| Kolom 2 Baris 1
|
Kolom 1 Baris 2
| Kolom 2 Baris 2
|
Kolom 1 Baris 3
| Kolom 2 Baris 3
|
Untuk garis tabel yang putus - putus, bisa sobat tambahkan dotted atau dashed.
Bisa kan ? ga bisa ya, oke deh saya kasih contoh satu lagi :
<table width="400" border="1" bordercolor="blue" style="border-style:dashed; border-collapse:collapse">
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 2
</td>
<td align="center">
Kolom 2 Baris 2
</td>
</tr bgcolor="yellow>
<tr>
<td align="center">
Kolom 1 Baris 3
</td>
<td align="center">
Kolom 2 Baris 3
</td>
</tr>
</table>
Hasilnya :
Kolom 1 Baris 1
| Kolom 2 Baris 1
|
Kolom 1 Baris 2
| Kolom 2 Baris 2
|
Kolom 1 Baris 3
| Kolom 2 Baris 3
|
Selamat Mencoba !! kreasikan sendiri tabelnya ya..
More about → Cara Membuat Tabel