Thursday, December 22, 2011

Set limit wp_list_pages

<?php
$numberPage = 5;

$pages = wp_list_pages("echo=0&title_li=");

$pages_arr = explode("\n", $pages);

for($i=0;$i<$numberPage;$i++){
 echo $pages_arr[$i];
}

?>

Thursday, November 17, 2011

How to disable the WordPress Admin Bar

WordPress 3.1 introduces a new feature called the Admin bar. A lot of people will be wanting to disable this when WordPress 3.1 comes out.





But since some people might want to disable the admin bar for everyone, I thought I'd show you a  ways to quickly disable the WordPress admin bar




1. Login in admin page then click on All Users under user box
2. Edit all user that you want to disable then Un-Check on "When view site"

Thursday, November 10, 2011

How to Show Home Link In wp_nav_menu

WordPress wp_nav_menu function is really helpful to display a custom navigation menus in your wordpress theme. The custom menu can be set in the admin area, easily, with a drag-and-drop interface
You can use the code below as the solution:

function my_page_menu_args( $args ) {
 $args['show_home'] = true;
 return $args;
}
add_filter( 'wp_page_menu_args', 'my_page_menu_args' );
Put the code in the theme function.php

Tuesday, November 8, 2011

Master Page feature is missing under Look and Feel section in Sharepoint 2010

By default SharePoint Server 2010 (standard and enterprise) you need you activate SharePoint Server Publishing Infrastructure under Site collection features and SharePoint Server Publishing under Manage Site Feature Master Page feature under Look and Feel section. The Master Page link will appear when you have these 2 features activated

1. Site Actions -> Site Settings ->Site Collection Administration -> Site collection features

1. Site Actions -> Site Settings -> Site Actions  -> Manage site features

Hide First Tab in SharePoint 2010 Navigation

 In SharePoint 2010 when you create new site or sub-sites it will show Home in first tab. this post will show how to hide first tab.


Here is the original code of top navigation control:
<SharePoint:AspMenu    
  ID="TopNavigationMenuV4"    
  Runat="server"    
  EnableViewState="false"    
  DataSourceID="topSiteMap"    
  AccessKey="<%$Resources:wss,navigation_accesskey%>"    
  UseSimpleRendering="true"    
  UseSeparateCss="false"    
  Orientation="Horizontal"    
  StaticDisplayLevels="2"    
  MaximumDynamicDisplayLevels="1"    
  SkipLinkText=""    
  CssClass="s4-tn"/>    
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">    
    <Template_Controls>    
        <asp:SiteMapDataSource    
          ShowStartingNode="False"    
          SiteMapProvider="SPNavigationProvider"    
          id="topSiteMap"    
          runat="server"    
          StartingNodeUrl="sid:1002"/>    
    </Template_Controls>    
</SharePoint:DelegateControl>


And then make the following changes to the static, dynamic and site map provider:
<SharePoint:AspMenu    
  ID="TopNavigationMenuV4"    
  Runat="server"    
  EnableViewState="false"    
  DataSourceID="topSiteMap"    
  AccessKey="<%$Resources:wss,navigation_accesskey%>"    
  UseSimpleRendering="true"    
  UseSeparateCss="false"    
  Orientation="Horizontal"    
  StaticDisplayLevels="1"    
  MaximumDynamicDisplayLevels="2"    
  SkipLinkText=""    
  CssClass="s4-tn"/>    
        <asp:SiteMapDataSource    
          ShowStartingNode="False"    
          SiteMapProvider="CombinedNavSiteMapProvider"    
          id="topSiteMap"    
          runat="server"/>

Friday, August 12, 2011

HTML5 Game Magician - Fairy Rescue




Happy to announce that we are amongst the finalists.
http://www.relfind.com/game/magician.html

Opacity image in CSS3



1. HTML Code

<section class="social">
<a href="#"><img alt="Share to Facebook" src="images/social-facebook.png"></a>
<a href="#"><img alt="Share to Twitter" src="images/social-twitter.png"></a>
<a href="#"><img alt="Digg This" src="images/social-digg.png"></a>
<a href="#"><img alt="Stumble It" src="images/social-stumble-upon.png"></a>
<a href="#"><img alt="Share to Reddit" src="images/social-reddit.png"></a>
<a href="#"><img alt="Share to Delicious" src="images/social-delicious.png"></a>
<a href="#"><img alt="Technorati" src="images/social-technorati.png"></a>
<a href="#"><img alt="LinkedIn" src="images/social-linkedin.png"></a>
<a href="#"><img alt="Google Buzz" src="images/social-buzz.png"></a>
<a href="#"><img alt="Blogger" src="images/social-blogger.png"></a>
<a href="#"><img alt="More..." src="images/more.png"></a>
</section>

2. Style Sheet

<style type="text/css">
section.social-opacity
{
	clear: both;
	display: block;
	margin-top: 20px;
	text-align: center;
}
section.social-opacity a
{
	margin: 0;
	outline: medium none;
	padding: 0 2px;
	cursor: pointer;
}
section.social-opacity:hover a
{
	opacity: 0.2;
}
section.social-opacity a:hover
{
	opacity: 1;
}
</style>

Scale image in CSS3



1. HTML Code

<section class="social-zoom">
<a href="#"><img alt="Share to Facebook" src="images/social-facebook.png"></a>
<a href="#"><img alt="Share to Twitter" src="images/social-twitter.png"></a>
<a href="#"><img alt="Digg This" src="images/social-digg.png"></a>
<a href="#"><img alt="Stumble It" src="images/social-stumble-upon.png"></a>
<a href="#"><img alt="Share to Reddit" src="images/social-reddit.png"></a>
<a href="#"><img alt="Share to Delicious" src="images/social-delicious.png"></a>
<a href="#"><img alt="Technorati" src="images/social-technorati.png"></a>
<a href="#"><img alt="LinkedIn" src="images/social-linkedin.png"></a>
<a href="#"><img alt="Google Buzz" src="images/social-buzz.png"></a>
<a href="#"><img alt="Blogger" src="images/social-blogger.png"></a>
<a href="#"><img alt="More..." src="images/more.png"></a>
</section>
2. Style Sheet

<style type="text/css">
section.social-zoom
{
	clear: both;
	display: block;
	margin-top: 20px;
	text-align: center;
}
section.social-zoom a
{
	margin: 0;
	outline: medium none;
	padding: 0 2px;
	cursor: pointer;
}
section.social-zoom a img
{
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
}
section.social-zoom a img:hover
{
	-webkit-transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
}
</style>

Rotate image in CSS3



1. HTML Code

<section class="social">
<a href="#"><img alt="Share to Facebook" src="images/social-facebook.png"></a>
<a href="#"><img alt="Share to Twitter" src="images/social-twitter.png"></a>
<a href="#"><img alt="Digg This" src="images/social-digg.png"></a>
<a href="#"><img alt="Stumble It" src="images/social-stumble-upon.png"></a>
<a href="#"><img alt="Share to Reddit" src="images/social-reddit.png"></a>
<a href="#"><img alt="Share to Delicious" src="images/social-delicious.png"></a>
<a href="#"><img alt="Technorati" src="images/social-technorati.png"></a>
<a href="#"><img alt="LinkedIn" src="images/social-linkedin.png"></a>
<a href="#"><img alt="Google Buzz" src="images/social-buzz.png"></a>
<a href="#"><img alt="Blogger" src="images/social-blogger.png"></a>
<a href="#"><img alt="More..." src="images/more.png"></a>
</section>
2. CSS3
<style type="text/css">
section.social
{
	clear: both;
	display: block;
	margin-top: 20px;
	text-align: center;
}
section.social a
{
	margin: 0;
	outline: medium none;
	padding: 0 2px;
	cursor: pointer;
}
section.social a img {
	-moz-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	border: medium none;
}
section.social a:hover img {
	-moz-transform: rotate(360deg) scale(1.2, 1.2);
	-webkit-transform: rotate(360deg) scale(1.2, 1.2);
}
</style>

Wednesday, August 10, 2011

Google Plus Photo Album

picture

1. HTML for Google Plus Photo Album

<div id="page_wrap">  
  
	<div class="google-plus" style="margin-left:490px">
		<img class="album" src="photos/2.jpg">
		<img class="album" src="photos/3.jpg">
		<img class="album"  src="photos/1.jpg"> 
	</div>    
	<div class="google-plus" style="margin-left:200px">
		<img class="album" src="photos/4.jpg">
		<img class="album" src="photos/5.jpg">
		<img class="album"  src="photos/6.jpg"> 
     </div>
     
  <div class="single-photo">
    <a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="picture">    
  </div>

2. CSS for Google Plus Photo Album

<style type="text/css">
.single-photo
{
	background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    display: inline-block;
    height: 164px;
    margin-left: 33px;
    margin-top: 65px;
    width: 165px;
	 -webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	
}
.single-photo img
{
	display: block;
    height: 158px;
    padding-left: 3px;
    padding-top: 3px;
    width: 158px;
}
.single-photo:hover
{
	-moz-transform: scale(1.2, 1.2) rotate(0deg);
	-webkit-transform: scale(1.1) rotate(0deg);
	-o-transform: scale(1.1) rotate(0deg);
	-ms-transform: scale(1.1) rotate(0deg);
	transform: scale(1.1) rotate(0deg);
}
#page_wrap {
	border: 1px solid #DDDDDD;
	width: 800px;
	height:400px;
	margin-left: auto;
	margin-right: auto;
	margin-top:150px;
}
.google-plus img { 
	border: none;
	text-decoration: none;
	position: absolute;
	margin-left:0px;
	width: 158px;
	height: 158px;
}
.google-plus { 
	width: 400px;
	position: absolute;
	margin:60px 10px 10px;
}
.google-plus img { 
	position: absolute;
	border: 4px solid #FFF;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	z-index: 9999;	
	-moz-transition: all 0.2s ease;	
	-webkit-transition: all 0.2s ease;	
	-o-transition: all 0.2s ease;	
	transition: all 0.2s ease;
}
.google-plus img:nth-child(1)
{ 
	top: 8px;
	left: 108px;
}
.google-plus img:nth-child(2)
{
	top: 6px;
	left: 104px;
}
.google-plus img:nth-child(3)
{
	top: 4px;
	left: 100px;
	right: 100px;
}
.google-plus .rotate1 {
	-webkit-transform: rotate(15deg); 
	-moz-transform: rotate(15deg);
	transform: rotate(15deg);
	-ms-transform:rotate(15deg);
	-o-transform:rotate(15deg);
}
.google-plus .rotate2 {
	-webkit-transform: rotate(0deg); 
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-ms-transform:rotate(0deg); 
	-o-transform:rotate(0deg); 
}
.google-plus .rotate3 {
	-webkit-transform: rotate(-15deg); 
	-moz-transform: rotate(-15deg); 
	transform: rotate(-15deg);
	-ms-transform:rotate(-15deg); 
	-o-transform:rotate(-15deg);
	cursor: pointer;
}
</style>

3.Javascript Code

jQuery(document).ready(function()
{ 	
	jQuery(".google-plus img").hover(function(){
		
		if(jQuery(this).hasClass('album'))
		{
			var parent = jQuery(this).parent();
			
			parent.find("img:nth-child(1)").addClass(" rotate1");			
						
			parent.find("img:nth-child(2)").addClass(" rotate2");
			parent.find("img:nth-child(3)").addClass(" rotate3");
			
			parent.find("img:nth-child(1)").css('left', '150px');
			parent.find("img:nth-child(3)").css('left', '50px');
		}
	},
	function(){
			
			var parent = jQuery(this).parent();
			parent.find("img:nth-child(1)").removeClass("rotate1");
			parent.find("img:nth-child(2)").removeClass("rotate2");
			parent.find("img:nth-child(3)").removeClass("rotate3");
			
			parent.find("img:nth-child(1)").css('left', '');
			parent.find("img:nth-child(3)").css('left', '');
	});	

});


Monday, August 8, 2011

blockqoute with before in css3

Create a simple CSS3 folded-corner effect without images. It works well in all modern browsers and is best suited to designs with simple color backgrounds.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

<style type="text/css">
blockquote.qoute {
 font: 14px/28px arial;
 background: #97C02F;
    color: #FFFFFF;
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 
                0 20px 80px -20px rgba(0, 0, 200, 0.3) inset;

}
blockquote.qoute:before {
    content: " ";
     position:absolute;
    top:0;
    right:0;
    border-width:0 26px 26px 0;
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; 
    background:#658E15; 
    display:block;
 width:0;    
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
</style>
<blockquote class="qoute">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet.
 Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices 
vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet.
 Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices 
vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
</blockquote>

blockqoute with first-letter in css3

This CSS3 tutorial will show you how to create Blockqoute with first-letter. First apply open quote background on Blockquote then apply close quote background to the first-letter.

Cras vestibulum ante vel tellus feugiat in convallis purus iaculis. Donec eu auctor felis. Nullam gravida libero vitae dui varius id pretium felis vulputate.

1. CSS
<style type="text/css">
blockquote.qoute {
 font: 14px/28px arial;
 width: 400px;
 background: url(close-quote.gif) no-repeat right bottom; 
 text-indent: -18px;
}
blockquote.qoute:first-letter {
 background: url(open-quote.gif) no-repeat left top;
 padding-left: 18px; 
}
</style>
2. HTML
<blockquote class="qoute">
Cras vestibulum ante vel tellus feugiat in convallis purus iaculis.
Donec eu auctor felis. Nullam gravida libero vitae dui varius id pretium
felis vulputate.</blockquote>

Monday, July 18, 2011

CSS Resources

W3Schools offers a comprehensive CSS3 reference:
http://w3schools.com/css3/default.asp



CSS3.Info contains tons of great articles on the newest CSS3 stuff:
http://www.css3.info/



Pixel2Life offers a ton of tutorials:
http://www.pixel2life.com/tutorials/css_stylesheets/



Check out Good-Tutorials for more CSS tutorials:
http://www.good-tutorials.com/tutorials/css



NetTuts+ has a lot of great articles and tutorials on CSS3:
http://net.tutsplus.com/?s=css3

Friday, July 8, 2011

Change Text Selection highlight Color in Css3

::selection {
        background: #ffb7b7; /* Safari */
        }
::-moz-selection {
        background: #ffb7b7; /* Firefox */
}

Rounded Corners in CSS3

Supporting Browsers: Apple Safari 3, Firefox 1, Google Chrome 1

CSS3
Mozilla
WebKit
border-top-right-radius
-moz-border-radius-topright
-webkit-border-top-right-radius
border-bottom-right-radius
-moz-border-radius-bottomright
-webkit-border-bottom-right-radius
border-bottom-left-radius
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius
border-top-left-radius
-moz-border-radius-topleft
-webkit-border-top-left-radius
border-radius
-moz-border-radius
-webkit-border-radius

Here is example for Rounded Corner in CSS3

<div class="content-box">
  <h2>Four Corners</h2>
  <p>This box has all corners rounded.</p>
</div>

<style type="text/css">
.content-box {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #AFAFAF;
    border-radius: 5px 5px 5px 5px;
    height: 200px;
    margin: 10px auto 0;
    width: 600px;
}
</style>

Multiple Backgrounds with CSS3

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Here’s a basic example:

This box has two background images, the first a balloon (aligned to the top and center) and the second a grass and sky background
(aligned to the top-left corner).


<div class="examplemultiplebackgrounds">
<p>This box has two background images, the first a balloon 
(aligned to the top and center) and the second a grass and sky background 
(aligned to the top-left corner).</p>
  </div>

<style type="text/css">  
div.examplemultiplebackgrounds
{   
 width: 446px;
 height: 395px;
 background-image: url(images/balloon-orange.png), url(images/landscape.jpg);
 background-position: center 50px, left top;
 background-repeat: no-repeat;

}
div.examplemultiplebackgrounds p
{
 font-size: 14px;
 color: #ffffff; 
 padding: 5px;
}
</style>

Thursday, July 7, 2011

Google Apps supports the following browsers

Beginning August 1, 2011, we’ll support the current and previous major releases of Chrome, Firefox, Internet Explorer and Safari on a rolling basis. Each time a new version is released, we’ll begin supporting that version and stop supporting the third-oldest version. Learn more about supported browsers for Google Apps in the Google blog post.
 

How To Add Animated Favicon In Blogger?

Favicon is actually the icon that appears next to your Website URL in the browser address bar. A favicon is usually your blog logo. There are many free services that help to create favicons for you but most of these services use still images. I have used an animated favicon for my blog as you can see in your address bar. It actually consists of a logo and then my blog title as text. The image and text together makes a more beautiful combination. So lets jump at the tutorial and create an attractive cute favicon for your blog,
  1. Go To favicongenerator
  2. And just at the bottom of the page upload your blog logo or any icon you wish to make as your favicon and also add your blog title as the scrolling text. You will find all the help at favicongenerator


    3.  Hit the Generate Favicon Button and you will be taken to this page,


Here you will see many images just right click the animated one and save it to your computer.

     4. Now upload the image to your Picasa album by reading this post –> Store Animated Images in Blogger and Learn how to get Image URLs

How To Add Your Favicon To Blogger Now?

  1. Go To Blogger > Design > Edit HTML
  2. And Search For <b:skin> and just above it paste the code below,

<link href='ADD YOUR FAVICON LINK HERE' rel='icon' type='image/gif'/>