Cara Membuat Breaking News di Blog Dengan Mudah

Breaking news juga dikenal dengan headline news biasanya terdapat dibawah atau diatas blog yang berisi tulisan judul dari beberapa posting yang ada dalam blog tersebut, kegunannya yang paling mendasar adalah untuk memikat pengunjung blog kita agar membaca artikel lain yang ada di blog kita, kegunaan lainnya mungkin untuk mempercantik tampilan saja.

Breaking news dalam kehidupan sehari-hari biasa kita temui pada acara berita di televisi yang beruoa tulisan berjalan dibawah layar, dan kadang kita tertarik untuk membaca tulisan tersebut.

kali ini saya akan berbagi untuk memuat breaking news di blog dengan posisi yang dapat disesuaikan dengan keinginan sobat, caranya cukup mudah sekali, sobat tidak perlu untuk memahami suatu kode HTML/JavaScript kecuali sobat ingin mengeditnya sendiri agar menjadi lebih sesuai dengan selera sobat.

langsung saja kita mulai untuk membuat headline news pada blog, berikut adalah kode-kode yang akan kita gunakan :

Kode 1
.newspic {background:#000 url(http://4.bp.blogspot.com/-vqHATrTDsY8/TvguMe2lBTI/AAAAAAAAEUk/L8UwRygGp9s/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width: 970px;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, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}  
ket : kode yang berwarna merah harus sobat sesuaikan dengan lebar template sobat

Kode 2

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<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+'" /> Loading news...';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>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

Kode 3

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://pro-duck.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>


ket : Tulisan yang berwarna merah ganti dengan url blog sobat sendiri

Bingung liat kode diatas, gak usah kawatir, tinggal copas aja, trus ganti poin-poin yang sudah saya tandai dengan warna merah. Untuk penempatannya ikuti langkah berikut ini :

-  masuk ke blogger pastinya
-  kemudian masuk pada Template -> Edit HTML
-  cari kode ]]></b:skin> dan letakkan Kode 1 tepat diatasnya
-  kemudian cari lagi kode </head> dan letakkan Kode 2 tepat diatasnya
-  untuk Kode 3 sobat bisa meletakkan dimana saja antara <body> dan </body>

misalkan sobat ingin meletakkan diatas navigasi menu, maka sobat harus mencari kode navigasi menu terlebih dahulu, kode template saya <div class='menu horizontal'>, mungkin beda untuk template sobat, kemudian letakkan tepat diatasnya.

misalkan lagi sobat ingin meletakkannya diatas judul posting, sobat harus mencari kode <h3 class='post-title entry-title'>, kemudian letakkan Kode 3 diatasnya. Pokoknya sobat bisa meletakkan dimanapun di area body

Silakan berkreasi sendiri dengan blog sobat, jika ada yang memerlukan bantuan silahkan meninggalkan komentarnya, saya selalu siap untuk membantu jika saya bisa.

Akhir kata 'Thanks for Visit...'     ^_^

Keyword :
Pro Duck Cara Membuat Breaking News di Blog Dengan Mudah By Pro Duck Published: 2013-05-13T20:07:00+07:00 Cara Membuat Breaking News di Blog Dengan Mudah 4.5 758 reviews

9 Komentar:

Adlin Muhammad H said...

kang.. buat demo untuk skrip diatas donk kang :)

Unknown said...

]]></b:skin

Imam Syafiuddin said...

@adlin Muhammad: Sory gan, udah ane hapus pada blog uji coba saya, tp script diatas work kok gans, udah ane coba sendiri.,

Unknown said...

thanks banget gan.....makasih banyak deh pokoknya...work 100% tutor nya..

Investasi Saham said...

Makasih tipsnya, punya breaking news di blog memang keren. Perlu di coba nih.

Anonymous said...

Pergantian Nama Merek Ambeclear De Nature ? Segera Hubungi Kami Dan Pesan Obatnya Sekarang Juga di Fast Respond : 087705015423 PIN : 207C6F18.

Singapool said...

Agen Poker

Domino 99

Domino qq

Bandarq

Agen domino qq

Agen bandarq

Poker Online

Agen Poker

Domino 99

Domino qq

Bandarq

Aduq

Bandar Poker

Agen domino qq

Agen bandarq

Agen Aduq

Cerita Dewasa

Cerita Sex

Cerita Hot

Film Semi

Video Porno

Video Bokep

Streaming Bokep Online

Nonton Bokep

Bokep Indonesia

Bokep Jepang

Prediksi Bola

Prediksi Togel

Prediksi Parlay

yessy haryanto said...

Haloo pak^^

Kami dari SENTANAPOKER ingin menawarkan pak^^

Untuk saat ini kami menerima Deposit Melalui Pulsa ya pak.

*untuk minimal deposit 10ribu
*untuk minimal Withdraw 25ribu

*untuk deposit pulsa kami menerima provider
-XL
-Telkomsel


untuk bonus yang kami miliki kami memiliki
*bonus cashback 0,5%
*bunus refferal 20%
*bonus gebiar bulanan (N-max,samsung Note 10+,Iphone xr 64G,camera go pro 7hero,Apple airpods 2 ,dan freechips)

Daftar Langsung Di:

SENTANAPOKER

Kontak Kami;

WA : +855 9647 76509
Line : SentanaPoker
Wechat : SentanaPokerLivechat Sentanapoker

Proses deposit dan withdraw tercepat bisa anda rasakan jika bermain di Sentanapoker. So… ? tunggu apa lagi ? Mari bergabung dengan kami. Pelayanan CS yang ramah dan Proffesional dan pastinya sangat aman juga bisa anda dapatkan di Sentanapoker.

TerryAchie90 said...

Dapatkan keuntungan ratusan juta rupiah dengan bergabung dan bermain di situs resmi permainan kartu Online terlengkap terpercaya MENANGQQ

Post a Comment

ads