XtGem Forum catalog
Home » Article » Xtscript » Cara Membuat News Ticker Ala Xtgem

Cara membuat News Ticker ala XtGem

f_huda19   26 Januari 2016   10: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

argument essay

argument essay 03 Apr 18

<a href=https://argumentativeessay365.org/>essay on persuasion</a> <a href="https://argumentativeessay365.org/">persuasive writing essay</a> <a href=https://argumentativeessay365.org/>a good argumentative essay</a> <a href="https://argumentativeessay365.org/">good persuasive essays</a> <a href="https://argumentativeessay365.org/">argumentative research papers</a> <a href=https://argumentativeessay365.org/>written persuasive essays</a> <a href="https://argumentativeessay365.org/">what is a persuasive essay</a> <a href="https://argumentativeessay365.org/">argumentative essay language</a> <a href=https://argumentativeessay365.org/>argumentative persuasive essay</a> <a href="https://argumentativeessay365.org/">features of writing to argue</a> <a href=https://argumentativeessay365.org/>persuasive essay arguments</a>

argument essay

argument essay 03 Apr 18

<a href=https://argumentativeessay365.org/>conclusion for a persuasive essay</a> <a href=https://argumentativeessay365.org/>writing a persuasive argument</a> <a href=https://argumentativeessay365.org/>introduction of persuasive essay</a> <a href="https://argumentativeessay365.org/">argumentation paper</a> <a href=https://argumentativeessay365.org/>personal argument essay</a> <a href="https://argumentativeessay365.org/">things to write an argumentative essay on</a> <a href="https://argumentativeessay365.org/">persuasive essay words to use</a> <a href="https://argumentativeessay365.org/">persusasive essay</a> <a href=https://argumentativeessay365.org/>introduction of an argumentative essay</a> <a href="https://argumentativeessay365.org/">persuade essay</a> <a href=https://argumentativeessay365.org/>written argumentative essays</a>

argument essay

argument essay 03 Apr 18

<a href=https://argumentativeessay365.org/>essay writing support</a> <a href=https://argumentativeessay365.org/>things to write a persuasive essay on</a> <a href="https://argumentativeessay365.org/">help writing essays</a> <a href="https://argumentativeessay365.org/">argumentative essay assignment</a> <a href="https://argumentativeessay365.org/">persuasive essay on</a> <a href="https://argumentativeessay365.org/">persuasive essay paper</a> <a href="https://argumentativeessay365.org/">persuasive essay words</a> <a href="https://argumentativeessay365.org/">opposing argument</a> <a href=https://argumentativeessay365.org/>persuasive piece of writing</a> <a href="https://argumentativeessay365.org/">a argumentative essay</a> <a href="https://argumentativeessay365.org/">writing an argument</a>

argument essay

argument essay 03 Apr 18

<a href="https://argumentativeessay365.org/">presuasive essay</a> <a href="https://argumentativeessay365.org/">introduction to an argumentative essay</a> <a href="https://argumentativeessay365.org/">argumentative research paper</a> <a href=https://argumentativeessay365.org/>persuasive writing prompts for kids</a> <a href=https://argumentativeessay365.org/>refutation in argumentative essay</a> <a href=https://argumentativeessay365.org/>argument essay introduction</a> <a href="https://argumentativeessay365.org/">argumentative essay introduction</a> <a href=https://argumentativeessay365.org/>a persuasive article</a> <a href="https://argumentativeessay365.org/">the argumentative essay</a> <a href=https://argumentativeessay365.org/>how to write an argumentative paragraph</a> <a href=https://argumentativeessay365.org/>writing arguments</a>

Miltoznop

Miltoznop 09 Apr 18

levitra viagra viagra comparison clip.cgi
http://glviagragtr.com - viagra for sale cheap
viagra trackback url for this
<a href="http://glviagragtr.com">viagra for sale canadian
</a> - is there an interaction with viagra and acupril?
groups viagra uk generic

Frazkrelve

Frazkrelve 13 Apr 18

cialis and alcohol mix total posts
http://cialis-walmart.shop - cialis over the counter
cialis 20mg reviews
<a href="http://cialis-walmart.shop">cialis over the counter at walmart
</a> - cialis danger long time erection
cialis / dosage10 / 20

JaizeAwara

JaizeAwara 19 Apr 18

viagra impotenza penale
http://viagrawithoutdoctorstore.com - viagra without a doctor prescription
viagra for daily use free trial select language
<a href="http://viagrawithoutdoctorstore.com">viagra without a doctor prescription
</a> - brand viagra online no prescription
vendita online viagra generico

KIRIM KOMENTAR