Perhatian

Hadis Nabi Muhammad s.a.w :

"Satu umrah ke satu umrah menghapuskan dosa di antara keduanya, dan haji yang mabrur tiada balasan baginya melainkan syurga."
Blogger TIDAK menyediakan atau menganjurkan apa-apa pakej UMRAH mahupun pakej pelancungan bentuk lain. Sebarang maklumat yang di paparkan di sini adalah sekadar pandangan serta panduan mengikut pendapat admin dan pembaca jika ada pengunjung yang mengalami apa-apa kerugian akibat membaca blog ini adalah menjadi tanggungjawab pembaca itu sendiri. Sebarang komen dalam hal berkaitan umrah back packer adalah di alu-alukan bagi membantu rakan taulan melaksanakan UMRAH secara termurah, bagaimanapun janganlah komen yang boleh menyinggung perasaan mana-mana pihak. Terima kasih dan berkunjunglah selalu ke blog ini.

Malaysian Ringgit Calculator

Carian

Memaparkan catatan dengan label CSS in Blogger. Papar semua catatan
Memaparkan catatan dengan label CSS in Blogger. Papar semua catatan

Ahad, September 28, 2014

TELEGRAM TELAH MENGGANTIKAN TEMPAT WHATSAPP BAGI GROUP UMRAH PERSENDIRIAN

UMRAH PERSENDIRIAN

Di kemaskini: 1 mei 2015
Sememangnya ramai rakyat Malaysia yang telah menunai umrah cara persendirian atau umrah tidak mengikut pakej dari mana-mana travel agen cuma tidak di ketahui umum atau dengan kata lain, pengetahuan tentang cara ini tidak tersebar luas. Mungkin faktor utama pemilihan UMRAH cara PERSENDIRIAN ini di sebabkan kos yang kurang dari kos mengikuti pakej TA di samping faktor kepuasan lainnya.
Wujudnya group whatapps atas nama "Umrah Persendirian" yang saya upload pada 31 ogos 2014 telah mendapat sambutan yang sangat tak terduga. Dalam masa dua hari sahaja UP whatsapp tersebut telah mencapai tahap maksima bil ahlinya (padamasa itu maksima ialah 50 ahli  ~kini ialah 100 ahli). "Umrah Persendirian G2" di tambah bagi menampung jumlah yang terus meningkat. Walau bagaimanapun G2 juga akan mencapai jumlah maksima dalam masa yg singkat.

Ahli UP yang sedia ada telah mengadakan satu pertemuan tidak formal sambil bersantai di Lembah Klang pada 14 sept 2014. Pertemuan ini lebih kepada pertemuan pengenalan sahaja, mereka membawa bersama pasangan dan juga anak-anak.

Atas faktor jumlah mereka yang berminat dgn umrah persendirian samaada mereka merancang menunaikan umrah cara persendirian dalam masa terdekat atau sebagai persediaan ilmu tentang cara menunai umrah persendirian di masa akan datang, mereka terus menghantar email meminta menjadi member UP.

Bagi memenuhi jumlah permintaan yang bertambah, saya telah mewujudkan UMRAH PERSENDIRIAN dgn menggunakan media “telegram” tetapi mengekalkan tujuan dan matlamatnya asalnya. Telegrem sememangnya tidak popular dan tidak mesra pengguna masa ini tetapi ia dapat menampung jumlah ahli sehingga 200 orang bagi setiap group. Telegram akan di minati di masa akan datang, insyaallah.
icon telegram


Icon2 Telegram







TECHNOLOGY

Telegram vs Whatsapp – 

Best Free Instant Message







Telegram V$ Whatsapp


Di sebabkan kelebihan telegram berbanding dengan appl lain, maka group telah menerima penggunaan appl telegram sebagai perantaraan untuk perbincanag.

Jika anda pembaca semua berminat menyertai "telegram ‘Umrah Persendirian’" group UP tersebut dengan syarat beragama Islam serta berumur 18 tahun ke atas bolehlah menghantar email menyatakan hajat itu kepada email : umrahsenang@gmail.com
atau
menghubungi melalui telegram melalui username
1. @umrahpersendirian
2. @freetollup

Sekian terima kasih

Ahad, Jun 15, 2014

Periksa Blog Dengan chkme


Umrah Persendirian

Basic Infos

http://umrahsertaziarah.blogspot.com Screenshot
Website: http://umrahsertaziarah.blogspot.com

Title: UMRAH DAN ZIARAH

Headings

H1: 1, that is Good

H2: 50, that is Good: Now try to maintain the same H1 (if used) or the website title subject in this heading!

H3: 8, that is Good, not fundamental but remember that if you are not going to use H2 at least use some H3 headings!

H3: 5, that is Good, not fundamental but remember that if you are not going to use H2 at least use some H3 headings!

Read more: http://chkme.com/page-seo-tools#ixzz34e4MELpt



Website Description:
Blog mengenai rangkaian pengetahuan tentang UMRAH dan ZIARAH serta pilihan pakej UMRAH dan pemilihan pakej terendah atau termurah.

Website Keywords:
None

Links: 949 (Ratio: 8%). Not all the links have a descriptive title (77/949).
Images: 98 (Ratio: 12%). Not all the images have a correct description.

Flash movies/animations

Flash: 4Bad: Usually Flash is hard to index, and unless you provide a valid text alternative (aka name tag or showing a descriptive text near the movie...) the Flash movie will be like not existent. Your website have 4 flash files, 1 with a description using the name tag. Fix this!
Note: Flash section provided just as advice, not used for the final score.

Frames and IFrames Usage

Frames: Good: No Frames.
IFrames: Bad: IFrames are not indexed at all, and you have 8.

Website Links

While not essential and not used to calculate the final score, we suppose that for a link a title can be really useful. Try fixing any error, if required. Show | Hide

Images: 98 images and 86 missing descriptions

For an image the description is fundamental. Correct this for a successful optimization. Show | Hide

Images: 98 images and 98 missing titles

While not essential and not used to calculate the final score, we suppose that for an image a title can be really useful. Try fixing any error, if required. Show | Hide
SEO Score for http://umrahsertaziarah.blogspot.com
48 % - Well, you can fix it easily...

Read more: http://chkme.com/page-seo-tools#ixzz34e4cRWbX


Check past reports, ordered by date, for http://umrahsertaziarah.blogspot.com


Show your result, it's easy!

Your Widget for umrahsertaziarah.blogspot.com is Ready!
<a href="http://chkme.com/seo-umrahsertaziarah.blogspot.com" rel="nofollow" title="SEO Reports for umrahsertaziarah.blogspot.com"><img src="http://chkme.com/seo-umrahsertaziarah.blogspot.com.png" title="SEO Reports for umrahsertaziarah.blogspot.com" alt="SEO Reports for umrahsertaziarah.blogspot.com"></a>
Just copy and paste this code in your website!


Read more: http://chkme.com/page-seo-tools#ixzz34e4imjdV





umrah pesendirian menjadikan hatisenang dan jimat kos

Ahad, September 22, 2013

Edit Jadual Dalam Blogger


Pengepala TajukPengepala TajukPengepala Tajuk
Petak JadualPetak JadualPetak Jadual
Petak JadualPetak IstimewaPetak Jadual
Petak JadualPetak JadualPetak Akhir


1.   Di bawah ini adalah HTML yang mewakil jadual di atas. 


<br />
<table border="2" bordercolor="#0033FF" cellpadding="3" cellspacing="3" style="background-color: #99ffff; color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: center;"><tbody>
<tr><th><span style="color: black;">Pengepala Tajuk</span></th><th><span style="color: black;">Pengepala Tajuk</span></th><th><span style="color: black;">Pengepala Tajuk</span></th></tr>
<tr><td><span style="color: black;">Petak Jadual</span></td><td><span style="color: black;">Petak Jadual</span></td><td><span style="color: black;">Petak Jadual</span></td></tr>
<tr><td><span style="color: black;">Petak Jadual</span></td><td><b><span style="color: black;">Petak Istimewa</span></b></td><td><span style="color: black;">Petak Jadual</span></td></tr>
<tr><td><span style="color: black;">Petak Jadual</span></td><td><span style="color: black;">Petak Jadual</span></td><td><i><span style="color: black;">Petak Akhir</span></i></td></tr>
</tbody></table>
<br />
<div>
<br /></div>

2.  Pilih HTML Yang akan di Edit dan gantikan dengan HTML di Bawah:

    <TABLE border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%"                 cellpadding="3" cellspacing="3">

2.  Hasilnya adalah SepertiBerikut:

<br />
<table border="2" bordercolor="#0033FF" cellpadding="3" cellspacing="3" style="background-color: #99FFF; color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: center;"><tbody>
<tr><th><span style="color: black;">Pengepala Tajuk</span></th><th><span style="color: black;">Pengepala Tajuk</span></th><th><span style="color: black;">Pengepala Tajuk</span></th></tr>
<tr><td><span style="color: black;">Petak Jadual</span></td><td><span style="color: black;">Petak Jadual</span></td><td><span style="color: black;">Petak Jadual</span></td></tr>
<tr><td><span style="color: black;">Petak Jadual</span></td><td><b><span style="color: black;">Petak Istimewa</span></b></td><td><span style="color: black;">Petak Jadual</span></td></tr>
<tr><td><span style="color: black;">Petak Jadual</span></td><td><span style="color: black;">Petak Jadual</span></td><td><i><span style="color: black;">Petak Akhir</span></i></td></tr>
</tbody></table>
<br />
<div>
<br /></div>

4.   Hasil Jadual Baru Seperti Berikut

Pengepala TajukPengepala TajukPengepala Tajuk
Petak JadualPetak JadualPetak Jadual
Petak JadualPetak IstimewaPetak Jadual
Petak JadualPetak JadualPetak Akhir


5.  Edit sekali lagi Bagi Mendapatakan Jadual yang Lebih Baik

Di sebabkan tulisan yang di pilih adalah hitam yang bersamaan dengan latar belakang, Cuba anda lakukan Edit Semula untuk dapatkan tulisan yang lebih jelasseperti contoh yang telah di edit di bawah:


Pengepala TajukPengepala TajukPengepala Tajuk
Petak JadualPetak JadualPetak Jadual
Petak JadualPetak IstimewaPetak Jadual
Petak JadualPetak JadualPetak Akhir




Menbuat Jadual dengan HTML

Jadual 3 kalum dengan 4 baris termasuk Pengepala

Pengepala Tajuk Pengepala Tajuk Pengepala Tajuk
Petak Jadual Petak Jadual Petak Jadual
Petak Jadual Petak Istimewa Petak Jadual
Petak Jadual Petak Jadual Petak Akhir


Nota: 
jadual di atas adalah di hasilkan melalui kod  HTML di bawah. Anda boleh melakukan dengan memulakan kod di bawah dengan cara "copy dan paste" dalam entri anda semasa mode HTML. Ubah pengepala dan cell dalam mode karangan.

<table border="2" bordercolor="#0033FF" cellpadding="3" cellspacing="3" style="background-color: #99ffff; width: 100%px;">
<tbody>
<tr>
<th>Pengepala Tajuk</th>
<th>Pengepala Tajuk</th>
<th>Pengepala Tajuk</th>
</tr>
<tr>
<td>Petak Jadual</td>
<td>Petak Jaduall</td>
<td>Petak Jadual</td>
</tr>
<tr>
<td>Petak Jadual</td>
<td><b>Petak Istimewa</b></td>
<td>Petak Jadual</td>
</tr>
<tr>
<td>Petak Jadual</td>
<td>Petak Jadual</td>
<td>Petak Jadual</td>
</tr>
</tbody></table>


Selamat Berjaya

Bagaimana Hendak Membuat Jadual Dalam Blogger

Bahagian tutorial Blogger  ( Blogspot tutorial ) Blog UMRAHsertaZIARAH ini menerangkan bagaimana meletakkan jadual (table) ke post Blogger.
Anda akan mempelajari bagaimana untuk mencipta jadual dalam Blogger dari jadual yang mudah kepada jadual lebih kompleks dengan seli-warna.

Kami akan bermula dengan sebuah jadual asas dan secara beransur-ansur menambah gaya CSS ke jadual untuk memperbaiki rupa dan fungsi sehingga kita dapat membina jadual di gambarkan secara langsung di bawah. Tutorial Blogger ini sesuai untuk pemula blog.Tiada pengetahuan tentang CSS dan HTML di perlukan.

A Blogger Table Caption
Tajuk Jadual
Tajuk Jadual
tajuk Jadual
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell


Jadual adalah cara yang berguna untuk memaparkan maklumat terutamanya maklumat direkodkan. Jadual baik apabila anda mahu untuk menyelaraskan maklumat supaya ia adalah mudah untuk dibaca dan difahami. Anda boleh menambah teks, hyperlink dan juga imej-imej kepada jadual yang menjadikan ianya sangat berguna untuk menyampaikan maklumat.

Tiada cara mudah untuk menambah jadual dalam Blogger. Malah jika anda menggunakan editor baru yang anda akan ambil perhatian bahawa tidak ada butang jadual disediakan. Mujurlah ia adalah cukup mudah untuk menggunakan sedikit gaya CSS untuk merapikan jadual dan masukkan ini secara manual ke dalam post Blogger.


Bagaimana untuk Tambah Jadual kepada Posts Blogger 

Pertama, anda akan belajar bagaimana untuk menambah jadual yang mudah untuk Blogger. Kami akan bermula dengan sebuah jadual dengan 3 kalum dan 4 baris termasuk baris pengepala . Kemudian saya akan menunjukkan kepada anda langkah demi langkah bagaimana untuk menambah ciri-ciri yang berbeza untuk jadual termasuk bagaimana untuk menambah baris tambahan, warna latar belakang kepala, sempadan, kapsyen, menukar saiz jadual , pusat menyelaraskan jadual dan banyak lagi.


Jadual Jadual Header Header Jadual Tandukan

Pengepala TajukPengepala TajukPengepala Tajuk
Petak JadualPetak JadualPetak Jadual
Petak JadualPetak JadualPetak Jadual
Petak JadualPetak JadualPetak Jadual



  1. Dalam Blogger terbuka sama ada jawatan baru atau pos yang sedia ada yang anda ingin menambah jadual untuk
  2. Klik pada tab Edit HTML pada editor Blogger anda
  3. Salin kod berikut ke dalam post Blogger anda yang akan menghasilkan jadual asas seperti yang ditunjukkan di atas:
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><tr>
<th>Pengepala Tajuk</th>
<th>Pengepala Tajuk</th>
<th>Pengepala Tajuk</th>
</tr>
<tr>
<td>Petak Jadual</td>
<td>Petak Jaduall</td>
<td>Petak Jadual</td>
</tr>
<tr>
<td>Petak Jadual</td>
<td>Petak Jadual</td>
<td>Petak Jadual</td>
</tr>
<tr">

<td>Petak Jadual</td>
<td>Petak Jadual</td>
<td>Petak Jadual</td>
</tr>
</table>








4.    Membuat perubahan kepada jadual untuk disesuaikan dengan template Blogger anda sendiri jika perlu dengan perubahan berikut:Klik di sini

     

<TABLE border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">




4.1 lebar Sempadan ( biru)

4.2 Sempadan warna ( hitam)

4.3 Warna latar belakang (merah)

4.4 Jadual lebar (oren) Boleh peratusan atau lebar contohnya sebenar 500px



5. Sekarang kita akan menetapkan satu masalah yang menjengkelkan dalam Blogger yang menjadikan ruang putih yang terlalu banyak di atas jadual. Kami melakukan ini dengan menambah gaya berikut ditandakan dengan warna merah secara terus di atas tag meja dan menambah penutup </ div> di akhir kod table



<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table></div>


6.  Mari kita menambah beberapa gaya lagi kepada tajuk jadual kami untuk memperbaiki rupa meja kami sebagai ditandakan dengan warna merah. Menukar warna latar belakang dan ciri-ciri warna untuk disesuaikan dengan skim warna anda sendiri jika anda ingin

Pengepala TajukPengepala TajukPengepala Tajuk
Isi Petak Isi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak


<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>

7.      Dalam langkah ini kita akan ke pusat kandungan jadual Blogger kami. Ini boleh dilakukan dalam beberapa cara tetapi kita akan mengambil jalan pintas di sini dengan memberi gaya kepada setiap baris jadual.


Pengepala TajukPengepala TajukPengepala Tajuk
Isi Petak Isi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>

<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>

</table>

8.  Sekarang kita akan menambahbaikkan jadual Blogger kami dengan menambah seli baris berwarna untuk meningkatkan readibility dan rupa. Setakat ini cara yang paling mudah untuk melakukan ini adalah untuk menetapkan kelas.

Pengepala TajukPengepala TajukPengepala Tajuk
Isi Petak Isi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak


<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} </style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">


9.   Ia juga mudah untuk menambah kapsyen ke meja Blogger anda. Untuk keterangan di atas meja hanya menambah baris tajuk seperti yang ditunjukkan dengan warna merah. Untuk keterangan di bawah meja menambah baris kapsyen merah dan gaya seperti yang ditunjukkan dengan warna biru


Pengepala TajukPengepala TajukPengepala Tajuk
Isi Petak Isi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak


<table border="2" bordercolor="#0033FF" cellpadding="3" cellspacing="3" style="background-color: #99ffff; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 13px; line-height: 18.90625px;"><tbody>
<tr style="background-color: #0033ff; color: white; padding-bottom: 4px; padding-top: 5px; text-align: center;"><th>Pengepala Tajuk</th><th>Pengepala Tajuk</th><th>Pengepala Tajuk</th></tr>
<tr style="text-align: center;"><td>Isi Petak&nbsp;</td><td>Isi Petak</td><td>Isi Petak</td></tr>
<tr style="text-align: center;"><td><span style="background-color: lime; color: black;">Isi Petak</span></td><td><span style="background-color: lime;">Isi Petak</span></td><td><span style="background-color: lime;">Isi Petak</span></td></tr>
<tr style="text-align: center;"><td>Isi Petak</td><td>Isi Petak</td><td>Isi Petak</td></tr>
<tr style="text-align: center;"><td><span style="background-color: yellow;">Isi Petak</span></td><td><span style="background-color: yellow;">Isi Petak</span></td><td><span style="background-color: yellow;">Isi Petak</span></td></tr>
</tbody></table>
</div>
<div style="text-align: left;">
<br />


10.  Satu harta yang lebih penting perlu ditangani dalam jadual Blogger baru untuk meningkatkan rupa. Kita boleh mengurangkan sempadan dua kali ke dalam satu tunggal. Cara yang paling mudah untuk melakukan ini adalah untuk mengubah cellspacing kepada sifar sebagai ditandakan dengan warna merah. Atau, sebagai alternatif kita boleh memohon harta keruntuhan sempadan ke meja kami seperti yang ditunjukkan dengan warna biru. Nota: keruntuhan Sempadan mungkin tidak disokong oleh semua pelayar terutamanya jika sifat cellspacing yang ditakrifkan juga)


Jadual Caption Blogger
Pengepala Tajuk
Pengepala Tajuk
Pengepala Tajuk
Isi Petak 
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak


<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Jadual Caption Blogger</div>
<div style="text-align: left;">
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<table border="2" bordercolor="#0033FF" cellpadding="3" cellspacing="3" style="background-color: #99ffff; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 13px; line-height: 18.90625px;"><tbody>
<tr style="background-color: #0033ff; color: white; padding-bottom: 4px; padding-top: 5px; text-align: center;"><th><div style="margin: 0px;">
Pengepala Tajuk</div>
</th><th><div style="margin: 0px;">
Pengepala Tajuk</div>
</th><th><div style="margin: 0px;">
Pengepala Tajuk</div>
</th></tr>
<tr style="text-align: center;"><td><div style="margin: 0px;">
Isi Petak&nbsp;</div>
</td><td><div style="margin: 0px;">
Isi Petak</div>
</td><td><div style="margin: 0px;">
Isi Petak</div>
</td></tr>
<tr style="text-align: center;"><td><div style="margin: 0px;">
<span style="background-color: lime; color: black;">Isi Petak</span></div>
</td><td><div style="margin: 0px;">
<span style="background-color: lime;">Isi Petak</span></div>
</td><td><div style="margin: 0px;">
<span style="background-color: lime;">Isi Petak</span></div>
</td></tr>
<tr style="text-align: center;"><td><div style="margin: 0px;">
Isi Petak</div>
</td><td><div style="margin: 0px;">
Isi Petak</div>
</td><td><div style="margin: 0px;">
Isi Petak</div>
</td></tr>
<tr style="text-align: center;"><td><div style="margin: 0px;">
<span style="background-color: yellow;">Isi Petak</span></div>
</td><td><div style="margin: 0px;">
<span style="background-color: yellow;">Isi Petak</span></div>
</td><td><div style="margin: 0px;">
<span style="background-color: yellow;">Isi Petak</span></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="text-align: left;">



11. Satu harta yang lebih penting perlu ditangani dalam jadual Blogger baru untuk meningkatkan rupa. Kita boleh mengurangkan sempadan dua kali ke dalam satu tunggal. Cara yang paling mudah untuk melakukan ini adalah untuk mengubah cellspacing kepada sifar sebagai ditandakan dengan warna merah. Atau, sebagai alternatif kita boleh memohon harta keruntuhan sempadan ke meja kami seperti yang ditunjukkan dengan warna biru. Nota: keruntuhan Sempadan mungkin tidak disokong oleh semua pelayar terutamanya jika sifat cellspacing yang ditakrifkan juga)

Pengepala Tajuk
Pengepala Tajuk
Pengepala Tajuk
Isi Petak 
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak


<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">
<caption>A Blogger Table Caption</caption>
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>

12.   Sekarang pergi ke hadapan dan tambah data anda ke jadual Blogger baru anda. Mengisi dalam setiap contoh "Jadual Header " dan "Jadual Sel" dengan data anda sendiri. Maklumat yang anda menambah ke meja Blogger boleh teks, hyperlink atau imej

13.   Simpan perubahan anda ke meja Blogger dengan menyimpan dan menerbitkan catatan anda



Sila berasa bebas untuk menggunakan jadual Blogger ini sebagai template bila-bila masa yang anda perlukan untuk menambah meja ke jawatan Blogspot anda. Jika anda mahu untuk sentiasa menambah jadual untuk jawatan Blogger anda yang sentiasa kelihatan sama anda boleh pertimbangkan untuk menambah jadual CSS untuk gaya template Blogger anda.

Dalam Blogger tutorial ( Blogspot tutorial) saya telah menunjukkan bagaimana untuk membina sebuah jadual kompleks dalam HTML dan CSS untuk memasukkan ke dalam post Blogger. Anda telah belajar bagaimana untuk memanipulasi pelbagai ciri-ciri dan sifat-sifat jadual untuk mewujudkan satu jadual untuk Blogger yang sepadan dengan skim warna blog anda dan berfungsi dan menarik.

Artikel yang Berkaitan
Senarai Blog Tahu Bagaimana Tutorial untuk Blogger Blogs
Bagaimana Tukar Point Gaya peluru dalam Blogger ( Blogspot)
Bagaimana Buang Border Image Blogger Template Simple
Bagaimana untuk Tukar atau Padam Sempadan Imej dalam Blogger Posts
Bagaimana untuk Tambah Styling CSS untuk Blockquotes di Blogger
Bagaimana untuk Tambah , Padam atau Keluarkan Blogger Imej Sempadan
Bagaimana untuk menyelaraskan dan Jelaskan Posts dalam Blogger
Bagaimana untuk Tambah Divider Antara Blogger Posts
Bagaimana untuk Tambah atau Ubah Imej Latar belakang dalam Template Blogger


How to Add a Table to Blogger Blogspot Post

This Blogger tutorial (Blogspot tutorial) explains how to put a table into a Blogger post. You will learn how to create tables in Blogger ranging from a simple table to a more complex table with alternating colors. 

We will start with a basic table and gradually add CSS styling to the table to improve the look and functionality until we have built the table pictured directly below. No knowledge of CSS and HTML is assumed so this Blogger tutorial is suitable for absolute blogging beginners.

A Blogger Table Caption
Table HeaderTable HeaderTable Header
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell

Tables are a useful way to display information particularly tabulated information. Tables are good whenever you want to align information so that it is easy to read and understand. You can add text, hyperlinks and even images to a table which makes them very useful for presenting information.

There is no easy way to add tables in Blogger yet. Even if you are using the new editor you will note that no table button is provided. Fortunately it is easy enough to use a bit of CSS styling to spruce up a table and enter this manually into a Blogger post.


How to Add a Table to Blogger Posts

First you will learn how to add a simple table to Blogger. We are going to start with a table with 3 columns and 4 rows including a header row. Then I will show you step by step how to add different features to the table including how to add extra rows, a background color to the header, a border, a caption, change the size of the table, center align the table and more.


Table HeaderTable HeaderTable Header
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Ce

1. In Blogger open either a new post or an existing post that you wish to add a table to
2. Click on the Edit HTML tab on your Blogger editor
3. Copy the following code into your Blogger post which will produce the basic table as shown above:
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
4. Make changes to the table to suit your own Blogger template if necessary by changing the following:

<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
    4.1 Border width (blue)
    4.2 Border color (black)
    4.3 Background color (red)
    4.4 Table width (orange) Can be a percentage or actual width eg 500px
5. Now we are going to fix an annoying problem in Blogger which renders too much white space above the table. We do this by adding the following styling denoted in red directly above the table tag and adding a closing </div> at the end of the table code

    <style type="text/css">.nobrtable br { display: none }</style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
    <tr>
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    </table></div> 

6. Let's add some further styling to our table header to improve the look of our table as denoted in red. Change the background color and color attributes to suit your own color scheme if you wish

Table HeaderTable HeaderTable Header
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell


    <style type="text/css">.nobrtable br { display: none }</style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    </table> 

7.  Now let's add another row to our table for Blogger so you can see how this is done

Table HeaderTable HeaderTable Header
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell

    <style type="text/css">.nobrtable br { display: none }</style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    </table> 

8.  In this step we are going to center the contents of our Blogger table. This can be done in several ways but we are going to take a short cut here by assigning a style to every table row

Table HeaderTable HeaderTable Header
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell



    <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} </style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"> 


9. Now we are going to jazz up our Blogger table by adding alternating colored rows to improve readibility and appearance. By far the easiest way to do this is to assign a class.

Table HeaderTable HeaderTable Header
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;}</style>

<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>

10.  It is also easy to add a caption to your Blogger table. For a caption above the table simply add the caption line as shown in red. For a caption below the table add the caption line in red and a style as shown in blue




Table HeaderTable HeaderTable Header
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell

A Blogger Table Caption

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<caption>A Blogger Table Caption</caption>
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr class="alt">

<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>

11.  One more important property needs to be addressed in our new Blogger table to improve the look. We can reduce the double border into a single one. The easiest way to do this is to change the cellspacing to zero as denoted in red. Or, alternatively we can apply the border collapse property to our table as shown in blue. Note: Border collapse may not be supported by all browsers particularly if the cellspacing attribute is defined also)

A Blogger Table Caption
Table HeaderTable HeaderTable Header
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell




<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style>

<div class="nobrtable">

<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">

<caption>A Blogger Table Caption</caption>

<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">

<th>Table Header</th>

<th>Table Header</th>

<th>Table Header</th>

</tr>

<tr class="alt">

<td>Table Cell</td>

<td>Table Cell</td>

<td>Table Cell</td>

</tr>

<tr>

<td>Table Cell</td>

<td>Table Cell</td>

<td>Table Cell</td>

</tr>

<tr class="alt">

<td>Table Cell</td>

<td>Table Cell</td>

<td>Table Cell</td>

</tr>

</table>

12.  Now go ahead and add your data to your new Blogger table. Filling in each instance of "Table Header" and "Table Cell" with your own data. The information you add to the Blogger table can be text, hyperlinks or even an image

13. Save your changes to the Blogger table by saving and publishing your post


Please feel free to use this Blogger table as a template whenever you need to add a table to your Blogspot post. If you want to regularly add a table to your Blogger posts that consistently looks the same you could consider adding the table CSS styling to your Blogger template.

In this Blogger tutorial (Blogspot tutorial) I have demonstrated how to build a complex table in HTML and CSS to insert into a Blogger post. You have learned how to manipulate a variety of table properties and attributes to create a table for Blogger that matches the color scheme of your blog and is functional and appealing.

Related ArticlesList of Blog Know How Tutorials for Blogger Blogs
How to Change the Bullet Point Style in Blogger (Blogspot)
How to Remove Image Border in Blogger Template Simple 
How to Change or Delete Image Borders in Blogger Posts
How to Add CSS Styling to Blockquotes in Blogger
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger PostsHow to Add or Change a Background Image in a Blogger Template


Catatan Popular



Related Posts Plugin for WordPress, Blogger...

Visitor Umrah Persendirian