Menulis Kode HTML JScript di Posting Secara Manual atau Online

.:: SECARA MANUAL ::.

Cara Menulis Kode HTML Java Script di Posting Secara Manual di blog WordPress dan Blogger Blogspot

Update: Untuk WordPress versi 2.8, 2.9 dan 3.0 menulis kode html menjadi lebih mudah. Tinggal klik “Visual” dan langsung tulis kode html-nya atau copy / paste kode html ke postingan. Maka, kode html tersebut akan tampil seperti yang ditulis. Untuk Blogger Blogspot, cara manual di bawah tetap diperlukan.

Untuk menulis kode html/javascript di posting secara manual sebenarnya cukup mudah. Ikuti tutorial singkat berikut:

1. Ganti setiap kode < dengan &lt;
2. Ganti setiap kode > dengan &gt;
3. Ganti setiap kode ” dengan &quot;

Mengapa perlu dikonversi secara manual kalau sudah tersedia konversi/encoding online? Ya, untuk jaga-jaga siapa tahu konversi/encoder onlinenya sudah tidak bisa diakses lagi. Atau setidaknya, mengurangi ketergantungan pada alat encoder punya orang. Betul nggak?
Silahkan dicoba.

.:: SECARA ONLINE ::.

Cara Menulis Kode HTML Java Script di Posting blog pakai html Parse Tools untuk blog Blogger Blogspot dan WordPress

Kalangan blogger pemula yang sudah pernah mencoba menulis kode html / javascript di posting dan ingin kode tersebut tampil seperti waktu ditulis mungkin merasa heran karena setelah dipublish jadi berbeda. Contoh, umpamanya Anda menulis kode < dan > dan ingin tampil persis seperti itu diposting Anda, kenyataannya kode tersebut malah hilang. Ikuti tutorial praktis berikut, oh ya tip ini berlaku baik di posting wordpress atau blogger / blogspot.

1. Kunjungi Encode Decode HTML Converter di sini atau di sini.
2. Masukkan kode html / javascript yang ingin Anda tampilkan di posting, di kotak yang tersedia, terus klik menu tombol "PARSE"
3. Copy dan paste hasil encode yang ada dalam kotak ke posting Anda.
4. Selesai.

Semoga Bermanfaat ........

Membuat Tombol / Button ber-Link di Blog

Cara Membuat Tombol/Button ber-Link di Blog - Cara membuat tombol untuk blog blogger sangatlah gampang, karena kita hanya membutuhkan beberapa kode HTML yang amat singkat.
Beberapa tujuan pembuatan tombol atau button ini hanya agar tampilan tulisan maupun link yang kita sediakan terlihat lebih menarik. Selain itu dengan tampilan tombol akan terlihat lebih unik daripada hanya sekedar tulisan saja.

Sebagai contoh, berikut adalah tulisan yang dibentuk dengan gaya tombol/button namun tidak mengandung link
Untuk membuat tombol di atas, anda hanya membutuhkan kode berikut :

Lalu, jika anda ingin membuat tombol yang terdapat teks dan link di dalamnya seperti berikut (diklik-lah, biar tahu bedanya => sambil minum kopi, Link akan mengarah ke postingan ini)

Maka kode yang anda perlukan untuk membuat tampilan tombol dengan teks plus link-nya yaitu sebagai berikut :

Jika anda ingin membuat agar linknya terbuka di tab baru, maka anda harus menggunakan kode berikut :

Oh ya, teman-teman bisa menggunakan tombol ini di dalam postingan maupun di halaman depan blog (sidebar, header, footer, dll). Bagi teman-teman yang belum tahu tentang cara penggunaan untuk halaman depan, silahkan diperaktekkan melalui langkah-langkah berikut :

1. Login dulu ke Blogger
2. Klik menu Tata Letak
3. Klik Tambah Gadget
4. Isikan kolom kosong dengan kode tombol/buttton pilihan anda
5. Klik simpan, dan selesai...silahkan lihat hasilnya di blog anda

Semoga bermanfaat …….

Cara Membuat Spoiler di Blog

Cara Membuat Spoiler di Blog - Sebagian orang pastinya sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Lalu bagaimana kalau mau menerapkan atau membuat spoiler di blog? Sebelumnya kalau ada yang belum tahu apa itu spoiler. saya jelasin singkat saja. Spoiler adalah tombol yang digunakan untuk mempersempit tempat atau menyembunyikan konten (teks, foto atau video) dengan menu buka tutup.

Contohnya bisa dilihat di bawah halaman ini.

Judul Spoiler :

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu, selain itu juga untuk menghemat tempat kan ?

Lalu bagaimana cara membuat spoiler di blog? Langsung simak yang berikut ini.

Cara Membuat Spoiler di Blog :
1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler :

Judul Spoiler : 



Letakkan teks atau kode script (gambar atau video) di sini !!

5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.

Semoga Membantu...........

Buku Tamu Auto Hide Berbeda di Blog

Kali ini saya memposting cara membuat buku tamu auto hide di blog dengan versi yang berbeda seperti contoh yang tampak di sidebar blog ini.

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( hanya di lewati pointer mouse ), kali ini beda sedikit dengan buku tamu show / hide terdahulu.

Jika sobat tertarik memasang dan mencoba widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.

 














Get this  widget! 

Caranya :
1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save

Tambahan :
Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox (seperti blog ini) atau pada penyedia chatbox gratisan lainnya.

Salam dan semoga membantu.......

Link Supaya Terbuka di Halaman Baru

Cara membuat link supaya terbuka di halaman baru (new tab) - Jika kamu seorang blogger pasti akan merasa khawatir bila pengunjung blog atau websitenya begitu cepat pergi dikarenakan membuka link keluar pada halaman yang sama atau halaman terbuka tidak pada halaman baru dan akhirnya pergi padahal ads-nya juga belum di klik,....uh sedih, sebagai seorang blogger hal ini jangan sampai terjadi, nah untuk mengatasinya caranya dibawah ini agar Link-link yang kita pasang bisa keluar pada halaman baru.

Dengan menambahkan tag target="new" atau target="_blank" pada link yang kita tautkan, maka saat link tersebut di klik, maka link rujukan tadi akan terbuka pada new tab atau halaman baru pada browser kita. Artinya blog kita tetap dapat di lihat, dan link rujukan kita dapat kita lihat juga.

Sebagai contoh langsung silahkan klik link dibawah ini!
- Link terbuka pada halaman yang sama Klik disini
- Link terbuka pada halaman yang baru Klik disini

Maka untuk membuat link yang bisa terbuka pada halaman yang baru dibawah ini :

Portal Blogger
Maka yang nampak adalah Portal Blogger
Perhatikan baik baik letak tag tambahan yang dicetak merah yaitu target="new"

Kamu juga dapat membuat link popup atau link window baru pada posting lanjutan.

Semoga Bermanfaat......

Membuat Scroll Pada Blog Archive

Dengan membuat scroll pada arsip blog, akan membuat panjang sidebar ke bawah tetap. Walau pada bulan tertentu banyak postingan atau sedikit arsip blog yang tampilannya herarki akan terlihat rapi dengan adanya scroll. Jika kita sudah menambahkan widget arsip blog dengan model herarki, langsung saja lakukan langkah selanjutnya.

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut

6. Kode lengkapnya adalah seperti ini
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div style='overflow:auto; width:ancho; height:200px;'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> </div></div> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='flat' var='data'> <ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable> <b:includable id='menu' var='data'> <select expr:id='data:widget.instanceId + "_ArchiveMenu"'> <option value=''><data:title/></option> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option> </b:loop> </select> </b:includable> <b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='i'> <ul> <li expr:class='"archivedate " + data:i.expclass'> <b:include data='i' name='toggle'/> <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a> <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span> <b:if cond='data:i.data'> <b:include data='i.data' name='interval'/> </b:if> <b:if cond='data:i.posts'> <b:include data='i.posts' name='posts'/> </b:if> </li> </ul> </b:loop> </b:includable> <b:includable id='toggle' var='interval'> <b:if cond='data:interval.toggleId'> <b:if cond='data:interval.expclass == "expanded"'> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy toggle-open'>▼ </span> </a> <b:else/> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy'> <b:if cond='data:blog.languageDirection == "rtl"'> ◄ <b:else/> ► </b:if> </span> </a> </b:if> </b:if> </b:includable> <b:includable id='posts' var='posts'> <ul class='posts'> <b:loop values='data:posts' var='i'> <li><a expr:href='data:i.url'><data:i.title/></a></li> </b:loop> </ul> </b:includable> </b:widget>
7. Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera.

8. Simpan jika sudah selesai.