Accordion Menu

Diberdayakan oleh Blogger.

Kamis, 13 November 2014

Situs Penyedia Templte

www     04.20     0
- blogtemplate4u.com
- zoomtemplate.com
- blogskins.com
- btemplates.com
- borneotemplates.com

0 komentar:

Rabu, 12 November 2014

cara membuat form pendaftaran secara online dengan PHP

www     07.38     0

cara membuat form pendaftaran mahasiswa ini masih sangat tergolong kacau haha..
kenapa saya bilang kacau, ya mungkin karena aplikasi yang akan saya bagikan ini masih jauh dari kesempurnaan, jadi saya minta pada rekan-rekan sekalian untuk dapat mengembangkan lebih mantap lagi..
karena dengan menyempurnakan aplikasi ini akan banyak sekolah-sekolah ataupun tempat perkuliahan yang sangat membutuhkan aplikasi ini, karena di jamin dengan aplikasi ini akan sangat mempermudah kerja akademik.
oke, untuk mempersingkat mukaddimah ini sepertinya kita mulai saja acara ini hehe..

nah cara membuat form pendaftaran siswa/mahasiswa secara online dengan php ini  adalah sebagai berikut ini :

untuk yang pertama kali, silahkan buka text editor anda ...
kemudian...

copy script di bawah ini ..


<html>
<head><title>Form Pendaftaran Mahasiswa Baru</title>
</head>
<body>
<a href=http://www.facebook.com/miez.dehard?ref=tn_tnmn>
<img src="FTIUGP.jpg" width=80></a></td></tr>

<form action="insert.php" method="POST">
<table border='1' width='35%' cellpadding='2'  cellspacing='2' align='center' bgcolor="#FFFFF">
<caption><h2>Formulir Pendaftaran Mahasiswa Baru</h2></caption></td></tr>
<tr><td><b>Nama</b></td><td><input type="text" name="nama" size="30" maxlength="50"/></td></tr>
<tr><td><b>Jenis Kelamin</b></td><td><input type="radio" name="jenis_kelamin" value="pria"/><label for="jenis_kelamin">Pria</label>
<input type="radio" name="jenis_kelamin" value="wanita"/><label for="jenis_kelamin">Wanita</label>
</td></tr>
<tr><td><b>Status</b></td><td>
<select name="status">
<option value="Pilih Status Anda">Pilih Status Anda</option>
<option value="menikah">Menikah</option>
<option value="single">Single</option>
</select>
</td></tr>
<tr><td><b>Lulusan Sekolah<b/></td><td><input type="text" name="sekolah" size="30" maxlength="50"/></td></tr>
<tr><td><b>Tahun Ajaran</b></td><td><select name="tahun_ajaran">
<option>Pilih Tahun Ajaran</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select></td></tr>
<tr><td><b>Pekerjaan</b></td><td><input type="text" name="pekerjaan" size="30" maxlength="50"/></td></tr>
<tr><td><b>Alamat</b></td><td><textarea name="alamat" cols="30" rows="4"></textarea></td></tr>
<tr><td><b>Kelurahan</b></td><td><input type="text" name="kelurahan" size="30" maxlength="50"/></td></tr>
<tr><td><b>Kecamatan</b></td><td><input type="text" name="kecamatan" size="30" maxlength="50"/></td></tr>
<tr><td><b>Kota</b></td><td><input type="text" name="kota" size="30" maxlength="50"/></td></tr>
<tr><td><b>Provinsi<b></td><td>
<select name="provinsi">
<option value="Pilih Provinsi Anda">Pilih Provinsi Anda</option>
<option value="Bali">Bali</option>
<option value="Bangka Belitung">Bangka Belitung</option>
<option value="Banten">Banten</option>
<option value="Bengkulu">Bengkulu</option>

<option value="Gorontalo">Gorontalo</option>
<option value="Irian Jaya Barat">Irian Jaya Barat</option>
<option value="Jabotabekdecipsawcib">Jabotabekdecipsawcib</option>
<option value="Jambi">Jambi</option>
<option value="Jawa Barat">Jawa Barat</option>
<option value="Jawa Tengah">Jawa Tengah</option>
<option value="Jawa Timur">Jawa Timur</option>
<option value="Kalimantan Barat">Kalimantan Barat</option>
<option value="Kalimantan Selatan">Kalimantan Selatan</option>

<option value="Kalimantan Tengah">Kalimantan Tengah</option>
<option value="Kalimantan Timur">Kalimantan Timur</option>
<option value="Kepulauan Riau">Kepulauan Riau</option>
<option value="Lampung">Lampung</option>
<option value="Lokasi Lain-lain">Lokasi Lain-lain</option>
<option value="Maluku">Maluku</option>
<option value="Maluku Utara">Maluku Utara</option>
<option value="Nangroe Aceh Darussalam">Nangroe Aceh Darussalam</option>
<option value="Nusa Tenggara Barat">Nusa Tenggara Barat</option>

<option value="Nusa Tenggara Timur">Nusa Tenggara Timur</option>
<option value="Papua">Papua</option>
<option value="Riau">Riau</option>
<option value="Sulawesi Barat">Sulawesi Barat</option>
<option value="Sulawesi Selatan">Sulawesi Selatan</option>
<option value="Sulawesi Tengah">Sulawesi Tengah</option>
<option value="Sulawesi Tenggara">Sulawesi Tenggara</option>
<option value="Sulawesi Utara">Sulawesi Utara</option>
<option value="Sumatera Barat">Sumatera Barat</option>

<option value="Sumatera Selatan">Sumatera Selatan</option>
<option value="Sumatera Utara">Sumatera Utara</option>
<option value="Yogyakarta">Yogyakarta</option>
</select></td></tr>
<tr><td><b>No Telepon</b></td><td><input type="text" name="telepon" size="30" maxlength="50"/></td></tr>
<tr><td></td><td><input type="submit" name="kirim" value="Daftar!"/>
  <label>
  <input type="reset" name="Reset" id="button" value="Batal">
  </label></td></tr>
</table>
<p align="center"><a href="lihatdata.php"><strong>Lihat Data </strong></a></p>
<p align="center"><a href="miswansyah/login.php"><strong>login </strong></a></p>
</form>
dikembangkan oleh mahasiswa <a href=http://miswanphp.blogspot.com>FTIUGP</a>
</body>
</html>

simpan dengan nama index.html

selanjutnya buka lagi text editor nya..
segera copy lagi script di bawah..

<?php
include "koneksi.php";

$tanggal_daftar = date("Y-n-d");
$nama =  $_POST['nama'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$status =  $_POST['status'];
$sekolah =  $_POST['sekolah'];
$tahun_ajaran = $_POST['tahun_ajaran'];
$pekerjaan = $_POST['pekerjaan'];
$alamat = $_POST['alamat'];
$kelurahan = $_POST['kelurahan'];
$kecamatan = $_POST['kecamatan'];
$kota = $_POST['kota'];
$provinsi = $_POST['provinsi'];
$telepon = $_POST['telepon'];

$query_insert = "insert into tbl_daftar_mahasiswa(tanggal_daftar, nama_pendaftar, jns_kelamin, status, lulusan_sekolah,
                                                   tahun_ajaran, pekerjaan, alamat, kelurahan, kecamatan, kota, provinsi, telp)
                                                   values('$tanggal_daftar', '$nama', '$jenis_kelamin', '$status', '$sekolah',
                                                   '$tahun_ajaran', '$pekerjaan', '$alamat', '$kelurahan','$kecamatan', '$kota',
                                                    '$provinsi','$telepon');";

$insert = mysql_query($query_insert);

if($insert)
    {
    include("redirectview.php");
    } else
    {
    echo "Gagal update ... ";
    echo "<META HTTP-EQUIV=Refresh CONTENT='2; URL=lihatdata.php'>";
    } ?>

simpan dengan nama insert.php

buka lagi text editor anda ..
copy lagi..

<?php 
include "koneksi.php"; 
$select = "select * from tbl_daftar_mahasiswa order by id_daftar desc"; 
$select_query = mysql_query($select); 
?>
<html> 
<head> 
<title>Lihat Data</title> 
</head> 
<body> 
<table style="font-size:11px;font-family:'arial';text-align:center;" border='1' width="80%" align='center' > 
<caption><h1>Daftar Calon Mahasiswa Baru</h1></caption> 
<tr><th>No</th><th>Tanggal</th><th>Nama</th><th>Jenis Kelamin</th><th>Status</th><th>Lulusan</th><th>Tahun</th> 
<th>Pekerjaan</th><th>Alamat</th><th>Kelurahan</th><th>Kecamatan</th><th>Kota</th><th>Provinsi</th><th>Telepon</th> 
<?php 
while($select_result = mysql_fetch_array($select_query)) 

$id = $select_result['id_daftar'] ; 
$tanggaldaftar = $select_result['tanggal_daftar'] ; 
$nama = $select_result['nama_pendaftar'] ; 
$jeniskelamin = $select_result['jns_kelamin'] ; 
$status = $select_result['status'] ; 
$lulusan = $select_result['lulusan_sekolah'] ; 
$tahunajaran = $select_result['tahun_ajaran'] ; 
$pekerjaan = $select_result['pekerjaan'] ; 
$alamat = $select_result['alamat'] ; 
$kelurahan = $select_result['kelurahan'] ; 
$kecamatan = $select_result['kecamatan'] ; 
$kota = $select_result['kota'] ; 
$provinsi = $select_result['provinsi'] ; 
$telepon = $select_result['telp'] ; 

echo "<tr><td>$id</td><td>$tanggaldaftar</td><td>$nama</td><td>$jeniskelamin</td><td>$status</td><td>$lulusan</td> 
<td>$tahunajaran</td><td>$pekerjaan</td><td>$alamat</td><td>$kelurahan</td><td>$kecamatan</td><td>$kota</td> 
<td>$provinsi</td><td>$telepon</td> 
</tr>"; 

?> 
</table> 
<center> 
  <p> 
    <input type="button" value="Input Data" onClick="window.location.href='index.html'"> 
  </p> 
<form name="form1" method="POST" action="cari.php"> 
  <p>Masukan berdasarkan No. Telp : 
    <input name="telepon" type="text" id="telepon"> 
    <input type="submit" name="Submit" value="Cari"> 
  </p> 
</form></p> 
</center></p>
dikembangkan oleh mahasiswa <a href=http://miswanphp.blogspot.com>FTIUGP</a> 
</body> 
</html>

simpan dengan nama lihatdata.php

untuk koneksinya..
copy script di bawah ..

<?php
$host = "localhost";
$username = "root";
$password = "1";
$database = "daftar";
$koneksi = mysql_connect($host, $username, $password);
$pilihdatabase = mysql_select_db($database, $koneksi);

// if ($pilihdatabase) echo"Berhasil";
// else echo "Gagal Koneksi";
?>
simpan dengan nama koneksi.php

nah, untuk isi tabel dari pada mysql nya..
silakan copykan script berikut ini ..

-- phpMyAdmin SQL Dump
-- version 2.11.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jan 24, 2011 at 10:45 PM
-- Server version: 5.0.51
-- PHP Version: 5.2.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Database: `mahasiswa_db`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_daftar_mahasiswa`
--
CREATE TABLE IF NOT EXISTS `tbl_daftar_mahasiswa` (
  `id_daftar` int(10) NOT NULL auto_increment,
  `tanggal_daftar` date default NULL,
  `nama_pendaftar` varchar(75) default NULL,
  `jns_kelamin` varchar(15) default NULL,
  `status` varchar(20) default NULL,
  `lulusan_sekolah` varchar(20) default NULL,
  `tahun_ajaran` int(6) default NULL,
  `pekerjaan` varchar(125) default NULL,
  `alamat` varchar(150) default NULL,
  `kelurahan` varchar(75) default NULL,
  `kecamatan` varchar(75) default NULL,
  `kota` varchar(75) default NULL,
  `provinsi` varchar(75) default NULL,
  `telp` varchar(20) NOT NULL default '',
  PRIMARY KEY  (`id_daftar`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
--
-- Dumping data for table `tbl_daftar_mahasiswa`
--
simpan dengan nama mahasiswa.sql ..

simpan semua file di atas kedalam 1 folder dengan pendaftaran ..
nah, bagaimana?
tidak terlalu sulitkan?
hahaha..
timbul lagi pertanyaan, apakah tidak ada admin nya yang mengelola kegiatan pada aplikasi ini?????
o...
ada dong..
untuk rekan-rekan sekalian saya persilahkan untuk mendownload script lengkap untuk form pendaftaran mahasiswa/siswa secara online dengan PHP dan MYSQL..
pada script yang akan rekan download sudah memiliki admin yang mengatur kegiatan pada aplikasi ini hehe..
tapi sekali lagi saya beritahukan kepada rekan-rekan sekalian, aplikasi ini masih sangat,sangat,sangat jauh dari kesempurnaan.
silahkan download script pendaftaran secara online dengan PHP secara gratis.tis,tis..
silahkan download di sini
untuk login silahkan isi user ID : miswansyah
dan untuk password : miswansyah ..


demikian lah yang dapat saya sampaikan..
lebih dan kurang saya mohon maaf..
hehehe..
semoga bermanfaat,
hidup open source!!!! 

0 komentar:

Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down Menu

www     06.11     0
Template default bawaan blogger biasanya minim sekali dengan widget-widgettermasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts,related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.

memasang menu navigasi horizontal
menu navigasi horizontal bercabang

Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalamwidget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah header.

Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)

cara menambahkan menu navigasi drop down bercabang
add menu navigasi



    <style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;
 
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Tentang Saya</a>
                </li>
                <li>
                  <a href='#'>Contact</a>
                     <ul>
                        <li><a href='#'>Sub Halaman 1</a></li>
                        <li><a href='#'>Sub Halaman 2</a></li>
                        <li><a href='#'>Sub Halaman 3</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Daftar Isi ▼</a>                 <ul> 
                    <li><a href='URL'>
Sub Menu 1</a></li> 
                    <li><a href='Ur
l'>Sub Menu 2</a></li> 
                    <li><a href='
Url'>Sub Menu 3</a> 
                
   <ul> 
                    <li><a href='#'>Sub 
Sub Menu 1</a></li> 
                    <li><a href='#'>Sub 
Sub Menu 2</a></li> 
                    <li><a href='#'>Sub 
Sub Menu 3</a></li> 
                  </ul>

                  </li>
                  </ul>             </li>
          </ul>
        </div>



Pengaturan dan modifikasi;

1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AFE

2. Untuk membuang cabang yang tidak dibutuhkan (mungkin terlalu banyak lihat kode berwarna biru 
                  <ul> 
                    <li><a href='#'>Sub Sub Menu 1</a></li> 
                    <li><a href='#'>Sub 
Sub Menu 2</a></li> 
                    <li><a href='#'>Sub 
Sub Menu 3</a></li> 
                  </ul>
bisa juga sobat tambahkan di item menu lainnya jika ingin.

3.  Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .

4.  Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.

Oke saya kira sudah cukup jelas dan mudah, untuk live  demo silahkan buka di sini

Selamat mencoba.  

Update:

Buat sobat yang bermasalah saat memasang di elemen header cari kode berikut ini (warna merah):
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Sample Blog (Header)' type='Header'>
<b:includable id='main'>
ganti 1 menjadi 3 no menjadi yes sehingga menjadi seperti ini. 
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
Setelah itu pindahkan kode HTML/javascriptnya diatas atau di bawah elemenheader



0 komentar:

Cara Membuat / Mengganti Favicon / Site Icon Blog

www     05.55     0
Favorit Icon atau yang disingkat Favicon adalah sebuah gambar kecil di address bar. Terletak disebelah kiri nama blog ataupun judul posting blog yang sedang kita buka. favicon bawaan blogspot biasanya dilambangkan dengan huruf B dalam kotak berwarna orange. Seorang blogger mengganti faviconnya mungkin bisa jadi agar terlihat lebih indah, keren dan profesional, hehehe. Lihat Gambar di Bawah.

cara mengganti merubah favicon blog


Ada 2 cara untuk mengganti favicon, cara pertama ialah secara default dan ini cukup mudah dilakukan sedangkan cara kedua ialah dengan membuat favicon secara online kemudian mengupload gambar favicon itu di hosting/tempatpenyimpanan image online (misal di google code). Yuk kita simak sama-sama caranya.

Cara Pertama;

1. Buatlah dan Siapkan gambar yang akan dijadikan favicon, persegi bujur sangkar misalnya ukuran 32x32 pixel atau berapapun yang penting harus persegi.

2. Masuk ke Rancangan > Tata Letak > Lihat ada kata Favicon di atas headerKliklink Edit.

mengganti ikon blog

3. Cari gambar dengan klik Telusuri lalu klik simpan.

4. Favicon blog sobat sudah berubah. hehehe

Cara kedua;

1. Masuk ke genfavicon.com  atau ke www.favicon.cc
  
2. Buat favicon di  situ. sebagai contoh saya akan membuat favicon di genfavicon.

3. Masukkan gambar baik lewat url gambar ataupun menguploadnya (disini saya menguploadnya) lalu Klik Upload image

4. Jika sudah diupload bisa Select Size untuk menentukan ukuran gambar. atau juga memotongnya/crop (crop & preview) sesuai tampilan yang kita inginkan.

5. Download favicon Image. Lalu upload ke hosting gambar, disini Saya menguploadnya ke google code.


upload favicon di google code

6. Buka Dasbor > Menu Template > edit HTML > centang expand template, cari kode  <b:skin><![CDATA[. Lalu masukkan alamat url favicon blog yang telah di upload di hosting image tadi, tepat di atas kode  
<b:skin><![CDATA[.  diantara kode biru dibawah.
<link href=' masukkan alamat tempat hosting favicon ' rel='shotcut icon'/>
sebagai contoh lihat kode di bawah ini.

<link href='http://julak-project.googlecode.com/files/animated_Favicon.gif' rel='shotcut icon'/>
 <b:skin><![CDATA[
pada kode berwarna merah diatas, adalah alamat saya menyimpan/hosting gambar favicon blog ini.

7. Jika sudah klik pratinjau, lalu save template. Lihat perubahannya.

Jika sobat mau tau cara membuat file hosting image, javascript maupun dokumen lain di google code termasuk menyimpan gambar favicon silahkan kunjungi postingan cara membuat file hosting di google code
Nah bagaimana sobat sudah berhasil mengganti faviconnya, terlihat lebihprofesional, keren dan ... bagus khan? hehehe selamat mencoba. Salam Blogger.

0 komentar:

Cara membuat tabel di Blog tanpa Coding

www     05.51     0

Membuat tabel dalam sebuah artikel bagi sebagian blogger mungkin merupakan hal yang sulit, karena bagi kita yang belum paham kode-kode HTML tentu akan kebingungan. Sebenarnya bisa saja kita membuat tabel dengan mengcopy paste dokumen tabel yang sudah kita buat di Microsoft word atau Excel. tapi jika sobat blogger memiliki koneksi internet yang lelet, terkadang tidak bisa terpublikasi. Mengapa bisa tidak terpublikasi? Karena tabel atau dokumen yang langsung kitacopy paste dari microsoft word / Excel tadi sebenarnya mengandung kode-kode rumit. Terkadang pula tabel yang sudah kita copas dari excel, ketika di masukkanke posting blog tidak menjadi sebuah tabel yang diinginkan / tidak ada garisnya.

Jika sobat sudah memakai software/aplikasi Windows Live Writer, membuattabel akan mudah dilakukan, karena dalam toolsnya sudah ada pembuat tabel. Berbeda dengan blogger yang belum ada.

Buat sobat yang menemui kendala dalam pembuatan tabel di blog karena belum mengenal kode-kode HTML/CSS tabel, mungkin bisa mengikuti cara berikut ini.

1. Buatlah terlebih dulu tabel artikel kita di MS word/excel.

2. Blok/Highlight tabel yang sudah jadi tadi, kemudian copy.

3. Lalu Masuk ke http://tableizer.journalistopia.com/

4. Paste dokumen tabel tadi di dalam for.

Paste your cells from Excel, Calc or other spreadsheet here:

cara membuat tabel di artikel blog dengan mudah


5. Jangan lupa mengatur ukuran huruf, jenis huruf dan warna header tabel di posting blog.

6. Jika sudah selesai, lihat preview kodenya di bagian bawah, Klik Tableize it!

7. Tunggu sebentar, maka Akan di dapat kode HTML untuk tabel yang siap dimasukkan ke dalam posting blog.

8. Langkah berikutnya adalah copy kode yang di dapat di form

9. Masuk ke pembuatan artikel, Silakan masukkan kata atau kalimat yang dikehendaki
 
Klik menu HTML di samping menu Compose.

Memasukkan kode yang sudah di copy tadi pada tempat yang dikehendaki

10. Kembali ke menu Compose untuk memasukkan kalimat atau kata-kata yang lainnya, seandainya tabel berada di tengah postingan.


Sebagai contoh bisa dilihat pada tabel di bawah adalah hasil Tableizer.


NoNama TutorialKODEKeterangan
1Cara membuat tabelHTML
2Cara membuat tabelCSS 3
3Cara membuat tabelCSS 5



Cukup mudah bukan? Memang untuk pewarnaan hanya bisa di header tabel saja. Silakan sobat coba-coba.

0 komentar:

© 2014 Blogna Sim Kuriiiing | Distributed By My Blogger Themes | Designed By Bloggertheme9