Make Breaking Headline News Blog
Updated on June 22, 2016
Make Breaking Headline News Blog - This is actually the same as recent post widgets or latest posts, but only on a breaking news headline widget is shaped like a horizontal navigation usually in pairs above or below the header navigation menu or can be above the footer of the blog.
Author: Namina Kiky
Make Breaking Headline News Blog
In breaking news headline this widget will bring up any recent articles on the left and on the right there is a social networking media widgets. To install the widget breaking news headlines in your blog is easy enough, you just need to add widgets and can set it to be put where the places you love by shifting part of the layout elements blog layout. To see what kind of put it in your blog.
How to Make Breaking Headline News Blog
1. Login to your blogger account.
2. Log into Layout blog and add the widget.
3. Copy the following code and then input into a widget HTML / Javascript.
<style type='text/css' scoped="scoped">Description: Replace http://www.iumari.com with the URL address of your blog. Change Post # replace with ID respectively.
#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/AVvXsEhti9XpROY8y4k6HP_QMusH3vUo7ij8p2BJaTtoalHKm0Tv8q9pPPpdBhRR1Va2sTQgSRE6QxPDDnysvMvgYa1fg90BGitBi8VGf2TjzJzqHFHHBLqb0yDsf-n9kDjGCunKVeJarScl8zKh/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/+ReskyFresanddy' 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/iumariblog' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.iumari.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>
4. After all has been replaced with the correct final step just click Save.
DEMO
To determine where the location of the breaking news widget can customize to your blog by moving the layout elements.