Sabtu, 07 Mei 2011

Teknik SEO On Page

SEO menjadi salah satu kebutuhan blogger yang harus diperhatikan. Meski sebagian di antar kita ada kerap kali mengabaikannya, tetapi pada dasarnya SEO ini sangat penting dan berperan sekali dalam memajukan blog kita. Sudah paham kan tentang bahasan kita kemarin mengenai apa saja manfaat dari SEO itu?


Berlanjut, kali ini kita akan membahas lebih teknis bagaimana penerapan SEO ini dalam blog kita agar ke depannya dapat membuat kinerja blog kita menjadi lebih baik. Pada intinya, penerapan SEO dibagi menjadi dua hal, yaitu Teknik SEO On Page dan Teknik SEO Off Page. Apa yang menjadi perbedaan di antara keduanya?

Teknik SEO On Page merupakan penggunaan Teknik SEO yang dilakukan secara internal dalam halaman blog kita. Sedangkan Teknik SEO Off Page merupakan penggunaan Teknik SEO yang dilakukan di luar blog kita, artinya dikerjakan secara eksternal. Pada bahasan kali ini kita akan secara khusus membahas mengenai bagaimana optimalisasi tersebut dilakukan terutama untu Teknik SEO On Page, sementara untuk Teknik SEO Off Page akan kita bahas lagi pada kesempatan berikutnya.

Bagaimana menerapkan Teknik SEO On Page dalam blog kita ini?

Gunakan meta keyword dan meta description.

Berdasarkan cara kerjanya, Google menggunakan salinan deskripsi blog kita dalam memasarkan blog kita di search engine. So, optimalkan lah penggunaan meta description ini agar lebih memudahkan Google dalam mengidentifikasi blog kita sesuai kebutuhan informasi yang sedang diakses untuk dicari. Meta keyword juga berguna untuk lebih mengidentifikasikan keyword yang dimasukan oleh pengguna internet dalam mencari informasi apakah relevan dengan informasi yang ada di blog kita atau tidak. Gunakan keyword yang benar-benar berhubungan dan menjadi topik blog kita agar penggunaanya lebih optimal. Lebih spesifik lebih baik daripada asal menembakan (dengan menuliskan) keyword yang bersifat umum.

Gunakan title tag.

Penggunaan title tag sangat bermanfaat dalam SEO. Dengan title tag, blog kita akan lebih mudah terindeks saat ada penjaringan oleh search engine terhadap sebuah keyword yang dimasukan oleh pengguna internet untuk mencari informasi. Dengan title tag, maka judul dari setiap postingan dalam blog kita akan lebih mudah dimasukan oleh search engine sebagai keyword. Untuk pembahasan bagaimana cara menerapkan title tag beserta meta description dan meta keyword akan ditampilkan pada postingan berikutnya.

Keyword pada postingan.

Saat kita menulis sebuah postingan, pastikan jika kita memberikan kata kunci (keyword) dari topik apa yang sedang kita bahas. Keyword juga bias menyasar pada perkiraan keyword apa yang menurut kita akan digunakan oleh pengguna internet untuk mencari informasi yang berkaitan dengan isi postingan yang kita buat tersebut. Penekanan keyword dalam postingan ini dapat dilakukan dengan memberikan cetak tebal (bold), tulisan miring (italic), atau garis bawah (underline) pada kata atau kalimat yang kita gunakan sebagai keywordnya.

Cantumkan link antarhalaman posting.

Saat kita menuliskan sebuah postingan juga jangan lupa untuk mencantumkan link dari halaman postingan blog kita lainnya. Akan tetapi, pencantuman link ini juga tidak boleh sembarangan. Jangan membuat pembaca kebingungan karena kita asal pasang link tanpa memperhatikan keterkaitannya. Dengan link yang saling tertempel dalam masing-masing halaman posting blog kita ini akan membuat halaman postingan yang terkena link akan terseret masuk apabila ada salah satu halaman postingan blog kita yang masuk dalam halaman utama hasil pencarian search engine.

Optimalisasi gambar.

Saat kita memasukan gambar dalam postingan blog, pastikan jika gambar yang kita masukan tersebut terlebih dahulu memiliki nama simpanan sebelumnya yang mendukung keyword dari postingan kita. Misalnya saat itu kita sedang menuli postingan tentang cara membuat pecel lele. Maka, saat kita memasukan gambar ikan lele sebaiknya gambar tersebut memiliki nama simpanan seperti cara buat ikan lele, ikan lele, buat ikan lele, dsb. Pada saat kita menulis postingan, klik bagian edit HTML yang letaknya di sebelah compose. Pada bagian gambar yang sudah terupload, cari keterangan  alt. Nah, masukan keyword yang kita harapkan setelah keterangan alt tersebut.

Bagaimana?
Cukup jelas bukan mengenai Teknik SEO On Page ini?

Jika penggunaan SEO sangat bagus, maka kualitas blog kita pun juga akan ikut terangkat dengan baik. So, mari kita mulai dengan mengerjakannya sekarang!
Kalau ada yang belum jelas bias silakan ditanyakan ya kawan..
Salam blogger!

Jumat, 06 Mei 2011

5 Manfaat Penting Dari SEO

Sudah banyak diketahui blogger jika SEO sangat berperan penting dalam mendukung keberhasilan blog yang kita miliki untuk muncul di halaman terdepan hasil pencarian search engine atas kata kunci tertentu. Dengan hasil yang demikian tentu akan membawa dampak yang positif dalam rangka meningkatkan kunjungan ke dalam blog kita.


Selain manfaat di atas, apakah masih ada manfaat yang lainnya?
Yuk kita urai satu per satu Manfaat SEO bagi blogger seperti kita ini.

Blog mendapatkan posisi yang baik di halaman hasil pencarian search engine.

Hal ini adalah hal yang wajar apabila kita menerapkan Teknik SEO dalam blog kita. Sebuah blog yang sudah di desain khusus menggunakan rancangan SEO akan selalu tampil optimal dalam halaman hasil search engine. Mengapa bisa demikian? Menurut pendapat Master SEO, optimalisasi blog dengan Teknik SEO dapat memanipulasi blog kita hingga dapat muncul di halaman terdepan hasil pencarian search engine. Hal ini didukung karena metode yang digunakan dalam Teknik SEO ini selaras dengan metode search engine dalam mengindeks konten-konten yang ada dalam blog kita. Teknik SEO akan mudah mempercepat robot search engine dalam mengcrawl atau menjaring blog kita sehingga semua konten dalam blog kita dapat terserap dengan baik oleh search engine. Hasilnya? Ya, tentu saja ini akan mengoptimalkan posisi blog kita dalam hasil pencarian search engine.

Blog kita mendapatkan banyak kunjungan.

Hal ini berhubungan dengan manfaat di atas. Semakin sering blog kita muncul di halaman utama hasil pencarian search engine, maka kunjungan ke dalam blog kita pun akan semakin besar. Biasanya sumber traffic terbesar sebuah blog adalah melalui search engine. Nah, jika kita mampu memanfaatkan peluang ini dengan Teknik SEO yang baik, maka blog potensi kunjungan ke dalam blog kita pun akan semakin besar.

Orang awan melakukan searching bukan karena mereka ingin mengunjungi blog maupun situs mana yang mereka anggap bagus, melainkan karena mereka butuh informasi. Dan karena mereka tidak tahu di blog atau situs mana informasi yang mereka cari itu ditampilkan, maka mereka menggunakan serach engine. Nah, mereka juga kemunginkinan hanya akan mengunjungi blog yang muncul di halaman depan saja. Sangat jarang ada yang mengunjungi sampai ke halaman dua, tiga, empat, dst. Jika tidak ada informasi yang relevan, mereka pasti berpikir telah salah memasukan keyword dan berpikir untuk merubah dengan memasukan keyword yang lain. Bagaimana jika blog kita yang muncul di halaman utama? Dan bagaimana nasibnya jika blog kita yang muncul di halaman-halaman belakang? Di sini lah SEO berperan dalam membantu mengangkat kualitas blog kita.

Meningkatkan Alexa Traffic Rank.

Alexa Traffic Rank sangat berkaitan dengan jumlah kunjungan ke dalam blog kita. Semakin banyak total kunjungan orang ke dalam blog kita, maka peringkat Alexa Traffic Rank blog kita akan semakin bagus. Bagusnya peringkat Alexa Traffic Rank ini ditandai dengan semakin kecilnya nilainya. Untuk lebih jelasnya mengenai apa itu Alexa Traffic Rank, bisa dilihat penjelasannya di sini. Dan untuk melihat secara lebih jelas lagi bagaimana mendapatkan peringkat Alexa Traffic Rank yang baik, bisa dilihat penjelasannya di sini.

Peluang mendapatkan penghasilan online melalui iklan akan semakin besar.

Salah satu acuan yang diperhatikan advertiser dalam memasang iklan di sebuah blog adalah pagerank dan Alexa Traffic Ranknya. Semakin baik peringkat keduanya, maka potensi blog kita mendapatkan iklan pun akan semakin besar. Biasanya hal ini berlaku untuk jenis iklan PPC. Akan tetapi, tidak menutup kemungkinan juga untuk mendapatkan penghasilan melalui bisnis online yang lain. So, semakin banyak iklan yang tampil dalam blog kita maka juga akan membuat peluang kita mendapatkan penghasilan melalui bisnis online semakin besar bukan?

Blog kita menjadi terkenal.

Semakin sering blog kita muncul di hasil pencarian search engine, maka akan membuat blog kita semakin dikenal oleh masyarakat. Apalagi jika informasi yang kita berikan bermanfaat dan bisa membantu kesulitan mereka. Wah, pastinya blog kita akan selalu diingat dan selalu dikunjungi setiap mereka butuh informasi lainnya. Akibatnya? Lama kelamaan juga blog kita akan menjadi terkenal bukan? Tentu orang tersebut akan membagi-bagikan informasi jika blog kita itu berkualitas dan memiliki informasi yang bermanfaat kepada teman-temannya.

Nah, memahami dan menerapkan Teknik SEO dalam blog kita itu sangat bermanfaat bukan? Ada yang ingin menambahkan? Ada yang ingin share tentang pengalamannya sebelum dan sesudah menggunakan Teknik SEO?
Yuk kita bagi-bagikan kepada sesama kawan..
Ingat, ilmu yang tak bermanfaat itu ibarat pohon yang tak berbuah bukan? Sedangkan ilmu yang bermanfaat itu ibarat pohon yang berbuah. So, mari kita berbagi pengetahuan!
Salam blogger!

Kamis, 05 Mei 2011

Search Engine Optimalization (SEO)

Apa itu SEO?
Bagi sebagian blogger di antara kita, SEO merupakan sebuah hal penting yang menjadi prioritas perhatian ketika menjalankan aktifitas blogging. Mengapa SEO ini dianggap sebagai sebuah hal yang penting? Ya, karena dengan pemahaman dan penerapan teknik SEO yang baik akan membuat blog kita mampu berada pada urutan teratas daftar hasil pencarian di search engine. Kalau sudah begitu, apa akibatnya? Tentunya blog kita akan banyak dikenal orang bukan? Dan salah satu dampak nyatanya adalah blog kita pasti mendapatkan banyak kunjungan karena blog kita selalu muncul di halaman utama hasil pencarian search engine.

 

Optimisasi mesin pencari (bahasa Inggris: Search Engine Optimization, biasa disingkat SEO) adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung. (wikipedia).

Secara mudahnya ruang lingkup SEO mencakup bagaimana sebuah blog atau situs itu mampu menempati halaman utama pada hasil pencarian search engine dengan mendaya gunakan berbagai optimalisasi untuk mendapatkan target kunjungan sebanyak mungkin.

Search engine pada dasarnya memilah-milih berbagai sumber berita yang di cari oleh seseorang berdasarkan kata kunci yang dimaksudkan. Karena setiap search engine itu tidak sama, maka aturan main yang mereka terapkan dalam menampilkan hasil pencarian atas berita yang terkait dengan kata kunci yang dimasukan pun berbeda. Akan tetapi, meski berbeda-beda dalam menetapkannya search engine setidaknya memperhatikan beberapa hal yang menjadi acuan dasar bagi mereka untuk melakukan penilaian guna menampilkan sebuah blog atau situs dalam hasil pencarian. Acuan tersebut seperti tema blog, kualitas konten yang ditandai dengan pageviews (berapa kali konten tersebut dibuka oleh pengunjung), pagerank, alexa traffic rank, dsb.

Wah, ternyata SEO itu sangat berperan penting dalam memajukan kualitas blog kita ya?
Semakin mahir kita memahami dan menerapkan teknik SEO ini, maka kualitas blog kita pun akan semakin baik di mata search engine. Semakin baik blog kita di mata search engine, maka akan semakin banyak pula kunjungan ke dalam blog kita. Semakin banyak kunjungan yang masuk ke dalam blog kita, maka bisa dibayangkan bukan betapa terkenalnya blog yang kita miliki tersebut?

Apakah ada yang sudah menerapkan beberapa teknik SEO dalam menjalankan aktifitas bloggingnya? Ada yang masih bingung dengan deskripsi singkat dari SEO di atas?
Kalau ada yang ingin menanggapi silakan sampaikan lewat kotak komentar ya kawan..
Salam blogger!

Rabu, 04 Mei 2011

Cara Menghilangkan Header Blog

Header blog merupakan salah satu unsur yang penting. Karena penilaian pertama dari blog kita yang dirasakan oleh pengunjung adalah terkait kesan pertama mereka setelah melihat header blog kita. Apakah penjelasan kata-katanya sudah menggambarkan tema blog secara keseluruhan? Dan apakah bentuk model tampilan header blognya unik sehingga menarik perhatian dari pengunjung? So, pada dasarnya header blog itu cukup penting dan berperan sekali manfaatnya bagi blog kita.

 

Akan tetapi, bagi sebagian blogger di antara kita ada yang tidak menginginkan kemunculan header dalam blog mereka. Hal ini mungkin saja bisa didasarkan pada asumsi bahwa tampilan header blog rasanya kurang �match� atau kurang begitu penting dalam blog mereka. Jika ini sudah menjadi ketetapan, maka menghilangkan header blog adalah pilihan wajibnya.

Bagaimana cara menghilangkan header blog ini?

Caranya cukup mudah. Sebenarnya cara yang nantinya akan kita gunakan untuk menghilangkan header blog itu bukan dengan menghapusnya, melainkan hanya dengan cara menyembunyikannya saja agar tidak terlihat tampilannya di halaman blog milik kita.

Pertama, masuk ke akun blogger kita.
Klik fitur rancangan.
Klik edit HTML.
Cari kode di bawah ini.

#header h1{

Tambahkan kode berikut ini dan letakan di bawah kode di atas.

visibility:hidden;

Sehingga, kode HTML dari judul blog akan menjadi seperti contoh di bawah ini.

#header h1{margin:0 5px 0;
padding:25px 0 0 0px;
color:#e5e5e5;
font-size:37px;
text-shadow:none;
visibility:hidden;}

Klik simpan dan selesai.

Keterangan :
  • Kode HTML berupa #header h1{ menunjukan judul blog milik kita.
  • Sebelum melakukan aktifitas edit HTML template pastikan untuk selalu download template secara lengkap terlebih dahulu untuk menghindari terjadinya kegagalan saat proses editing berlangsung.

Nah, sekarang header yang semula ada dalam blog kita sekarang sudah tidak tampil lagi karena disembunyikan. Cukup mudah dan simpel bukan?

Kalau ada tanggapan silakan tuliskan lewat kotak komentar ya kawan..
Salam blogger!

Selasa, 03 Mei 2011

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. 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipadgYyZVjgHsJCxC6Mc7nHfd3rhxpdgg0aKRwYF5axD7kDHE1zPQ3dql6xJPlS76oK2catjByv0SRTPOyP4uznj7O1ZEKRn_96_Kqf_Psypgn7n6HzHjdQekRVpdvLCYmOu5AfJ1Tl8I/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixlpWJFc-hpD_Mn1ciygt_khvwBiK41RaiL0TRUne0ZXc-fMQuncTPqAGdRCMLUD0fzub4nVdXDI14FNp51KFn2MiOhldJ7wkJj-DScv9OfLYnDleQ14kq05tbupCVGfitlhCe9uI3ZO0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihyn90NCsru7_Q_1B_ezKg6Bqsc0qQGab0rijG4lYJ1id0T4yef6OaDnA8juw-k-nKAZUB5SDnMP_h6HqFlVhpcJBRzbFY3JMG40ny7d3-9HAWyIlYSUlc4YG8eTgidBacCHUWJIFdkbU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf8iRyDb9dBCQI6YdmVTsv6LtgzBc63BkQujUloAVZtald1nEla9pOtoPzcTPfe4z3_Rf5PKCT9VuOpISkXUHrU1RD1GE-rAMKCb5ZI5oKC5OxzduW-fP-I1GsID6DXwIgHXKto_6Cgno/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZFUV2D53NbZAGzBQ2wHpk4Y0piMHR9qN6FhehoiWrpiO-ezpeQIYxYDnxPQhncH3qyGR_ihnMoz25hbLKYEb2au-1v7VOl5q5Tz8r0ACXnFnchkBExEv6z5PuRAVDgOTMsP9rS7mQ0U/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjroE_E47FE8_BnmNdsutXYTc4pz2g_-1zx89Np-XzIt3S4IEQqEV8xmGClbC0KR961sa_BxrAYBmTHl0MYSjeWfzl_z3p4bLSm4oDJDS_MmeaiX_TBEzg-rVOpNCgU6vV8ECAqprV_Fq0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjanORwFqWQD8vMfd39ErG6KUtBQxV1a6wRj4dWE_RNPOLdk8KtvxPs36vfgA9GI1tetFQjz29me-aGrb6UZ_-sCTKzEHnq_eCXS3M8s53zl6Cen_cqzF4L14_Llf4h6U7vCP-qY5ExYaI/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQCWqYeB34pw7wygQNDdrIm8Q4BlHJjiHszwQWYmNJZT2VnizsFwKvykOgEG7f2_zQI23V60f2Ubhb_imibGzAE-aXOscyorkzEa6sxZwfi8o5pX3MuMbbtVx9JDeGDLHt-gv20mq-CGg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinlLAufQXT9b-I-J1J-h99DmeNUJCpZGDKZkZ4d3cv7YUbqHZSLjdKOAHTxg82xNAXgLBfEjw4YtN-sm5tp9cLXi_48-ZEtY2rZRqsq_-FC8FHaG9LSu05RHlg1soFK1WEz2U6HIyMRVs/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEspYgbFp1NmuTguvUQdNbaUrlG2YXIk_PbkEayizBEPUL-MZBMLQKBFkr7zzxVg7hEW0q3Wq9pbLQAQlxzalxXOw4ZIlxveM_H4harz6FZOlzOKDFuH5SOXQ8oOaBFuJXbBPjC26qPc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ijeXCM3i7dGUW2LnFqn5KBxJdYbJq8XlWPuu_BOgK7QNO0xxay6o-S1yyrv_8INwKrEZGYfZ69sGeTVi4fLIwRknCKw9BZ3rxb15gzTturJHIwQeYsmqpAsHZL897DSy298EAv8K1Co/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpumzZICIuQYl1PMiul69eUhWA3Z_U9lIfpDsJ8MZ02muEMxXu56u4Unv2p_eXO42oI1mxXDxQpF0fOozFyWqcNAW-6czQBA3AubfZGUaaikyRpI8j1Q1TQyipH2EZZMUchdeRG1XhL4/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMF6KJX0VCawnkPYoRIjO8qQVhdLsl3vgbwWWfvdBA-Txb2CHhW4tecHCG-PtS-dHmQOtJmF1Cf1TVovKSqtUiHYv-P1l6mx12cC6_sT7DJp8bRd64wv4ozzGAOJDZ5xcVlvk5kdNkAOg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpXCivPWMB0IJGbKLBFMlFFrw3pKF6LgnoDbiFmpoXUxLJ73tcalhqhmxenakVQBriQ1YGm39Z52UATHgkDuWQUMuqNuPuPBj3nQpqUmuqGpMdOz-sqEGxK8BuLwxKaEOzEIcxi5m9dpg/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-P9s2MN9bpbjGPhTCkyDhT82q1z5Rbw-6V2i6wOyUendjC9m6tRwXyMLUmdvNESTiUo4iACEdMpF4HQmLmsBYEcHtey2J-XG9gZy6pWsZ8k79t_Tg3rO0D6KZIbbGoRPnavAaDaICyY8/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD7jp3qQuTOrFHAt5t2l67t-I8N-T3pfmNzaAFDKyHBQ5lzxVE5IJel4jXlny2hOSzzj1RPxGCzXasMO4RKhNphFmijIDfg8-kNtDQFmv6BP4oT8vSs_LU6JOCK0VS3pROThbyvWLHhZps/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.

Ada komentar? Ada tanggapan? Ada masukan? Yuk kita bagi-bagikan unek-unek yang ada dalam pikiran kita kepada orang lain. Mari kita berlomba-lomba untuk berbagi kebaikan!
Salam blogger!

Senin, 02 Mei 2011

Buat Tampilan Iklan Melayang

Salah satu faktor yang penting dalam menjalankan optimalisasi iklan PPC adalah dengan penentuan tata letak iklan yang baik. Selain menempatkan iklan pada bawah judul postingan blog dan iklan pada bawah isi postingan blog, alternatif lain yang dapat kita gunakan adalah dengan menempatkan iklan dengan tampilan melayang. Iklan yang ditampilkan melayang ini cukup efektif dalam mendatangkan �klik� dari para pembaca blog kita. Dengan tampilan yang melayang, iklan ini akan muncul mengikuti ke manapun pengunjung membuka halaman blog kita. Secara logis hal ini akan mengganggu pandangan pengunjung dalam membaca kan? Akan tetapi, di sini lah sebenarnya letak keuntungannya. Pengunjung akan terfokus pada iklan ini. Dan jika ada iklan menarik yang membuat pengunjung penasaran, kita akan beruntung karena kemungkinan iklan tersebut diklik semakin besar.

 

Tampilan ini juga sebenarnya tidak begitu mengganggu, karena saat pembaca mengklik iklan atau mengklik tombol close sebanyak dua kali maka iklan akan tertutup dan tidak akan muncul lagi dengan sendirinya. Wao, terkesan menarik untuk dicoba kan?

Cara membuat tampilan iklan melayang adalah sebagai berikut ;

Masuk ke akun blogger kita.
Klik fitur rancangan.
Klik add gadget.
Pilih HTML / JavaScript.
Masukan kode HTML untuk membuat tampilan iklan melayang di bawah ini.

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfV2kSVXzsMoOIRrKTsQpPXSt6mqIloofzAw_5FflxhD8wEFzDaM2DDGa3r-igqOW4I95y3QxuC3zajWqar18RZcL_5BRQDKRo2PjpRceTmiwyA7ylpqVdp6ExibuY1T4umABm-WcBx4k/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfV2kSVXzsMoOIRrKTsQpPXSt6mqIloofzAw_5FflxhD8wEFzDaM2DDGa3r-igqOW4I95y3QxuC3zajWqar18RZcL_5BRQDKRo2PjpRceTmiwyA7ylpqVdp6ExibuY1T4umABm-WcBx4k/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>


<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
>>[Close][Klik 2x]<<
</a>
</div>
<center>

Letakan kode iklannya di sini.

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

Klik simpan dan selesai.

Cara untuk membuatnya mudah sekali bukan?
Kita hanya perlu menggunakan kode HTML dan memasangnya sebagai salah satu widget tanpa perlu melakukan edit HTML template seperti saat ingin menampilkan iklan pada bawah judul postingan dan bawah isi postingan blog. Selain itu, kita juga tidak perlu memphrase kode iklan terlebih dahulu. Mengapa? Karena kode iklan ini tidak akan dimasukan dalam kode HTML template, sehingga tidak perlu phrase agar kode HTML iklan menjadi �match� dengan kode HTML template.

Ada yang sudah pernah membuatnya?
Kalau ada yang sudah pernah, yuk kita bagi-bagikan pengalaman dan pengetahuan kita..
Kalau ada yang belum jelas dan ingin bertanya, silakan sampaikan lewat kotak komentar di bawah ini. Mari kita maju bersama kawan!
Salam blogger!

Minggu, 01 Mei 2011

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. 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..
Salam blogger!

 

© 2013 Bali NgeBLOG . All rights resevered. Designed by Templateism

Back To Top