Membuat Headline Breaking News Di Blog

Membuat Headline Breaking News di Blog – sebetulnya ini sama menyerupai widget recent post atau latest post namun hanya saja pada widget headline breaking news ini berbentuk horisontal menyerupai navigasi yang biasanya di pasang diatas header atau di bawah navigasi sajian atau sanggup juga di atas footer blog.

Pada widget headline breaking news ini nantinya akan memunculkan setiap artikel terbaru pada sebelah kiri dan disebelah kanannya terdapat widget jejaring social media. Untuk memasang widget headline breaking news ke dalam blog caranya cukup mudah, Anda hanya perlu menambah widget dan sanggup mengaturnya untuk sanggup ditaruh dimana kawasan yang Anda sukai dengan menggeser bab elemen tata letak layout blog. Untuk melihat menyerupai apa memasangnya ke dalam blog.

Cara Membuat Headline Breaking News di Blog

1. Login pada akun blogger.

2. Masuk ke Tata Letak blog dan tambahkan widget.

3. Copy arahan berikut ini kemudian masukan kedalam widget HTML/Javascript.

<style type='text/css' scoped="scoped"> #news{background:#5cb3f5;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:#fff !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/AVvXsEiq8d6xPxxrE1Oavm_Uuy-WL5LNmxhpeFXrsdpfephWljonTeVtjOc0XmRATVpXvw-d6DorwYoO_yI7wAnh0XKWp7b4hDa4n6G6ZAbZdkfLjlMs0EkaH5si6ScDjAszY_L1kNE6eTTAyMhP/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:#fff;direction:ltr;display:block;height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all .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='#' rel='nofollow' target='_blank' title='facebook'> </a></li> <li class='gp'> <a href='https://plus.google.com/+ArlinadesignBlogspot' rel='nofollow' target='_blank' title='googleplus'> </a></li> <li class='tw'> <a href='#' rel='nofollow' target='_blank' title='twitter'> </a></li> <li class='rs'> <a href='http://feeds.feedburner.com/FEED-BLOG-ANDA' rel='nofollow' target='_blank' title='rss'> </a></li> </ul> </div> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { var url_blog = 'http://www.arlinadzgn.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 http://www.arlinadzgn.com dengan URL alamat blog Anda.

Ganti Tulisan # ganti dengan ID masing-masing.

4. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.

• DEMO

Untuk memilih dimana letak widget breaking news tersebut sanggup sesuaikan dengan blog Anda dengan menggeser elemen tata letak.

Share this post