Buku Tamu di Sidebar blog

Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup lumayan penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang mpunya blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi hidup lebih hidu (kaya iklan aja).

Ok, terlalu lama intermezonya ya, sekarang kita kembali (ke lap...top) ke topikbahasan. Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, anda tinggal mencarinya pada mesin pencari semisal google ataupun yahoo, silahkan ketikan kata free shoutbox atau free guestbook pada search engine masing-masing situs, maka dalam beberapa detik saja akan muncul berpuluh-puluh situs penyedia buku tamu tadi, anda tinggal klik lalu coba lihat-lihat. Tapi untuk menghemat waktu pencarian anda, maka di sini saya akan langsung memberikan alamat situs penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com. Untuk caranya silahkan anda ikuti langkah-langkah berikut ini :

1. Seperti biasa anda harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe, free>>, ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang telah di sediakan.

2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda

3. Pada kolom yang berjudul Style, klik menu appearance.

4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save Setting.

5. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start

6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan

7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda

8. Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan close situs tersebut.

9. Selesai

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.

1. Silahkan Login dengan id anda
2. Klik menu Layout
3. Klik Page Element
4. Klik Add a Page Element
5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
6. Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa saja yang anda suka
7. Copy paste kode HTML shoutbox anda di dalam form Content
8. Klik tombol Save Changes
9. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
10. Tekan tombol Save
11. Selesai

 Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah ukuran lebar ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width (untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.


Selamat mencoba !

Text Area memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();"

type="button" value="Highlight All"> </div><div align="center"></div><p

align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt"

rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Hasil Bentuk Text area highlight

<script language="JavaScript"> function clickIE() { if (document.all) { return false; } } function clickNS(e) { if (document.layers(document.getElementById&&!document.all)) { if (e.which==2e.which==3) { return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS; } else{ document.onmouseup=clickNS; document.oncontextmenu=clickIE; } document.oncontextmenu=new Function("return false") </script>

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area. 

Elemen tombol highlight All : 
1.<div align="center>...>kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.

 2.<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.

 3.Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

 Element text area : 

1. <<p align="center">>--> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD> selamat mencoba.

Membuat Text Area

Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :
<div align="center">
<textarea cols="20" name="code" rows="6"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></div>

Dan Hasilnya..

<a href="http://bacaaninspirasi.blogspot.com/" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/animasichicklet.gif" border="0" alt="Blog Tutorial" /></a>

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya. 

Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Mudah bukan silakan berinspirasi..

 Baca juga Toturial Text Area dengan memakai HighLight

Cara membuat Text Link

Bagaimana Cara membuat Text Link pada blog wordpress dan blogspot yang nanti akan berguna sekali pada sebuah artikel yang tentunya akan menyisipkan Text Link di tengah atau di akhir artikel yang akan menghubungkan ke alamat url yang akan ditujuh.

 Misalnya bisa digunakan dengan kata-kata seperti ini : KLIK DISINI, KLIK HERE, READ MORE, BACA SELENGKAPNYA, atau bisa mencantumkan ALAMAT URL nya langsung, kata-kata tersebut diatas jika di KLIK akan terhubung ke alamat url yang dituju.

Nah ini KODE nya yang  di tempel di blog wordpress dan blogspot.

Kode Text Link :

<a href="ALAMAT URL">TITEL BLOG</a>

Contohnya seperti ini :

<a href="http://syntax081programmer.blogspot.com/">Cara membuat Text Link</a>

Akan jadi Text Link seperti ini :

Cara membuat Text Link

Coba perhatikan munculnya Text Link diatas berdasarkan pada TITEL BLOG yang Sobat tulis TITEL BLOG juga bisa Sobat ganti dengan kata – kata kreasi Sobat sendiri misalnya BACA SELENGKANYA atau KLIK DISINI atau READ MORE atau KLICK HERE dsb.

link exchange

 

Area Tukar Link Otomatis

Untuk menjalin pertemanan antar Blogger salah satu cara adalah dengan tukar link atau Link Exchange dengan sesama Blogger

Berikut ini persyaratan Tukar Link atau Link Exchange Otomatis dengan Baca'an Inspirasi

Mister Linky’s Megical Widget dan klik ENTER

1. Mohon ditulis dengan title Baca'an Inspirasi
2. Silahkan pasang Link Baca'an Inspirasi di Blog anda terlebih dahulu
3. Kemudian klik Mister Linky’s Megical Widget masukkan nama blog anda dan link url anda di Kolom Mister Linky’s Megical Widget dan klik ENTER
4. Setelah memasang Link anda di Mister Linky’s Megical Widget dengan otomatis link anda akan tampil pada kolom Mister Linky’s Megical Widget di bawah ini :

Terima kasih sudah berTukar Link dengan Baca'an Inspirasi,semoga menambah inspirasi dan manfaat tempat di link anda

 

<a href="http://bacaaninspirasi.blogspot.com/" target="_blank"><img src="http://i817.photobucket.com/albums/zz91/hansem_x/Blog/Banner-2.gif" border="0" alt="http://bacaaninspirasi.blogspot.com/" width="178" height="70" /></a>

Membuat efek Marquee

Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.

Marquee ini bisa di buat dengan menggunakan tag <Marquee>.....</Marquee>

Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen>

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :
<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

marquee dari kri ke kanan  

</MARQUEE>
Dan Hasil_nya..!


Marquee kiri Ke kanan


ganti kata "left" dengan keinginan anda yaitu bisa : right, up, down .

saya beri inspirasi lagi..!
<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">
marquee menurut gerakan
</MARQUEE>
Dan untuk Hasil_nya..!!

marquee menurut gerakan

Dari tadi cuma dari kiri kekanan dan kanan ke kiri
nga asik yah..
mari kita gerakan Marquee yang lain
<br/><br/>
<div align="left"><FONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

</MARQUEE></b></FONT></div>
<br/><br/>

lihat hasilnya,warna dan huruf berubah

mari kita gerakan Marquee yang lain

Merquee ke atas
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">
Maquee ke atas
</marquee>
Dan yang muncul!

Marquee ke atas


Contoh marquee yang di dalam nya terdapat link blog :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" bgcolor="blue" width="100%" height="100" align="center">
<a href="http://bacaaninspirasi.blogspot.com/" target="new">Home</a><br/>
<a href="http://bacaaninspirasi.blogspot.com/" target="new">Daftar isi</a><br/>
<a href="http://bacaaninspirasi.blogspot.com/" target="new">Dowload</a>
</marquee>

Yang muncul


Home


Dowload


Inspirasi



Mudah bukan dan silakan anda berinspirasi..

kode Html ada di Posting

Pembubuhan perintah dan adalah untuk menandakan bahwa yang anda tulis adalah sebuah kode HTML, dan nantinya pun tulisan-tulisan yang berada dalam perintah ini akan tanpil beda dengan tulisan-tulisan yang lainnya, sebagai contoh silahkan anda lihat postingan saya yang lainya yang membubuhkan kode-kode HTML. pembubuhan perintah
adalah untuk membuat tulisan berpindah kebawah, jika anda tidak membubuhkan perintah
tadi, walaupun di posting-an anda tulis jauh kebawah, hasilnya akan tetap bersatu.

Huh cape juga ya dari tadi kutak-ketik nih.., itu tadi cara yang pertama. Cara yang kedua adalah dengan menggunakan text area. Cara membuat text area secara lengkap silahkan klik di sini. Sebagai contoh, untuk menuliskan kode-kode di atas, pada posting-an anda harus menuliskan seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :


<br/><br/>
<p align="left"><textarea name="code" rows="6" cols="400"><meta http-equiv="refresh" content="10"> </meta></textarea></p>

<meta http-equiv="Inspirasi" content="10"> </meta>

Religi

gua hira tempat wahyu pertama