Let’s create a simple example of animating a pop out sign.

First Create a Div with images

<div id="signpost">
	<img id="post" src="post.png">
	<img id="sign" src="sign.png">
</div>

Create the bounding box for the signpost, and give it a relative positioning context to ensure that we can position items absolutely within it.

#signpost{
 width:60px;
 height:196px;
 position:relative;
}

Next, the post is positioned with a z-index of two, to place it on top of the sign.

#post{
 width:79px;
 height:196px;
 z-index:2;
 position:relative;
}

Now we place sign underneath the Post and rotate it with our CSS3 transform property

#sign{
height:46px;
width:80px;
position:absolute;
top:10;
left:60;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
 
-webkit-transform: rotate(86deg);
-moz-transform: rotate(86deg);
z-index:1;
-webkit-transition:-webkit-transform 0.5s ease-in-out;
}

The sign is rotated using transform: rotate(86deg), and is positioned under the post. To ensure that the sign rotates around the proper point, we must change the transform origin to the top left corner: 0, 0.

We set the transition to change the transform property over 0.5s with an ease-in-out profile, and on hover, we rotate the sign back to its original orientation.

#signpost:hover #sign{
	-webkit-transform:rotate(0deg);
         -moz-transform:rotate(0deg); }

Reference: http://net.tutsplus.com

Step 1:
Copy and paste the following code on the head section of your webpage .

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>
<script language="javascript">
	var name = "#floatMess";
	var menuYloc = null;
		$(document).ready(function(){
	menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
			$(window).scroll(function () {
				offset = menuYloc+$(document).scrollTop()+"px";
				$(name).animate({top:offset},{duration:500,queue:false});
			});
 
			$('#close_message').click(function()
			{
  			$(name).animate({ top:"+=15px",opacity:0 }, "slow");
			});
		});
	 </script>

Step 2:
Add the following code in the CSS style sheet or in the style section of html page.

#floatMess {
		position:absolute;
		top:5px;
		float:left;
		width:95%;
		border:1px solid #999;
		background-color:#456;
		color:#ccc;
		padding:5px 5px 5px 25px;
		text-align:center;
 
		}

The above codes select the color,size font color, width etc of the floating message box.
You can change the upper parameters as per your requirements.

Step 3:
Now it’s the time for adding the main thing in the body section of your webpage ie the main message DIV which is going to be displayed on the webpage. Copy the following codes and paste it in the beginning of the body section or anywhere , it will not affect the other div of the page .

<div id="floatMess"><img id="close_message" style="float:right;cursor:pointer"  src="cross.png" />
      Your message Goes here
 </div>

Step 4:
You will need to download following three files and save it in the same folder which contains the main html file.

• jquery.js
• jquery.dimensions.js
• cross.png ( ICON need to display cross image at the message box )

Downloads:

• Click here to download jquery.js
• Click here to download jquery.dimensions.js
• Click here to download cross.png

DEMO

• Click here to see DEMO
• Click here to download the zip version of demo file .

What do you want your website to do? Is it going to be primarily a static website, like an online brochure? Or is it going to be a fully-functioning ecommerce site? Or maybe it’s going to be really media-heavy with tons of videos, photos, and audio files. Or is a blog going to be the primary focus?

Whatever your site’s primary function is going to be, you need to define it and then find a CMS that does that particular thing really, really well. If blogging is the main focus of the site, then use a blog platform. If images and video are the main focus, then you need to find a CMS that either has great support for media built-in or has great plugins for enabling those functions. If your site is going to focus on an online store, then the platform you choose needs to be able to seamlessly integrate that online store without a ton of extra work.

2. A CMS needs to work intuitively.

When you average user opens up the backend of the site, they should be able to figure out how to do basic functions without too much instruction. Different elements of the site should be clearly labeled. The basics of posting a new page, editing a page, and even changing themes or sidebar elements should all be relatively simple to figure out for the average computer user.

3. The backend needs to be standardized.

Things should all work basically the same way in the backend of the site. A good CMS should have a standardized format for each section of the backend. If one section uses a drop-down menu for selecting something, then all of the other sections should use the same type of menu for similar options—not radio buttons or some other selector.

The same goes for the way things are named or otherwise referred to. If something is called a “page” in one place and a “post” in another, that’s going to get confusing (plus, most people consider those two different things). If it’s a “sidebar” in one place and a “second column” somewhere else, that’s going to confuse your average user.

4. The backend needs to be logical and well-organized.

Things should be laid out logically in the backend. This means that all of the functions related to editing, or sidebars, or themes, or creating new content, should be grouped somehow or otherwise function the same. Alternatively, some CMSs put all of the things related to pages in one place, sidebars in another, plugins in another, etc. Either way, they’re laid out logically and once you know the basic architecture, it’s easy enough to figure out where things are supposed to be.

5. The right CMS shouldn’t have a ton of extra functionality you’ll never use.

This is a completely personal choice. Some sites will make use of tons of advanced functionality. Other sites won’t. If you’re never going to have an online store, why do you need a CMS that focuses on ecommerce? If you never plan to do anything beyond posting photos to your site, why have a CMS that does that plus a hundred other things? Instead, find a CMS that does the one thing you want to do really well and forget about the other features.

6. The right CMS should be easy for non-geeks to use.

Web designers and developers are very good at using web-based applications and pretty much anything else computer-related. A lot of their clients, on the other hand, probably aren’t. While most of the end-users of any CMS are going to have at least basic computer knowledge, they’re probably not super tech savvy. While you might love a particular CMS and think it’s the best thing since solid-state hard drives, your clients might find it confusing, hard to use, and overly complicated.

The question I always ask myself when considering this is, “Could my mother use this?” My mother is your typical business computer user. She can do spreadsheets, word processing, and email, but she’s definitely not a techy. If I’m confident that I could easily explain a CMS to her and she’d then be able to use it with a minimum of later support, then I know it’s going to be appropriate for 90% of other likely users.

7. It needs to include a WYSIWYG editor.

WYSIWYG editors make life easier for your clients. Most clients don’t know HTML and don’t care to learn. But they want to be able to use bold or italic text or use header tags to create sections within their pages. A WYSIWYG editor makes that all possible for non-tech-savvy users.

8. The pages it creates should be fast-loading and have simple code.

One of the major advantages of a CMS is that it simplifies the updating and management of a website. So the pages it produces should also be simple. There shouldn’t be a lot of extra code or provisions for unused functionality in the final page code. All that serves to do is slow the load times for the page and increase the likelihood that something will render wrong or throw an error.

9. The template engine should allow you complete creative control.

Some CMSs have very set ideas about what a website should look like. There needs to be a sidebar for navigation. You shouldn’t use navigation dropdowns. The content has to be arranged in nice, neat columns. Who’s the designer here? Whatever CMS you choose should let you design pages the way you want and should work around your needs.

10. The right CMS should have adequate support and documentation.

In all likelihood, you’re going to run into some sort of problems with any CMS you choose. Whether this is caused by add-ons or in the course of customizing some bit of code, or whether the CMs is doing something unexpected, having somewhere you can turn to to get advice on how to fix the problem is invaluable.

This doesn’t necessarily have to be some expensive tech support phone number or other paid support. Sometimes you can get quicker and better responses from a user community. Does the CMS you’re considering have support forums frequented both by other users and by those involved in the project? Are there other, off-site forums dedicated to that particular CMS? The people who visit these forums can be a wealth of information for doing just about anything with your CMS of choice.

Thorough documentation for the CMS is also valuable. It should provide information on everything from basic use of the CMS to customizations and advanced functionality.

Article Source

Step 1:
We will create a PHP file; lets say follower_count.php or whatever you’d like to name it. Then simply put following contents in that page.

<?php
$twitter_username	=	'designgala';	// please replace it with your twitter username
$tw	=	get_option("total_twitter_followers");
if ($tw['lastcheck'] < ( mktime() – 3600 ) ) { 	$xml	=	file_get_contents('http://twitter.com/users/show.xml?screen_name='. $twitter_username); 	if (preg_match('/followers_count>(.*)

Explanation:
I used 2 PHP functions file_get_contents() and preg_match() here. file_get_contents fetches twitter xml file and stores in buffere while preg_match searches followers_count for a match in the buffer returned by earlier function.

Step 2:
Now you can include above file using PHP include like below in any template file.

<?php include("follower_count.php"); ?>

Thats it. It will show twitter follower count.

[Photo Credit: JavaJunky via Flickr]

You can add the toolbar to wordpress, blogger, typepad, drupal, joomla, ning, vBulletin, and even in your custom website as well.

Benefits
- Increase page views and time on site
- Increase content sharing with the social tools available
- Enrich your content and increase communication

Here is a list of Applications available in wibiya toobar (there are more applications than the list below):

- Search (add search box in the toolbar)

- Google Translation (translate your page with google translation)

- Latest posts (view latest posts from the toolbar)

- Random posts (view random posts)

- Live notifications (broadcast alerts, messages, news and more to all your visitors)

- Real time users (display real time stats of your website including number of online users, popular pages and a dynamic geolocaion user map)

- Navigation links (create a custom navigation menu or button that make it easier for your visitors to reach different pages)

- Subscribe (add rss subscription button)

- Sharing tools (facebook, twitter, email, digg, stumbleupon, yahoo! buzz, myspace and more)

- Facebook community (create your own website community with facebook connect in just one click)

- Twitter dashboard (post tweets from website, latest tweets, twitter search, and more)

- Facebook fan page (bring your fan page to your website and grow the number of fans)

- Photo gallery (display your flickr photogallery in your website)

- Youtube channel (display your youtube video gallery in your website)

You can view the demo of the toolbar in the wibiya homepage itself.

Use wibiya toolbar, make your site more popular, interactive and cool. ;)

Cheers,

You are browsing the web. You liked a url and wanted to share it, probably on twitter.

The old lengthy way:

You will open twitter.com, login with you username and password. Open url shortner like bit.ly and shorten the url you want to share. Then post your tweet with some text and shortened url.

The new and quick way:

You can do the same very easily and quickly. I hope you are using Firefox. So, there is a firefox addon Shorten url which will shorten the url and display the result in location bar. It supports more than 100 URL shorteners.

You can always remain logged in in twitter with the firefox addon Echofon. Echofon adds a tiny status bar icon that notifies you when your friends post tweets. You can also view updates in a timeline and post your own tweets.

So, it’s just simple. Shorten any url with Shorten url ff addon. And share it adding some text with Echofon ff addon.

Enjoy tweeting!

<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
 <script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>

Here , above the file “reload.php” will be reloaded in every 20000ms ie 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement.
and secondly , the #loaddiv is the name of DIV which is going to be refreshed.

Step 2:
and now you need to put the div in the body section of your page

<div id="loaddiv">
</div>

Step 3:
Now finally you need to write the code for the file “reload.php” which will extract the contends from the other page or it also may contain the code to read the data from the database depending upon requirement.
here i am going to read a small content from another site. you can copy , paste the code and save it as the filename “reload.php”. in the same folder that contains the source code.

echo"<img src='http://www.nepalstock.com/datanepse/realindex.php'/>";

Now your page is ready .
Click here to see the demo.

Step 1:
Copy and paste the following codes in the head section of your webpage.

<!--
		body { background-color: #fff; padding: 0 20px;
                 color:#000; font: 13px/18px Arial, sans-serif; }
		a { color: #360; }
		h3 { padding-top: 20px; }
		ol { margin:5px 0 15px 16px; padding:0; list-style-
                    type:square; }
 
-->

Step 2:

Now download the following files and store it in the same folder which contains the main code.
player-viral.swf
swfobject.js
preview.jpg

Step 3

Now copy the following codes in the body section of your page

<object id="player" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="315" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="name" value="player" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="flashvars" value="file=axa.flv&amp;image=preview.jpg" /><param name="src" value="player-viral.swf" /><embed id="player" type="application/x-shockwave-flash" width="400" height="315" src="player-viral.swf" flashvars="file=axa.flv&amp;image=preview.jpg" allowscriptaccess="always" allowfullscreen="true" name="player"></embed></object>

here above file “video.flv” is the media file that is going to be played and file “preview.jpg” is the image that will first appear in the screen.
now your site is ready to play the media file.

click here for demo

In this case, you need to consider few things to make the site working. You need to make changes in wp-config.php (present in root directory of wordpress installation) and some update in wp-options table of your database.

Changes in wp-config.php

I suppose that my database name is wordpress, database username is root, password is pass and database server name is localhost.

/** The name of the database for WordPress */
define('DB_NAME', 'wordpress');
 
/** MySQL database username */
define('DB_USER', 'root');
 
/** MySQL database password */
define('DB_PASSWORD', 'pass');
 
/** MySQL hostname */
define('DB_HOST', 'localhost');

Changes in database (wp-options table)

1) In wp-options table, search for siteurl and home in option_name column.

SELECT * FROM `wp_options` where `option_name` = 'siteurl' OR `option_name` = 'home';

2) Then edit the option_value column for the two rows with your current site url. I have supposed your current url as http://example.com. You can put your own url.

UPDATE `wp_options` SET `option_value` = 'http://example.com' WHERE `wp_options`.`option_name` = 'home' ;
 
UPDATE `wp_options` SET `option_value` = 'http://example.com' WHERE `wp_options`.`option_name` = 'siteurl' ;

Here are some simple steps for this.

Step 1:

First go to http://maps.google.com/ and search the map which you want to insert in your webpage.

Step 2:

Then click to the ”Link” bottom seen on the upper right side of the page like shown below.

Step 3:

And now you will see the following page on your screen .If you are fine with the size( height and width), zoom of the map , then copy the html code and paste it in the page where you want to insert the map.

If you want to customize the map then click on the “Customize and preview embedded map”. and you will see the following window.

Next change the size of the map and zoom as you want, copy the html code and paste it in the your page. Its very simple and easy.

click here to see the example.