Jom Taubat Masuk Syurga

xBran.blogspot.com 2000-2012. Powered by Blogger.
KOMEDI : Terbaik | Terburuk | Video Kelakar | Epik Gagal | Iklan Lucu |Muzik Lucu | Dunia Tak Berakal | Apa Bran!

HIBURAN : Terkini | Selebriti | Top 10 | Muzik | TV | Movie | Video Game


AKSI : Gadis | Jejaka | 18 Seks | Video Seksi | 20 Terhebat | Video Aksi

BLOG : Tutorial | Panduan | Iklan

Search This Blog

CERITA TERKINI xBRAN

Change Text on mouse hover for blogger


Change Text on mouse hover for blogger

How to get a new text on mouse hover. Blogger trick on text change on Mouse Hover. Hide and show contents using mouse hover.

Photo Credit: t0zz
In my previous posts, we had discussed about mouse hover image change or swap. But, We shouldn't forget that we can even change or swap between two text. 

This tutorial is a very very simple HTML implementation of mouse over text change for your Blogger. 

What happens is, when there is no mouse hover, there is one text to display, and when there is a mouse hover it changes, when you take back the mouse pointer away it changes back to the original text. It is as simple as that. We can consider this as text swap tutorial for Blogger as well..

Note: Before proceeding, please take some time to back up your blog and template.

Let's being by experimenting the code for Mouse hover text change:

Steps:
1. Go to Dashboard > Template > Edit HTML

2. Search for </head>

3. Just above </head> paste the following code:




<style type="text/css">
.hide {
    display:none;
 }
.show {
    display:block;
 }   
</style>

<script type="text/javascript">
   var el;
window.onload=function() {
   el=document.getElementById('status');
   el.onmouseover=function() {
   changeText('hide','show')
 }
   el.onmouseout=function() {
   changeText('show','hide');
  }
 }
function changeText(cl1,cl2) {
   document.getElementById('spanfirsttext').className=cl1;
   document.getElementById('spansecondtext').className=cl2;
}
</script>

4. Save the template and exit.

5. Now, where ever you want the mouse hover text change to show up, place the code on that page. Code is below:




<p id="status">
<span id="spanfirsttext">This is the first text</span>
<span id="spansecondtext" class="hide"><a id="link" href="index.php">This is the second text which shows on mouse hover</a></span>
</p>


You are done guys.. :-)

Check out the live demo of mouse hover text change.

Happy learning, enjoy...Thanks for reading..Stay tuned for more updates findings.

~iTechColumn

Ditulis Oleh : Acit Guestbook Hari: 18:09 Kategori:

0 000 yang ade bran:

Post a Comment

Sila tinggalkan comment yang hebat!!.. Yang Pasti anda mesti BERANI!!

xBran Hot

 

Our Sponsor

”banner

Banner xBran

”banner
Sila tukar link dengan kami :)

Info Terkini XBran Ping Busuk

Penafian :


Kami merupakan sebuah blog yang mengumpul pelbagai cerita menarik dan info apa sahaja tentang manusia sejagat umumnya.
Kami memohon maaf jika ada info yang tidak benar. Kami hanya menyampaikan daripada sumber-sumber yang terkenal seperti Harian Metro, Malaysia Kini, Melayu Kini, MyNewsHub, Berita Bernama, Bloomberg, Berita Harian, Kosmo, Utusan dan pelbagai lagi sumber yang terbaik. Selamat membaca :)

PERHATIAN - Jom jadi Ahli xBran

Assalamualaikum.
Kami memberi peluang menambah pendapatan kepada sesiapa sahaja berumur 16-50 tahun untuk bersama-sama kami meneraju blog xBran ini tanpa hadnya.

Syarat-syarat menjadi ahli xBRAN.

1. Daftar - Isi borang online yng disediakan bagi memudahkan kami membuat pembayaran kepada anda.

2. Jika artikel yang anda anda bukan hak anda, sila pastikan anda letak link sumber.

3. Jana pendapatan berBlogging.

4. Minimum 1 hari 1 artikel.

+++++++++++++++++++++++++++++++
LEVEL 1 - (Anda buat 300 artikel)
Kami beli cerita anda, 1 artikel = RM0.10
Contoh pengiraan :
5 artikel = RM0.50

LEVEL 2 (Anda tambah 200 artikel lagi)
-YURAN RM50
Selepas anda melepasi tahap 300 artikel,
Kami akan naikan harga 1 artikel = RM0.20.
Contoh pengiraan :
5 artikel = RM1.00


LEVEL VVIP -YURAN RM100
1 artikel = RM0.50
Jom Rebut peluang tambah pendapatan sampingan.

AHLI TERKINI
MrPetak - VVIP
fiveprodesign - Ahli Biasa
HantaranMurah - Ahli Biasa
Anda ahli?

xBran kalau tak tinggal calar!

There was an error in this gadget

Google+ Badge

Backlink xBran

blogger widgets Free Backlinks

Receive all updates via Facebook. Just Click the Like Button Below

?

Dapatkan Widget Ini Di Mazeer Mohamad | Simple SEO Tips @ Blogger Tips

More tips here http://mazeermohamad.blogspot.com/search/label/FAMOUStutorial