Cara Script Alert Sapaan Pengunjung

Suatu ketika pasti Anda pernah datang ke bank atau kantor pelayanan public lainnya, bukan. Customer service biasanya akan menyapa dengan ramah kepada para klien atau nasabahnya dengan menyebut bapak/ibu diikuti dengan namanya. Dalam blog pun kita bisa melakukan hal serupa sedemikian rupa sehingga lebih personal dengan Tips Alert Sapaan Pengunjung atau Tips Service Excellent Pengunjung atau tips apalah berikut ini.

Oh, iya,..sebelum melangkah pada langkah-langkah membuat Tips Sapaan Pengunjung ini, bagi pengunjung yang baru saja mampir ke blog ini, silakan membaca Tips Memasang Script Alert Pada Blog dan Tips Script Alert (Pesan) Konfirmasi yang telah Tips Trik Ngeblog posting sebelumnya di mana tips tersebut masih satu tema dengan tips kali ini, yaitu Tips Script Alert Pada Blog, kemudian dapat dijadikan sebagai alternative (opsi) yang dapat dipilih pengunjung untuk menghiasi blognya.

Tips kali ini terdiri dari dua script di mana script yang pertama “bertugas” meminta pengunjung untuk mengetikkan namanya kemudian dengan data tersebut (nama yang diketikkan tersebut) digunakan script yang kedua untuk memberikan sapaan atau ucapan yang lain yang dapat dikustomasi sendiri sesuai dengan kehendak kita.

Langkah-langkahnya adalah sebagai berikut.

Masuk Panel Kontrol >> Tata Letak (layout) >> Tambah Gadget >> Tambahkan HTML/Javascript kemudian ketikkan script pertama seperti di bawah ini kemudian lanjutkan dengan Simpan Perubahan.

Script Pertama

Anda dapat mengganti teks yang berwarna merah dengan kalimat sendiri sesuka Anda.

Kemudian tambahkan lagi HTML/Javascript lagi dan kemudian ketikkan script kedua seperti di bawah ini kemudian dilanjutkan dengan Simpan Perubahan.

Script Kedua

Selamat Datang <script type="text/javascript">document.write(yourName)</script>! Suatu kehormatan bagi Tips & Trik blog atas kunjungan <script type="text/javascript">document.write(yourName)</script> ini. Tips & Trik Blog sangat berharap kunjungan <script type="text/javascript">document.write(yourName)</script> berikutnya

Anda dapat meletakkan script berwarna merah di mana Anda mau pada kalimat yang dapat atur sendiri sesuka Anda.

Catatan :

Anda harus meletakkan Script Pertama pada gadget HTML/Javascipt lebih dahulu kemudian diikuti Gadget HTML/Javascript untuk Script Kedua. Tidak harus berurutan yang penting posisi gadget untuk script pertama diletakkan di atas gadget untuk script kedua.

Ini screenshot ketika pengunjung diminta untuk mengetikkan namaya.

Ini screenshot sapaan yang tampil di side bar.

Selamat Mencoba....!!

Tips Membuat Tulisan Terbalik

Membuat Tulisan Terbalik dengan Flip Text Generator : Setelah melakukan kegiatan “ronda malam” di “rumah mewahnya” Kang Rohman, saya menemukan postingan yang baru yang mungkin sahabat blogger membutuhkannya atau jika pun tidak membutuhkannya, anggaplah sebagai tambahan pengetahuan, yaitu tips membuat tulisan terbalik. Dengan bantuan tool online, Flip Text Generator, hal tersebut sangat mudah dan praktis dilakukan. Jika tertarik, silakan ikuti tipsnya berikut ini bersama Tips dan Trik Blog.

Contoh hasilnya adalah seperti ini.

Cara membuatnya??

Pertama, langsung kunjungi situsnya Link Ini

Kedua, tuliskan kata-kata atau tulisan yang ingin dibuat terbalik pada kotak “Original Text (type here)”. Sayangnya tool ini tidak mengenal huruf kapital, artinya apa pun yang kita ketikkan baik dengan huruf kapital atau kecil "outputnya' tetap huruf kecil.

Ketiga, seketika itu juga, tulisan yang kita ketikkan akan ditampilkan pada kotak “Flipped text (point your mouse over)”

Keempat, arahkan mouse ke teks yang terbalik dan secara otomatis teksnya akan menjadi terseleksi.

Kelima, kemudian kita dapat men-copy teksnya untuk dipastekan ke email, postingan blog, facebook, dan lain-lain sesuai kebutuhan.

Keenam, selesai.

Cara Membuat Tabel Dalam Blog

Cara Membuat Tabel Dalam Blog. Sebenarnya sudah banyak rekan blogger yang membahas tema tersebut atau bahkan boleh katakan tema seperti ini sudah basi, namun perkenankan Tips dan Trik Blog untuk tetap “nekad” mempostingnya, siapa tahu masih bermanfaat terutama bagi rekan-rekan blogger pendatang baru.. Yang membutuhkan, silakan untuk membaca tipsnya berikut ini.

Tabel dapat untuk menampilkan data berupa teks, angka-angka, gambar, atau link menjadi tersusun dan tertata rapi sehingga akan memudahkan para pembaca untuk memahaminya. Tabel ini dapat ditempatkan di mana saja dalam blog, di side bar, di footer, atau di dalam postingan.

TABEL DASAR

Format dasar table adalah seperti ini.

<table border="1">
<tbody>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>

Keterangan

Setiap pembuatan table harus dimulai dengan tag <table> dan diakhiri dengan tag <table>

Border digunakan untuk menentukan ketebalan border (garis) yang dapat diubah sesuai kebutuhan, semakin besar nilainya maka bordernya akan semakin tebal, jika mengisikan dengan angka nol maka akan menjadi tabel yang tidak bergaris (berborder).

Setiap baris harus diawali dengan tag <tr> dan diakhiri dengan tag </tr>

Tag <td> (table data) digunakan untuk mengisikan data pada setiap cell dan harus ditutup dengan tag </td>

Dari contoh di atas hasilnya akan menjadi seperti di bawah ini.

1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

ATRIBUT CELLPADDING DAN CELLSPACING

Cellpadding digunakan untuk menentukan jarak (spasi kosong) antara data (contents) dengan garis (border) yang mengelilinya dinyatakan dengan satuan pixel, semakin besar nilainya maka jaraknya semakin lebar.

Cellspacing digunakan untuk pengaturan jarak antara masing-masing cell, semakin besar nilainya maka semakin lebar jaraknya.

Contoh aplikasi cellpadding, seperti di bawah ini.

<table border="1" cellpadding="10">
<tbody>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>

Hasilnya akan menjadi seperti di bawah ini, di mana jarak (spasi) antara content (data) dengan border lebih lebar.

1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

Contoh aplikasi Cellspacing, seperti di bawah ini.

<table border="1" cellspacing="5">
<tbody>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>

Hasilnya seperti di bawah ini, di mana jarak masing-masing cell lebih lebar dibandingkan dengan table standar.

1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

TABEL DENGAN HEADER

Untuk membuat table dengan header (judul baris), kita harus menggunakan tag dan diakhiri dengan . Dengan tag tersebut teksnya ditampilkan dengan cetakan tebal (bold) sehingga akan membedakan dengan teks data yang lainnya.

Contoh aplikasi Tabel Dengan Header seperti di bawah ini.

<table border="1" cellpadding="5" cellspacing="1">
<tbody>
<tr><th>No.</th><th>Nama Teman</th></tr>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>

Hasilnya seperti di bawah ini.

No.	Nama Teman
1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

PENGATURAN LEBAR & TINGGI TABEL

Untuk melakukan pengaturan lebar table digunakan atribut width yang memiliki nilai dengan satuan pixel atau presentase dari lebar browser/induk tabelnya. Selain untuk melakukan pengaturan lebar table, witdh juga dapat digunakan dengan menentukan lebar tiap-tiap kolom.

Untuk melakukan pengaturan tinggi table digunakan atribut height yang memiliki nilai dengan satuan pixel atau presentase dari induk tabelnya. Selain untuk melakukan pengaturan tinggi table, height juga dapat digunakan dengan menentukan tinggi baris.

Contoh aplikasi untuk menentukan lebar dan tinggi table adalah seperti di bawah ini.

<table border="1" cellpadding="5" cellspacing="1" width="200" height="150">
<tbody>
<tr><th>No.</th><th>Nama Teman</th></tr>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>

Hasilnya seperti di bawah ini.

No.	Nama Teman
1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

Contoh aplikasi untuk pengaturan lebar dan tinggi baris kolom adalah seperti di bawah ini.

<table border="1" cellpadding="5" cellspacing="1">
<tbody>
<tr height=”10”><th witdh="45">No.</th><th width="155"> Nama Teman</th></tr>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>

Hasilnya seperti di bawah ini.

No.	Nama Teman
1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

DATA CELL KOSONG

Ada beberapa browser yang tidak dapat menampilkan table dengan baik dengan beberapa data kosong. Untuk itu, kita gunakan   untuk menggantikan cell dengan data yang kosong.

Aplikasinya seperti di bawah ini.

<table border="1">
<tbody>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td> </td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>

Hasilnya seperti di bawah ini.

1.	Agus
2.
3.	Iwan
4.	Dinda

MENGHILANGKAN SPASI

Mungkin kita akan mendapati table dengan tampilan ada spasi sehingga table terlihat tidak rapi dan acak-acakan, contohnya seperti screenshot di bawah ini.

Solusinya adalah menghilangkan line break antar baris sehingga menjadi seperti di bawah ini. Caranya, klik mode “Edit HTML” kemudian rapatkan semua kode html tersebut sehingga seperti di bawah ini.

Sebenarnya postingan tentang pembuatan table ini masih banyak yang harus kita bahas namun karena sudah capek mengetiknya, maka kita akan lanjutkan di postingan selanjutnya.

Terima kasih!! Sumber Link