pacman, rainbows, and roller s
Home » Article » Xtscript » Cara Membuat News Ticker Ala Xtgem

Cara membuat News Ticker ala XtGem

f_huda19   26 Januari 2016   09:33:19   1 Suka   Favorit

Membuat News Ticker dengan jQuery dan XtScript


jquery news ticker, xtgem, xtblog, xtscript

Halo semua..!!! Berjumpa kembali bersama Admin di blog kesayangan kita, dimana lagi kalau bukan Cyber4rt.wapsite.me. Di kesempatan ini Admin akan memberikan sesuatu yang menarik nih buat kalian, apa tuh? yang pasti seperti pada judul posting di atas dong, hehe..

Walau hanya ngeblog di XtGem tapi gak mau kalah dong sama blog builder lain atau bahkan mungkin sama CMS. Dengan dukungan fitur XtGem yang tidak dimiliki blog builder lain memang benar-benar memanjakan kita dalam mendesain blog sekeren mungkin.

News Ticker atau orang sering menyebutnya dengan Headline News atau Flash News atau Breaking News dll memang menarik untuk di perhatikan, selain keren juga dapat membuat blog kita seperti situs berita profesional. Tapi apakah bisa blog XtGem dipasang kayak gituan? bisa kok. Nih Admin akan ceritakan bagaimana cara membuat News Ticker ala XtGem step by step.

Disini Admin mengambil daftar blognya menggunakan <xt:feed />. Jika kalian tidak suka bisa menggunakan fungsi XtBlog yang sudah dimodifikasi atau dengan Ajax juga tidak apa-apa. Menggunakan <xt:feed /> bukan tanpa masalah, problem pertama adalah <xt:feed /> tidak mengijinkan url kita sendiri. Bisa kita akali dengan menggenerate alamat RSS FEED kita menggunakan Feed Burner, mau tau bagaimana caranya? cari dulu di Google.

Masalah pertama sudah terpecahkan, ternyata setelah kita lihat Source Code <xt:feed /> terdapat elemen <br> di setiap akhir baris. Bagian yang tidak berguna ini akan mengganggu mesin News Ticker jika tidak di hilangkan. Untuk memecahkan masalah tersebut berarti kita memerlukan XtScript sebagai solusinya. Seperti kode dibawah ini.

<div class="ticker-container">
<div class="ticker-caption">
<p>Breaking News</p>
</div>
<ul>
<!--parser:xtscript-->
var $url=http://feeds.feedburner.com/username_feedburner_kamu;
var $template=<div><li><span>.title. – <a href=".link.">Read More</a></span></li></div>;
var $temp=call htmlspecialchars $val=$template;
var $feed=<xt:feed feed="$url" number="5" template="$temp"/>;
var $feed=call br2nl $val=$feed;
print $feed;
<!--/parser:xtscript-->
</ul>
</div>

Dari kode diatas kita telah menyelesaikan kerangka dari News Ticker yang akan kita buat. Jangan lupa untuk mengganti bagian username_feedburner_kamu. Selanjutnya tinggal kamu pasang CSS dan jQuery News Ticker di bagian headtags blog kamu. Link download ada di akhir acara. Cara pasangnya gampang kok, simak langkah-langkah berikut ini.

pasang jQuery library dan jQuery News Ticker plugin.

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="ticker.js"></script>

CSS News Ticker juga dibutuhkan loh.

<link rel="stylesheet" type="text/css" href="ticker.css">

Kalau sudah selesai simpan pekerjaan kamu dan lihat apa yang terjadi, jika berhasil selamat! kamu sudah bisa membuat News Ticker sendiri. Horeee.. Selamat yaa.

DEMO DOWNLOAD

KOMENTAR

saiyo

saiyo 18 Mar 15

jadi begitu ya, nambah pusing jadinya. Hehe. Ntar ane coba sob. Banyak yang harus dicoba alasannya..

f_huda19

Admin 18 Mar 15

silahkan dicoba sob

Inu

Inu 20 Mar 15

Gan semisal blog kita di akses tanpa __xtblog_blockid=1 akan jadi single post gan susahnya itu...
Oh ya ane minta kode posting acak blog ini boleh gan..hehe

f_huda19

Admin 20 Mar 15

emang.. punya ane sampai ane kasih javascript redirect supaya xtblog-block-id nya tetap nyangkut di url
boleh, nanti ane kirim lewat PM

Inu

Inu 21 Mar 15

Sekalian gan javascriptnya biar nyangkut trus...

Ken arok

Ken arok 26 Mar 15

Build your own blog and site from your mobile phone or computer. BGW - BlogGerWap is a great place to make personal blog or other business site.

Example name.
• name.bloggerwap.com
• name.itusaya.com
• name.qlp.us
• name.wapper.Id



Multi Blogs. In one account You could make blogs with the amount that many URL.

Create Web, In BlogGerWap Free design Website with code HTML, XHTML, XML, Support JavaScript, CSS.

HTML Templates, Free Install and Edit Templates Everything free and
not limited.

So, Join with us in BlogGerWap.com

Riezhma Nurmalia

Riezhma Nurmalia 02 Apr 15

jadi pusing

Riezhma

Riezhma 02 Apr 15

jadi pusing

waroks

waroks 18 May 15

kereeeen master....
mantap wap nya

f_huda19

Admin 18 May 15

thankyou gan :)

Mr_J

Mr_J 20 May 15

Wah. Mantap

Qategori

Qategori 29 May 15

gan tolong dong, blog sayya menggunakan css bawaan dan ketika membuka artikel gambarnya separoh doang tolong minta solusinya gimana

Thomaz

Thomaz 02 Jun 15

aduh,,,
susah salin kodenya sob..
kalu bisa buatin dong didalam textareanya!!
biar musah disalin kodenya

olenk_id

olenk_id 04 Feb 16

master yang satu ini emang bener2 deh trick trick nya keren2, nyimak sambil di bawa pulang tutorialnya gan,,,
Salam xtgem maju terus xtgem jadi wap builder kelas waaaw,,,, hehe,,,
Bwt pak admin salam persahabatan, dan sekalian kunbal dari ane,,, hehe,,
Salam waper mania,,,,

jenishow

jenishow 28 Mar 16

Beberapa hari yang lalu saya baru saja pasang Feed Burner diblog..,tapi di blog xtgem belum pernah..,mungkin artikel ini sangat membantu untuk saya terapkan di blog xtgem :P :P

KIRIM KOMENTAR