Cara Mudah Membuat Breaking News di Blog - Hello friend Download Games And Software, In the article that you read this time with the title Cara Mudah Membuat Breaking News di Blog, we have prepared this article well for you to read and take information in it. hopefully the post content Article tutorial blog, what we write can you understand. alright, happy reading.

Judul : Cara Mudah Membuat Breaking News di Blog
link : Cara Mudah Membuat Breaking News di Blog

Cara Mudah Membuat Breaking News di Blog

Cara Mudah Membuat Breaking News di Blog - Apakah sobat sudah mengenal breaking news pada blog? breaking news artikel terbaru di blog memang nampaknya sekarang para blogger memilih untuk beralih ke widget seperti ini (Breaking news) karena hemat tempat dan juga tidak besar beban loading blognya jika dibandingkan dengan widget Entri terbaru di sidebar slider ke bawah yang bisa memakan 4-5 elemen.

Lebih jelasnya, Breaking news adalah widget yang dipasang dengan tujuan memperindah tampilan blog dan juga untuk  meningkatkan pageview blog seperti pada gambar diatas. Widget ini berupa judul artikel yang ditampilkan secara bergantian yang terkadang juga di sertai dengan tanggal posting artikel tersebut.

Pada Kesempatan Kali ini saya akan share Cara Membuat Breaking News Terbaru di Blog, karena desain yang ada sangat keren dan terbaru. jika sobat ingin memasangnya diblog, ikuti tutorial dibawah ini:

Cara Memasang Breaking News di Blog

1. Login Ke Blogger.
2. Pilih Template.
3. Sobat download full template terlebih dahulu (Tampilan Baru).
4. Klik "Edit HTML".
5. Setelah itu sobat cari kode ]]></b:skin> menggunakan f3 atau CTRL+F, lalu sobat letakkan kode di bawah ini persis di atas kode ]]></b:skin>.

/* News Ticker Wrapper
---------------------------------------------*/ 
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj74g2ee-Bit5LOYravDVuhCfRQ9lGBJ86AsRdtu3Bsxi-V9m7NwVo4gNtYVgYuRpjC5mwz_cJAz34qkxLDjFla-Z4qJNo419gmZm1fuHlGiqnlkO-5Ud4zGSRJrs9DVEBcM9udOMKQvfY/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;} 

6. Masih dalam posisi Edit HTML, selanjutnya sobat cari kode </head>, dan letakkan kode di bawah ini persis di atas kode </head>.

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

7. Selanjutnya sobat cari kode Navigasi, seperti di bawah ini:

<div class='menu horizontal'>
...........................................
...........................................
</div>

8. Selanjutnya sobat letakkan kode di bawah ini di bawah kode navigasi yaitu setelah kode </div> sebagai penutup navigasi.

<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://softwaremaniapc.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>

9. Jika di letakkan di bawah kode navigasi akan menjadi seperti ini:

 <li><a href='/'>Home</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/2013/02/contact-me.html'>Contact Us</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/2013/02/tukar-link.html'><blink>Tukar Link</blink></a></li>
<li><a href='http://softwaremaniapc.blogspot.com/search/label/Tutorial%20Blog'>Tutorial Blog</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/search/label/Software'>Software</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/search/label/Komputer'>Komputer</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html'><blink>Pasang Iklan</blink></a></li></ul>
<div class='navsearch'>
<div style='float:right;padding:1px px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
</form>
</div>
</div>
</div>
</div>
<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://softwaremaniapc.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>

10. Klik "Save template" dan selesai. Lihat Hasilnya.

Sekian dulu Cara Mudah Membuat Breaking News di Blog. semoga bermanfaat.....

Selamat Mencoba

Such article Cara Mudah Membuat Breaking News di Blog

So this article Cara Mudah Membuat Breaking News di Blog this time, hopefully it can benefit you all. alright, see you in another article post.

You are now reading the article Cara Mudah Membuat Breaking News di Blog with the link address https://moresofgame.blogspot.com/2013/04/cara-mudah-membuat-breaking-news-di-blog.html