Membuat Text Berjalan (1)

Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :

<marquee>Tulisan disini akan berjalan</marquee>

Hasil Script diatas :

Tulisan disini akan berjalan

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee 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 geraka, semakin besar angka semakin 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
  
  Untuk lebih jelasnya, lihat disini

Read more »

Membuat Text Berjalan 2

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan.
Atribut yang sering di gunakan dalam kode marquee adalah :

1. bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks
2. direction="left/right/up/down" » Mengatur arah gerakan teks
3. 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)
4. title="pesan" » Pesan akan muncul saat mouse berada di atas teks
5. scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.
6. scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik
7. loop="angka|-1|infinite" » Mengatur jumlah loop
8. width="lebar" » Mengatur lebar blok teks dalam pixel atau persen

<marquee align="center" direction="left" height="200" scrollamount="2" width="100%">
 marquee dari kanan ke kiri
 </marquee>

Contoh Kode diatas

marquee dari kanan ke kiri

Catatan :
ganti kata "left" dengan keinginan anda yaitu bisa : right, up, down
marquee dengan variasi hurup dan warna latar belakang :

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="100%" scrollamount="3" behavior="alternate">
marquee dengan variasi hurup dan warna latar belakang
</marquee></strong></font></div>

Hasil dari kode diatas

marquee dengan variasi hurup dan warna latar belakang

Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain. Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini </marquee>

Hasil Kode diatas :

silahkan tunjuk ke sini

Read more »

Conventer html Versi JavaScript Mentah

<style type="text/css"><br /> #codes {<br /> border:1px solid #666;<br /> width:98%;<br /> height:200px;<br /> margin:5px auto 10px;<br /> display:block;<br /> }<br /> <br /> .button-group {<br /> margin:0px auto 0px;<br /> text-align:center;<br /> }<br /> </style><br /> <textarea id="codes"placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea><br /> <div class="button-group"><br /> <button onclick="cdConvert();">Konversi</button><br /> <button onclick="cdClear();">Bersihkan</button><br /> </div><br /> <script type="text/javascript"><br /> function cdClear() {<br /> var wtarea = document.getElementById('codes');<br /> wtarea.value = '';<br /> }<br /> <br /> function cdConvert() {<br /> var ctarea = document.getElementById('codes'),<br /> cv = ctarea.value;<br /> cv = cv.replace(/&/g, "&amp;");<br /> cv = cv.replace(/'/g, "&#039;");<br /> cv = cv.replace(/"/g, "&quot;");<br /> cv = cv.replace(/</g, "&lt;");<br /> cv = cv.replace(/>/g, "&gt;");<br /> ctarea.value = cv;<br /> ctarea.focus();<br /> ctarea.select();<br /> };<br /> </script><br />

Maka Hasilnya :

Read more »

Conventer html Versi JQuery

Terserah apakah kode ini akan Anda letakkan di dalam halaman statis atau widget, cukup pastikan bahwa template Anda sudah dilengkapi dengan JQuery, maka konverter HTML ini akan bekerja:

<style type="text/css"><br /> #codes {<br /> border:1px solid #666;<br /> width:50%;<br /> height:200px;<br /> margin:5px auto 10px;<br /> display:block;<br /> }<br /> <br /> .button-group {<br /> margin:0px auto 0px;<br /> text-align:center;<br /> }<br /> </style><br /> <textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea><br /> <div class="button-group"><br /> <button id="convert">Konversi</button><br /> <button id="clear">Bersihkan</button><br /> </div><br /> <script type="text/javascript"><br /> $(function() {<br /> $('button#convert').click(function() {<br /> $('textarea#codes').val(<br /> $('textarea#codes').val()<br /> .replace(/&/g, "&amp;")<br /> .replace(/</g, "&lt;")<br /> .replace(/>/g, "&gt;")<br /> .replace(/"/g, "&quot;")<br /> .replace(/'/g, "&#39;")<br /> ).focus().select();<br /> return false;<br /> });<br /> $('button#clear').click(function() {<br /> $('textarea#codes').val('').focus().select();<br /> return false;<br /> });<br /> });<br /> </script><br />

Hasilnya :

Read more »

Membuat floating widget

Sebelumnya saya pernah menulis tentang cara membuat ini (membuat menu floating) tapi dengan tips hanya menggunkan modifikasi CSS saja, nah berikut ini sedikit modifikasi dengan menggunakan kode javascript dan tampilan pun akan lebih dinamis, di dalamnya sobat dapat tempatkan apapun juga mis : Iklan adsense, Gambar, ataupun chat box. untuk preview coba sobat klik widget bertuliskan sponsor sebelah kanan.
Buka Layout Page Element dan Klik add gadget, kemudian pilih HTML/javaScript

<style type="text/css">
.gb_fixed{
position:fixed;
top:80px;
right:0px;
z-index:+10;
}

* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid gray;
background:#111;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div> <a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxMqjhl1P7GLgsrgId4TCLpqi5Ul6pw_-jUItx4sTZexo5K6cH6rpDl160VNBS6WNdDF6LfVvqlYRrJymXPGyxMXfGdeDiyxPpFpNYajett4DR9lV08nVzZutry1pOZ4-Uq4u_ep9DbpJ/s320/CloseButtonHot.bmp" /></a> </div>

tempatkan apa saja disini

<p>
<span style="font-size: 80%;">
<a href="http://jendelainfo23.blogspot.com/p/daftar-isi.html">Jendela Informasi</a></span></p>
</td></tr></table>
</div>

<script src="http://andreblog.googlecode.com/files/ordinaryhack-floatingku.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnV3CqrJq8c0l4Q07ETBBsrvDbaTuZPnSxM0DZRXC843TxxfKK2By19vAKYwODHu3tTmaEPEFPbz-1jil5Q12cNqPNYJa7Wv6-5gfAG-E9jZhpEkXTtKnaT2ZhMEOMW0OG2rlmPMPg-RwP/s320/sponsored.png" style="filter: alpha(opacity=60);
opacity: 0.6;"
/>
</a>
</div>

Silahkan di Coba

Read more »

Cara Buat Floating Menu

Floating menu juga di kenal dengan nama "fixed menus" dan "hovering menus", artinya menu ini akan tetap pada tempatnya ketika halaman bergerak, sama seperti Cara Membuat Top of Page Icon atau Menu Top/Down Halaman hanya saja didalamnya akan dimasukkan link.

Tempatkan kode CSS berikut tepat si atas tag ]]></b:skin> :

div.floating-menu {
position: fixed;
background: #fff4c8;
border: 1px solid #ffcc00;
width: 150px;
z-index: 100; }

div.floating-menu a, div.floating-menu h3 {
display: block;
margin: 0 0.5em; }

Tempat kode pemanggil berikut tepat di bawah tag <body>:

<div class="floating-menu">
<h3>Floating Menu</h3>
<a href="http://URL-ANDA">PREVIEW</a>
<a href="http://URL-ANDA">LINK</a>
<a href="http://URL-ANDA">LINK</a>
<a href="http://URL-ANDA">LINK</a>
<span style="font-size: 75%">Widget by
<a href="http://www.jendelainfo23.blogspot.com">Jendela Informasi </a>
</span>
</div>

SAVE TEMPLATE Dan lihat hasilnya.

Read more »

Modifikasi list | angka dan huruf

cara memodifiasi tampilan type huruf besar

Letters list:
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya
Letters list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

cara memodifiasi tampilan type huruf kecil

Lowercase letters list:
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya :
Lowercase letters list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

cara memodifiasi tampilan type huruf romawi besar

Roman numbers list:
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya
Roman numbers list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

cara memodifiasi tampilan type huruf romawi kecil

Roman numbers list:
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya :
Roman numbers list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

Read more »