Create "Breaking News" Widget for Blogger

• 

  When you visit a site with the theme of the news you often see some important information is placed on the site with the title as Breaking News and Headlines diem.va This is usually the first to make a move up or effects move down very attracted the attention of the doc.Va there is also a way to help increase site visits for all viet.Ban read my blog and want to be like that? Okie, Today Blogger4t will guide you step by step to the implementation of
  
  

  

  Steps

  
  Step 1 : Determine HTML.cai structure is very important because you will determine where it is placed in Blog ban.vi example on the top of the blog or on the title of each article 
  is Here Breaking News for example be placed on site for News 24  is below the header and above the Main content
  
  

  

  
  
  
  
  Step 2 : Determine when it is shown 
  for example you only want to display it in details article, show only on the homepage, or the market as it is not a detailed article. 
  , such as in the DEMO tintuc.tv on the news site allowing it to display only the posts are not detailed, the following code uses
  
  

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

  Step 3 : Use jQuery to create the effect, put this code before the </ body>
  
  

   <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 = 'http://www.tintuc.tv/', / / 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 
              tick function () { 
              $ ('# recentpostbreaking li: first'). slideUp (function () {$ (this). appendTo ($ ('# recentpostbreaking ul')). slideDown ();}); 
              } 
          setInterval (function () {tick ()}, 5000); 
          } else { 
              $ ('# recentpostbreaking.') html ('No result <span>! </ span>'); 
          } 
      }, 
      error: function () { 
              $ ('# recentpostbreaking.') html ('Error Loading Feed <strong>! </ strong>'); 
         } 
  }); 
  }) 
  / /]]> 
  </ script> 
    </ b: if> </ b: if>

  Step 4 : Decorate for Breaking News CSS.Them use the following CSS before the closing </ head>
  
  

   <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 0 0 5px; color: # FCFCFC; background: # 5F0000} 
  # recentpostbreaking {float: left} 
  # recentpostbreaking ul, # recentpostbreaking li {list-style: none; margin: 0, padding: 0} 
  </ style> 
    </ b: if> </ b: if>

  Step 5 : Change
  

   var url_blog = ' http://www.tintuc.tv / ', / /

  Link To Your Blog 
  Now, save Templates and wish to have your mung.Blog Breaking News 
   See Live Demo at tintuc.tv