Tuesday, 26 May 2015

How to Make Breaking Headline News in Blog

tips4tricx
Making Headlines Breaking News Blog - This is actually the same as widgets recent post or latest post, but it's just the breaking news headlines widget is shaped like a horizontal navigation usually in pairs above the header or below the navigation menu above or it could be the blog footer. In this breaking news headline widget will bring up any recent articles on the left and right side there is a media social networking widgets. To install the widget breaking news headlines in your blog is easy enough, you just need to add widgets and can be set to be put where the place that you like by shifting part of the layout elements of blog layout. To see what kind of put it in your blog, here are the steps for How to Make Breaking Headline News in Blog.

1. Login to blogger account. 

2. Layout Go to the blog and add widgets.
3. Copy the code below and then enter into the widget HTML / Javascript.
<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: 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:#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(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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/tipsandtricx' rel='nofollow' target='_blank' title='facebook'></a></li><li class='gp'><a href='https://plus.google.com/+AbidAziz1' rel='nofollow' target='_blank' title='googleplus'></a></li><li class='tw'><a href='http://twitter.com/TipsandTricx' rel='nofollow' target='_blank' title='twitter'></a></li><li class='rs'><a href='http://feeds.feedburner.com/tips4tricx' rel='nofollow' target='_blank' title='rss'></a></li></ul></div> <script type='text/javascript'>//<![CDATA[$(document).ready(function () {var url_blog = 'http://tips4tricx.blogspot.com/', // Replace With your Blog Urlnumpostx     = 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>
 
 
------------------------------------------------------------------------------------------------- 

Description:


Posts blue color change to the width of your blog. 

Replace http://tips4tricx.blogspot.com/ with the URL address of your blog. 

Replace the red writing with their IDs.4. 

Having all been replaced with the correct last step click on Save. 

To determine where the location of the breaking news widget can customize to your blog by shifting the layout elements.
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks