Memasang News Ticker atau Berita Berjalan

Terinspirasi dari Sporty Magazine 2 Blogger Template, kali ini saya akan mengulas sedikit tentang tempate ini, Saya merasa ada yang menarik dari template ini, apanya ya . . . ?
Jika sobat sedag menggunakan template ini atau mungkin teman sobat yang sedang menggunakannya mungkin sobat bisa lihat tu apa yang saya bilang menarik, yang menarik adalah bagin bawah headernya!
Coba sobat perhatikan gambar berikut ini.

Di situ ada News Ticker atau Berita Berjalan yang saya bilang menarik tadi, dan akhirnya saya sudah menemukan caranya.
Caranya apa, ya cara untuk memasangya di blogger lah, hehehe . . .
Saya tidak menyediakan demo disini kalo emang sobat masih gak paham dengan yang saya maksudkan sobat bisa lihat di demo Sporty Magazine 2 Blogger Template, kalo demo template tersebut zoom template juga ada.

Kalo sobat udah pada paham dan tertarik Memasang News Ticker atau Berita Berjalan seperti itu, sekarang mari kita bahas caranya, Untuk caranya sendiri menurut saya gampang, oke saya akan coba bimbing sobat, heh kayak guru aja mau membimbing orang ckckckc . . . Ya udah lansung aja ya!

Memasang News Ticker atau Berita Berjalan di blogger:

1. Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Edit HTML.

3. CentangExpand Template Widget ➨ Backup dulu templatenya untuk berjaga-jaga bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template sobat cari kode  ]]></b:skin> atau </style>: Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Jika sudah ketemu sekarang sobat copy kode berikut dan paste atau letakkan di atas kode tadi.

/* News Ticker Wrapper */
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirTs7BwqW0YAI9vM8tY2VvUrDc1AbSiTnW3voN150dXi7VdJfYZSCa8E90RHLRonMwm1N0cZiAuZboWc5cY3jeBpDpz3DCnnJMHzaNyGxJegxHGDGxkv8e_X9XYnMN7AF9bqNzOJ5KbN8/s1600/headline.png) no-repeat top left;width:940px;margin:0 auto;padding:0 auto;height:28px;color:#ff0000;}
.news {width: 940px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link{color:#ff0000;font-weight: bold;text-decoration:none}
.news a:visited{color:#ddd;font-weight: bold;text-decoration:none}
.news a:hover{color:#fff;font-weight: bold;text-decoration:underline}

6. Selanjutnya sobat cari kode </head> Jika sudah ketemu sekarang letakkan kode berikut di atas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Oto Website';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]></script>

7. Simpan template.

8. Terakhir:
Masih belum selesai, tinggal satu langkah lagi, ini yang harus di perhatikan dan ini adalah untuk meletakkan kode HTML News Ticker atau Berita Berjalannya!
Dalam langkah terakhir ini sobat bisa meletakkannya terserah sobat .
Contoh saya akan meletakkan News Ticker ini di bawah Menu Drop Down di Bawah Header maka saya harus mencari kode <div id='content-wrapper'> dan setelah kode tersebut di tutup dengan kode </div> maka tepat di bawah kode </div> letakkan script News Ticker di bawah ini.

<div class='newspic'>
<div class='news'>
<div style='float:left;padding:5px 60px 5px 7px;font:bold 14px Arial;color:#333;text-transform:none;'>
Berita Terbaru :
</div><div style='float:left;width:680px;padding:4px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Wanti Purwanti", "http://otowebsite.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //Menunjukkan bidang tambahan tertentu
cssfeed.setentrycontainer("div") //Bungkus setiap entri dengan tag DIV
cssfeed.filterfeed(10, "date") //Angka 10 menunjukkan banyaknya entri yang akan muncul
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

9. Klick pertinjauan dahulu kalo sudah muncul baru klick Simpan Template.

Keterangan:

• Kode menu navigasi berbeda-beda, jika tidak menemukan kode <div id='content-wrapper'> coba cari kode <div id='navigation'>.
• JIka sobat masih bingung dan tidak bisa juga langkah terakhir coba sobat perhatikan menu blog sobat, Misalnya blog sobat berisi menu apa saja, misalnya Home, Exchangae, Contack Admin, dll, maka tepat di akhiran menu akan ditutup dengan kode </div> selanjutnya sobat letakkan kode script yang ada pada langkah 8 di bawahnya. lalu klick pertinjauan dan simpan.

Nah gimana, keren kan News Ticker atau Berita Berjalannya???

Saya rasa cukup!

Demikian psotingan atau articles tentang Memasang News Ticker atau Berita Berjalan semoba bisa bermanfaat untuk sobat semua.

Bagaimana apakah sobat berhasil menerapkannya di blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas.