Latest News Widget For Blogger

People love news and breaking stories especially something that is related to their interest. Blogger is very limited with widgets especially interactive widgets. But we are here to learn to add a breaking news widget to our blogger hosted blogs. We will use JavaScript to recall the news posts and play show and hide with them. We will then add some styles and colors to make it look awesome on your blog.
The best thing about this Breaking News Widget is that whenever you create a news post, the title text of that post automatically start to show up on rotation and you don't need to manually update it. So, you just have to add the codes to your blogger template once and forget it.

How Does Breaking News Widget Work

Breaking News Widgets

For this widget to work on your blog, you have to add a specific label to all the posts that are to be included in this news category. All these posts will show up on the news bar with rotation. For example, you add the label 'news' to all the posts that you want to feature on this widget. All the latest posts with the label 'news' will show up on this widget with the help of that label rss feed. You can also add the feed of an external website like BBC or CNN to showcase the breaking news around the world. Just go any site and pick the site feed url or any category feed url. For example, if you want to feature only technology category news on your blog, then you should get the technology rss feed address and update the code with that address.

Codes To Add To Your Blog

Before making any changes to your blogger template, do remember to download it first. The Backup copy will help you if anything goes wrong while applying the widget.

Add below codes just before </head>

Code
 
<script src='http://www.google.com/jsapi'> 

</script> 

<script src='https://googledrive.com/host/0Bw5Ph-OwuTz6Wjh6amVDZE9GaGM'> 

</script> 

<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'/>  

Add these codes to the place where you want the widget to show up. This widget is best suited below your navigation menu.

Html
 
<div class='kickbloggernews'>

<div class='stpo'>

<script type='text/javascript'>

var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)

cssfeed.addFeed(&quot;How To Kick Blogger&quot;, &quot;

http://www.howtokickblogger.com/feeds/posts/default&quot;)

cssfeed.setentrycontainer(&quot;div&quot;)

cssfeed.filterfeed(10, &quot;date&quot;)

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

</div>

<div style='clear:both;'/>

</div>  

Add the below codes just before </b:skin>

CSS
 
.kickbloggernews {

    background: url("http://4.bp.blogspot.com/-0es4o_WOWDI/UiWJpKadRdI/AAAAAAAABG4/mZlEmWcUGfw/s1600/news.gif") no-repeat scroll 0 0 transparent;

    color: black !important;

    height: 50px;

    margin-left: 15px;

    width: 970px;

}

.stpo {

    float: left;

    margin-left: 30px;

    margin-top: 4px;

    overflow: hidden;

    padding: 8px 8px 11px 40px;

    position: relative;

    width: 780px;

}

/* Style by howtokickblogger.com */

#example1 {

width: 780px;

height: 14px;

border: 0px solid #aaa;

padding: 0px;

text-transform:none;

text-align:left;

background-color:transparent;

}

.titlefield {

    border-radius: 5px;

    padding: 5px 25px !important;

    background: none repeat scroll 0 0 #CEE1F0;

    color: black !important;

    font-family: josefin slab,trebuchet ms;

font-size: 15px;

letter-spacing: 0.5px;

}

That is all you have to do to show the awesome latest news widget on blogger. Change the text in red color with Site Name and yellow color text with the feed address. Change the number in skyblue color with the number of posts that are to be included in the widget. If you change that number to 5. Latest 5 posts from that label or category will keep rotating on this widget.

News Widget With Borders Effect

Also, if you like to add some border effect to this news widget. Add these codes just before </b:skin>

CSS
 
.titlefield {

border-top: 1px solid #4790C8;

border-bottom: 1px solid #4790C8;

border-left: 4pxsolid #4790C8;

border-right: 4pxsolid #4790C8;

}  

Enjoy showing some cool stuff on your blog. Connect with us for more awesome blogger widgets.

"2 comments"+ Add Yours

  1. this is very use full for me

    ReplyDelete
  2. Where is the demo? Great widget For news template

    regards,
    JelBee

    ReplyDelete