Panduan Blogger, SEO, Backlink, Komputer, Internet

Menghilangkan Widget Tertentu Pada Halaman Yang Diinginkan

Beberapa artikel yang dibuat kawan-kawan dengan judul "Menghilangkan Widget Tertentu di Halaman Tertentu" nampaknya masih banyak yang belum sesuai dengan judul/tema yang diusung. Setelah saya lihat dan analisa ternyata kebanyakan isi dari tutorial kawan-kawan tersebut rupanya bukanlah tips untuk menghilangkan widget di halaman tertentu, akan tetapi trik menghilangkan widget di seluruh halaman posting. Hal ini tentu berbeda dengan judul artikel dimaksud.

Berangkat dari fenomena tersebut, kali ini saya mencoba membuat artikel sederhana ini dengan harapan mudah-mudahan bisa membantu sobat blogger yang ingin "Menghilangkan Widget Tertentu di Halaman yang Diinginkan" agar blog terlihat dinamis dan tampak rapi disetiap halamannya. Cara membuatnya pun sebenarnya tidak terlalu sulit, yang terpenting adalah kita tahu kode perintahnya. Trik ini tidak jauh berbeda dengan posting saya sebelumnya yaitu cara Membuat Halaman Posting Menjadi Halaman Penuh. Hanya kode element nya saja yang diubah.

Simpanlah kode ini di akhir posting yang widgetnya tidak ingin anda munculkan di halaman tersebut:

<style>#HTML1{display:none;}</style>
<style>#HTML2{display:none;}</style>
<style>#HTML3{display:none;}</style>
<style>#HTML4{display:none;}</style>

Ubahlah kode element widget yang akan dihilangkan #HTML1, #HTML2, #HTML3, #HTML4 dan seterusnya. Untuk mengetahui kode-kode element widget tersebut, silahkan anda buka bagian Edit HTML, kemudian cari judul widgetnya terlebih dahulu. Misal; Kalender, Iklan, Follower dll. Dan nanti akan kita temukan kode element widgetnya. Gunakan Ctrl + F untuk mempermudah pencarian.

Sekian tipsnya, semoga ini yang bener-benar anda cari :)

Fitur Baru Pada Edit HTML Blogger 2013

Fitur Baru Pada Edit HTML Blogger 2013 - Seiring berjalannya waktu, Blogger terus berinovasi. Terutama perubahan pada fitur Edit HTML. Tujuannya mungkin untuk memudahkan penggunanya. Apalah daya, sebagian orang mungkin merasa dimanjakan dengan fitur-fitur baru tersebut. Namun sebagian yang lain bisa juga mengatakan, bloger kegatelan nih, bikin bingung aje!! hehe... Bagaimana dengan anda?

Daripada terus bingung yuk kita cari tau perubahan apa saja yang dilakukan blogger pada fitur Edit HTML:

Dihilangkannya Expand Template Widget, karena semua tag telah ditampilkan
Penambahan tombol Lompat ke Widget / Jump to Widget. Ini untuk memudahkan pengguna untuk memilih widget yang akan diedit.
Pratinjau Template kini menyatu dengan Editor
Penambahan tombol Kembalikan Perubahan, untuk mengembalikan kode yang telah diedit
Menggunakan kode warna-warni, untuk memudahkan dalam pengeditan kode.
Penambahan tombol Format Template, untuk menyusun tag dan kode yang ditambahkan.
Menggunakan sistem Collapse, untuk menampilkan kode yang disembunyikan klik tanda ► disamping nomor urut
Penambahan fungsi Ctrl+Shift+F dan Ctrl+Shift+R

Sip, selesai! Selamat menggunakan fitur-fitur baru Blogger :)

Moderasi Komentar

Moderasi Komentar - Sehabis sakit, cukup lama juga badan ini kembali pulih. Lemah, lesu, hingga tak sempat menjalankan aktifitas bloging seperti biasa. Jangankan membuat posting, login ke blogger aja nggak. Saat kembali login, waah...cukup banyak juga komentar yang perlu dimoderasi.

Sebelumnya mohon maaf kepada sahabat2 blogger yang telah memberikan komentar di blog yang gak ada bagus2nya ini karena harus menunggu lama. Semoga tidak menjadi suatu halangan untuk kembali berkomentar di lain waktu. Skali lagi maaf ya :)

Oya, memang sengaja saya aktifkan layanan moderasi komentar. Hal ini saya maksudkan agar komentar yang dipublikasi nantinya bebas dari komentar2 miring yang dapat menimbulkan propokasi antar blogger, spam, serta terhindar hal2 negatif lainnya termasuk komentar yang bukan pada tempatnya.

Salam

Menambah Kolom di Atas Header

Menambah Kolom di Atas Header - Anda mungkin perlu menambahkan elemen di atas header untuk membuat banner, tombol facebook, twitter dan lain-lain.

Untuk membuatnya silahkan ikuti tutorial berikut ini:

Loggin ke Blogger
Klik Tata Letak
Pilih Edit HTML
Selanjutnya cari kode ]]></b:skin> dan letakan kode berikut tepat di atasnya

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;}

Jika langkah di atas telah selesai simpan kode di bawah ini tepat di atas kode <div id='header-wrapper'>

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

Langkah terakhir save template

Cara Membuat Frame Iklan di Blog

Cara Membuat Frame Iklan di Blog - Sebuah blog / website memiliki berbagai manfaat dan fungsi. Sebagian ada yang digunakan sebagai sumber berita, hiburan, ajang menyalurkan hobbi dan lain sebagainya. Tergantung dari yang empunya blog / web tersebut.

Sebagain besar blog / web yang kita jumpai sampai sekarang ini tak lepas dari iklan. Apalagi jika situs tersebut sifatnya sudah profesional, iklan sudah menjadi makanan kita sehari-hari sebagai seorang netter. Bagaimana dengan blog kita yang baru seumur jagung dan masih terbatas pengunjungnya? Jawabannya tentu boleh-boleh saja walau sifatnya coba-coba nyari duit recehan atau hanya sekedar untuk menaikan popularitas blog kita dengan memasangnya di berbagai situs yang lebih populer.

Untuk membuat sebuah iklan kita bisa membuatnya dalam bentuk banner atau sebuah frame iklan, seperti yang akan kita bahas dalam kesempatan kali ini.

Langkah yang harus di persiapkan untuk sebuah frame iklan adalah dengan menentukan lebar, warna latar belakang, warna huruf, jenis huruf, besarnya huruf, serta hal lain yang sekiranya berhubungan. Agar lebih mudah untuk di mengerti, inilah sebuah contoh frame iklan yang bisa anda buat:

Bibit Pohon Baobab »
Menyediakan biji dan bibit pohon Baobab asal Afrika. Siap antar ke seluruh daerah di Indonesia. Paling murah dari yang pernah ada!!
http://indobaobab.blogspot.com

Kode asli dari frame di atas adalah sebagai berikut :

<div style="border: 3px dashed red; background: #005af5; padding:10px; width:330px; text-align:left; color:white;">
<a style="font-size: 17px;COLOR: yellow; text-decoration:none;" href="http://indobaobab.blogspot.com" title="klik di sini"><b>Bibit Pohon Baobab </b></a> »<br/>
Menyediakan biji dan bibit pohon Baobab asal Afrika. Siap antar ke seluruh daerah di Indonesia. Paling murah dari yang pernah ada!!<br/>
<a style="color:yellow; font-size:12px; text-decoration:none;" href="http://indobaobab.blogspot.com" title="klik di sini"><b>http://indobaobab.blogspot.com</b></a>
</div>

Keterangan:

warna pembatas : merah
style dari pembatas : garis putus-putus dengan lebar 3 pixel
jarak hurup dengan batas terluar : 10 pixel
lebar frame: 330 pixel
posisi hurup : rata kiri
warna hurup : putih
warna latar belakang : biru
warna link : kuning

Untuk garis putus-putus perintahnya seperti ini :

border : 3px dashed red;

3px menandakan lebar dari garis, dashed berarti garis putus-putus, red adalah kode warna merah.

Gaya lain:

border : 3px dashed red; --> untuk garis solid
border : 3px dotted red; --> untuk garis berupa titik-titik

Selamat berpromosi...

Cara Pasang Gambar / Banner di Blog

Cara pasang Gambar / Banner di Blog - Ini adalah tutorial ringan dari skocikita dan kawan-kawan yang telah lama berkecimpung di dunia blog tentunya sudah tidak asing lagi. Namun bagi kawan-kawan yang baru nyemplung di dunia yang penuh trik ini mungkin ada yang masih bertanya-tanya bagaimana cara memasang gambar / banner pada sebuah blog.

Baik, bagi sobat yang masih bingung dengan apa yang telah disebutkan tadi, inilah langkah-langkahnya:

Pertama kita tentu harus login terlebih dahulu menggunakan akunnya masing-masing
Klik Rancangan
Klik tambah Gadget
Pilih HTML/JavaScript
Pilih salah satu kode berikut sesuai kebutuhan

Kode 1 => gambar tanpa link tujuan:

<img src="link-gambar-anda" height="130" width="190" />

Kode 2 => gambar dengan link tujuan dan terbuka di tab baru:

<a href="http://link-blog-anda.blogspot.com/" target="_blank" title="skoci untuk kita"><img src="link-gambar-anda" alt="skocikita" /></a>

Kode 3 => gambar dengan link tujuan dan terbuka otomatis saat disentuh mouse (tanpa klik):

<a href="http://link-blog-anda.blogspot.com/"onMouseover="window.location=this.href" target="_blank" title="skocikita"><img src="link-gambar-anda" alt="skoci blog" /></a>

Klik simpan

NB:
- Selanjutnya sobat dapat mengkombinasikan sendiri kode-kode yang telah disebutkan tadi
- Selamat mencoba

Membuat Link Otomatis Terbuka Saat Disorot

Membuat Link Otomatis Terbuka Saat Disorot - Tutorial ini berawal dari rasa penasaran saya ketika membuka daftar link dan banner sahabat blogger yang ingin bertukar link. Saat mengecek keberadaan link blog ini, tanpa sengaja menyorot sebuah banner dengan cursor mouse. Dan saat itu pula dengan tiba-tiba link yang disorot tadi terbuka tanpa klik sedikit pun.

Betul kata pepatah; "Pengalaman adalah Guru yang paling berharga". Dari pengalaman di atas tadi, rupanya baru tahu bahwa saya telah menyorot sebuah link otomatis.

Penasaran dengan link dan banner tersebut, silahkan sorot link dan banner di bawah ini dengan mouse (cukup arahkan cursornya, ga usah diklik):

Skoci Kita

Bagi sobat yang ingin membuat link dan banner seperti contoh di atas, berikut adalah susunan scriptnya:

Ancor teks:

<a href="http://link-anda.com/"onmouseover="window.location=this.href" target="_blank">Tulis judul link disini</a>

Contoh:

<a href="http://skocikita.blogspot.com/"onmouseover="window.location=this.href" target="_blank">Skoci Kita</a>

Banner:

<a href="http://link-anda.com/"onmouseover="window.location=this.href" target="_blank" title="judul link"><img alt="judul gambar" src="simpan link gambar anda disini" /></a>

Contoh:

<a href="http://skocikita.blogspot.com/"onmouseover="window.location=this.href" target="_blank" title="skocikita"><img alt="skokit" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_yShWnv-2VsHYCdQ53eV3XlDdiGyT8z6jd8W5rznhFd-m0PhFFvcAeh4xV4GvncvHqojJbAGUIz6l-l6Q3S-Vs3yldyHgeuirSENE3RpiKwCRKNZFfiDAArioCyl_v747u49ozl84Yzo/s1600/skokit.jpg" /></a>

Cukup jelas ya, selamat mencoba...

Membuat Iklan Footer Melayang dengan Tombol Closed

Membuat Iklan Footer Melayang dengan Tombol Closed - Begitu banyak iklan yang terpasang pada sebuah blog/web dengan berbagai posisi dengan tujuan yang beraneka ragam.

Pada kesempatan kali ini skocikita akan membuat tutorial sederhana tentang cara membuat iklan melayang di bagian footer yang dilengkapi tombol closed. Tutorial seperti ini sebenarnya telah banyak diulas oleh kawan-kawan blogger yang lain, namun tentunya dari sekian banyak tutorial mempunyai karakter dan gaya yang berbeda-beda. Oleh karena itu saya berharap kehadiran artikel ini dapat menambah perbendaharaan sobat khususnya menyangkut iklan footer melayang.

Tanpa panjang lebar lagi, inilah skript iklan melayang (fixed) di bagian footer:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 100px; z-index: 9999;'>
<div style='text-align: right; width: 730px; height: 3px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXu97JbvIi6QAr6OMPY4G-sBDSNKlG-Eh1uCg62aC-knt4yd0PX0TQRzuNtgoYIPY2_CpQ_o-4IFHFOtTFXpwwQ8Hfrlxbf7ekERvgSyQ-x_8rw-u1aeQsndklrs-HJbWE3geyhYoHG52i/s1600/close-icon.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
Tempatkan kode iklan anda disini</center></p>
</p>
</div>

Cara pasang:
1. Login ke Blogger
2. Klik Rancangan
3. Klik tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode di atas pada kolom yang tersedia
6. Klik Simpan dan lihat hasilnya

Salam blogger...

Cara Mengganti dan Menambah Emoticons (smilies) Cbox

Cara Mengganti dan Menambah Emoticons (smilies) Cbox - Sudah lama tidak membuat tutorial blogspot, kangen juga rupanya. Sempat bingung mau bikin tutorial apaan, akhirnya jadilah artikel sederhana ini. Walau dibilang sederhana tapi mudah-mudahan bisa bermanfaat bagi sobat yang telah sudi mampir ke blog ini.

Mungkin anda sudah bosan atau kurang puas dengan emoticons (smilies) bawaan dari Cbox, ingin mengganti dan atau mau menambahnya dengan gambar/icon pilihan sendiri (lihat buku tamu blog ini). Berikut adalah langkah-langkah agar emoticons buku tamu Cbox anda terlihat lebih seru:

Loggin ke Cbox dengan akun anda
Pilih Option dan klik Smilies. Akan terlihat kolom seperti ini:

Jika ingin mengganti emoticon dengan gambar yang diinginkan, sobat tinggal mengganti url gambarnya. Code dan Alt. Code bisa dibuat sendiri (suka2 kita).
Untuk menambah emoticons yang lebih banyak, silahkan klik tombol new row yang ada di bawah kolom dan masukan url gambarnya
Klik save changes dan lihat hasilnya

Gambar Emoticons bisa dilihat disini:

Yahoo Messenger Emoticons

Addemoticons.com

Cara Pasang Mini Ikon di samping Judul Posting

Cara Pasang Mini Ikon di samping Judul Posting - Hallo sobat, sambil nunggu final piala FA antara Liverpool vs Chelsea sy mo sharing tutorial ringan buat brother and sister kali aja ada yang lagi nyari cara pasang ikon di samping judul posting.

Bagi yang sedang mendandani blog, mini ikon di samping judul posting ini bs berfungsi sebagai pemanis yang akan menambah daya tarik tersendiri bagi yang melihatnya. Setuju ya? Setuju aja deh, ;p.

Nah berhubung smuanya dah setuju (maksa), maka inilah langkah-langkah membuat mini ikon di samping judul posting seperti yang telah saya ulas di atas tadi:

Login ke Blogger
Klik Tata Letak/Rancangan.
Klik Edit HTML
Centang "Expand Widget Template"
Carilah kode: <a expr:href='data:post.url'> dan letakkan script berikut setelahnya kode yang tadi:

<img border='0' src='url gambar ikon anda disini'/>

Contoh pemasangan:

<a expr:href='data:post.url'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitzh_mgchAGTwL7b-RyZE-MhTwOsAQGuJVLxPcOs3EO64APXgn13Ju1V7JDULmlMnN5rvuC44sicGAKIrnQzdBVVtnFoR2uZY26zQRHlmcF9iuhPf6bijXwRqjXqV2xWCe-dlfLe7SruM/s1600/home.gif'/>

Isi url berwarna biru dengan url gambar milik sobat
Jika sudah, klik simpan dan bila tidak ada salah dalam pemasangan maka judul posting akan terlihat seperti gambar di bawah ini:

Selamat mencoba...

Trik Menyembunyikan Widget di Halaman Posting

Trik Menyembunyikan Widget di Halaman Posting - Sebelumnya sy pernah posting tentang cara menyembunyikan widget pada halaman depan dan tampil di halaman posting. Kali ini tutorial yang coba sy share adalah kebalikan dari tutorial tersebut, yakni menyembunyikan widget pada halaman posting dan hanya tampil di halaman depan.

Tanpa panjang lebar bagi yang tertarik menggunakan trik ini, sobat bisa mengikuti langkah-langkah berikut:

Login ke blogger
Pilih Tata Letak kemudian Edit HTML.
Centang Expland Template Widget.
Untuk mempermudah pencarian, widget yang akan disembunyikan sebaiknya diberi nama terlebih dahulu. Misalnya gadget slideshow yang hanya ingin ditampilkan pada halaman depan saja, maka setelah menemukan baris kode widget id yang dinginkan, maka sisipkan baris kode yang berwarna merah pada baris kode widget id dari gadget slideshow tadi.

Penempatannya kodenya seperti ini:

<b:widget id='HTML4' locked='false' title='slideshow' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty –>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'> <data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Klik simpan dan lihat hasilnya

Kumpulan Wallpaper Keren untuk Background

Kumpulan Wallpaper Keren untuk Background - Sambil liat perdebatan sengit di gedung DPR mengenai pro dan kontra kenaikan Bahan Bakar Minyak (BBM), ga da salahnya kali ya share situs yang menyediakan banyak wallpaper keren dengan berbagai tema, mulai dari gambar-gambar kartun, artis, pemandangan hingga wallpaper pemain top sepakbola dunia. Mengenai kualitas, menurut saya gambar-gambar yang disajikan sangat baik. Karena itu, bagi yang lagi nyari gambar baik untuk background blog, komputer dan lain-lain silahkan langsung ke gudangnya.

addwallpaper.com

Jenis dan Cara Membuat Border

Jenis dan Cara Membuat Border - Border adalah garis tepi dari komponen/objek yang berfungsi agar konten/objek tersebut terlihat rapi. Berikut adalah jenis border yang bisa dipilih:

Kode untuk membuat kotak dengan border seperti di atas adalah:

<div style="border: 3px solid rgb(0, 0, 0); padding: 4px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
Tuliskan Teks Atau Sesuatu yang Ingin Diberi Border disini
</div>

Atau yang lebih sederhana (sesuaikan dengan kebutuhan):

<div style="border: 4px #345d15 ridge; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>

Ganti Tulisan yang berwarna merah dengan Jenis Border yang kamu inginkan.

Mengganti border pada sidebar, footer, header dan lain-lain

Pada template blog baik pada sidebar, footer maupun header sering kita temukan kode seperti ini:

border-top: 1px dotted #dddddd;
border-bottom: 1px solid #dddddd;

Jika ingin mengubah bordernya, sobat tinggal mengganti tulisan berwarna merah dengan jenis border yang sesuai, sama seperti di atas.

Demikianlah jenis dan cara membuat border ini saya tulis, kurang dan lebihnya mohon maaf yang sebesar-besarnya. Halah, koq jd kayak pidato pak lurah, haha salam...

Mengenal Margin dan Padding pada HTML

Mengenal Margin dan Padding pada HTML - Hallo sobat, anda pusing dengan masalah margin dan padding pada kode-kode HTML? Sama, saya pun demikian. Saat utak-atik template, bagian inilah yang sering memusingkan saya. Perlu dicoba berulang-ulang untuk menentukan nilai/value margin dan padding ini agar jarak antar konten bisa pas sesuai yang kita inginkan. Demikian yang saya rasakan dan jika sobat punya tips, sy berharap anda bisa berbagi di sini.

Untuk mengurangi rasa pusing, sengaja sy tulis artikel ini untuk menjadi dasar acuan saat memodifikasi template sekaligus agar tidak lupa bila diperlukan.

Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen

MARGIN

Kode HTML untuk margin biasanya ditulis seperti ini:

margin:1px 2px 3px 4px;

Kode tersebut dibaca sebagai berikut:

Margin atas 1px.
Margin kanan 2px.
Margin bawah 3px.
Margin kiri 4px.

Apabila dipisah, penulisannya menjadi:

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;

PADDING

Kode HTMLnya adalah sebagai berikut ;

padding:5px 6px 7px 8px;

Arti dari kode di atas yaitu ;

Padding atas 5px.
Padding kanan 6px.
Padding bawah 7px.
Padding kiri 8px.

Apabila dipisah, penulisannya menjadi:

padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;

Untuk diingat:
Penulisan margin dan padding di atas bisa dibaca melingkar searah perputaran jarum jam, dari atas, kanan, bawah, dan kiri.

Membuat Slideshow Keren di Blog

Membuat Slideshow Keren di Blog - Ceritanya dapet widget slideshow baru nih, langsung dicoba, utak-atik template dan akhirnya taraaaam... berhasil!! Keren ga sih (narsis)

Oya awalnya ragu juga pasang slideshow. Denger cerita dari kawan2 bloger katanya widget seperti ini bisa bikin loading blog jadi lama "LOLA". Sempet menunda beberapa kali, akhirnya nekat juga. Ya gpp lah daripada terus-terusan dihantui rasa penasaran lebih baik dicoba aja kali ya

Pertama kali dipasang apa yang dikatakan kawan2 yang lain memang benar. Loading blog khususnya pada halaman pertama menjadi berat (halaman lain tidak terpengaruh karena slidenya hanya tampil di halaman awal). Namun kepalang dah dipasang, kemudian sy cari akal untuk menguranginya. Apa yang sy lakukan sebenarnya sangat sederhana, cukup dengan mengurangi jumlah tampilan posting pada homepage dari yang tadinya 6 menjadi 3 saja. Alhamdulillah Loading blog kembali pulih seperti sebelum dipasang slideshow ini.

Tips bagi sobat blogger yg ngebet juga pengen pasang slideshow seperti ini disarankan:

1. Jangan terlalu banyak menampilkan posting di halaman pertama, kecuali hanya judulnya saja
2. Manfaatkan googlecode untuk meringkas script agar lebih ringan
3. Dengan mengurangi widget yang terpasang juga bisa mempercepat loading pada blog
4. Kompres kode CSS menggunakan CSS generator
5. Jika ada saran lain, boleh dishare di kotak komentar

Untuk membuat slideshow ini, silahkan sobat menuju ke sumbernya langsung di:

http://creatingwebsite-maskolis.blogspot.com/2011/12/membuat-slideshow-gambar-ala-yahoo.html

Membuat Tabel pada Blog

Membuat Tabel pada Blog - Tabel pada blog berfungsi sebagai tempat untuk mengumpulkan widget, tulisan, gambar, banner sahabat dan lain sebagainya agar terlihat indah dan tersusun rapi. Bagi pengguna komputer yang sering mengoperasikan microsoft office seperti ms word dan ms excel, membuat tabel sangatlah mudah dengan menu-menu yang telah disediakan. Tetapi untuk menampilkan tabel pada blog, kita harus menggunakan kode HTML dengan perintah <table>...........<table> agar tabel bisa tampil pada blog.

Perintah dasar tag HTML untuk membuat tabel :

Kode HTML	Keterangan
<table>...</table>	Perintah untuk membuat tabel
<tr>...</tr>	Perintah untuk membuat baris
<td>...</td>	Perintah untuk membuat kolom
border, width, align, bgcolor	Kode tambahan untuk pengaturan tebal garis border, lebar tabel, perataan teks dan warna background

Untuk membuat tabel 1x3 (1 baris 3 kolom), maka penulisannya seperti ini :

<table border="1">
<tr>
<td>Konten 1</td>
<td>Konten 2</td>
<td>Konten 3</td>
</tr>
</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1

Konten 2

Konten 3

Selanjutnya kita coba mengubah kode dasar di atas tadi untuk mempercantik tampilan dengan perataan teks dan ukuran lebar tabel kita tentukan misalnya 450px, maka penulisannya menjadi seperti ini :

<table border="1" width="450">
<tr bgcolor="#F2F2F2">
<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>
</tr>
</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1

Konten 2

Konten 3

Untuk membuat tabel yang lebih banyak misalnya 2x3 (2 baris 3 kolom), penulisannya adalah:

<table border="1" width="450">
<tr bgcolor="#F2F2F2">
<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>
</tr>
<tr>
<td align="left">Tuliskan teks disini</td>
<td align="left">Masukkan script gambar dengan format seperti ini <img border='0' src=' http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/></td>
<td align="center"> Maka hasilnya akan seperti ini
<img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/></td>
</tr>
</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1	Konten 2	Konten 3
Tuliskan teks disini	Masukkan script gambar dengan format seperti ini <img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/>	Maka hasilnya akan seperti ini