Cara Mudah Membuat Scrolling Ticker Hot News

Jumat, 09 Maret 2012

Cara Membuat Scrolling Ticker HOT News –Ticker adalah teks berjalan yang bisa digunakan untuk menyampaikan sebuah pengumuman, berita, pemberitahuan, rss hot news dan lain-lain seperti layaknya sebuah jadwal keberangkatan penerbangan itu lho !.  Sobat dapat menempatkan ticker di area posting(bawah atau atas postingan) ataupun di sidebar. Teks berjalan atau ticker ini pernah saya buat dihalaman Link Sobat untuk memberitahukan syarat tukar link/banner. Silahkan saja sobat edit teks tulisan, jenis/warna border ticker serta warna hurup. Jika template anda dengan background hitam, rubah saja warna border ticker menjadi putih, background color menjadi hitam sehingga ticker terlihat lebih sepadan dengan template. Sengaja nulis ini siapa tau ada Mister dari negeri antah berantah yang baca..gkkk.

Cara Membuat Ticker di Posting Blog :

1.     Masuk dulu ke panel posting blogger seperti saat sobat akan memposting sebuah artikel baru. Pilih opsi Edit HTML disebelah tulisan Compose.

2.       Copy script HTML dibawah ini dan paste di area posting mana saja yang sobat inginkan.

<div id="TICKER" onmouseout="TICKER_PAUSED=false" onmouseover="TICKER_PAUSED=true" style="background-color: white; border-bottom: 1px solid rgb(204, 204, 204); border-top: 1px solid rgb(204, 204, 204); display: none; overflow: hidden; width: 520px;">

<span style="background-color: #7fb51a;"> &nbsp; &nbsp; <span style="color: white;"> <b>Syarat Tukar Link/Banner</b></span>&nbsp; &nbsp; </span> &nbsp; <b>Blog anda terdaftar di Search Engine dan halaman tukar link anda terindeks di Google.</b>&nbsp; <span style="background-color: #ffaa00;"> &nbsp; &nbsp; <span style="color: white;"> <b>Terdaftar</b></span>&nbsp; &nbsp; </span> &nbsp; <b>Terdapat meta tag search engine pada template.</b>&nbsp; <span style="background-color: #0088ff;"> &nbsp; &nbsp; <b><span style="color: white;"> Terindeks</span></b>&nbsp; &nbsp; </span> &nbsp; <b>Halaman blog muncul pada hasil pencarian Google... </b>&nbsp; </div>

<script language="javascript" src="http://discovernine.webs.com/zoomimage/webticker_lib.js" type="text/javascript">

</script>

3.       Hasil dari Hot News Ticker terlihat seperti dibawah ini :

Syarat Tukar Link/Banner      Blog anda terdaftar di Search Engine dan halaman tukar link anda terindeks di Google.      Terdaftar      Terdapat meta tag search engine pada template.      Terindeks      Halaman blog muncul pada hasil pencarian Google...

4.     Jika anda ingin meletakkan ticker ini secara permanen pada template, tentukan dulu dimana sobat ingin meletakkannya apakah diatas judul, dibawah judul atau dibawah postingan. Kemudian carilah kode HTML yang berhubungan untuk meletakkan script ticker dalam template. Misalnya untuk meletakkan ticker dibawah judul maka sobat harus meletakkan script ticker tepat dibawah kode <div class='post-body entry-content'>. Jangan lupa tambahkan kode pembuka  <b:if cond='data:blog.pageType == &quot;item&quot;'> dan kode penutup </b:if>  supaya ticker tidak muncul dihalaman homepage. Sobat juga dapat memasukkan link URL pada teks sesuai keinginan anda pada script ticker ini.

5.     Untuk memudahkan memodifikasi sebuah script HTML, editlah dulu script HTML anda di Notepad kemudian pilih Save As script tadi dengan memberikan ekstensi .html pada bagian File name dan All Files pada bagian Save as typeseperti gambar dibawah ini. Maka file script anda bukan lagi berekstensi .txt seperti layaknya file Notepad, namun sudah menjadi file dengan ektensi .html yang dapat sobat buka pada browser dengan cara double klik. Saya sering melakukan cara ini untuk dapat langsung melihat hasil dari sebuah script pada browser. Sehingga kalau ada kesalahan atau ada hal yang mungkin masih perlu diedit dapat kita ketahui langsung.

Demikian cara sederhana untuk membuat ticker dengan scroll yang bisa saya share untuk sobat. Semoga ticker ini bisa bermanfaat untuk menyampaikan berita-berita penting di blog anda.