Practice Makes Right,repetitions Make Perpect.

Tentang Blog Ini ×

B log Ini merupakan media saya untuk berbagi segala hal yang berhubungan tentang blogging meskipun masih sederhana,Mand4rt juga merupakan media saya dalam menuangkan hasil karya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca.

Aura Template

T emplate yang saya gunakan ini merupakan buatan saya sendiri, Banyak yang mengatakan bahwasanya DHE adalah template hasil cloningan secara utuh namun tidak demikian template ini saya susun dari sangat dasar dengan pemahaman yang sedikit awam dan otodidak dalam pembuatannya saya berusaha meniru tampilan beberapa template yang pernah dipakai oleh:

DTE :] web.id

Tentang Saya

S

alam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Provinsi Sulawesi Barat Dan Saya Bersekolah Di SMA Neg 1 Polewali.Nama saya Haekal Fikri akrab dipanggil Haekal. Saya Tidak Mempunyai Guru Saya Belajar Secara Otodidak Beserta Bantuan Dari Teman-teman blogger saya dan saya masih NEWBIE Jadi jika Saya Tidak Dapat Menjawab Pertanyaan Anda Tentang Seputar Blogging Harap Di Maklumi.
iklan
Bagikan kepada teman!

Membuat Tabel Seperti Hostingan Dengan CSS3

Membuat Tabel Seperti Hostingan Dengan CSS3


Selamat pagi.Akhirnya bisa ngepost lagi setelah kemarin saya post tentang SITUS SEKOLAH SAYA DI RETAS Kali Ini Saya Mau Share Tentang Membuat Tabel Seperti Hostingan Dengan CSS3 Nah Untuk Mempersingkat Waktu Langsung Saja.Untuk anda yang sering meng-upload File ke Hostingan, pasti anda sering menemukan bentuk tabel seperti berikut ini.


Smart Starter Smart Medium
Price per month $ 2.90 $ 5.90 $ 9.90 $ 14.90
Storage Space 512 MB 1 GB 2 GB 4 GB
Bandwidth 50 GB 100 GB 150 GB Unlimited
MySQL Databases Unlimited Unlimited Unlimited Unlimited
Setup 19.90 $ 12.90 $ free free
PHP 5
Ruby on Rails

Yang di atas Gak bisa diklik karena bukan Gambar tapi Efek CSS3 hhe....

Yupz, sama dengan anda, karena penasaran saya pernah isenk ingin Men-save gambar tersebut tapi tidak bisa karena itu bukanlah Image melainkan Tabel yang dibuat dengan menggunakan Efek CSS3, lalu bagaimana Cara membuatnya?

Tenang Untuk anda yang masih berdomisili di Platform Blogger anda pun dapat membuatnya, silahkan ikuti langkah Dibawah ini..
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.


table.table1{
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse:separate;}
.table1 thead th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568F23;
border:1px solid #93CE37;
border-bottom:3px solid #9ED929;
background-color:#9DD929;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41)));
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;}
.table1 thead th:empty{
background:transparent;
border:none;}
.table1 tfoot td{
color: #9CD009;
font-size:32px;
text-align:center;
padding:10px 0px;
text-shadow:1px 1px 1px #444;}
.table1 tfoot th{
color:#666;}
.table1 tbody td{
padding:10px;text-align:center;
background-color:#DEF3CA;
border: 2px solid #E7EFE0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#666;text-shadow:1px 1px 1px #fff;}
.table1 tbody span.check::before{
content : url(http://www.theology.edu/Remata/Android/Help/check_icon.png)}

4. Langkah terakhir gunakan kode HTML berikut pada postingan :


<table class="table1">
<thead>
<tr>
<th>
</th>
<th scope="col" abbr="Starter">Smart Starter</th>
<th scope="col" abbr="Medium">Smart Medium</th>
<th scope="col" abbr="Business">Smart Business</th>
<th scope="col" abbr="Deluxe">Smart Deluxe</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Storage Space</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
</tr>
<tr>
<th scope="row">Ruby on Rails</th>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
</tr>
</tbody>
</table>

5. dan lihat hasilnya.

Mudah bukan? Yupz untuk itu silahkan anda coba dan Praktekkan sendiri....
iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Diposkan Oleh ❖
  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

32 Komentar

Permalink
tamu baru.., salam kenal :)
Permalink
Hehe Iya Salam Kenal Kembali :D :-d
Permalink
:-bd
Permalink
:-d
Permalink
Wew, templatenya hampir mirip dengan mas imron :p :D
Hanya berbeda sedikit saja.
Permalink
Hehe Iya Mas :D :p
Permalink
keren sob, kunjungan perdana sob. :D
Permalink
Thanks Sob :-d :D
Permalink
Wah bermanfaat sekali gan .. :) terimakasih sudah berbagi
Permalink
template baru :) semangat baru :D
Permalink
Wahh keren sob.. sob share cara membuat iklan di bawah postingan y??
Permalink
bagus juga tabelnya :-d
Permalink
Hehe Iya Sob :D
Permalink
Bisa Minta Emailnya Mas? Nanti Saya Kirimin :)
Permalink
Hehe iya sob :)
Permalink
Iya Mas Sama'' :-d :D
Permalink
nyoba ah..... :D
Permalink
keren ini tabel.nya :D
Permalink
Silahkan Mas Hehe :-d :D
Permalink
Iya Sob Hehe :-d :D
Permalink
Keren nih, kapan2 saya pake deh .. di follow dulu blognya biar ngga lupa XD
Permalink
Terimah Kasih Sob :-d :)
Permalink
keren gan.. maaf baru bisa dateng :)
Permalink
sedikit sran buat blog ini untuk postingan - postingan selanjutnya dibuatkan saja demonya ditempat lain supaya halaman postingannya tidak berantakan :)
Permalink
Hehe Thanks Gan :-d :Q
Permalink
hehe thanks mas atas sarannya :-d :D
Permalink
Wihh Keren Gannn Kapan" Tak Coba Deh :D
Salam Kenal yah Gan :)
Permalink
Hehe Iya Gan :-d :)
Permalink
boleh nih..
Permalink
keren ni, ntar deh sy cb
Permalink
hehe iya sob
Permalink
hehe sip,thanks dah berkunjung :D

Catatan
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Kode yang panjang bisa menggunakan tag <i rel="pre"> KODE PANJANG ANDA </i>
Untuk menyisipkan gambar, gunakan tag <i rel="image"> URL GAMBAR </i>
Untuk menyisipkan Judul, gunakan tag <b rel="h3"> JUDUL ANDA DI SINI... </b>
Untuk menciptakan efek tebal gunakan tag <b> TEKS ANDA DI SINI... </b>
Untuk menciptakan efek huruf miring gunakan tag <i> TEKS ANDA DI SINI... </i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang kita bahas saat ini akan sangat bermanfaat bagi pembaca lain.
:):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya::p*Klik Untuk Melihat Kode Emoticon!

Konversi Kode Special Character Comment Editor Virtual Pedoman Berkomentar Daftar Member Aktif

BATAL

gobottom