Ticker Text adalah Salah satu efek pada teks yang seolah-olah teks sedang diketik. Efek ini cukup jitu digunakan untuk memperindah laman web sekaligus memberikan focus pada teks yang ingin ditonjolkan. Jika antum meng apply anya di laman situs antum, maka pembaca situs pun menjadi tertarik dan akhirnya membaca apa yang yang sedang diketik.

Untuk membuat efek semacam ini dibutuhkan javascript dan tambahan setting di css external theme. Jika antum tertarik dengan efek yang satu ini, monggo disimak bersama.

Berikut langkah-langkah pembuatannya :

Perhatikan javascript dibawah ini :

Sorot
Kode

/* This script and many more are available free online at<br /> The JavaScript Source!! http://javascript.internet.com<br /> Created by: Steve Chipman | http://slayeroffice.com/Licensed under:<br /> Creative Commons License<br /> */</p> <p>/****************************</p> <p>so_ticker<br /> version 1.0<br /> last revision: 03.30.2006<br /> steve@slayeroffice.com</p> <p>For implementation instructions, see:<br /> http://slayeroffice.com/code/so_ticker/</p> <p>Should you improve upon or modify this<br /> code, please let me know so that I can update<br /> the version hosted at slayeroffice.</p> <p>Please leave this notice intact.</p> <p>****************************/</p> <p>so_ticker = new Object();<br /> so_ticker = {<br /> current:0,<br /> currentLetter:0,<br /> zInterval:null,<br /> tObj: null,<br /> op:0.95,<br /> pause: false,<br /> tickerContent: [],<br /> LETTER_TICK:100,<br /> FADE: 10,<br /> NEXT_ITEM_TICK: 3000,<br /> init:function() {<br /> var d=document;<br /> var mObj = d.getElementById(“so_oTickerContainer”);<br /> so_ticker.tObj = d.createElement(“div”);<br /> so_ticker.tObj.setAttribute(“id”,”so_tickerDiv”);<br /> var h = d.createElement(“h1″); </p> <p>h.appendChild(d.createTextNode(so_ticker.getTextNodeValues(mObj.getElementsByTagName(“h1″)[0])));</p> <p> h.setAttribute(“id”,”so_tickerH1″);<br /> var ea = d.createElement(“a”);<br /> ea.setAttribute(“href”,”javascript:so_ticker.showContent();”);<br /> pImg = ea.appendChild(document.createElement(“img”));<br /> pImg.setAttribute(“src”,”plus.png”);<br /> pImg.setAttribute(“alt”,”Click to View all News Items.”);<br /> ea.setAttribute(“title”,”Click to View all News Items.”);<br /> h.insertBefore(ea,h.firstChild);<br /> anchors = mObj.getElementsByTagName(“a”);<br /> var nObj = mObj.cloneNode(false);<br /> mObj.parentNode.insertBefore(nObj,mObj);<br /> mObj.style.display = “none”;<br /> nObj.className = “so_tickerContainer”;<br /> nObj.setAttribute(“id”,”so_nTickerContainer”);<br /> nObj.appendChild(h);<br /> nObj.appendChild(so_ticker.tObj);<br /> so_ticker.getTickerContent();<br /> so_ticker.zInterval =<br /> setInterval(so_ticker.tick,so_ticker.LETTER_TICK);<br /> },<br /> showContent:function() {<br /> var d = document;<br /> d.getElementById(“so_oTickerContainer”).style.display = “block”;<br /> d.getElementById(“so_nTickerContainer”).style.display = “none”;</p> <p>d.getElementById(“so_oTickerContainer”).getElementsByTagName(“a”)[0].focus();</p> <p> clearInterval(so_ticker.zInterval);<br /> },<br /> getTickerContent:function() {<br /> for(var i=0;i<anchors.length;i++) so_ticker.tickerContent[i] =<br /> so_ticker.getTextNodeValues(anchors[i]);<br /> },<br /> getTextNodeValues:function(obj) {<br /> if(obj.textContent) return obj.textContent;<br /> if (obj.nodeType == 3) return obj.data;<br /> var txt = [], i=0;<br /> while(obj.childNodes[i]) {<br /> txt[txt.length] = so_ticker.getTextNodeValues(obj.childNodes[i]);<br /> i++;<br /> }<br /> return txt.join(“”);<br /> },<br /> tick: function() {<br /> var d = document;<br /> if(so_ticker.pause) {<br /> try {<br /> so_ticker.clearContents(d.getElementById(“so_tickerAnchor”));</p> <p>d.getElementById(“so_tickerAnchor”).appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current]));</p> <p> so_ticker.currentLetter =<br /> so_ticker.tickerContent[so_ticker.current].length;<br /> } catch(err) { }<br /> return;<br /> }<br /> if(!d.getElementById(“so_tickerAnchor”)) {<br /> var aObj = so_ticker.tObj.appendChild(d.createElement(“a”));<br /> aObj.setAttribute(“id”,”so_tickerAnchor”);</p> <p>aObj.setAttribute(“href”,anchors[so_ticker.current].getAttribute(“href”));</p> <p> aObj.onmouseover = function() { so_ticker.pause = true; }<br /> aObj.onmouseout = function() { so_ticker.pause = false; }<br /> aObj.onfocus = aObj.onmouseover;<br /> aObj.onblur = aObj.onmouseout;</p> <p>aObj.setAttribute(“title”,so_ticker.tickerContent[so_ticker.current]);<br /> }</p> <p>d.getElementById(“so_tickerAnchor”).appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current].charAt(so_ticker.currentLetter)));</p> <p> so_ticker.currentLetter++;<br /> if(so_ticker.currentLetter ><br /> so_ticker.tickerContent[so_ticker.current].length) {<br /> clearInterval(so_ticker.zInterval);<br /> setTimeout(so_ticker.initNext,so_ticker.NEXT_ITEM_TICK);<br /> }<br /> },<br /> fadeOut: function() {<br /> if(so_ticker.paused) return;<br /> so_ticker.setOpacity(so_ticker.op,so_ticker.tObj);<br /> so_ticker.op-=.10;<br /> if(so_ticker.op<0) {<br /> clearInterval(so_ticker.zInterval);<br /> so_ticker.clearContents(so_ticker.tObj);<br /> so_ticker.setOpacity(.95,so_ticker.tObj);<br /> so_ticker.op = .95;<br /> so_ticker.zInterval =<br /> setInterval(so_ticker.tick,so_ticker.LETTER_TICK);<br /> }<br /> },<br /> initNext:function() {<br /> so_ticker.currentLetter = 0, d = document;<br /> so_ticker.current = so_ticker.tickerContent[so_ticker.current +<br /> 1]?so_ticker.current+1:0;</p> <p>d.getElementById(“so_tickerAnchor”).setAttribute(“href”,anchors[so_ticker.current].getAttribute(“href”));</p> <p>d.getElementById(“so_tickerAnchor”).setAttribute(“title”,so_ticker.tickerContent[so_ticker.current]);</p> <p> so_ticker.zInterval =<br /> setInterval(so_ticker.fadeOut,so_ticker.FADE);<br /> },<br /> setOpacity:function(opValue,obj) {<br /> obj.style.opacity = opValue;<br /> obj.style.MozOpacity = opValue;<br /> obj.style.filter = “alpha(opacity=” + (opValue*100) + “)”;<br /> },<br /> clearContents:function(obj) {<br /> try {<br /> while(obj.firstChild) obj.removeChild(obj.firstChild);<br /> } catch(err) { }<br /> }<br /> }</p> <p>function page_init(){<br /> so_ticker.init();<br /> }<br /> window.addEventListener?window.addEventListener(“load”,page_init,false):window.attachEvent(“onload”,page_init);</p> <p>

Copy dulu javascriptnya diatas, kemudian paste di notepad dan simpan dengan nama = soTicker.js dan upload ke directory js theme antum (Kebanyakan js file di simpan di  theme directory > includes > js).

Buatlah script di header.php pada theme yang antum pakai untuk memanggil soTicker.js yang diletakkan sebelum </head>. Script nya sebagai berikut :

Sorot
Kode

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

Langkah selanjutnya, Untuk memberikan kesan hiasan dan warna tambahkan script berikut pada file css external theme situs antum (Biasanya terletak di Direktori theme > style.css ) .

Sorot
Kode

#so_oTickerContainer {<br /> width:700px;<br /> margin:auto;<br /> font:1.0em verdana,arial;<br /> background-color:lightyellow;<br /> border-top:1px solid yellow;<br /> border-bottom:1px solid yellow;<br /> }</p> <p>#so_oTickerContainer h1 {<br /> font:bold 0.9em verdana,arial;<br /> margin:0;<br /> padding:0;<br /> }</p> <p>.so_tickerContainer {<br /> position:relative;<br /> margin:auto;<br /> width:700px;<br /> background-color:lightyellow;<br /> border-top:1px solid yellow;<br /> border-bottom:1px solid yellow;<br /> }</p> <p>#so_tickerAnchor, #so_oTickerContainer a {<br /> text-decoration:none;<br /> color:black;<br /> font:bold 0.7em arial,verdana;<br /> border-right:1px solid #000;<br /> padding-right:2px;<br /> }</p> <p>#so_oTickerContainer a {<br /> border-style:none;<br /> }</p> <p>#so_oTickerContainer ul {<br /> margin-top:5px;<br /> }</p> <p>#so_tickerDiv {<br /> display:inline;<br /> margin-left:5px;<br /> }</p> <p>#so_tickerH1 {<br /> font:bold 1.0em arial,verdana;<br /> display:inline;<br /> }</p> <p>#so_tickerH1 a {<br /> text-decoration:none;<br /> color:#000;<br /> padding-right:2px;<br /> }</p> <p>#so_tickerH1 a img {<br /> border-style:none;<br /> }</p> <p>

Langkah ke empat, antum tinggal ketik dan gunakan script untuk memanggil efek nya di tempat yang ingin di tampilkan efek teks ketikan nya. Berikut sebagai contoh :

<div id=”so_oTickerContainer”><h1>3 Recent Minute News :</h1>

<li><a href=”http://de-expert.web.id”>It is Fun To Write and Share Knowledge</a></li>

<li><a href=”http://de-expert.web.id”>Trying To Be An Expert Man</a></li>

<li><a href=”http://de-expert.web.id”>Sharing, Giving and Receiving Mutual Knowledge</a></li>

</div>

Hasilnya akan sebagai berikut :

Silakan antum kembangkan sendiri sesuai keinginan. Jika masih bingung.., di pelajari lagi. Kalo masih bingung, Kita bisa sharing ilmu kita, Silakan tinggalkan pesan.

Postingan hebat lainnya yang berhubungan :

1. Cara Mudah Membuat Fadding Marquee Text ( Efeks teks menghilang secara perlahan) Pada Mesin WordPress
2. Cara Membuat Menu Hierarki (Menu-Submenu) Pada Mesin WordPress
3. Cara Mudah Menampilkan Thumbnail Gambar di Postingan 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 Sangat Mudah Membuat Post Thumbnail Dengan Timthumb
7. Cara Mudah Membuat Blinking Text Yang Valid XHTML1
8. Cara Mudah Membuat Filter Email Pada Outlook Express