Yahoo! News

1.

Select:

Use the dropdowns to select category, layout, and number of headlines. The preview and code will update automatically.

Select Your Headlines

+ Add another category

2.

Preview:

This is what the headlines will look like once you add the code to your website. NOTE: All the formatting can be modified using CSS.

3.

Copy:

Copy this code into your website, blog or any place that accepts javascript.

We've included some CSS which you can modify however you like. If you just want the raw feed, simply delete the style block.

For more information on how to include news content on your website, please consult Yahoo! News Help.

Copy this code into your website, blog, Myspace, etc.

<style type="text/css">
#ynbadge { font:13px arial,helvetica,clean,sans-serif; *font-size:small; *font:x-small; }
#ynbadge h2 { margin-bottom:12px; width:198px; height:25px; background:url(http://web.archive.org/web/20090403164613im_/http://l.yimg.com/us.yimg.com/i/us/nws/common/yahoo-logo2.png) no-repeat; _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://l.yimg.com/us.yimg.com/i/us/nws/common/yahoo-logo2.png', sizingMethod='crop'); }
#ynbadge h2 a { position:relative; display:block; text-indent:-999em; overflow:hidden; width:198px; height:25px; }
#ynbadge h3 { background-color:#06214d; color:#fff; font:bold 77% Verdana, arial; padding:2px 5px; text-transform:uppercase; margin:0 0 10px 0; zoom:1; }
#ynbadge a:link, #ynbadge a:visited { color:#003499; text-decoration:none; }
#ynbadge ul { list-style:none; margin:0; padding:0; }
#ynbadge ul li { border-bottom:1px dashed #ccc;  margin:0 0 10px 0; padding:0 0 10px 0; zoom:1; }
#ynbadge ul li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
#ynbadge ul li img { float:left; margin:0 10px 0 0; border:none; }
#ynbadge ul li p { margin:0; padding:0; }
#ynbadge ul li h4 { margin:0 0 5px 0; }
#ynbadge ul li h4,
#ynbadge ul li h4 a { font:normal 121% Georgia; line-height:1em; }
#ynbadge .noimg li img { display:none; }
#ynbadge .noimg li h4,
#ynbadge .noimg li p { display:inline; }
#ynbadge .nosummaries li img,
#ynbadge .nosummaries li p { display:none; }
#ynbadge .nosummaries li h4 { margin:0px; }
#ynbadge .nosummaries li h4,
#ynbadge .nosummaries li h4 a { font:normal 100% arial; }
#ynbadge .ynews-search { font:normal 77% verdana; }
#ynbadge .ynews-search fieldset { border:none; margin:0; padding:0; }
#ynbadge .ynews-search legend { display:none; }
#ynbadge .ynews-search label { color:#666; font-weight:bold; vertical-align: middle; padding-right: 5px; display:none; }
#ynbadge .ynews-search input#p { width:111px; border-bottom:1px solid #ccc; padding:1px; margin:0px -2px 0 0; vertical-align:middle; font-size:103%; font-family: verdana; }
#ynbadge .ynews-search .ygbt { text-align:center; padding:0 0 1px; _padding:1px 0 2px; width:9em; vertical-align:middle; font:bold 100%/1.3 verdana; overflow:hidden; cursor:pointer;cursor:hand; background:#ce9200 url(http://web.archive.org/web/20090403164613im_/http://l.yimg.com/us.yimg.com/i/us/nws/common/news_header2.gif) -680px -8px repeat-x; border:1px solid #999b9a; *border:0; _margin: -1px; }
#ynbadge .ynews-search span { *display:inline-block; border:0; *border:1px solid #999b9a; *vertical-align: middle; }
/* safari hack for submit button */
::root #ynbadge .ynews-search input#p { margin-right:-1px; }
::root #ynbadge .ynews-search .ygbt { padding: 1px 0 2px; }
</style>

<script type="text/javascript" src="http://real-us.news.yahoo.com:80/badges/headlines/badge?t=topstories-3-3"></script>

*

Note:

This is what the code generated by the script will look like. This code isn't meant to be copied and pasted, but rather as a point of reference for modifying it's display.

Navigation:

Put news headlines on your website

Select:

Preview:

Copy:

Note:

Also On Yahoo!

Things To Do