Monday, October 17, 2016

Cara membuat Headline News pada Blog

Cara membuat Headline News pada Blog


Cara Membuat Breaking News Dibawah Navigasi Menu
open in new tab untuk gambar yang lebih jelas
Assalamualaikum wr.wb. Kali ini saya akan share sebuah tutorial tentang sebuah widget yang hampir selalu saya pakai walaupun sudah berkali-kali berganti template . script widget ini saya dapat dari sebuah blog yang sangat terkenal yaitu blog maskolis , ya memang widget-widget yang di share di blog maskolis memiliki kualitas yang keren mulai dari social bookmarking sampai slider carousel yang selanjutnya akan saya posting

anda bisa melihat demonya di bagian header blog ini atau jika kurang jelas anda bisa lihat live demo dibawah ini

1.buka blogger > blog anda
2.template        > edit html
3.cari kode ]]></b:skin> lalu pastekan kode berikut diatasnya


.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ziiGEsjBe53Fv8RWz03yLH48PkuhDdj2k3vDOQ8GAqG21pmHcyg5c6qgzkCrvcJxWjKquWOBUyLfGhT27trnSWXrZF10Bd_zF2webUPLD1fS-R80qAsc8Y2Sylt2wMTlYttTbS74ypM/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;}



4.selanjutnya cari kode </head> taruh script ini diatasnya

<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> ":"";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+" "+f+this.itemcontainer.replace("<","</")+" "}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> ":"";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+" "+a+f.replace("<","</")+" "}c+=(f=="<li>")?"</ul> ":"";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>

5.taruh kode dibawah ini diatas <b:section class=header id=header maxwidgets=1 showaddelement=no> 



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



6.pratinjau,jika sudah pas klik simpan

keterangan : jika posisi widget belum pas coba taruh kode nomor 5 dibawah kode <body>

Go to link Download