What are the down falls to using Box Shadows

Well unfortunately like most of the new techniques that are created everyday some browsers don’t support this. Well what browser do support this. Pretty much all of the popular browsers new versions. The Box Shadow is supported with IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. As most people know Safari uses a little bit different coding style you will have to create this with the -webkit. You can also use the -moz setting for Mozilla but you don’t have to.

How to implement Box Shadows

Like all other CSS you first have to determine the container that you want to place this on. Whether it is a div, class, id, or any other element. This property has 6 parts. The first part is the h-shadow or horizontal shadow. The next part is the v-shadow or vertical shadow. The third part is the blur, which is optional. The fourth is the spread and this is also optional. The fifth is the color and this can handle all the types whether it is hex or rgb. Now the sixth part I am going to save for a little later.

What Box Shadow should look like.

So as stated above you have 6 parts to this that you can fill out. There are 3 that are optional. So lets see what this looks like.

.yourclass {
   -moz-box-shadow: 3px 3px 3px 3px #000000;
   -webkit-box-shadow: 3px 3px 3px 3px #000000;
   box-shadow: 3px 3px 3px 3px #000000;
}

OK so now you can see what it looks like. As you can see the first value is the h-shadow, the second is the v-shadow, the third is the blur (optional), the fourth is the spread (optional), and the fifth is the color. Now what about this fifth part.

The fifth part

The fifth part is one that you may never use and it is one that you could find yourself using a lot. The fifth element is a inset. What this does is exactly as it sounds it puts the shadow inwards. Now below is how you add this to the property.

.yourclass {
   -moz-box-shadow: 3px 3px 3px 3px #000000 inset;
   -webkit-box-shadow: 3px 3px 3px 3px #000000 inset;
   box-shadow: 3px 3px 3px 3px #000000 inset;
}

If you would like to see examples and learn more about this I would recommend going over to CSS Tricks.

Spread and Share

• 

Step One – Create You HTML Template

One of the first things you will need for your html template is the jquery library script or an equivalent script. The google hosted jquery script or the jquery hosted latest script would work. I prefer to use the latest jquery script. The next thing that you will need to add is the css popup file and the js popup file. These will look like this in your head area.

   <link rel="stylesheet" href="PathToFile/popup.css" type="text/css" />
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
   <script type="text/javascript" src="PathToFile/popup.js"></script>

After you add these all that you will have to do is add the code to create the popup. Well you will have to first decide if you want to use a button or a link. Both of these will work all that you have to do is add the class button to them. Then you will have to create the popup container and the contents of the popup. This should look something link this:

   <div class="button"><input type="submit" value="Press This" /></div>
   <div class="popupContent">
      <a class="popupClose">x</a>
      <h1>This is a title for a popup!</h1>
      <p>What you want in the popup</p>
   </div>
   <div class="backgroundPopup"></div>

That is all for the html part. Now you will have to style the popup with the popup.css file.

Step Two – Design Your Popup With CSS

Inside of the popup.css file there are all of the classes that you will need to have setup. Hear is a list of the classes that you will need (popupContent, popupClose, and backgroundPopup). These classes will have to be coded like below:

   .backgroundPopup{
	display:none;
	position:fixed;
	_position:absolute; /* hack for internet explorer 6*/
	height:100%;
	width:100%;
	top:0;
	left:0;
	background:#000000;
	z-index:9998;
   }
   //You can style the background, border, width, and height of this how you want
   .popupContent{
	display:none;
	position:fixed;
	_position:absolute; /* hack for internet explorer 6*/
	height:auto;
	width:35em;
	background:#fff;
	z-index:9999;
	padding:2em;
	font-size:1.3em;
   }
   //Style this how you want
   .popupClose{
	font-size:1.4em;
	right:0.5em;
	top:0.2em;
	position:absolute;
	color:#000000;
	font-weight:700;
	display:block;
   }
   .popupClose:hover { cursor: pointer; }

Step Three – Build The jQuery Popup

Now that you hopefully have a sweet designed look for your popup we have to add the script to control the popup. All that you have to do for this is all the code below to your popup.js file.

var popupStatus = 0;
 
function loadPopup(){
   //Will only be loaded if the status is 0
   if(popupStatus==0){
      $(".backgroundPopup").css({"opacity": "0.8"});
      $(".backgroundPopup").fadeIn("slow");
      $(".popupContent").fadeIn("slow");
      popupStatus = 1;
   }
}
 
//This will disable the popup when needed
function disablePopup(){
   //Will only disable if status is 1
   if(popupStatus==1){
      $(".backgroundPopup").fadeOut("slow");
      $(".popupContent").fadeOut("slow");
      popupStatus = 0;
   }
}
 
//Centers the popup to your window size 
function centerPopup(){
   var windowWidth = document.documentElement.clientWidth;
   var windowHeight = document.documentElement.clientHeight;
   var popupHeight = $(".popupContent").height();
   var popupWidth = $(".popupContent").width();
   $(".popupContent").css({
      "position": "absolute",
      "top": windowHeight/2-popupHeight/2,
      "left": windowWidth/2-popupWidth/2
   });
   //this is needed for ie6
   $(".backgroundPopup").css({ "height": windowHeight });
}
 
//Click event controller
$(document).ready(function(){
   //Open the popup and center
   $(".button").click(function(){
      centerPopup();
      loadPopup();
   });
   //Close popup by clicking the x
   $(".popupClose").click(function(){ disablePopup(); });
   //Close popup by clicking outside the box
   $(".backgroundPopup").click(function(){ disablePopup(); });
   //Close popup by clicking escape
   $(document).keypress(function(e){
      if(e.keyCode==27 && popupStatus==1){
         disablePopup();
      }
   });
});

Now if you copy that code and add it to your popup.js file everything will work. This script declares the width of your browser and determines where to put the popup automatically. It also declares the closing abilities. There are three of these you can click the x, push escape, or click outside the popup. There is nothing left your popup should be working great. Now this is a really simple jQuery popup. There are tons of popups out there and tons of ways to do these but most aren’t this easy and light weight on your browser. If you would like to see a demo of this in action you can click here or you can download this demo and mess around with this your self.

Anyone that might use this and find some changes that make it better I would love to see these changes and put them up on the site with you getting credit. Please contact us.

Spread and Share

• 

Position Static

This type of position as said before is set by default. This is the most basic positioning and the simplest to explain. Position static is simply all that it does is follows the flow of the page. Now this might sound weird and you might wonder why it is even a position. This is because it does not get affected by the top, bottom, right, and left properties. This is written like this:

.yourclass {
    position: static;
}

Position Fixed

This position is the next easiest and not really used much anymore. This position doesn’t take anything from the normal flow of the website but conforms to the browser window. All other elements on the page act like the fixed element doesn’t exist. This is written like this:

.yourclass {
    position: fixed;
}

Position Relative

Relative positioning is positioned relative to its normal position. These elements still hold the same normal flow but are able to be moved and can be overlapped. These elements use the space that they are given. These are written like this:

.yourclass {
    position: relative;
}

Position Absolute

The positioned absolute element is position relative to the parent containing element. All other elements act like the this positioned element doesn’t exist. If you do not have any parent container elements with positions then the position is absolute with the parent container as the html tag. Absolute positioned elements can overlap other elements. This is written like this:

.yourclass {
    position: absolute;
}

Understanding Positions

There are a few things that a lot of people have troubles with when trying to understand positions. The hardest thing to learn is how to control position absolute elements. Say you have a set of code like this:

<div class="container-1">
    <div class="container-2">
        <div class="container-3">
        </div>
    </div>
</div>

Now lets say you would like to see the container-2 and the container-3 to be in different areas. Well all that you would have to do is put a position absolute on them and you can move them where ever you would like. The only issue would be that they will use the html element as their container. So what we would want to do is limit them to only be able to more inside the container-1 element. So we would have to add a position relative to container-1. This means that everything inside container-1 will adopt the container-1′s layout or flow. So say container-1 has a width of 500px and a height of 500px, container-2 and container-3 will work inside of the 500×500 box. Also because container-3 is inside of container-2 it will become the dominant element. Meaning it will be on top.

That brings me to the next part overlapping. How to control what overlaps what. This is done by using a css function called z-index. z-index is like a filing system. Whatever element has the higher z-index ends up being on top of everything else. So lets say that we have a page that looks like this:

<div class="container-1">
    <div class="container-2">
    </div>
    <div class="container-3">
    </div>
</div>

Now with this setup we would like to see container-2 on top of container-3 and in the middle of it. We would first have to give container-1 a position relative. Then give container-2 a z-index of say 2 and container-3 would get a z-index of 1. Now with z-index you can use negative numbers and go as high as 2147483647 in most browsers. Now you won’t find anyone using that high of a z-index. Most people stick with a 9999. Meaning that 9999 is the highest that they will go. That give you the ability to have 9999 elements that are on different levels and you can go negatively also. I try to stick to something like 50. Most website are not going to see 50 elements that need to be positioned on top of everything else. Back to our containers. With giving container-2 and 3 a z-index that means that they start creating a pile/stack/order whatever you would like to call it. Because container 2 has a higher z-index it will be on top. So say you want to put a image on top of another image, this would work.

Using positions can get tricky but as I said in the beginning if you don’t need them I wouldn’t use them. They are however a great thing to learn and mess around with. If you would like to try out each kind of position you can go over to W3Schools, they have a Positioning page that you can try out all the types and change the code.

Spread and Share

• 

A Simple and Clean Overall Look

Rather than bombard a website with many flashy animations or over-the-top artistry, sometimes sticking to the basics just works. You want your customers to understand what your business is all about along with the products and services you business provides. If you make the design too complicated, website visitors will get all distracted by those factors and might totally miss the point or message you’re trying to get across.

Take this simple site http://www.gopromotional.com , on promotional gifts for example. It has a nice, clean look and feel to it that is simple and straightforward. With just a quick glance, you can tell what this company is all about. The navigation bar is well laid out, so this is a smooth and easy browsing experience for the user.

Large, Easy to Find Calls to Action

With your business’ website, you want visitors to take action, whether it’s to contact you for your services or to make a purchase through your store. This can be a lot easier if there’s a bit button or image that acts as a call to action. People love images and are easily drawn to these kinds of things as long as they are designed properly. This is where the split testing comes into play.

One great example is this site http://www.privatejetscharter.net ,on private jets. At the top, the navigation bar allows users to go through different topics on private jets, and at the end of each mini description is a call to action to read more on the subject. In addition to that, below the navigation bar to the right is a call to action for a quote on a private jet trip. The button for this is easily visible, and your eyes are naturally drawn to it.

Split Test and Convert

The above examples clearly show how important it is to split test website designs in order to determine which ones have the best conversion rates. This way, you can take your business to another level.

Spread and Share

• 

How To Implement Cool Corners

First of all you must pull in jQuery into your website. The best way of doing this is by linking to http://code.jquery.com/jquery-svn.js in your header or footer link this:

//jQuery SVN Updated Version
<script src="http://code.jquery.com/jquery-svn.js" type="text/javascript"></script>

The next thing that you have to do is pull in Dave Methvin corners script. This can be done by downloading the script from Here. This also needs to be added to the header or the footer like this.

//Dave Methvin's
<script src="Location Of File On Your Server" type="text/javascript"></script>

Adding Final Code

In order to get these amazing different corners to work on your web page all you need to do is call out the classes of the spots you want to activate the corners. Also you need to decide which of the many types of corners you would like to use. Yes I said MANY TYPES. Dave Methvin created this script with many different kinds of corners you can choose from. For Instance Rounded, Beveled, Notched, Bite, Dog-ear, Sculpt, Sharp and many more. You can find all of the corner types at jQuery Corner Demo. Now back to the code, once you have decide on the type you need to add this after the Methvin’s script.

//Some Different Examples
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".YOUR CLASS").corner("10px");
		$(".YOUR CLASS").corner("bevel 10px");
		$(".YOUR CLASS").corner("notch 10px");
		$(".YOUR CLASS").corner("cool 10px");
		$(".YOUR CLASS").corner("curl 10px");
		$(".YOUR CLASS").corner("sculpt 10px");
	});
</script>

Here is a download able and viewable demo of the script in action that I have created. This demo involves all of the above examples.

jQuery Cool Corners: Cool Corners Demo

Download: jQuery Cool Corners (12)

For even more about this great script I would read up on Methvin’s Gallery and also on Methvin’s Demo.

Development And Consulting

Contact Shane Strong for any of your web development, WordPress theme development, Magento development, PHP, and jQuery needs. You can view my portfolio for some of my work.

Spread and Share

• 

Creating The Template File

In you are new to Magento then this will be kind of fun for you. First you need to create your .phtml file. In order to do that you need to navigate to your themes template pages folder. How to find that? Well if you are using the default Magento theme then you would first go to app -> frontend -> default -> default -> template -> page inside of there you will need to create you template file. So let say we want to create a 4coulmn template. You would just add a 4columns.phtml or whatever you would like to call it. Now you may be thinking you are all done. Nope if you go into your Magento Admin Panel or Dashboard and go under cms pages. You will see that you can not select your new template as a layout. Well this is because you need to first tell the Magento xml file to use the template.

Editing The XML

Lets locate those xml files. If you are still in the template -> page directory then all you have to do is go out one directory to layout. If you are not in the directory anymore you will have to navigate to app -> frountend -> default -> default -> layout. Inside this directory you are going to be looking for the page.xml file. Open it and navigate to the bottom. You should find some code like this

    <!-- Custom page layout handles -->
    <page_empty translate="label">
        <label>All Empty Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/empty.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_empty>
    <page_one_column translate="label">
        <label>All One-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_one_column>
    <page_two_columns_left translate="label">
        <label>All Two-Column Layout Pages (Left Column)</label>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_two_columns_left>
    <page_two_columns_right translate="label">
        <label>All Two-Column Layout Pages (Right Column)</label>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_two_columns_right>
    <page_three_columns translate="label">
        <label>All Three-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/3columns.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_three_columns>

Now you need to add your page template to the end of the page.xml file. So you would do something like this.

    <page_four_column translate="label">
        <label>Four Column Page Layout</label>
        <reference name="root">
            <action method="setTemplate"><template>page/4columns.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_four_column>

Once you have added that you should be good to go. If you do not see the layout in the drop down in the cms page area, you may need to refresh your Magento cache. To do this go the Magento Admin Panel or Dashboard and go to System->Cache Management. Refresh all the cache. If that does not work then you need to go back and make sure you have named everything correct.

Website Design , Development, and SEO Marketing

If by chance you are in need of any web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with the biggest web companies in the Lansing Area and some all the way out to California. We would love to hear from you.

Sponsors

Looking for rental properties try Alameda real estate agent.

Spread and Share

• 

Add Your jQuery Scripts

We are going to use Google’s AJAX Library to add our jQuery library to our header. You may ask why we would do this well including the jQuery library from a external source will make less stress on your server and we all know that Google’s servers can handle the stress.

<head>
//Google Hosted
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
//Your Script
<script type="text/javascript">
   jQuery(document).ready(function($) {
      $(".cornerpeel").hover(function() { //Hover Over
         $(".cornerpeel img , .message").stop()
	 .animate({ //Expand the Message and the Hover Image
	    width: '138px',
	    height: '138px'
	 }, 600);
      } , function() {
         $(".cornerpeel img").stop() //Hover Out Go Back To Original
	 .animate({
	    width: '50px',
	    height: '50px'
	 }, 200);
	 $(".message").stop() //Hover Out Go Back To Original
	 .animate({
            width: '50px',
	    height: '50px'
	 }, 180); //This should be a tad faster than the image because IE is known to glitch
      });
   });
</script>
</head>

Create Your Styles

These are your styles and can be changed up depending on where your image is and what size you want to start out with.

.cornerpeel {position: relative;}
.cornerpeel img {
  width: 50px; 
  height: 50px;
  z-index: 101;
  position: absolute;
  right: 0; 
  top: 0;
}
.cornerpeel .message {
  width: 50px; 
  height: 50px;
  position: absolute;
  z-index: 100;
  right: 0; 
  top: 0;
  background: #fffcf9 url(http://www.shanestrong.com/jQuery/cornerpeel/rss.jpg) no-repeat right top;
  text-indent: -9999px;
}

Create Your Corner Peice

This is were you create your hoverable corner piece. This will be placed somewhere in your header area or right inside your body tag.

<div class="cornerpeel">
   <a href="http://feeds.feedburner.com/ShaneStrong">
      <img src="http://www.shanestrong.com/jQuery/cornerpeel/corner_img.png" alt="" />
      <span class="message">Subscribe To My Feed</span>
   </a>
</div>

Your Finished

Well that was it, that is all that you need to create your self a corner peel. If you would like to see this in action you can download my script at the bottom. There is a ton of things that you can do with jQuery that can make your site seem more flashy without having to find a flash developer. jQuery is one of the fastest growing languages around. If you have any tutorials that you would like to publish on my site please go to my contact page.

jQuery Corner Peel: Corner Peel Trial

Download: jQuery Corner Peel (1262)

Website Design , Development, and SEO Marketing

If by chance you are in need of any web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Sponsors

Start saving on printing services today. Visit our website to learn more about booklet printing today.

Spread and Share

• 

How to use jQuery Accordion

You do not have to use this for WordPress, you can use this on almost anything to make more space. Here is how you would go about using the Accordion widget.

Include your scripts

These should go into your head section of your web page.

<head>
//Default jQuery Style Sheet
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
//Google Hosted
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.accordion.js"></script>
</head>

What happens next?

Now you have to create your accordion script. This is going to be hard for anyone who has never worked with jQuery so get ready.

//Your accordion script
<script type="text/javascript">
$(function() {
    $("your_id or your_class").accordion();
});
</script>

That code can either go in your head section or your footer. Ok so I kind of lied about that part being hard to do. But this next part is going to be even harder yet.

//This is where you create you info
<div id="your_id" class="your_class">
//You only need either a class or a id.
//What ever you want to use the Accordion widget
//should have the same HTML element after your class
//or ID.
    <h3><a href="#">This will be the first area's heading</a></h3>
        <div>
            <p>This is your content in area 1</p>
        </div>
    <h3><a href="#">This will be the second area's heading</a></h3>       
        <div>
            <p>This is your content in area 2</p>
            <img src="http://www.shanestrong.com/wp-content/uploads/2009/07/jQuery-hover.jpg" />
        </div>
    <h3><a href="#">This will be the third area's heading</a></h3>
        <div>
            <p>This is your content in area 3</p>
            <p>Another paragraph</p>
        </div>
    <h3><a href="#">This will be the fourth area's heading</a></h3>
        <div>
            <p>This is your content in area 4</p>
            <ul>
                <li>List Item One</li>
                <li>List Item Two</li>
                <li>List Item Three</li>
            </ul>
        </div>
</div>

That is all there is to jQuery Accordion

The only thing left to do is check it out for yourself I have created a page that has all the code. If you would like to just see jQuery Accordion in action you can go to the link below. If you would like to save the page you can just go to it and (Right Click and go to Save Page As).

jQuery Accordion: jQuery Accordion Trial

Download: jQuery Accordion (13)

jQuery Accordion Extras

If you would like to learn more about this great jQuery widget just go to Here

Website Design , Development, and SEO Marketing

If by chance you are in need of any web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Website Design , Development, and SEO Marketing

If you need assistance with web design, web development, search engine optimization, editing, content creation or marketing done to one of your sites please feel free to contact me or Chosen. Chosen is a small, but growing Lansing-based firm offering Web Development, Web Design, Web Hosting, Web Editing, and Web Marketing skills. We have done work for clients and companies, by preference, but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Top Ten SEO Tool List

Search Engine Genie
Website Grader
Google Adwords
Google Analytics
SEO Quake
SiteExplorer
Google Trends
Search Status
seomoz.org
Word Tracker

What The SEO Tool Does

Search Engine Genie – This site is not well known but it has quite a few really nice SEO tools that are free to use and they have a ton of really helpful articles.
Website Grader by HubSpot – I use this site to get a good idea of where a site is and where it might need to be and get to. HubSpot has a paid version of this that has a ton of really great SEO tools. They have a free week trial of the system if I were you I would jump at the trial and see if you like it.
Google Adwords – This is a great way to find out how heavily a keyword is being targeted. I use this when ever i am looking for the really good keyword to get a site going.
Google Analytics – Great tool if you are not using it you are loosing out. My main use for this is to see what is bringing traffic into my site or my client sites. With the name Google behind this you know that you are going to 1 get it for free and 2 get something that is great.
SEO Quake – This is a plugin for Firefox that gives you a ton of really useful info that you need for SEO. I know a few different people that this is the only tool that they use for SEO.
Site Explorer by Yahoo – This is a useful tool for the yahoo search engine. I prefer Google’s Analytics over this because it has more to it.
Google Trand – Great tool by Google this lets you find the trends of the time so that you can find the really good keywords and SEO articles to write for traffic purposes.
Search Status – I really enjoy using Search Status because of its simplicity. I am a Firefox user and this is a Firefox plugin.
seomoz.org – These people really know what they are doing with SEO. They have a ton of free tools and they also have some really great paid tools.
Word tracker – I personally have not used this service but i have heard from a ton of people that they are great. It is a paid service but they do have a free trial.

SEO Packages

If you are in need of any Search Engine Optimization I do have packages and I can teach people how to do SEO. My monthly packages for SEO all depend on how much you want done. I charge $25US an hour. With that my recommended package would be 20 hours a month this will give you the best outcome. Of course the more hours you do the better outcome you will get but at 20 hours a month I can really get enough done to your site that it will show improvement a lot quicker and will make you more money faster. I also have a bunch more different packages and prices for web based projects, you can go to Work Prices.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Practical

Now for a little practical look at SEO. If someone came to me and said I want to be number one for the word Google I would look at you and tell you to talk to this company called Google. Some things are not able to happen. One of the biggest things with SEO is that it takes time. Look at my site for instance I live in Michigan around the Lansing Area. Now I am trying to get to the top for Lansing Web Design, Lansing Web Development, Michigan Web Design, Michigan Web Development, and a ton of other Michigan and Lansing combination’s. Well I am finally getting there after 5 months of hard work. One thing that most people don’t understand is that in order to get to the top for a certain word or phrase you have to beat out the competition. That means you have to do research on what other people do, how they do it, where there flaws are, and how can you beat them.

SEO Consists

SEO and SEM are two totally different things people think that one goes with the other. Well they are kind of right in the fact that they both assist each other. SEM is Search Engine Marketing, this consists of stuff like Google Adsence, Post Writing, Building Backlinks, and a bunch of other things. SEO is mainly focused around Meta tags and search engine submissions. Meta tags are not a really big thing for SEO. That is what people say. Well I feel that they are still a very big thing. Meta tags direct search engines on what to index on your site. There are a ton’s of different Meta tag that you can use in SEO but the most important ones are Keywords, Descriptions, and Titles. The last thing that I will leave you with is that everyone can do SEO and SEM. SEM is a little easier for people because of all the social media places out there. SEO is really hard and takes a lot of planning. I would recommend everyone to leave SEO to the people that consider them self experts. I am not saying don’t try to learn SEO or teach your self SEO because you could become one of those experts.

SEO Packages

If you are in need of any Search Engine Optimization I do have packages and I can teach people how to do SEO. My monthly packages for SEO all depend on how much you want done. I charge $25US an hour. With that my recommended package would be 20 hours a month this will give you the best outcome. Of course the more hours you do the better outcome you will get but at 20 hours a month I can really get enough done to your site that it will show improvement a lot quicker and will make you more money faster. I also have a bunch more different packages and prices for web based projects, you can go to Work Prices.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

jQuery Hover State

So to show you how to do this I am going to use my site under my main post on the homepage I have some of my recent post. Now I want to have the full post area to have a jQuery hover state that changes the background. So I would do this.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing when 
    //going outside the object area
    function out(event) {
	    $(this).css("background", "");
	}
});

jQuery Hover with a click event

If you want jQuery to do a hover state only then that will work for you but if you want to get the a tags href, so that when you click on the object area it will take you to that page. You would have to add this after your jQuery hover code. So now your jQuery code should be.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing 
    //when going outside the object area
    function out(event) {
	$(this).css("background", "");
    }
    //This adds the click event to your object and tells it where to go
    $('#YOURID').click(function() {
	window.location=$(this).find("a").attr("href");
    });
});

This is very useful to get around the IE problem and if someone checks your site they can see that you know jQuery. If you need any help with this just let me know. I would be more than willing to help.

Website Design , Development, and SEO Marketing

If you by chance need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Sponsors

Get your charm bracelets in time for the new year. LusterForever.com features a complete collection of such bracelets.

Spread and Share

• 

First off you have to go out and find a Magento theme. Some of these are quite expensive but come with much more than just your typical free one. The first place I would check for themes is ecommerce-themes they have quite a few really nice looking themes for you to download. After getting your theme, it should come in a zip file extract those on your computer. Inside the extracted folder you should get two folder called app and skin.
The next thing you have to do is add those folders to your Magento installation. This requires you to ftp into your site. The app and skin folders go in different places. The app folder needs to be uploaded to your magento/app/design/frontend/default directory and your skin folder needs to be uploaded in your magento/skin/frontend/default directory.

Magento CMS Manage Pages

Now that you have these folder in your Magento site we have to go through the admin to tell the site to use the new theme. First log in to your admin and go to the CMS tab and them manage pages.

Custom Design Pages

Inside there you will have to change every pages custom design to your new theme name you installed.

System Configure Design

Next you will have to go to the System tab and then Configure. Inside the Configuration section go under Design and change all of the relevant fields to your new theme name. Make sure you save everything and your theme should be up and ready to go.

Magento And Hosting

Something that I would recommend would be getting a server from peer1 hosting. They have managed private cloud servers with vm ware hosting. This will make it easy to work with multiple operating systems and have a great IT support team on call 24/7/365. For more information check out peer1.com private cloud documentation and pricing.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Lets do the easy toggles first

Top To Bottom

I am doing this for the comments section of most WordPress sites. First you have to give the identify what the outer most container is of your comments section. Mine is id comments. So just to the top of my comments section I need to create a button but you don’t have to use a button it is just the easiest to explain. So you should have something that looks like this.

<button id="comments_bottom">This Is A Toggle Button</button>
<div id="comment">
//Your Comment Code
</div>

You will notice that I gave the button a id that is so that jQuery can find it. Next you have to create your js file. I would name it something like toggle.js. It should look like this depending on which way you want your content to toggle.

//Top To Bottom
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({height: "toggle"}, 1000);
	});
});
//Left To Right Or Right To Left
//In order to do either you must float your #comment 
//the direction you want your content to come from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle"}, 1000);
	});
});
//Upper Left To Lower Right Or Upper Right To Lower Left
//These ones you also have to float from the direction 
//they are coming from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle", 
                    height: "toggle"}, 1000);
	});
});

Now all you have to do is call your jQuery script and a jQuery library and your toggle up to down should work. I use the Google library because of how quick it is. You can find more info about the Google library here jQuery Library

Other Ways To Toggle

There are a few other ways to do a toggle like from bottom to top and bottom corners to top corners. There is also some other things that you can do with toggle like fading. jQuery has a lot of really easy and light things that you can do to your site to make it just that much better. If I were you I would take a look at their site jQuery.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Traffic Meta Breakdown

Back in the day all traffic came from your meta tags and your keywords. Don’t get me wrong these are still very useful but they don’t build you as much traffic because of the millions of website out there. To give you an example I would love to be the number 1 site on Google for web design well that really isn’t practical it is possible but when you search web design you get 343,000,000 that is how many pages are being crawled with the words web design. Now I am not saying don’t try to get to the top of the list. Defiantly try but try for something a little smaller like for instance I am from Michigan and so I am trying to get top for Lansing Web Design and Michigan Web Design. If you search Lansing Web Design I am close to the top. Now if I use keywords like that and try to focus on a smaller scale my site will rise on the bigger scale.
Your keyword meta tag is important but you have two other tags that are even more important your title meta tag and description meta tag. Your title meta tag is different from your normal title tag because it is what the browsers look at first and way a lot of their decisions on. The regular title tag is also very important it should be used everywhere that it is possible.

Best Ways To Produce Traffic

Here is a list of some really good ways to build traffic to your site.
1) Submitting – You must submit your site to search engines.
2) Use a favicon.ico
3) Depending on what your site is about submit it to other sites with that kind of material.
4) Have a lot of content. This still has to be good content. Pictures really bring in lots of traffic.
5) Use your META tags effectively. META help
6) Advertise with google or other advertising companies.
7) Use Social Media by talking about your site.

Probably the fastest way to get traffic to your site is pay per click. Yes it is going to cost you but in the long run of things it will be worth it. Some people think that after doing these things your site will just magically appear at the top of Google or Yahoo but it won’t. Building a vast amount of traffic takes time and some times money.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

•