Sedekah Ilmu, Berita Berjalan atau lebih dikenal dengan NewsTicker adalah sebuah widget yang disediakan oleh sebuah layanan pemberi informasi, untuk memudahkan para pengunjung dalam mengetahui berita terbaru, atau informasi lainnya yang biasanya mempunyai sifat khusus. nah, kali ini ane mau ngasih caranya bikin Widget NewsTicker bagi agan - agan yang minat membuat NewsTicker dan menerapkannya dalam blogger. Meskipun ane tau, sekarang banyak banyak banget template blogger yang didalamnya sudah menyediakan widget newsticker.
ya mungkin ane ketinggalan bikin tutorial newsticker ini, cuma menurut ane namanya berbagi ilmu gag ada yang terlambat. mungkin banyak yang sudah tau cara membuat newsticker, tapi ane juga yakin banyak agan-agan yang baru belajardengan blogger dan mau tau cara bikin NewsTicker,
Newsticker sendiri sudah banyak dibuat oleh blogger yang gemar mengotak-atik script html, css dan javascript sendiri. oke langsung kita sundul..
Pertama : Masuk ke akun blogger kamu, (jangan masuk ke akun blogger tetangga :p..)
Kedua : masuk ke TEMPLATE pilih cadangkan untuk menjaga template asli kamu jika terjadi error, kemudian klik edit html, cara kode </head> untuk memudahkan tekan Ctrl + F untuk mencari kode tersebut,
Ketiga : Copy paste kode html dibawah ini tepat diataskode </head>
<script type='text/javascript'>
//<![CDATA[
(function (
$, window, document, undefined ) { var name = "easyTicker", defaults = {
direction: 'up', easing: 'swing', speed: 'slow', interval: 2000,
height: 'auto', visible: 0, mousePause: 1, controls: { up: '', down: '',
toggle: '', playText: 'Play', stopText: 'Stop' } }; function
EasyTicker( el, options ) { var s = this; s.opts = $.extend( {},
defaults, options ); s.elem = $(el); s.targ =
$(el).children(':first-child'); s.timer = 0; s.mHover = 0; s.winFocus =
1; init(); start(); $([window,
document]).off('focus.jqet').on('focus.jqet', function(){ s.winFocus =
1; }).off('blur.jqet').on('blur.jqet', function(){ s.winFocus = 0; });
if( s.opts.mousePause == 1 ){ s.elem.mouseenter(function(){ s.timerTemp =
s.timer; stop(); }).mouseleave(function(){ if( s.timerTemp !== 0 )
start(); }); } $(s.opts.controls.up).on('click', function(e){
e.preventDefault(); moveDir('up'); });
$(s.opts.controls.down).on('click', function(e){ e.preventDefault();
moveDir('down'); }); $(s.opts.controls.toggle).on('click', function(e){
e.preventDefault(); if( s.timer == 0 ) start(); else stop(); });
function init(){ s.elem.children().css('margin',
0).children().css('margin', 0); s.elem.css({ position : 'relative',
height: s.opts.height, overflow : 'hidden' }); s.targ.css({ 'position' :
'absolute', 'margin' : 0 }); setInterval( function(){ adjHeight(); },
100); } function start(){ s.timer = setInterval(function(){ if(
s.winFocus == 1 ){ move( s.opts.direction ); } }, s.opts.interval);
$(s.opts.controls.toggle).addClass('et-run').html(s.opts.controls.stopText);
} function stop(){ clearInterval( s.timer ); s.timer = 0;
$(s.opts.controls.toggle).removeClass('et-run').html(s.opts.controls.playText);
} function move( dir ){ var sel, eq, appType; if(
!s.elem.is(':visible') ) return; if( dir == 'up' ){ sel =
':first-child'; eq = '-='; appType = 'appendTo'; }else{ sel =
':last-child'; eq = '+='; appType = 'prependTo'; } var selChild =
s.targ.children(sel); var height = selChild.outerHeight();
s.targ.stop(true, true).animate({ 'top': eq + height + "px" },
s.opts.speed, s.opts.easing, function(){ selChild.hide()[appType](
s.targ ).fadeIn(); s.targ.css('top', 0); adjHeight(); }); } function
moveDir( dir ){ stop(); if( dir == 'up' ) move('up'); else move('down');
} function fullHeight(){ var height = 0; var tempDisp =
s.elem.css('display'); s.elem.css('display', 'block');
s.targ.children().each(function(){ height += $(this).outerHeight(); });
s.elem.css({ 'display' : tempDisp, 'height' : height }); } function
visHeight( anim ){ var wrapHeight = 0; s.targ.children(':lt(' +
s.opts.visible + ')').each(function(){ wrapHeight +=
$(this).outerHeight(); }); if( anim == 1 ){ s.elem.stop(true,
true).animate({height: wrapHeight}, s.opts.speed); }else{ s.elem.css(
'height', wrapHeight); } } function adjHeight(){ if( s.opts.height ==
'auto' && s.opts.visible != 0 ){ anim =
arguments.callee.caller.name == 'init' ? 0 : 1; visHeight( anim ); }else
if( s.opts.height == 'auto' ){ fullHeight(); } } return { up:
function(){ moveDir('up'); }, down: function(){ moveDir('down'); },
start: start, stop: stop, options: s.opts }; } $.fn[name] = function (
options ) { return this.each(function () { if (!$.data(this, name)) {
$.data(this, name, new EasyTicker( this, options )); } }); }; })(
jQuery, window, document ); $('.ticker2').easyTicker({ direction: 'up',
easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible:
0, mousePause: 1, });
//]]>
</script>
Keempat : cari kode berikut ]]></b:skin> kemudian copy paste kode dibawah ini diatas kode
]]></b:skin>
.tickerwrapper{ position:relative; } .tickhead{ background:#dd4c39
url(https://lh4.googleusercontent.com/S2yrb7GoLLN7s1-NmlkE_nS9Svzr5DQNM3dcCCp2Occ=s50-no)
no-repeat; background-position:125px 10px; background-size:20px;
position:absolute; line-height:40px !important; height:40px;
width:130px; padding:0 15px 0 5px; text-align:center; color:#fff;
font:400 15px 'pt sans',sans-serif; text-transform:uppercase; z-index:1;
top:0; left:0; } .ticker2{ padding-left:155px; height:40px !important;
overflow:hidden; background:#333; line-height:40px !important; }
.ticker2 ul{ padding:0; margin:0; list-style:none; } .ticker2 ul li a{
color:#fff; font:400 15px 'pt sans',sans-serif; text-decoration:none; }
Kemudian klik Simpan
Kelima : Masuk ke dasbord blogger, pilih Tata Letak, pilih tambah Widget/gadget html/javascript kemudian masukkan kode berikut :
<script>
function ticker(json) {
document.write('<div class="tickerwrapper"><span class="tickhead">Latest News</span><div class="ticker2"><ul>');
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var item = '<li><a href=' + postUrl + '>' + postTitle + '</a></li>';
document.write(item);
}
}
</script>
<script src="http://johansanjaya.blogspot.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=ticker"></script>
ganti tulisan johansanjaya.blogspot.com dengan alamat url blog kamu, kemudian simpan dan lihat hasilnya
oke demikian sedikit tutorial dari ane, In Sya Allah artikel berikutnya kita bahas cara bikin newsticker dengan Jquery bergaya seperti NewsTicker pada eSitus BBC
DEMO
