A snazzy tutorial for you that you can use on you’re blog or website – whatever takes your fancy!

Now you probably noticed something different about my website that the welcome information box has been moved from the main content box to outside of the layout. This is to draw more attention to it so whenever you visit it’s there as a friendly hello to you and at your option to follow us or subscribe to the RSS feed.

How you can accomplish this on your website in the most easiest way possible?!


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boxa</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> function hide_box() { $('#boxa').slideUp(500).css('background-color','#f3f3f3'); } </script>
<style type="text/css">
div#boxa {
	padding: 20px;
	font-size:12px;
	text-align:center;
	background-color:#d4d4d4;
	color:#333;
	}
</style>
</head>

<body>
<div id="boxa">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. <a href="javascript:return false;" title="Hide box" alt="Hide box" onclick="hide_box();">Hide box</a></div>
 
</body>
</html>

0 Shares:
0 comments
Leave a Reply to Fabio Neves de Brito Cancel reply

Your email address will not be published. Required fields are marked *

3 × 2 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

Really Simple Slideshow – A Flexible Slider Plugin

Really Simple Slideshow is a jQuery plugin for creating image sliders of any kind. Plugin converts any list of images into a slideshow, it can display captions with each slide, include links and there are multiple transition effects.

CSS Compression

In this article we provided two practical methods for compressing CSS documents.

5+ Useful jQuery Plugins for Images

We love jQuery for its flexibility and many uses. But some of the most impressive jQuery applications are those that involve images. It really can allow you to do some useful stuff and even add a “wow” factor to your project. So here we’ve rounded up some jQuery plugins to help you display images in your next project.

Border-radius: create rounded corners with CSS!

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.