Using Tab Panel Div can be very usefull in your website. It can save you lots of space. Consider the Tab Panel at ourhappymoney.com. It use Tab Panel to show Latest post, top post, best pick post, and post tags. It only uses one space for four items. To create the Tab Panel Div in your wordpress blog, here’s you need to do:
- Get the script for Tab Panel Div. You can find it at http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm. The page shows three version of Tab Page. For this example, we will be using the first type. Follow the steps there. You will need to download one css file, one js file, and four images.
- To use it in your wordpress, there are a couple of things to do. First you need to upload all files in your wordpress theme folder. If you are using ‘web-seo’, then you need to upload the files to folder: “wp-content/themes/web-seo/”.
- Include the js and css in your theme. Open your header.php of your theme. If you are using “web-seo” theme, then insert the following code before </body>. The code is used to include css and js file. Change “web-seo” in the code with the theme name you are using.
- Edit your files to show the Tab Panel Div. In the sample blog, the code is inserted at index.php file
If you have trouble on applying the code or questions, please use the comment below.
