Teya Salat
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

Premium Assignments

Premium Assignments 05 Mar 18

college research paper <a href="http://researchpaper.store">high school research paper</a> research paper heading http://researchpaper.store - research paper methods

Custom Essay Writer

Custom Essay Writer 10 Mar 18

people who write research papers for you <a href="http://researchpaper.store">research paper</a> literature research papers <a href=http://researchpaper.store>research proposal help</a>

GerazdPet

GerazdPet 14 Mar 18

cialis 20mg canada no new posts
http://walmartcialis.shop - cialis over the counter at walmart
free samples of cialis
<a href="http://walmartcialis.shop">cialis over the counter at walmart
</a> - cialis tadalafil canada comments.htm
buying cialis in nogales mexico

Paper Back Writer

Paper Back Writer 14 Mar 18

research paper <a href="http://researchpaper.store">research paper</a> good research paper <a href=http://researchpaper.store>research paper heading</a>

Custom Essay Writers

Custom Essay Writers 20 Mar 18

high school research paper <a href="http://researchpaper.store">a research paper</a> research paper <a href=http://researchpaper.store>college research paper</a>

essay writing service

essay writing service 21 Mar 18

<a href=https://argumentativeessay365.org/>essay writing service</a> <a href=https://argumentativeessay365.org/>essay writing service</a>

payday loans

payday loans 21 Mar 18

debt consolidation las vegas <a href="https://payday365day.org">no employment verification payday loan</a> installment loan reviews <a href=https://payday365day.org>discount cash advance</a> small installment loan
debt consolidation loans reviews <a href="https://payday365day.org">cash advance akron ohio</a> personal loans for bad credit <a href=https://payday365day.org>1 hour payday loan</a> personnal loans
get a loan with poor credit <a href="https://payday365day.org">loans for bad credit</a> consolidating loans <a href=https://payday365day.org>cash advance ashland ky</a> how to calculate a loan payment
installments loans <a href="https://payday365day.org">payday loan in las vegas</a> what do you need to get a loan <a href=https://payday365day.org>payday loans bad credit no upfront fees</a> easy installment loans online

payday loans

payday loans 21 Mar 18

installment loans rockford il <a href="https://payday365day.org">fast cash las vegas</a> loans for bad credit in nc <a href=https://payday365day.org>ach loan</a> what is refinancing a loan
loan against tax return <a href="https://payday365day.org">payday loans in columbus ohio</a> short term personal loans <a href=https://payday365day.org>short term loans for bad credit</a> best debt consolidation loans companies
personal loans online direct lenders <a href="https://payday365day.org">direct payday loan lenders bad credit</a> loans columbia sc <a href=https://payday365day.org>cashadvance</a> debt consolidation loans utah
how do i get a personal loan <a href="https://payday365day.org">payday loan for bad credit direct lender</a> cash loans chicago <a href=https://payday365day.org>payday loans arlington tx</a> teacher loan