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 daerah yang Anda sukai dengan menggeser bab elemen tata letak layout blog. Untuk melihat ibarat 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 isyarat 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/AVvXsEgdpTI01nKivlwVrE0E5eoxDLKdFjk-YtACzehvah1vuyV0dIZnz-cMUTPGGaFx9a9LCQI7-2wQODZq2a1WzeCdMT8154erBgA37MCZowWrG3ylWY4m81x4jwN6Ex8i4PMpd8tMg2I-jPcv/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.
Untuk memilih dimana letak widget breaking news tersebut sanggup sesuaikan dengan blog Anda dengan menggeser elemen tata letak.