Membuat Widget Breaking News / Feed News di Blog

Cara Membuat Widget Feed News / Breaking News di Blog. widget breaking news atau feed news ini ialah sebuah widget isu artikel atau halaman judul artikel berjalan, widget ini berfungsi pertanda sebuah judul artikel bergulir dan muncul secara acak, mungkin kelebihannya, pembaca mampu melihat link artikel dari halaman breaking news ini dan keuntungannya mampu melihat lebih banyak artikel yang di sediakan halama widget feed atau widget breaking news ini.

KLIK LIHAT DEMO

Untuk widget feed news yang akan kita buat, tampilannya menyerupai gambar diatas atau di tombol demo untuk melihat langsung, menurut saya, selain memperlihatkan saran artikel lainnya, tampilan widget breaking news ini juga sangat keren, jadi teman patut mencobanya, setuju mari kita mulai saja tutorialnya, bagi yang ingin memasang halaman feed tersebut.

Cara Membuat Widget Breaking News / Feed News di Blog

1. Buka akun blogger anda

2. Pilih menu template>>klik edit HTML

3. Sekarang letakan arahan dibawah ini sempurna diatas kode ]]></b:skin> atau </style>

/* NAVIGATION MENU */
.top-menu {
font:normal normal 12px Arial, sans-serif;
margin:0 auto;
height:43px;
overflow:hidden;
padding: 0 28px;
background-color: #4B4C4D;
}
.top-menu1 {
font:normal normal 12px Arial, sans-serif;
margin:0 auto;
height:43px;
overflow:hidden;
padding: 11px 0px 0;
}
#beakingnews {
background: #4B4C4D;
float: left;
height: 30px;
line-height: 31px;
overflow: hidden;
margin-top: 5px;
width: 80%;
}
.social-icons{float:left;}
.social-icons{margin:9px 0 0 10px;text-align:center;}
.social-icons a{display:inline-block;position:relative;overflow:hidden;line-height:0px;margin:1px;}.social-icons a i{width:24px;height:24px;line-height:24px;font-size:13px;}.social-icons.icon-32 a i{width:32px;height:32px;line-height:32px;font-size:18px;}.social-icons.icon-12 a i{width:18px;height:18px;line-height:18px;font-size:9px;}.social-icons.icon-12 a i.icon-home{padding:0;height:18px;font-size:15px;font-weight:normal;}
.social-icons a i{color:#FFF!important;display:inline-block;text-align:center;overflow:hidden;border-radius:100%;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}.social-icons a i.icon-home{background:#4e5462;}.social-icons a i.fa-facebook{background:#507cbe;}.social-icons a i.fa-twitter{background:#65cdef;}.social-icons a i.social_icon-rss{background:#fbab5d;}.social-icons a i.fa-google{background:#ee8180;}.social-icons a i.fa fa-pinterest{background:#f16361;}.social-icons a i.social_icon-myspace{background:#2e9fdf;}.social-icons a i.fa fa-dribbble{background:#d97aa5;}.social-icons a i.social_icon-linkedin{background:#91c9db;}.social-icons a i.fa fa-evernote{background:#8ac979;}.social-icons a i.social_icon-flickr{background:#db97be;}.social-icons a i.fa fa-youtube{background:#f16361;}.social-icons a i.social_icon-skype{background:#38c3f2;}.social-icons a i.fa fa-digg{background:#4ea1d9;}.social-icons a i.social_icon-reddit{background:#7fc1d7;}.social-icons a i.fa fa-delicious{background:#5a91de;}.social-icons a i.fa-stumbleupon{background:#e36644;}.social-icons a i.fa fa-tumblr{background:#4e7da2;}.social-icons a i.fa-vimeo-square{background:#87d3e0;}.social-icons a i.fa fa-blogger{background:#fbc95d;}.social-icons a i.fa fa-wordpress{background:#dddcdc;}.social-icons a i.fa fa-yelp{background:#c64947;}.social-icons a i.social_icon-lastfm{background:#c35252;}.social-icons a i.social_icon-grooveshark{background:#2ab8ed;}.social-icons a i.social_icon-xing{background:#639d71;}.social-icons a i.social_icon-posterous{background:#e7c16f;}.social-icons a i.social_icon-deviantart{background:#95a595;}.social-icons a i.social_icon-openid{background:#fb915d;}.social-icons a i.social_icon-behance{background:#18ace3;}.social-icons a i.social_icon-instagram{background:#c8c5b3;}.social-icons a i.social_icon-paypal{background:#4ea1d9;}.social-icons a i.social_icon-spotify{background:#6fcb57;}.social-icons a i.social_icon-viadeo{background:#9ec7d5;}.social-icons a i.social_icon-googleplay{background:#ce5452;}.social-icons a i.social_icon-forrst{background:#64bb8d;}.social-icons a i.social_icon-vk{background:#568bb0;}.social-icons a i.social_icon-appstore{background:#cdcccb;}.social-icons a i.social_icon-amazon{background:#f0b22e;}.social-icons a i.fa-soundcloud{background:#f35839;}.social-icons a i:hover{background:#434347;}
a.tooldown{display:inline-block;}.tipsy{font-size:12px;position:absolute;padding:5px;z-index:100000;}.tipsy-inner{background-color:#232323;color:#FFF;max-width:200px;padding:0px 8px;text-align:center;border-radius:3px;}.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:5px dashed #232323;}.tipsy-arrow-n{border-bottom-color:#232323;}.tipsy-arrow-s{border-top-color:#232323;}.tipsy-arrow-e{border-left-color:#232323;}.tipsy-arrow-w{border-right-color:#232323;}.tipsy-n .tipsy-arrow{top:0px;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-nw .tipsy-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-ne .tipsy-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-sw .tipsy-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-se .tipsy-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-e .tipsy-arrow{right:0;top:50%;margin-top:-5px;border-left-style:solid;border-right:none;border-top-color:transparent;border-bottom-color:transparent;}.tipsy-w .tipsy-arrow{left:0;top:50%;margin-top:-5px;border-right-style:solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;cursor:help;}
div.conty {
width: 960px;
margin: 0 auto;
}
#beakingnews {
background: #4B4C4D;
float: left;
height: 30px;
line-height: 31px;
overflow: hidden;
margin-top: 5px;
width: 80%;
}
#recentpostbreaking li a {
color:#fff;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 32px;
}
#recentpostbreaking li a:hover {
color:$(maincolor);
}
#beakingnews .tulisbreaking {
background:#f8674a;
}
#beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#beakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
border-bottom: 1px solid #f8674a;
border-radius: 3px;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
}
#recentpostbreaking {
float: left;
margin-left: 98px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#social-counter-widget{padding:0px!important;margin-bottom:20px!important;overflow:hidden;clear:both;display:block;position:relative;}#social-counter-widget ul.social-counter-widget{}#social-counter-widget ul.social-counter-widget,#social-counter-widget ul.social-counter-widget li{list-style:none!important;margin:0!important;padding:0!important;}#social-counter-widget ul.social-counter-widget li{display:inline-block;}#social-counter-widget ul.social-counter-widget li a{display:block;overflow:hidden;color:#282a2b;}#social-counter-widget ul.social-counter-widget li a i{margin:0 0 10px 0;}#social-counter-widget ul.social-counter-widget li a span{font-size:16px!important;font-family:inherit;line-height:22px!important;font-weight:normal!important;}#social-counter-widget ul.social-counter-widget li a small{color:#c1c1c1;}#social-counter-widget.style1-SC{background-color:#f9f9f9;border:1px #f0f0f0 solid;border-radius:3px;padding:10px 0px!important;}#social-counter-widget.style1-SC li{display:block;width:33%;overflow:hidden;float:left;}#social-counter-widget.style1-SC li a{display:inline-block;text-align:center;padding:10px 0px;overflow:hidden;}#social-counter-widget.style1-SC li a i,#social-counter-widget.style1-SC li a span,#social-counter-widget.style1-SC li a small{clear:both;display:block;}#social-counter-widget.style1-SC ul.social-counter-widget li a i{color:#FFF!important;display:inline-block!important;width:50px!important;height:50px!important;line-height:50px!important;vertical-align:middle;text-align:center;font-size:28px;overflow:hidden;border-radius:100px;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-rss a i.icon.social_icon-rss{background:#faa33d;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-twitter a i.icon.social_icon-twitter{background:#40bff5;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-facebook a i.icon.social_icon-facebook{background:#5d82d1;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-gplus a i.icon.social_icon-google{background:#eb5e4c;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-youtube a i.icon.social_icon-youtube{background:#ef4e41;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-vimo a i.icon.social_icon-vimeo{background:#35c6ea;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-soundcloud a i.icon.social_icon-soundcloud{background:#ff7e30;}#social-counter-widget.style1-SC ul.social-counter-widget li a:hover i.icon{background:#232323!important;}#social-counter-widget.style2-SC{padding:0;}#social-counter-widget.style2-SC ul.social-counter-widget li{display:block;width:100%;overflow:hidden;margin:0 0 3px 0!important;border-radius:2px;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}#social-counter-widget.style2-SC li a{display:block;text-align:left;padding:5px;overflow:hidden;}#social-counter-widget.style2-SC ul.social-counter-widget li a i.icon,#social-counter-widget.style2-SC ul.social-counter-widget li a span,#social-counter-widget.style2-SC ul.social-counter-widget li a small{float:left;line-height:35px!important;}#social-counter-widget.style2-SC ul.social-counter-widget li a i.icon{font-size:18px;color:#FFF;margin:0 0 0 0!important;display:inline-block!important;width:35px!important;height:35px!important;text-align:center;font-size:17px;line-height:35px!important;font-weight:normal!important;overflow:hidden;border-radius:100px;}#social-counter-widget.style2-SC ul.social-counter-widget li a span{color:#FFF;padding:0 15px}#social-counter-widget.style2-SC ul.social-counter-widget li a small{color:#FFF;color:rgba(255,255,255,0.7);}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-rss{background:#faa33d;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-twitter{background:#40bff5;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-facebook{background:#5d82d1;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-gplus{background:#eb5e4c;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-youtube{background:#ef4e41;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-vimo{background:#35c6ea;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-soundcloud{background:#ff7e30;}#social-counter-widget.style2-SC ul.social-counter-widget li:hover{background:#232323!important;}#social-counter-widget.style2-SC ul.social-counter-widget li:hover a small{color:#FFF!important;}#social-counter-widget.style3-SC{background-color:#FFF;border-radius:3px;padding:10px 0px!important;}#social-counter-widget.style3-SC ul.social-counter-widget li a span{font-size:13px!important;}#social-counter-widget.style3-SC li{display:block;width:24%;overflow:hidden;float:left;}#social-counter-widget.style3-SC li a{display:inline-block;text-align:center;padding:10px 0px;}#social-counter-widget.style3-SC li a i,#social-counter-widget.style3-SC li a span,#social-counter-widget.style3-SC li a small{clear:both;display:block;}#social-counter-widget.style3-SC ul.social-counter-widget li a i{color:#FFF!important;display:inline-block!important;width:35px!important;height:35px!important;text-align:center;font-size:17px;line-height:35px!important;overflow:hidden;border-radius:100px;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-rss a i.icon.social_icon-rss{background:#faa33d;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-twitter a i.icon.social_icon-twitter{background:#40bff5;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-facebook a i.icon.social_icon-facebook{background:#5d82d1;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-gplus a i.icon.social_icon-google{background:#eb5e4c;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-youtube a i.icon.social_icon-youtube{background:#ef4e41;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-vimo a i.icon.social_icon-vimeo{background:#35c6ea;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-soundcloud a i.icon.social_icon-soundcloud{background:#ff7e30;}#social-counter-widget.style3-SC ul.social-counter-widget li a:hover i.icon{background:#232323!important;}#social-counter-widget.style4-SC{padding:0;}#social-counter-widget.style4-SC ul.social-counter-widget li{display:block;clear:both;overflow:hidden;margin:1px 1px 5px 1px!important;border-radius:2px;background-color:#FFF;box-shadow:0 0 1px rgba(0,0,0,0.25);border:0 none!important;}#social-counter-widget.style4-SC ul.social-counter-widget li:last-child{}#social-counter-widget.style4-SC li a{display:block;text-align:left;padding:5px;overflow:hidden;color:#999!important;}#social-counter-widget.style4-SC ul.social-counter-widget li a span{font-size:14px!important;font-family:sans-serif;}#social-counter-widget.style4-SC ul.social-counter-widget li a i.icon,#social-counter-widget.style4-SC ul.social-counter-widget li a span,#social-counter-widget.style4-SC ul.social-counter-widget li a small{float:left;line-height:30px!important;}#social-counter-widget.style4-SC ul.social-counter-widget li a i.icon{color:#FFF;margin:0px!important;display:inline-block!important;width:30px!important;height:30px!important;text-align:center;font-size:17px;line-height:30px!important;overflow:hidden;border-radius:2px;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}#social-counter-widget.style4-SC ul.social-counter-widget li a span{padding:0 4px 0 15px}.rtl #social-counter-widget.style4-SC ul.social-counter-widget li a span{padding:0 15px 0 4px}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-rss a i.icon.social_icon-rss{background:#faa33d;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-twitter a i.icon.social_icon-twitter{background:#40bff5;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-facebook a i.icon.social_icon-facebook{background:#5d82d1;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-gplus a i.icon.social_icon-google{background:#eb5e4c;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-youtube a i.icon.social_icon-youtube{background:#ef4e41;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-vimo a i.icon.social_icon-vimeo{background:#35c6ea;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-soundcloud a i.icon.social_icon-soundcloud{background:#ff7e30;}#social-counter-widget.style4-SC ul.social-counter-widget li a:hover i.icon{background:#999!important;}

4. Selanjutnya letakan arahan dibawah ini sempurna dibawah kode <div id='outer-wrapper'> atau sesuaikan menurut selera anda. arahan mampu saja berbeda.

<div id='top-nav'>
        <nav class='top-menu'>
          <div id='beakingnews'>
            <span class='tulisbreaking'>
              Feed News
            </span>
            <div id='recentpostbreaking'>
              Loading...
            </div>
          </div>
          <script type='text/javascript'>
            //<![CDATA[
            $(document).ready(function () {
              var url_blog = 'http://oktavialie.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>';
                    $('#recentpostbreaking').html(skeleton);
                    // arahan untuk efek pada breaking news
                    function tick(){
                      $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
                    }
                    setInterval(function(){ tick () }, 5000);
                  } else {
                    $('#recentpostbreaking').html('<span>No result!</span>');
                  }
                },
                error: function() {
                  $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
                }
              });
            });
            //]]>
          </script>
          <ul class='social-icons'>
            <a class='tooldown' href='#' target='_blank' title='Facebook'>
              <i class='fa fa-facebook'/>
            </a>
            <a class='tooldown' href='#' target='_blank' title='Twitter'>
              <i class='fa fa-twitter'/>
            </a>
            <a class='tooldown' href='#' target='_blank' title='Google+'>
              <i class='fa fa-google'/>
            </a>
            <a class='tooldown' href='#' target='_blank' title='Vimeo'>
              <i class='fa fa-vimeo-square'/>
            </a>
            <a class='tooldown' href='#' target='_blank' title='soundcloud'>
              <i class='fa fa-soundcloud'/>
            </a>
          </ul>
       
          <!-- social media button end -->
        </nav>
      </div>
      <div class='clear'/>

5. Silahkan ganti URL yang saya tandai merah dengan url blog teman dan klik save.

nah, hingga disini untuk tutorial Cara Membuat Widget Breaking News / Feed News di Blog , lebih dan kurangnya saya mohon maaf.