Add New Breaking News Widget for Blogger

Tuesday, February 25, 2014

Hello to you again in the new topic, and exclusive of the blog newth3, today, we will add a new tool and easy, this tool you view the latest news blog in the form of a horizontal to suit the templates blogger. I hope you like it

how to Add New "Breaking News"

Written explanation
Step 1 : Adding to Template
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

</body>

3) Now Paste the Code Shown Below just Before it.

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { var url_blog = 'YOUR URL HERE', //replace with your Domain numpostx = 10; //Posts want to display $.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>'; $('#recentpostbreaking').html(skeleton); // kode untuk efek pada breaking news function tick(){ $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); } setInterval(function(){ tick () }, 5000); } else { $('#recentpostbreaking').html('<span>No result!</span>'); } }, error: function() { $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>'); } }); }); //]]> </script> </b:if></b:if>

4) Customize your setting.Find any word click F3 or Ctrl+F.

Replace YOUR URL HERE with your site url past here.

5) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

</head>

6) Now Paste the Code Shown Below just Before it.

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style type='text/css'> #beakingnews{width:980px;margin:0 auto;line-height:25px;height:25px;background:#F7F7F7;overflow:hidden;margin-top:5px;} #beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FCFCFC;background:#5F0000} #recentpostbreaking{float:left} #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0} </style> </b:if></b:if>

7) Now save your template.

Step 2 : Add Widget to your blog

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div id='beakingnews'><span class='tulisbreaking'>Breaking News</span> <div id='recentpostbreaking'>Loading...</div> </div> </b:if></b:if> <div style='clear: both;'/>

5) Save your Widget.Don't forget to add the widget on the Center place.

Share On Google+Add This To Delicious Tweet/ReTweet This Share on Facebook StumbleUpon This Digg This

abdelali tibicht

name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.

Follow Me On Twitter Or Facebook

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.