May 2011 - Anwariz.com Sahabat Inspirasi Indonesia

Cari aja disini

Cara Buat Variasi Blockquote

Dalam menulis sebuah postingan blog, biasanya kita juga memberikan penekanan pada bagian terpenting yang menjadi isi utama dari tulisan yang kita buat. Tujuannya adalah agar membuat pembaca lebih mudah dalam menangkap inti dari tulisan yang sedang kita sajikan tersebut. 
Membuat block quote bervariasi

Dalam membuat penekanan tersebut ada banyak cara yang biasanya dipakai oleh blogger, sebagian ada yang menggunakan border untuk tampilan khusus, sebagian juga ada yang menggunakan blockquote.

Sebelum beranjak lebih jauh, apa sih sebenarnya blockquote itu? Blockquote merupakan sebuah kotak yang membingkai tulisan tertentu yang menunjukan kalau tulisan itu merupakan sebuah tulisan penting yang perlu mendapat perhatian dari pembaca untuk mendapatkan inti dari bacaan secara keseluruhan. 

Berbicara mengenai blockquote, kita kadang merasa bosan dengan tampilan blockquote default yang hanya itu-itu saja. So, adakah cara untuk membuat variasi blockquote dalam blog kita ini? Yup, tentu saja ada. Dengan variasi blockquote yang lebih menarik tidak hanya akan memperjelas pembaca dalam menemukan dan memahami inti bacaan kita, tetapi juga akan memberikan daya tarik tersendiri bagi pengunjung yang tidak terbiasa banyak membaca untuk kemudian mengamati dan membacanya. 

Cara membuat variasi blockquote ini dapat kita bedakan menjadi dua langkah, yaitu cara yang otomatis dan manual.

Cara otomatis.

Cara otomatis dalam membuat blockquote ini memungkinkan kita untuk tidak lagi harus memasukan kode-kode HTML untuk menampilkan blockquote saat kita membuat postingan blog, karena saat kita mengklik ikon blockquote akan secara otomatis muncul model blockquote yang kita inginkan.

Cara membuatnya adalah sebagai berikut ;

Pertama masuk ke akun blogger kita.
Klik fitur rancangan.
Klik edit HTML.
Cari kode blockquote dalam kode HTML template blog kita tersebut.
Hapus kode blockquote tersebut, kemudian ganti dengan memasukan kode HTML blockquote yang kita inginkan.
Klik simpan template.

Keterangan :
  1. Untuk mempermudah pencarian kode HTML yang dimaksud, klik tombol Ctrl + F pada keyboard kita.
  2. Selalu biasakan untuk download template blog kita terlebih dahulu sebelum melakukan edit, untuk back up sebagai antisipasi saat kita mengalami kegagalan sewaktu proses editing berlangsung.

Cara manual.

Cara ini tidak membutuhkan penggantian kode HTML template blog, tetapi kita hanya perlu untuk memasukan kode HTML blockquote yang kita inginkan setiap kali kita membuat sebuah postingan. Caranya adalah saat kita membuat postingan sebuah blog, jangan menuliskan blockquotenya di bagian compose. Akan tetapi, tuliskan blockquote tersebut beserta kode HTML untuk menampilkannya pada bagian edit HTML (letaknya tepat di sebelah kiri bagian compose).

Adapun kode HTML yang perlu kita masukan untuk menampilkan blockquotenya yaitu ;

<blockquote style=" Masukkan kode HTML blockquote yang ingin kita tampilkan di sini "> Masukkan tulisan yang akan kita jadikan blockquote di sini </blockquote>

Beberapa bentuk variasi blockquote beserta kode HTMLnya yang dapat kita pilih untuk kemudian di tampilkan dalam postingan blog kita antara lain sebagai berikut ;

Bentuk 1.

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 2.

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 3.

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 4.

blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 5.

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 6.

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 7.

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 8.

.post blockquote { background: #F3F3F1 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 9.

blockquote { background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 10.

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 11.

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 12.

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5amaI/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4ut_xfBI/AAAAAAAACO0/rQVkmrMYnd8/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 13.

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(http://2.bp.blogspot.com/_7wsQzULWIwo/SwhrZPcjY4I/AAAAAAAACRk/qOMm-cht3rw/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 14.

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c7RglzI/AAAAAAAACOU/bwGBdTO2lq4/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c0v4knI/AAAAAAAACOM/S-iKAwSXT-I/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 15.

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 16.

blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TR3MwDiXB1I/AAAAAAAAAQo/Fi8TGwkSRNQ/s1600/quote.png") 5% no-repeat #FFF8DD; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 17.

blockquote{ background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 18.

blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 19.

blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid rgb(185, 227, 95); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 20.

blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid rgb(56, 97, 11); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 21.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 22.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 23.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 24.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs pribadi yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana tulisan yang sebagai postingan tersebut berisi tentang suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapatkan reaksi dari pembaca dan diperbaharui secara berkala.

Nah, bagaimana kawan? Mudah bukan? 

Dengan beberapa langkah singkat dan mudah kita akan mendapatkan tampilan blockquote yang lebih menarik dari biasanya. So, hal ini akan lebih menarik minat pengunjung untuk membaca secara lebih mendalam tentang postingan blog kita.
Read More

Buat Tabel Dalam Postingan Blog Via Google Documents

Beberapa hari yang lalu kita sudah membahas bersama mengenai bagaimana cara membuat tabel dalam postingan blog dengan cara kode HTML. Sekarang, kita akan mencoba membuat tabel dalam postingan blog tersebut, tetapi dengan cara yang relatif lebih mudah. 

buat tabel di google dokumen
Bagaimana caranya? Kita akan membuat tabel dalam postingan blog dengan google documents.

Ada yang sudah kenal dengan google documents ini? Yup, google documents merupakan sarana yang dapat kita gunakan untuk membuat sebuah file layaknya yang biasa kita kerjakan dalam microsoft office seperti presentasi, tabel dalam excel, tulisan biasa dalam word secara online. Nah, kali ini kita akan mencoba memanfaatkan fasilitas tersebut guna membuat sebuat tabel yang nantinya dapat kita tampilkan dalam postingan blog kita.

Akan tetapi, sebelum kita beranjak pada langkah teknisnya ada beberapa poin yang perlu kita perhatikan dalam membuat tabel untuk postingan blog via google documents ini. Apa saja itu?

  1. File tabel hasil pembuatan di google documents yang kemudian ditampilkan dalam postingan blog kita tidak akan bisa di salin (copy paste) oleh pengunjung.
  2. Saat proses pembuatan, kita tidak perlu menggunakan kode HTML yang biasanya kita pakai untuk membuat tabel seperti <table>, <td>, dan <tr>.
  3. Kita dapat menampilkan tabel dengan kolom dan baris yang lebih panjang tanpa dibatasi oleh ukuran halaman blog. Saat ada kolom maupun baris tabel yang panjangnya melebihi ukuran halaman posting blog kita, maka kelebihan itu akan ditampilkan dengan cara scroll (gulung) untuk menghemat tempat.
  4. Kita juga dapat memilih kolom dan baris bagian mana saja yang ingin kita tampilkan. Karena hasil tabel yang kita buat tidak harus ditampilkan semuanya, tetapi kita juga dapat memilih bagian mana saja yang ingin kita tampilkan dan bagian mana saja yang tidak.
  5. Jika sewaktu-waktu kita ingin melakukan pengeditan data, kita dapat melakukan perubahan langsung ke situs google documents.

Lalu, bagaimana cara membuatnya?

Pertama, masuk ke situs google documents lewat akun gmail yang kita punya.

 

Setelah itu klik create new dan pilih spreadsheet.

 

Akan muncul lembar kerja layaknya excel yang biasa kita gunakan. Buat lah tabel yang kita inginkan beserta data-data yang ingin kita tampilkan.

Klik File dan save tabel yang telah kita buat. Beri nama hasil tabel tersebut sesuai keinginan kita.


Klik share pada bagian pojok kanan atas, dan pilih publish as a web page.


Setelah itu akan muncul halaman kecil untuk publish to the web. Pilih sheet mana saja yang ingin kita tampilkan, contreng Automatically republish when changes are made, dan klik start publishing.


Pilih HTML to embed in a page, pilih sheet mana yang ingin kita tampilkan dalam postingan blog, dan pilih range baris dan kolom yang ingin ditampilkan (misal: A1:E10).


Copy kode HTML yang tersedia di bwahnya, lalu pastekan di blog kita (paste di edit HTML saat kita membuat postingan blog).

Atur lebar kolom dan baris tabel yang akan ditampilkan dalam postingan blog melalui kode HTML yang diberikan tersebut.

Contoh kodenya adalah sebagai berikut ;

<iframe width='500' height='300' frameborder='0' src='https://spreadsheets.google.com/spreadsheet/pub?hl=en&hl=en&key=0An5jlPoFxaE3dGtCRGtWRnFTTVptQ29uZDlaLWRfb1E&single=true&gid=0&range=A1%3AE10&output=html&widget=true'></iframe>

Maka ;
  • Ganti width='500' untuk mengubah ukuran lebar tabel yang ditampilkan.
  • Ganti height='300' untuk mengubah ukuran tinggi tabel yang ditampilkan.
  • Saat ukuran yang kita ubah ternyata melebihi ukuran dari halaman posting blog kita, maka sisa bagian tabel yang tidak masuk itu akan tetap ditampilkan, hanya saja dalam bentuk scroll.

Contoh hasil tabel yang ditampilkan dalam postingan blog.



Wah, cukup panjang ya caranya? 
Memang cara membuat tabel yang demikian relatif mudah karena kita akan terhindar dari penggunaan kode HTML yang rumit saat proses pembuatan. Dengan cara seperti ini juga memungkinkan kita untuk melakukan edit yang cepat jika sewaktu-waktu ingin melakukan perubahan data. Akan tetapi, kelemahannya adalah kita harus melakukan pengerjaan pembuatan tabel ini secara online. So, pastikan jika koneksi internet yang kita gunakan stabil untuk menghindari kerumitan saat proses pembuatan. 

Ada yang sudah pernah mencobanya? 
Bagaimana hasilnya? Yuk kita bagi-bagikan pengetahuan kita bersama! 
Kalau ada yang belum jelas dan ingin ditanyakan, silakan sampaikan lewat kotak komentar ya kawan.
Read More