#Cara Membuat Breaking News Di Blogger Dengan Mudah!

Awaknyo >>

Cara Membuat Breaking News Di Blogger Dengan Mudah!

Hai sob, pada kesempatan ini kita akan bahas tata cara pemasangan breaking news di blogger, breaking news tampaknya keren juga jika dipasang diblog dan membuat blog menjadi tampak lebih menarik dan keren.
berikut tata cara pemasangan breaking news:

1. Warna Hijau
log in ke blogger.com
pilih tataletak/layout
add widget masukan:

<style type='text/css' scoped="scoped">
#news { background:#52e052; border-bottom: 5px solid #333; border-top: 5px solid #333; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 835px; }
.titlenews { background:#333; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }
#ltsposts { float: left; margin-left: 120px; }
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#333 !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#333; float: right; margin: -8px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgydq5lbSzqjgQhyphenhyphenmoUDpK7rg_6_VpSWb_kY6UggS4P4qz2Q6GiUQZ5jWYEDxEBTnqIEki7NloZ-QknE6T7k8MD4gYByfEabnkuNVWa0JPr6OgZoIwGjn_EEh3ls3qLIRpKlLCaHo3znlOa/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>

<div id='news'><span class='titlenews'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/andestyle' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/104093787575230359634' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/rizkyandes' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/masandes' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://mas-andes.blogspot.com', // Replace With your Blog Url
numpostx     = 20; // Maximum Post
$.ajax({
    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                {
                     if (entry[i].link[j].rel == "alternate")
                        {
                            posturl = entry[i].link[j].href;
                            break;
                         }
                }              
            posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

ubah sesuai kebutuhan:

2. Warna Hitam Orange
masuk ke edit template taruh diatas </style>

#headlinenews { position:relative;background:#343434; display: block;border-top:3px solid #FF6600; height: 33px; line-height: 33px; overflow: hidden;margin:0 auto;padding: 0px;width: 100%;}
#news { float: left; margin-left: 120px; }
#news a { background: none !important; color:#fff !important; font: bold 11px/33px Arial; text-decoration: none; }
.titlenews { background:#FF6600; color: #fff; display: block; float: left; font: bold 12px/33px Arial; padding: 9px; margin-top: -10px; position: absolute; }
#socialicon { float:right; width:230px; padding:5px 0; }
#socialicon ul,#socialicon li { padding:0; margin:0; list-style:none; }
#socialicon li { float:left; margin:0 2px; }
#socialicon a { display:block; text-indent:-9999px; width:24px; height:24px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bf069Eys_9yoqdkAmFo-2Q1jL80QT0WbGkkr3KmO8CtUQWJ-oOtv6toBe8kvcg0cnPWOCzWI8vcsZaLjf_gIcIo9Rx-biy3PC2sTCZ0wKsJsayG5S0YPYBisdhXLTnqw_Q06r_5jBUQ/s1600/soicon.png); background-position:-1px 0; background-repeat:no-repeat; position:relative; }
#socialicon a:active { top:1px; }
#socialicon .fbx { background-position:-1px 0; }
#socialicon .twix { background-position:-27px 0; }
#socialicon .goex { background-position:-53px 0; }
#socialicon .linx { background-position:-131px; }
#socialicon .pinx { background-position:-79px 0; }
#socialicon .drix { background-position:-157px; }
#socialicon .vmex { background-position:-183px 0; }
#socialicon .rssx { background-position:-105px; }

 taruh ini diatas </head>

<script src='https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline1.js'/>
<script src='https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline2.js'/>

letakkan kode ini di  <div id='header'>   atau <div id='header-wrapper'> atau <div id='header-outer'> atau di widget

<div id='headlinenews'>
    <span class='titlenews'>Latest Post</span>
  <div id='news'>
 <script type='text/javascript'>
 var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 5000, &quot;_new&quot;)
 cssfeed.addFeed(&quot;Feed Blog&quot;, &quot;http://www.seocips.com/feeds/posts/default&quot;)
 cssfeed.displayoptions(&quot;date&quot;)
 cssfeed.setentrycontainer(&quot;span&quot;)
 cssfeed.filterfeed(10, &quot;date&quot;)
 cssfeed.entries_per_page(1)
 cssfeed.init()
 </script>
   </div>
<div id='socialicon'>
        <ul>
          <li><a class='fbx' href=#' title='Facebook'>facebook</a></li>
          <li><a class='twix' href='#' title='Twitter'>twitter</a></li>
          <li><a class='goex' href='#' title='Google+'>Google+</a></li>
          <li><a class='linx' href='#' title='Linkedin'>Linkedin</a></li>
          <li><a class='pinx' href='#' title='Pinterest'>Pinterest</a></li>
          <li><a class='drix' href='#' title='Dribble'>Dribble</a></li>
          <li><a class='vmex' href='#' title='Vimeo'>Vimeo</a></li>
          <li><a class='rssx' href='http://feeds.feedburner.com/#' title='RSS'>RSS</a></li>
        </ul>
      </div>
   </div>
          <div class='clear'/>

ganti # dengan link kamu

3. Biru Hitam
 taruh diatas   ]]></b:skin>

/* News Ticker Wrapper
---------------------------------------------*/
.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;}

taruh ini diatas </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].conten

cari menu blog anda atau <body>
paste dibawahnya

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

ganti linknya dengan blog kamu, semoga bermanfaat sob..

Berbagi :