Memasang Widget Headline Breaking News di Blogspot

Memasang Widget Headline Breaking News di Blogspot

Cara Memasang Widget Breaking News di Blog - Pernahkah sobat melihat cuplikan berita dibawah layar televisi sobat pada salah satu stasiun televisi? Kira-Kira seperti itulah Breaking News yang akan dipasang pada blog. Widget headline breaking news ini sebenarnya sama dengan widget recent post atau latest post namun widget ini berbentuk horizontal.

Widget headline breaking news ini nantinya akan menampilkan judul postingan terbaru pada blog sobat ditambah ikon media sosial dibagian kiri. Kembali lagi, jika sobat ingin memasang widget headline breaking news berikut caranya.

1. Login pada akun Blogger sobat.
2. Setelah masuk pada dashbor blog, masuk pada bagian Template > Edit HTML.
3. Kemudian cari kode </head> (Gunakan CTRL+F untuk mencari).
4. Setelah ketemu, copy kode script dibawah ini dan paste-kan tepat diatas kode </head> tadi.
   

   <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: 935px; }
   .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/AVvXsEg3KsckVj4FNBwjIUPL-SYmt2xXkH1o33_9RABO-hSeOoxyCAamNGeJNcDLyHtlWqrrRmgMfxcJ7QYddSapjXe4aobv4xWbKwtgTMRX_8AlGzPa73Y5WxiQeKhhVX5r-28h8woVhhSGbqu5/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/fadhil.barkah' rel='nofollow' target='_blank' title='facebook'>
   </a></li>
   <li class='gp'>
   <a href='https://plus.google.com/100090136752187527905' rel='nofollow' target='_blank' title='googleplus'>
   </a></li>
   <li class='tw'>
   <a href='http://twitter.com/barkah_id' rel='nofollow' target='_blank' title='twitter'>
   </a></li>
   <li class='rs'>
   <a href='http://feeds.feedburner.com/MediaRefrensi' rel='nofollow' target='_blank' title='rss'>
   </a></li>
   </ul>
   </div>
   
   <script type='text/javascript'>
   //<![CDATA[
   $(document).ready(function () {
   var url_blog = 'http://media-refrensi.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>

   Keterangan: Ganti tulisan yang berwarna Merah diatas dengan ID akun sosial media sobat. Tulisan yang berwarna Orange ganti dengan lebar blog sobat. Tulisan yang berwarna Biru ganti dengan URL blog sobat.
   
5. Kemudian Simpan Template sobat dan lihat hasilnya.
6. Selesai.

Sampai disini dulu yah artikelnya. Sampai jumpa lagi di artike yang berikutnya. Jangan lupa baca artikel menarik lainnya ya sob!.

Thanks to: Mas Andes

Share this post