There are services, like Wibiya, that allow to add a toolbar in a few steps, but why don’t you create a really custom panel using your CSS and jQuery skills?
In this tutorial we’ll learn how to build a nice toolbar for our website using some CSS3 properties and basic jQuery techniques.

The Idea Behind

Our goal is to realize a fixed panel, on the bottom of the page, to improve interaction with our users.
Well, below you can see my idea in “visible status” (I’ve designed it using Photoshop). In this post we’ll use some basic techniques to realize the panel, after the reading only your fantasy could be a limit to enhance the toolbar for you purposes.

So a panel with social icons and their tooltip bubbles on the left side and a quick menu on the right. Some features we want for our bar:

• Hide/Show toolbar clicking on specific buttons
• Adaptive width during the resizing of the window
• Tooltip Bubble when the mouse is moved over an icon
• Quick Menu Panel on the right side
• Cross Browser Compatibility

Live Demo and Source Files

To view in action the final result click below on preview button. You can also download the source files.
The toolbar has been thought to be added to the News Aggregator that we built in a previous tutorial, “How To Realize A News Aggregator Using Simple Pie In An Adaptive Layout” (if you want to see only the toolbar in action, please click here).

The Basic Structure

We’ll update the HTML code of index.php and the CSS code of style.css of the News Aggregator.

We build a fixed panel (div with id toolbar) with two floating sides where we will add in a second step the list with the icons and their tip bubbles (left), a quick menu and the “hide button” (to hide the toolbar ).
We can also expect a “show button”, it is useful when the panel is hidden and we want to re-activate it. For this reason we add the div tag with id toolbarbut.

HTML and CSS code

Here the html basic structure.

<div id="toolbarbut">
  <!-- hide button -->
</div>

<div id="toolbar"> <!-- toolbar container -->

  <div class="leftside">
    <!-- all icons in floating left side -->
  </div>

  <div class="rightside"> <!-- all things in floating right side -->
    <!-- hide button -->
    <!-- quick menu list -->
  </div>

</div>

Update style.css using the following lines of code (take a look at the comments).

div#toolbar, div#toolbarbut {
  position: fixed; /* set fixed position for the bar */
  bottom: 0px;
  right: 0px;
  z-index: 9999; /* keep the bar on top  */
  height: 36px;
  background: url(images/bcktool.png);
  /* CSS3 */
  -moz-border-radius-topleft: 8px;
	-khtml-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-topright: 8px;
	-khtml-border-radius-topright: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4; /* inset creates a inner-shadow */
  -khtml-box-shadow: 0px 1px 10px #666;
  -webkit-box-shadow: 0px 1px 10px #666;
  /* CSS3 end */
	border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

div#toolbar {
  width: 85%;
  min-width: 700px; /* to limit the width when there is an excessive window resize */
  margin: 0px auto; /* centered toolbar */
  left: 0px;
}

div#toolbar a:hover {
  border: none; /* fix 'hover' (a:hover {border-bottom: 1px dotted #666;}) border in the News Aggregator */
}

div#toolbarbut { /* div for the 'hide status' */
  width: 60px;
  height: 15px;
  margin-right: 3%;
  display: none;
}

.leftside {
  float: left;
}

.rightside {
  float: right;
}

It’s important to note that we have just added a nice shadow effect and rounded borders exclusively using CSS code.

Show/Hide Buttons

Now we can add the code for the “show button”.

<div id="toolbarbut"> <!-- hide button -->
<span class="showbar"><a href="#">show bar</a></span>
</div>

Below the properties for the relative CSS class.

span.showbar a { /* show button */
  padding: 5px;
  font-size: 10px;
  color: #989898;
}

We complete the right side later, but now we can add the “hide button” within the div with id rightside, as shown.

<div class="rightside">
  <span class="downarr"> <!-- hide button -->
  <a href="#"></a>
  </span>

  <!-- other stuff in floating right side -->

</div>

Properties for the relative CSS class.

/*-- Right Side --*/

span.downarr { /* hide button */
  float: right;
  border-left: 1px solid #a4a4a4;
}

span.downarr a {
  display: block;
  width: 36px;
  height: 26px;
  padding: 25px 0 0 10px;
  background: url(images/downarrow.png) no-repeat 5px 7px;
}

Show/Hide Effect with jQuery

First of all we need to download jQuery (copy it in the right folder) and activate it in head tag of index.php.

<head>
<!-- ... -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</head>

We want to hide the panel clicking on “hide button”, when the toolbar isn’t visible there should be the “show button” that allows us to restore the panel.
We can use the following jQuery solution (add the code after the <body> tag).

<script type="text/javascript">

$(document).ready(function(){

  //hide toolbar and make visible the 'show' button
	$("span.downarr a").click(function() {
    $("#toolbar").slideToggle("fast");
    $("#toolbarbut").fadeIn("slow");
  });

  //show toolbar and hide the 'show' button
  $("span.showbar a").click(function() {
    $("#toolbar").slideToggle("fast");
    $("#toolbarbut").fadeOut();
  });

});

</script>

Now we can hide and show the bar whenever we want.

Left Side

In this space we add a list of Social Network Icons (we use “Set of social icons” by Tydlinka), with a particularity: we want to show tooltip when the mouse is moved over a list element.

HTML and CSS code for the Left Side

Update the index with the following XHTML code. We add a general unordered list (with id social) to create the sequence of the icons and a div tag (with class tip) nested within the li tag of the general list to realize the tooltip bubble.

<div class="leftside"> <!-- all things in floating left side -->
  <ul id="social">
    <li><a class="rss" href="#"></a><!-- icon -->
      <div id="tiprss" class="tip"><!-- tooltip -->
        <ul>
          <li><a href="#">580 Readers</a></li>
          <li><a href="#"><small>[Subscribe]</small></a></li>
        </ul>
      </div>
    </li>
    <li><a class="facebook" href="#"></a>
      <div id="tipfacebook" class="tip">
        <ul>
          <li><a href="#">Share Page</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>
      </div>
    </li>
    <li><a class="twitter" href="#"></a>
      <div id="tiptwitter" class="tip">
        <ul>
          <li><a href="#">ReTweet</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>
      </div>
    </li>
    <li><a class="delicious" href="#"></a>
      <div id="tipdelicious" class="tip">
        <ul>
          <li><a href="#">Bookmark</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>
      </div>
    </li>
    <li><a class="digg" href="#"></a>
      <div id="tipdigg" class="tip">
        <ul>
          <li><a href="#">Digg</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>
      </div>
    </li>
    <li><a class="stumble" href="#"></a>
      <div id="tipstumble" class="tip">
        <ul>
          <li><a href="#">Stumble</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>
      </div>
    </li>
  </ul>
  </div>

And now the CSS code. We use position: absolute; to set-up a custom position for the tip bubble.

/*-- Left Side --*/

ul#social li {
  display: inline;
}

a.rss {
  display: inline-block;
  width: 104px;
  height: 35px;
  margin-left: 5px;
  background: url(images/rss.png) no-repeat;
}

a.facebook, a.twitter, a.digg, a.delicious, a.stumble {
  display: inline-block;
  width: 40px;
  height: 35px;
  margin-top: 1px;
}

a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a.delicious:hover, a.stumble:hover {
  background-position: 1px 1px; /* simple css hover effect */
}

a.facebook {
  background: url(images/facebook.png) no-repeat;
}

a.twitter {
  background: url(images/twitter.png) no-repeat;
}

a.delicious {
  background: url(images/delicious.png) no-repeat;
}

a.digg {
  background: url(images/digg.png) no-repeat;
}

a.stumble {
  background: url(images/stumble.png) no-repeat;
}

.tip {
  position: absolute; /* important */
  top: -75px;
  width: 250px;
  height: 78px;
  background: url(images/tip.png) no-repeat;
  float: left;
  display: none;
}

/* custom distances for the icons */
#tipfacebook {
  left: 75px;
}

#tiptwitter {
  left: 120px;
}

#tipdelicious {
  left: 165px;
}

#tipdigg {
  left: 210px;
}

#tipstumble {
  left: 255px;
}

.tip ul {
  padding: 22px 0 0 25px;
}

.tip ul li {
  display: inline;
  padding-left: 3px;
}

.tip ul li a {
  font-size: 18px;
  color: #989898;
}       

.tip ul li a:hover {
  color: #666;
}

.tip ul li small {
  font-size: 10px;
}

Use jQuery to Set-up the Hover Effect for Tooltip Bubbles

It’s time to add a nice effect for our bubbles. As usual, with some lines of code, jQuery allows us to create a nice menu for sharing our pages on the Social Networking and Bookmarking websites.

//show tooltip when the mouse is moved over a list element
  $("ul#social li").hover(function() {
		$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
    $(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
        $(this).find("div").hide();
    });
  });

Right Side

Now near the “hide button” we add a useful quick menu.

HTML and CSS code for the Right Side

Here the complete code. We use a span for the menu title and a new div (with id quickmenu) for the new panel.

<div class="rightside"> <!-- all things in floating right side -->
  <span class="downarr"> <!-- hide button -->
  <a href="#"></a>
  </span>
  <span class="menu_title">
    <a class="menutit" href="#">quick menu</a> <!-- quick menu title -->
  </span>
  <div class="quickmenu">
    <ul> <!-- quick menu list -->
      <li><a href="#">Premium Member</a></li>
      <li><a href="#">Become Author</a></li>
      <li><a href="#">Submit News</a></li>
      <li><a href="#">Send Feedback</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Privacy Policy</a></li>
    </ul>
  </div>
  </div>

And now the style!

/*-- Right Side --*/

span.downarr { /* hide button */
  float: right;
  border-left: 1px solid #a4a4a4;
}

span.downarr a {
  display: block;
  width: 36px;
  height: 26px;
  padding: 25px 0 0 10px;
  background: url(images/downarrow.png) no-repeat 5px 7px;
}

span.menu_title {
  background: #e4e4e4;
  border-left: 1px solid #a4a4a4;
  padding: 10px;
}

span.menu_title a {
  font-size: 16px;
  line-height: 34px;
  color: #9a9a9a;
}

.quickmenu {
  position: absolute; /* important */
  top: -251px;
  right: 46px;
  width: 260px;
  height: 250px;
  background: #e4e4e4;
	border-top: 1px solid #a4a4a4;
  border-left: 1px solid #a4a4a4;
  border-right: 1px solid #a4a4a4;
  /* CSS3 */
  -moz-box-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
  -khtml-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
  -webkit-box-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
  /* CSS3 end */
  display: none; /* important */
}

.quickmenu ul {
  padding-top: 20px;
}

.quickmenu ul li {
  border-bottom: 1px solid #989898;
  padding: 5px 10px;
  margin: 0 15px 0 15px;
}

.quickmenu ul li a {
  font-size: 18px;
  color: #989898;
  display: block;
}

.quickmenu ul li a:hover {
  color: #666;
}

Show/Hide QuickMenu Panel on Click Event

Below you can see the jQuery code used to make visible or hidden the menu panel clicking on menu title (tag a with class menutit). We also add a little fix to avoid the jump to link anchor (#).

//show quick menu on click
	$("span.menu_title a").click(function() {
		if($(".quickmenu").is(':hidden')){ //if quick menu isn't visible
			$(".quickmenu").fadeIn("fast"); //show menu on click
		}
		else if ($(".quickmenu").is(':visible')) { //if quick menu is visible
      $(".quickmenu").fadeOut("fast"); //hide menu on click
    }
	});

	//hide menu on casual click on the page
	$(document).click(function() {
			$(".quickmenu").fadeOut("fast");
	});
	$('.quickmenu').click(function(event) {
		event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements
	});

	//don't jump to #id link anchor
  $(".facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a").click(function() {
   return false;
	});

That’s all friend! Click here to visualize the complete code.

Conclusions

I think this kind of solution is useful to enhance interaction with your users, it can simplify the sharing of the contents and it could be really useful to improve your presence on the Social Networking websites. Think also at the possibility of providing quick-links for your readers to increase the page views .

It’s a good idea to validate the toolbar code and to test the browser compatibility.

W3C Validation

Response: “This document was successfully checked as XHTML 1.0 Strict!”

Browser Compatibility

Some screenshots from different browsers (Windows 7 OS).

A little note: the images for this tutorial are in images folder in the archive with the source files, where you can also find a complete layered psd file of the toolbar. Download it!

Don’t forget, you are free to suggest additional resources in the comments to this post.

Plugins and Scripts

jQuery Tutorials

Other great Resources on the Web

The following lists of jQuery plugins will help you to improve the usability of your website.

14 jQuery Plugins for Working with Images

15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials

The perfect reader seeks for great and unique contents but the research often is difficult.
There are some browser applications that simplify the readers work like the News Aggregators. They daily collect (and categorize) in one-page the most original resources of the web, certainly a useful service for “news consumer”.

I find the aggregators quite serviceable (here you can find some samples) because they select only the best posts for each category of interest.

In this post I want to explain how to create a single page news aggregator using an RSS stream through the php class Simple Pie.

Our Goal Is…

The main aim is to realize a nice web page where to show the best tech news of the day. We can make it using the RSS stream of significant websites like technewsworld.com or goodtutorials.com and Social Bookmarking like Delicious.
We’ll create a simple layout with an adaptive width for the single post container and then we’ll implement the “RSS Reader” for our news.

Live Demo and Source Files

To evaluate the final result click below on preview button. You can also download the source files to try on your local server the aggregator.

Sketch and Structure

Below you can see a simple layout scheme. We want to realize an adaptive layout with side margin of 100 px.

Step 0 – Wireframe

The following image introduce the specific layout features.

Simple Header For Our Layout

In previous posts like Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop or How to Create a Large Header with a Simple Western Scene we have learn some web graphic tricks to design a nice web elements.
Now we need a simple header background and a logo.

Step 1 – Header Design In Photoshop

Open a new document (width 1200 px, height 200 px). Draw a rectangle and apply the following style to the layer: Drop Shadow (Multiply, Opacity 20%, Angle 90°, Distance 5px, Size 5px); Gradient Overlay (from #ffffff to #3f4247 with of this color opacity 0%, Linear, General Opacity 10%, Angle 90°); Pattern Overlay (use a carbon pattern and set a right opacity); Stroke (Size 1px, Opacity 100%, Color #e4e4e4).

Using Gradient Tool you can also add a soft light.

Add a text using Verdana (color #ffffff) and set the layer style. Apply Drop Shadow (Multiply, Opacity 100%, Distance 1px, Size 5px); Bevel and Emboss (Depth 83%, Size 1px, Soften 0%, Angle 90°/30°), Gradient Overlay (black-white-black with an opacity of 42%).
Add also a slogan text using Verdana with color #8c8a8a as shown.

From PSD to XHTML/CSS Layout

Now is time of coding. We want to relize a “fluid” layout that is adaptive when the user resize the browser window.

Step 2 – Files, Folders and Images

In your local server (I use WampServer) create a new folder “newsaggregator” where to generate “index.php”, “style.css” and “images” folder.
From photoshop document save the following graphics to build the header: a repeatable image for background, the logo (png holding transparency), light for background (png holding transparency). If you have doubts on this step read DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial or WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial to learn more about psd-to-html conversion.

Below you can see the graphics from psd document we use to complete the layout.

Step 3 – Basic Structure and Header

First of all we prepare correctly the document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tech News | A free Aggregator Template | made in PV.M Garage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header">
<!--here header content-->
</div>

<div id="down_head">
<!--here down-header content-->
</div>

<div id="news_container">
<!--here single post container-->
</div>

<div id="footer">
<!--here footer content-->
</div>

</body>
</html>

Add the header content.

<div id="header">
  <h1><a href="#">TechNews</a></h1>
  <div class="menu"> <!--nav-menu-->
  <ul>
    <li><a href="#">about</a></li>
    <li><a href="#">submit feed</a></li>
    <li><a href="#">help us</a></li>
    <li><a href="#">contact</a></li>
  </ul>
  <span class="adv"><a href="#">Advertise here, check our prices!</a></span> <!--adv box without img-->
</div>
</div>

Now open the “style.css” in your text editor and write the css rules.

/*Yahoo! CSS Reset optimized for our purpose*/
body,div,ul,ol,li,h1,h2,h3,p{
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}

h1,h2,h3 {
	font-size:100%;
	font-weight:normal;
}
/*End Yahoo! CSS Reset*/

body {
	margin: 0 150px;
	padding: 0;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #e6e6e6 url(images/back.jpg) repeat-x top left;
	color: #8c8a8a;
}

a {
  text-decoration: none;
  color: #666;
}

a:hover {
  border-bottom: 1px dotted #666;
  color: #666;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

#header {
  background: url(images/backhead.png) no-repeat center top;
  min-width: 700px; /*use min-width to avoid an incorrect behavior of two div elements when windows is very strait*/
  height: 125px;
}

#header h1 {
  text-indent: -9999px;
  float: left;
}

#header h1 a {
  display: block;
  width: 208px;
  height: 58px;
  margin-top: 32px;
  background: url(images/logo.png) no-repeat left top;
}

#header h1 a:hover{
  border: none;
}

.menu ul li{
  display: inline;
  float: right;
}

.menu ul li a {
  display: inline-block;
  text-align: center;
  color: #cacaca;
  border-right: 1px solid #8c8a8a;
  border-left: 1px solid #8c8a8a;
  border-bottom: 1px solid #8c8a8a;
  margin-left: 15px;
  margin-top: -10px;
  padding-top: 15px;
  width: 100px;
  height: 25px;
  background: url(images/menback.png) left top;
  -moz-border-radius: 10px;
}

.menu ul li a:hover {
  color: #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-left: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

span.adv {
  width: 468px;
  float: right;
  margin-top: 20px;
}

span.adv a {
  background: #dfdfdf;
  border: 2px solid #8c8a8a;
  display: block;
  text-align: center;
  padding: 22px;
  color: #8c8a8a;
  font-weight: bold;
}

span.adv a:hover {
  background: #e6e6e6;
}

Step 4 – Coding Down Header

The markup for this section should expect three columns. Later we’ll write a specific script using jQuery to make adaptive the width of each element.

<div id="down_head" class="clearfix"><!--add a clearingfix class to solve floating bug-->
<div class="head_info">
      <h1>Our Goal</h1>
      <p>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
</div>
<div class="head_info border_info">
      <h1>RSS Feed</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="head_info">
      <h1>You are member</h1>
      <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>

Below you can see the css rules for this section.

#down_head {
  min-width: 700px;
  clear: both;
  margin: 20px auto;
}

#down_head h1 {
  font-size: 22px;
  font-weight: bold;
  padding: 10px 20px;
}

#down_head p {
  padding: 10px 20px;
}

.border_info {
  border-left: 1px dashed #ccc;
  border-right: 1px dashed #ccc;
}

.head_info {
  overflow: hidden;
  float: left;
  text-align: justify;
}

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Step 5 – Coding Post Container Section

Now we can code the “core” of the structure.

<div id="news_container" class="clearfix">

<!--here the Simple Pie loop start-->

<div class="post_cont">
      <div class="content">
      <h2>30 Luglio | 11:30am</h2>
      <h2><img src="<!--favicon url-->" alt="favicon" /><a href="<!--permalink news-->">Article Title</a></h2>
      <span class="visit_link"><a href="<!--permalink news-->">direct link to article</a></span>
      </div>
</div>

<!--end of loop-->

</div>

This is the update for “style.css”.

#news_container {
	min-width: 700px;
	border-top: 3px dashed #666;
	border-bottom: 3px dashed #666;
	padding-bottom: 10px;
}

.post_cont {
  width: 250px;
  overflow: hidden;
  float: left;
  margin-top: 10px;
}

.content {
  height: 200px;
  margin: 0 5px;
	padding: 5%;
	background: #fff;
	border: 1px solid #cacaca;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.content h2 {
	margin-bottom: 10px;
}

.content h2 a {
	font-size: 22px;
	font-size: 18px;
	color: #333;
}

.content h2 a:hover {
	color: #333;
	border-bottom: 1px dotted #333;
}

.content img {
  float: left;
	margin: 2px 4px 2px 0;
	width: 16px;
	height: 16px;
}

.content p {
  font-size: 11px;
  color: #666;
}

span.visit_link a {
  margin-top: 10px;
  padding: 10px;
  display: block;
  background: #dfdfdf;
  color: #8c8a8a;
  -moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
}

span.visit_link a:hover {
  background: #e6e6e6;
  border: none;
}

Step 6 – Coding Footer

Below the simple footer code.

<div id="footer">
  <p><strong>tech News</strong> is a <a href="#">PV.M Garage Product</a>. It's released under Creative Common License also for commercial use.</p>
</div>

The CSS rules.

#footer {
  width: 700px;
  margin: 15px auto;
}

#footer p {
  text-align: center;
}

Step 7 – Adding jQuery

Now we add a simple script to make adaptive the width of the down-head elements and of the post container.
Download the last version of jQuery and load it in your “newsaggregator” folder, then between the tag head insert the following string to activate the framework.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Now after the tag body add the script.

<script type="text/javascript">

$(document).ready(function(){

	function adPostWidth() {

		var ovWid = $('#header').width(); /*We use the header width that has a min-width of 700px in the style*/
		var postN = Math.floor(ovWid / 250);
		var widFix = Math.floor(ovWid / postN);

		$(".post_cont").css({ 'width' : widFix});

	}

  function WidthHead() {

		var ovWid = $('#header').width();
		var widFixHead = Math.floor(ovWid / 3);

		$(".head_info").css({ 'width' : widFixHead - 2});

	}

	adPostWidth();
  WidthHead();	

	$(window).resize(function () {
		adPostWidth();
    WidthHead();
	}); 

});

</script>

If you want to learn more about this technique read the useful Soh Tanaka tutorial Smart Columns w/ CSS & jQuery whence I learned this trick.

Add Simple Pie

We use Simple Pie to load great news on our page. First of all download the php class. I’ve used the 1.1.3 version, downloadable from here, because in 1.2 there is bug for set_feed_url when we want to load an array.

Step 8 – Activate The RSS Feed Parsing Class

Copy in your folder the file “simplepie.inc” and create a new folder “cache” for caching system of Simple Pie.
Now in top of “index.php” add the following php code.

<?php
    //get the simplepie library
    require_once('simplepie.inc');
    //grab the feeds
    $feed = new SimplePie();
    //our list of RSS
$feed->set_feed_url(array(
    'http://feeds.digg.com/digg/popular.rss',
    'http://feeds.delicious.com/v2/rss/',
    'http://feeds.feedburner.com/cssglobe/',
    'http://news.google.com/news?ned=us&hl=en&output=rss',
    'http://feeds.dzone.com/dzone/frontpage',
    'http://www.good-tutorials.com/tutorials/photoshop.rss',
    'http://www.graphic-design-links.com/rss',
    'http://feeds2.feedburner.com/BestPhotoshopTutorials',
    'http://www.technewsworld.com/perl/syndication/rssfull.pl'
    ));
    //enable caching
    $feed->enable_cache(true);
    //complete path for caching system
    $feed->set_cache_location('cache');
    //set the amount of seconds you want to cache the feed
    $feed->set_cache_duration(1500);
    //init the process
    $feed->init();
    //let simplepie handle the content type (atom, RSS...)
    $feed->handle_content_type();
?>

Step 9 – The Loop

Update the code of post container implementing the Simple Pie Loop. I used this php class in a previous tutorial, so if you want to know more about the use of this library read How to Realize a Daily Activities Widget in WordPress Sidebar using SimplePie.

<div id="news_container" class="clearfix">

<?php foreach ($feed->get_items(0, 100) as $item): ?>

<div class="post_cont">
      <div class="content">
      <h2><?php echo $item->get_date('j M Y'); ?> | <?php echo $item->get_date('g:i a'); ?></h2>
      <h2><img src="<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>" alt="favicon" /><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h2>
      <span class="visit_link"><a href="<?php echo $item->get_permalink(); ?>">direct link to article</a></span>
      </div>
</div>

<?php endforeach; ?>

</div>

Conclusion

Well brother. We have our News Aggregator, re-check the final result and enjoy it! There are many uses for this kind of web-project so free your imagination…

If you want to learn the basic techniques to make a PSD template, you can read Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop.

For our purpose we’ll use SportNewsPvm template, the reasons for this choice are explained below.

Why SportNewsPvm template can become a WP theme

We’re going to take a look at the relevant elements you need when you develope a template that will be used for a WordPress theme. In this case we have a preset target: a sport magazine with a weekly updates.

The SportNewsPvm layout was thought to accomplish this goal. A soft grunge magazine template with a large header and featured news box.
As you can see the structure is really valid for our purpose, in fact the basic elements are: top-menu, header, featured news box, posts container, sidebar and footer.
We can also divide the structure in four macro-areas that are top, left-container, right-container and bottom. This partition is useful for a visual representation of content layout that help us during all the steps of our work.

In this way, with this kind of structure, we are trying to consider all the needful containers for the main components of a WordPress theme. Basically, a WordPress theme is composed by the header, the post loop, the sidebar and the footer. Now it’s clear that our template have all spaces to host them.

Other important elements, in the theme development, are single post page, comments structure, category template, page template and archive. Right now, however, we just want to understand how to prepare the basic (x)html/css layout for the home page and these last elements listed will be considered at a later time.

Final Result, Css Template

Here you can see a preview image and a live demo. You can also download the zip archive with the complete CSS template.

Coding SportNewsPvm

A little summary.
In top of the structure we insert the top-menu and the header with the logo.
The left-container expects the featured news box and the posts container.
The right-container is useful to put in sponsors and other information like blogroll or recent posts list.
In the bottom there is a simple footer with credits.

Now is time for the code. This section of the post will show the essential steps to code the psd template using the techniques explained in WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial and DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial.

In the folder “sportnews” we put in “images” and “js” folders and the necessary files: “index.html” and “style.css”.

Step 1 – Main Structure

For the general background we use a repeatable image.

The markup for the main structure (edit “index.html”).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sport News Design | A free CSS Template | made in PV.M Garage</title>
<link href="style.css" rel="stylesheet" type="text/css" /><!-- stylesheet -->
</head>
<body>

<div id="top"><!-- top menu -->
  <div class="top_left">
    <!-- categories menu -->
  </div>

  <div class="top_right">
    <!-- pages menu -->
  </div>
</div>

<div id="header">
<!-- header -->
</div>

<div id="container">

  <div id="left_cont">
    <!-- left container -->
  </div>

  <div id="sidebar">
    <!-- right container -->
  </div>

</div>

</div>

<div id="footer">
<!-- footer container -->
</div>

</body>
</html>

To initialize Cascading Style Sheet (edit “style.css”) we write the following rules.

/*Yahoo! Reset CSS*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,
blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/*End Yahoo! Reset CSS*/

body {
  background: #fff url("images/bck.jpg") repeat-x top;
  font-family: Verdana, Georgia, “Lucida Sans Unicode”, sans-serif;
  font-size: 14px;
  color: #333;
  margin-top: 15px;
}

:focus {
	outline: 0;
}

a {
  text-decoration: none;
  color: #ca5235;
}

a:hover {
  color: #75a7b4;
}

small {
  font-size: 10px;
}

h1 {
  color: #ca5235;
  font-size: 28px;
}

h2 {
  color: #ca5235;
  font-size: 28px;
}

Step 2 – Top menu and Header

Now we add all elements of the design for the menu and header. Below there are the background images exported from psd.

The following images are for the logo and the down-header elements.

Note: in the down-header section there are the search form and the button to subscribe RSS feed. Below the (x)html code for header and top-nav bar.

<div id="top">
  <div class="top_left">
    <ul>
      <li><a href="#">Football</a></li>
      <li><a href="#">Basket</a></li>
      <li><a href="#">Volley</a></li>
      <li><a href="#">MotorSports</a></li>
      <li><a href="#">Special</a></li>
      <li><a href="#">Interview</a></li>
    </ul>
  </div>

    <div class="top_right">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Write for us</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

<div id="header">
  <div id="logo">
    <a href="#"></a>
  </div>

  <div id="search_box">
      <input name="textfield" type="text" class="search_input" id="textfield" value="Search" />
  </div>

  <div id="feed">
    <ul>
      <li><a href="#" class="rss_icon"></a></li>
      <li><a href="#" class="rss_mail"></a></li>
    </ul>
  </div>
</div>

And now, the style.

#top {
  background: url("images/bck_top.png") no-repeat center left;
  height: 53px;
  width: 1030px;
  margin: auto;
}

  .top_left {
    position: relative;
    float: left;
  }

  .top_left ul {
    margin: 23px 0 0 105px;
  }

  .top_left ul li {
    padding:0 5px;
    display: inline;
    font-size: 12px;
  }

  .top_left ul li a {
    color: #706d67;
    font-weight: bold;
    text-transform: uppercase;
  }

  .top_left ul li a:hover {
    color: #ca5235;
    font-weight: bold;
    border-bottom: 1px dotted #ca5235;
  }

  .top_right {
    position: relative;
    float: right;
  }

  .top_right ul {
    margin: 20px 60px 0 0;
  }

  .top_right ul li {
    padding:0 2px;
    display: inline;
    font-size: 10px;
  }

  .top_right ul li a {
    color: #706d67;
  }

  .top_right ul li a:hover {
    color: #ca5235;
    border-bottom: 1px dotted #ca5235;
  }

#header {
  background: url("images/bck_head.png") no-repeat center left;
  height: 244px;
  width: 1030px;
  margin: auto;
}

  #logo {
    background: url("images/logo.png") no-repeat center left;
    margin: 0 0 0 50px;
    padding: 26px;
  }

  #logo a {
    width: 463px;
    height: 167px;
    display: block;
  }

  #search_box {
    position:relative;
    float: left;
    top: -18px;
    margin-left: 40px;
    width: 260px;
    background: url("images/search.png") no-repeat center right;
    margin-right: 10px;
  }

  .search_input {
    border: 1px solid #c8c9d0;
    width: 150px;
    color: #c8c9d0;
    padding: 8px;
  }

  #feed {
    position:relative;
    float: left;
    top: -18px;
    border-left: 2px solid #c8c9d0;
    padding: 0px 5px;
    background: url("images/subscribe.png") no-repeat center right;
    width: 340px;
  }

  #feed ul li {
    display: inline;
    padding: 0 5px;
  }

  .rss_icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("images/rss.png") no-repeat;
  } 

  .rss_mail {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("images/rss_mail.png") no-repeat;
  }

Step 3 – The Main Container

Below the repeteable image used for the main container of the layout. We use a graphic with a height of 375px to emphasize the grunge effect.

In this step we don’t forget to use a clearfix technique to give a cross browser float clearing solution. So the html code for the main container is the following.

<div id="container" class="clearfix">

  <div id="left_cont">
    <!-- left container -->
  </div>

  <div id="sidebar">
    <!-- right container -->
  </div>

</div>

#container {
  background: url("images/bck_container.png") repeat-y top left;
  width: 1030px;
  margin: auto;
}

  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }

Step 4 – Left Container

In this section there are two important elements: featured news and post container. Below you can see the images for this section.

In the featured news box there are three sliding elements, so we must write a correct (x)html code to prepare document for UI jQuery Tabs.
In post container we have title, post-image, the excerpt and the “meta-info” boxes. Below you can see the code.

<div id="container" class="clearfix">

  <div id="left_cont">
  <div id="featured_title"></div>
  <div id="featured" class="clearfix">

    <ul class="nav">
      <li>
          <a href="#featured-1">
          <span class="imag_list"><img src="images/image1-small.jpg" alt="" /></span>
          <span class="meta_info_list">Category - 07.11</span><br />
          <span class="title_list">Lorem ipsum dolor sit amet</span>

          </a>
      </li>
      <li>
          <a href="#featured-2">
          <span class="imag_list"><img src="images/image2-small.jpg" alt="" /></span>
          <span class="meta_info_list">Category - 04.11</span><br />
          <span class="title_list">Etiam rhoncus</span>
          </a>
      </li>
      <li>
          <a href="#featured-3">
          <span class="imag_list"><img src="images/image3-small.jpg" alt="" /></span>
          <span class="meta_info_list">Categoria - 03.11</span><br />
          <span class="title_list">Etiam ultricies nisi vel augue</span>
          </a>
      </li>
    </ul>

    <div id="featured-1" class="featured_content">
      <a href="#" ><img src="images/image1.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Lorem ipsum dolor sit amet</a></h2>
			</div>
    </div>

    <div id="featured-2" class="featured_content">
      <a href="#" ><img src="images/image2.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Etiam rhoncus</a></h2>
			</div>
    </div>

    <div id="featured-3" class="featured_content">
      <a href="#" ><img src="images/image3.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Etiam ultricies nisi vel augue</a></h2>
			</div>
    </div>

  </div>

  <div id="news_title"></div>
  <div id="post_container" class="clearfix">
      <h1>Sed ut perspiciatis unde omnis iste</h1>
      <div class="post_image">
        <img src="images/post1.jpg" alt="post1" />
        <div class="meta_tag_comment">
        <p><a href="#">Commenti (10)</a></p>
        <p><small>Author: <a href="#">Leo Miranda</a></small></p>
        <p><small>Tags: <a href="#">football</a>, <a href="#">interview</a>, <a href="#">serie A</a>, <a href="#">serie B</a>, <a href="#">liga</a>, <a href="#">premier league</a></small></p>
        </div>
      </div>
      <div class="post_content">
        <span class="meta_info">Category - 10.07.09</span>
        <p><!--the excerpt--></p>
        <span class="more"><a href="#">Read More</a></span>
      </div>
  </div>
</div>

Here the CSS rules for the “style.css” file.

#left_cont {
    float: left;
    width: 650px;
    margin: 10px 10px 10px 21px;
  }

  #featured {
    width: 600px;
    background: url("images/img_feat_bck_big.png") no-repeat center left;
    margin-left: 20px;
    margin-bottom: 30px;
  }

  #featured_title {
    background: url("images/feat_tit.png") no-repeat center left;
    width: 632px;
    height: 27px;
    margin-bottom: 25px;
    margin-top: 5px;
  }

  #news_title {
    background: url("images/news_tit.png") no-repeat center left;
    width: 632px;
    height: 27px;
    margin-bottom: 18px;
  }

  ul.nav {
    float: right;
    left: 360px;
	  width: 225px;
	  padding-top: 3px;
  }

  ul.nav li {
    overflow: hidden;
    padding: 4px 1px;
  }

  ul.nav li a{
	  display: block;
	  height: 60px;
	  color: #333;
  }

  ul.nav li a:hover{
    outline: 1px dotted #ca5235;
  }

  ul.nav li img {
	  float: left;
    margin: 4px;
    padding: 5px;
    width: 75px;
    height: 40px;
  }

  span.imag_list {
  	 float: left;
     background: url("images/img_feat_bck.png") no-repeat center left;
     width: 95px;
     height: 58px;
  }

  span.title_list {
    color: #ca5235;
    font-size: 11px;
    font-weight: bold;
  }

  span.meta_info_list {
    color: #75a7b4;
    font-size: 10px;
    font-weight: bold;
  }

  .featured_content {
	  width: 350px;
    height: 205px;
  }

  .featured_content img {
	  padding: 9px 8px 8px 8px;
  }

  .featured_content .info {
    position: relative;
	  top: -61px;
    left: 5px;
	  height: 50px;
	  width: 340px;
	  margin: 0 3px;
	  background: url("images/transparent-bg.png");
	  overflow: hidden;
  }

  .info h2 {
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    padding: 5px;
  }  

  .info h2 a {
    color: #d8d7d7;
  }

  #post_container, #post_container1, #post_container2 {
    margin: 0 23px 30px 23px;
    clear: both;
    min-height: 220px;
    background: url("images/post_sep.png") no-repeat bottom right;
  }

  .post_image {
    float: left;
    margin: 10px 25px 13px 15px;
    width: 201px;
  }

  .post_image img {
    border: 1px solid #75a7b4;
  }

  .meta_tag_comment {
    padding: 3px;
    background: #75a7b4;
  }

  .post_image p {
    font-size: 10px;
    color: #fff;
    padding: 3px;
  }

  .post_image p a {
    color: #fff;
  }

  .post_image p a:hover {
    border-bottom: 1px dotted #fff;
  }

  .post_content {
    margin-top: 15px;
  }

  span.meta_info {
    padding: 5px;
    background: #75a7b4;
    color: #fff;
    font-size: 14px;
  }

  span.meta_info a {
    color: #fff;
  }

  .post_content p {
    margin: 15px 0 10px 0;
    font-size: 12px;
    line-height: 20px;
    padding-left: 241px;
  }

  span.more {
    position: relative;
    right: 293px;
    float: right;
    margin-bottom: 10px;
  }

  span.more a {
    font-size: 12px;
    color: #ca5235;
    font-weight: bold;
  }

  span.more a:hover {
    border-bottom: 1px dotted #ca5235;
  }

Step 5 – Activate Slider Tabs Effect

Now we download the minified package of the framework from the official download page and also the UI package (select UI Core, Tabs and Effects Core).

We copy the two files (”jquery-1.3.2.min.js” and “jquery-ui-1.7.2.custom.min.js”) in “js” folder. To use the power of jQuery for featured news box we call the library from the “index.html” with the following lines of code between head tags:

<head>
  [...]
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	[...]
</head>

We place this code in “index.html” (after <body>) to activate tabs:

	<script type="text/javascript">
	$(function() {
		$("#featured").tabs({ fx: { width: 'toggle', opacity: 'toggle' } }).tabs("rotate", 6000, true); });
	</script>

and this in css style file:

.ui-tabs-hide { display: none !important; }

Step 6 – Right Container, the sidebar

For the sidebar we use only an image for the title background (general back image is in the main container).

This is the markup.

<div id="sidebar">
    <div class="side_cont">
    <h2>Sponsor</h2>
      <div class="adv">
	       <a href="#"><img src="images/pvmban125.jpg" alt="pvm" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/pvmban2504.jpg" alt="Advertisement" /></a>
	    </div>
    </div>

    <div class="side_cont adv">
    <h2>BlogRoll</h2>
    <ul>
      <li><a href="#">Sport Magazine - Resources for Sport Lovers</a></li>
      <li><a href="#">Football Mag - We Play Football</a></li>
      <li><a href="#">BuzzerBeater Magazine - Basket Fans</a></li>
      <li><a href="#">Premier Paper - Premier League News</a></li>
      <li><a href="#">European Sport - News from Europa</a></li>
      <li><a href="#">Focus on Carling</a></li>
      <li><a href="#">NBA News - Do you wanna play?</a></li>
      <li><a href="#">Road to South Africa 2010</a></li>
      <li><a href="#">Volley World League</a></li>
    </ul>
    </div>

    <div class="side_cont adv">
    <h2>Most Read Articles</h2>
    <ul>
      <li><a href="#">Nisi ut aliquid ex ea commodi consequatur?</a></li>
      <li><a href="#">Nam libero tempore, cum soluta nobis</a></li>
      <li><a href="#">At vero eos et accusamus et iusto odio</a></li>
      <li><a href="#">Nemo enim ipsam voluptatem quia voluptas</a></li>
    </ul>
    </div>
  </div>

Right now we write the css rules.

#sidebar {
  float: left;
  width: 335px;
}

.side_cont {
  background: url("images/side_tit1.png") no-repeat top right;
  margin-bottom: 25px;
  padding-right: 35px;
  padding-left: 20px;
  width: 280px;
  font-size: 12px;
  line-height: 18px;
}

.side_cont h2 {
  font-size: 20px;
  color: #fff;
  padding-top: 3px;
  margin-bottom: 20px;
}

.adv {
  margin-top: 37px;
}

.adv img {
  margin: 0 10px 10px 0px;
  border: 1px solid #ccc;
}

.side_cont ul {
  margin-bottom: 15px;
}

.side_cont ul li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  display: block;
}

.side_cont ul li a {
  color: #333;
  padding: 10px 0;
}

.side_cont ul li a:hover {
  color: #ca5235;
}

.side_cont ul li:hover {
  background: #e1e1e1;
}

Step 7 – Footer

Below the footer background, the markup and the style.

<div id="footer">
<p>SPORT NEWS PVM MAGAZINE 2009 - Creative Common License. It's a free template for you!</p>
<p>It's a PV.M GARAGE PRODUCTION - <a href="http://validator.w3.org/check?uri=referer">valid (X)HTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">valid CSS</a>
</p>
</div>

#footer {
  background: url("images/bck_foot.png") no-repeat top left;
  height: 113px;
  width: 1030px;
  margin: auto;
  padding-top: 48px;
}

#footer p {
  font-size: 12px;
  text-align: center;
  padding: 2px;
  color: #666;
}

#footer p a {
  border-bottom: 1px dotted #666;
  color: #666;
}

Stay tuned, the next step is WordPress Theme

Yes, the next step for SportNewsPvm is WordPress Code. Soon a new post where we’ll learn the basic operations to create a WP theme, then SportNewsPvm WordPress Theme will be released.

Recent Posts with NewsTicker Effect

Step 1 – Creation of the module style

The following portion of code contains the style CSS of the recent-post-newsticker module. We can insert the following code directly in the main style sheet of the template (style.css) or create a new file .css (newsticker.css).

#listticker{/*general settings*/
text-align:left;
height:220px;
width:270px;
overflow:hidden;
padding:6px 6px 6px 6px;
}
#listticker ul{/*list general settings*/
border:0;
margin-bottom:0;
padding:0;
list-style:none;
background:#f4f4f4;
}
#listticker li{/*single list element settings*/
height:40px;
padding:5px;
list-style:none;
margin-top:5px;
border:dashed 1px #dddddd;
background:#ffffff;
}
#listticker a{/*link settings*/
display:block;
color:#857d59;
margin-bottom:0px;
font-weight:bold;
float:left;
font-size:11px;
}

This code is customizable to follow the design of your blog. With the example configuration we will obtain the following one rendering.

Now we create a folder post_newsticker where insert the eventual style sheet file if it has been chosen this road. Inside the folder post_newsticker we insert also the file jquery.js, it referers to JQuery base library, the Javascript framework used to recreate the sliding effect.
Now we are ready to transfer on the server and just inside the directory of template graphical the folder containing post_newsticker files.

Step 2 – Modification of the header.php file

With this modification we recall the files previously loaded. The following portions of code will be inserted inside of the tag head. If you choose to use a dedicated css file for the style insert this:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); >/post_newsticker/newsticker.css" type="text/css" />

Now insert the jQuery library reference.

<script src="<?php bloginfo('template_directory'); >/post_newsticker/jquery.js" type="text/javascript">
</script>

Therefore insert the javascript code in order to realize the sliding effect on the articles list.

<script type="text/javascript">
$(document).ready(function(){

	var first = 0;
	var speed = 500;
	var pause = 3000;

		function removeFirst(){
			first = $('ul#listticker li:first').html();
			$('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
		}

		function addLast(first){
			last = '
	<li style="display:none" mce_style="display:none">'+first+'</li>
';
			$('ul#listticker').append(last)
			$('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}

	interval = setInterval(removeFirst, pause);
});
</script>

With the speed and pause variables we can modify respective element refreshing velocity and the pause between the various refreshments. To this point we must connect the n last posts of the blog to the list elements.

Step 3 – Modification of the sidebar.php file

In order to obtain the list of n last posts we can use the native functions in Wordpress that refer to posts management.

<h2> Articoli recenti</h2>
<ul id="listticker">
 <?php
 $lastposts = get_posts('numberposts=10');
 foreach($lastposts as $post) :
    setup_postdata($post);
 ?>
 <li>
 <a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>

The code should follow the style of the page structure. The ul element have id=”listticker”.
We define the n number (that the newsticker list contains) of the posts with “numberpost” variable.

End

To this point the recent-post-newsticker has been correctly installed.

A great part of the material for this module has been recovered on Woork (Antonio Lupetti’s tech blog) in the following article ” How to implement a news ticker with jQuery and ten lines of code “.

If you have any suggestions or ideas to improve the module write a comment to the post.

In this post I present some useful scripts and tutorials that could help those who are looking for effective solutions for the construction of a easily and accessible navigation box.
It must be clear that all scripts submitted are derived by working with the two most popular JavaScript Libraries: jQuery and MooTools. So you must download and activate the framework.

Activate jQuery e Mootools

Download Framework, upload on your server and activate in your web-page.

jQuery Resources

• jQuery Home Page
• Minified and Gzipped jQuery
• Uncompressed Code jQuery
• jQuery Documentation

Below there is the code to insert in your HTML document to activate jQuery.

  <head>
    <script type="text/javascript" src="jquery-1.3.2.min.js "></script>
    <script type="text/javascript">
        qui inserisci i tuoi script
    </script>
  </head>

MooTools Resources

• MooTools Home Page
• Minified MooTools
• Uncompressed Code MooTools
• jQuery Documentation

Below there is the code to insert in your HTML document to activate MooTools.

  <head>
    <script type="text/javascript" src="mootools-1.2.2-core-jm.js"></script>
    <script type="text/javascript">
      qui puoi inserire tuoi script
    </script>
  </head>

Plugin, scripts and Tutorial to Realize a Great Menu

Here we’ve collected ten useful resources to realize practical and nice menu in your web projects.

BySlideMenu – Nice and powerful accordion menu

Demo | Download | Home Page

Sliding Top Menu With jQuery

Demo | Download | Tutorial

Slide out and drawer effect with accordion plugin

Demo | Download Accordion Plugin | Tutorial

Sliding Jquery Menu

Demo | Download | Tutorial

Cut & Paste Animated Outline Menu

Demo | Download Script .js | Tutorial

Kwicks for jQuery

Demo | Download | Home Page

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Demo1 | Demo2 | Download Plugin | Home Page

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Demo | Download | Tutorial

Side Navigation Tooltip / Popup Bubble

Demo | Tutorial