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(http://2.bp.blogspot.com/-Gi_4y7eGWlg/TzePAUfnxbI/AAAAAAAAA4g/WsJKC56NBs4/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.

Poskan Komentar Blogger Disqus

  1. terimakasih atas kunjungannya, mengenai beberapa bloggerc cew, siapa saja yang di jumpai

    BalasHapus
  2. wah gak nyangka ada blogger cew... kenalan donk ?

    BalasHapus
  3. kog muncul tulisan google feed API eror apanya gan??? :(

    BalasHapus
  4. @Anang irawanGanti teks warna merah dengan RSS Feeds blog Anda.

    BalasHapus
  5. Cara buat news ticker seperti blog agan gimana?

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top