Acara oprek mesin wordpress kita lanjuttt.. . Kali ini guna mempercantik penampilan situs, antum bisa menggunakan efek teks yang satu ini, Fadding Marquee Text . Fadding Marquee Text adalah salah satu efek teks yang bisa menghilang dan muncul secara perlahan-lahan secara bergantian dari text link yang satu ke text link yang lain.

Dengan efek ini, situs kita bisa lebih kelihatan fresh dan lebih profesional tentunya.

Langsung ke TKP aja yuk. Berikut Langkah-langkah proses pembuatan nya:

Ada 3 langkah utama yaitu :

Pertama. Copy kode nya dan simpan dalam format js

Kedua. Panggil kode dengan script yang di letakkan di header.php sebelum </head>

Ketiga. Buat kode untuk memanggil fungsi kode yang telah dibuat di template yang diinginkan.

Detail nya sebagai berikut :

Langkah Pertama >>

1. Copy Kode dibawah ini dan Paste ke notepad kemudian simpan dengan nama= marquee.js

Sorot Semua Kode

function setupFadeLinks() { arrFadeLinks[0] = “http://javascriptsource.com/snippets/popup-blocker-detection.html”; arrFadeTitles[0] = “1. Popup Blocker Detection”; arrFadeLinks[1] = “http://javascriptsource.com/forms/code-box-editor.html”; arrFadeTitles[1] = “2. Code Box Editor”; arrFadeLinks[2] = “http://javascriptsource.com/miscellaneous/mailto.html”; arrFadeTitles[2] = “3. mailTo”; arrFadeLinks[3] = “http://javascriptsource.com/cookies/delicious-cookies.html”; arrFadeTitles[3] = “4. Delicious Cookies”; arrFadeLinks[4] = “http://javascriptsource.com/snippets/insertafter.html”; arrFadeTitles[4] = “5. insertAfter()”; } // You can also play with these variables to control fade speed, fade color, and how fast the colors jump. var m_FadeOut = 255; var m_FadeIn=0; var m_Fade = 0; var m_FadeStep = 3; var m_FadeWait = 1600; var m_bFadeOut = true; var m_iFadeInterval; window.onload = Fadewl; var arrFadeLinks; var arrFadeTitles; var arrFadeCursor = 0; var arrFadeMax; function Fadewl() { m_iFadeInterval = setInterval(fade_ontimer, 10); arrFadeLinks = new Array(); arrFadeTitles = new Array(); setupFadeLinks(); arrFadeMax = arrFadeLinks.length-1; setFadeLink(); } function setFadeLink() { var ilink = document.getElementById(“fade_link”); ilink.innerHTML = arrFadeTitles[arrFadeCursor]; ilink.href = arrFadeLinks[arrFadeCursor]; } function fade_ontimer() { if (m_bFadeOut) { m_Fade+=m_FadeStep; if (m_Fade>m_FadeOut) { arrFadeCursor++; if (arrFadeCursor>arrFadeMax) arrFadeCursor=0; setFadeLink(); m_bFadeOut = false; } } else { m_Fade-=m_FadeStep; if (m_Fade&lt;m_FadeIn) { clearInterval(m_iFadeInterval); setTimeout(Faderesume, m_FadeWait); m_bFadeOut=true; } } var ilink = document.getElementById(“fade_link”); if ((m_Fade&lt;m_FadeOut)&&(m_Fade>m_FadeIn)) ilink.style.color = “#” + ToHex(m_Fade); } function Faderesume() { m_iFadeInterval = setInterval(fade_ontimer, 10); } function ToHex(strValue) { try { var result= (parseInt(strValue).toString(16)); while (result.length !=2) result= (“0″ +result); result = result + result + result; return result.toUpperCase(); } catch(e) { } }

2. Kemudian upload ke direktori js situs antum ( Biasanya terletak pada Direktory theme > includes > js )

Langkah Kedua >>

1.  Untuk memanggil script js diatas,Copy kode dibawah ini dan paste ke header.php pada template theme situs antum, letakkan sebelum </head> . (Rekomnedasi; letakkan paling akhir sebelum </head>) . Berikut kodenya :

Sorot Semua Kode

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?”></includes/js/marquee.js</script>

Dengan asumsi bahwa anda meletakkan marquee.js pada Direktori theme > includes >js. (Antum bisa menyesuaikan sendiri sesuai kebutuhan)

Langkah Ketiga >>

Copy Kode berikut dan letakkan pada template yang diinginkan, bisa di apply di sidebar, page, home dan post ). Berikut contohnya:

Sorot Semua Kode

<div id=”fade_base”><strong><em><a id=”fade_link”></a></em></strong><</div>

Walhasil :

Note :

Untuk Menampilkan Kode link yang diinginkan, Antum harus mengedit dulu isi dari link dan title pada scrip marquee.js (Langkah Pertama) , tepatnya pada  kode berikut : (Kode paling atas dari marquee.js)

Sorot Semua Kode

function setupFadeLinks() {<br /> arrFadeLinks[0] = “http://javascriptsource.com/snippets/popup-blocker-detection.html”;<br /> arrFadeTitles[0] = “1. Popup Blocker Detection”;<br /> arrFadeLinks[1] = “http://javascriptsource.com/forms/code-box-editor.html”;<br /> arrFadeTitles[1] = “2. Code Box Editor”;<br /> arrFadeLinks[2] = “http://javascriptsource.com/miscellaneous/mailto.html”;<br /> arrFadeTitles[2] = “3. mailTo”;<br /> arrFadeLinks[3] = “http://javascriptsource.com/cookies/delicious-cookies.html”;<br /> arrFadeTitles[3] = “4. Delicious Cookies”;<br /> arrFadeLinks[4] = “http://javascriptsource.com/snippets/insertafter.html”;<br /> arrFadeTitles[4] = “5. insertAfter()”;<br />}

Untuk Menampilkan Background warna atau gambar dibelakang text nya, antum bisa membuat tambahan kode id dan class di css external (style.css).

Anda tertarik ?? Silakan dicoba , ga usah takut-takut eror.

Sebelum mencoba, silakan di backup dulu file nya ( kalo bisa 1 theme sekalian), agar bisa di restore juka suatu saat mengalami kegagalan.

Cara ini udah ane coba dan berhasil ( hanya sekali coba saja) .  Dan efek ini bisa tampil dengan baik (yang sudah ane cek) di browser Firefox, IE dan Opera.

Selamat mencoba. Semoga beruntung.

Semoga bermanfaat.

Postingan hebat lainnya yang berhubungan :

1. Cara Membuat Efek Teks Mengetik (Ticker Text) Pada Mesin WordPress
2. Cara Mudah Menampilkan Thumbnail Gambar di Postingan Pada Mesin WordPress
3. Cara Membuat Menu Hierarki (Menu-Submenu) Pada Mesin WordPress
4. Cara Mudah Membuat Blinking Text Dengan Bantuan CSS Theme
5. Cara Mudah, Cepat, Tepat, Aman dan Menyenangkan Upgrade Mesin WordPress
6. Cara Mudah Membuat Blinking Text Yang Valid XHTML1
7. Cara Sangat Mudah Membuat Post Thumbnail Dengan Timthumb
8. Cara Mudah Membuat Filter Email Pada Outlook Express