Category: Tutorial

Building Tabbed Navigation using SpryTabbedPanels

June 3rd, 2011 in Tutorial | View Comments

The Tabbed Navigation is the latest trend while designing a Website. If it is blog then you can notice the content titled ‘Featured Content’ or ‘Latest’ arranged in tabs. If it is a Website then there are tabs on top replacing menu items. If coded correctly the tabs give a fresh outlook to your Website, save resources, and present maximum information in less area. In addition, almost every user is familiar with the tabs and their working. Tab, ALT+Tab, and Ctrl+Tab are the most pressed keys on any keyboard on this earth. Thinking to use the tabbed navigation in your Web design then we are here to help you out. Adobe Labs provide access to its SpryTabbedPanels without any cost. Here we’ll guide you how to use the SpryTabbedPanel code to create Tabbed Navigation.

An outer div contains – list of tabs, all panels, div container to have content panels, and div tag for each panel. The SpryTabbedPanels use JavaScript to toggle between the tabs. Therefore, we’ll include the JavaScript code within the HTML tag. To modularize the code, we’ll create a separate JS file and link it through script tag inside head tag. This js file will define the functions related to the Tabbed Panel. Before closing the body tag, we’ll define a script tag to use JavaScript to make Tabbed Panel interactive. We’ll also link a style sheet in the head tag.

Adobe Labs provide the SpryTabbedPanels.js to use with the HTML code. You can scroll down to bottom to download the source files used in this article. Before that, we’ll illustrate the code of HTML and CSS files in this article. We recommend you not to change the file name of js and css files. However, you can modify the code as per your convenience.

In our case, we’ve located JS, CSS and HTML files in the same folder. Please modify the path in code if you’re placing the CSS and JS files in other location.

(more…)

Prepare Yourself For The After Effects of Guest Post

December 3rd, 2010 in Tutorial | View Comments

It feels great once you get a confirmation that your post will be published on a Pro Blog. Hours of hard work finally getting paid off. Isn’t it a feeling of accomplishment? But wait your job is not done yet. There are things you must do even after your post has been published on a pro blog if you really want to succeed in the blogosphere. I have listed down few things in this article. What you need to do can primarily be categorized into these 3 “what to do” sections listed below:

On blog Work

There are several daily weekly and monthly chores you do on your blog. But believe me there’s more when you have lot of traffic to handle. Once your guest post is published you will get overwhelmed by the amount of traffic you get on your blog; which, if not utilized properly can mean no benefit from the guest post. Some of the things you must take care before your guest posts are published on other blogs are:

  1. RSS subscription Setup – One main reason why people do guest bogging is to increase their own blog’s subscriber count. So once you’ve bagged a guest post on a popular blog make sure you have all the possible ways to let your visitors subscribe to RSS setup on your blog. There are many ways people can subscribe to your RSS but there is nothing like email subscription. Work on that before you get your guest post published on other blog.
  2. Bring your best content forward – One other very good reason of guest blogging is making aware of your blog to new readers of the world. You may have been working on your blog for long time and would have got some really nice posts so far. Make sure you highlight those posts to the new visitors. There are many ways to do that but I would recommend two below:
  3. Have a popular posts widget setup on your blog. It shows all the popular posts within your blog.
  4. Most people like associate images with posts because pictures speak thousand words. Setup a rotating banner for posts on your blog. It helps reduce the bounce rate on your blog. One fine plugin to do that is Sponsor Slide Show. I have used it and it’s simply amazing.
  5. Showcase your other Blog Posts – You may have worked with other bloggers and might have published some posts there as well. Its good to have your readers make aware of such work of yours. It increases your credibility in your blog community. People get to know about you more.
  6. Write about your guest post – You have a readership. People read your content so ideally they should read whatever you write and wherever you write. It’s advisable to write about your guest post on your blog. Make your readers read what you are writing. Create a backlink to the original post on your blog with some thoughts on the article you wrote on the other blog.
  7. Blogroll other Blogs – Make sure you have all your and your friends’ blogs linked in the Blogroll. Visitors coming to your blog would want to see what you link to. It also increases your chance to exchange link in your niche. Because they know you can be approached for that.
  8. Social You: In the last 1-2 years social networking has become talk of the town. Every 2nd person you meet is either talking about Facebook, Twitter or LinkedIn. And these websites drive traffic, heavy traffic. A survey conducted by Technorati confirms that twitter and Facebook are the most used social networking site to drive traffic. So you would want to make sure you don’t left out in getting those extra fans and followers. Setup your blog with twitter and Facebook fan page with their links on your blog.
  9. Update your Posts – There will be some articles on your blog which will be near to your heart. You’d remember them your entire life. Update them.

On Guest Blog Work

Getting a post published on a high ranking pro blog is not the end of the story. It’s the beginning. This is where you are supposed to work hard. I have certain points in my mind about that which I have listed down below.

  1. Comment on your post – This is the most important aspect of guest blogging. Its like the holy grail of your personality development on the blogosphere. So make sure you make every effort to reply to all the comments on your guest posts.
  2. Comment on other Authors’ Posts – Commenting on your posts is not the only thing you should be doing on your guest blog. It is advisable to interact with other authors on the blog you got your guest post published. It will build your relationship with other bloggers and increases your chance of getting more and more guest posts. People realize and appreciate your work and invite you to write on your blog. And most important thing, when they see you commenting on their post they come and comment on your guest post. It eventually increases the pageview of your guest post.

On the web Work

  1. Socialize – As per the State of the Blogosphere 2010 50% of the top bloggers around the world use 3 sites (Facebook, LinkedIn and Twitter) to drive traffic to their blogs/sites. Posting is a guest post should not be the end of it. People talk about your content on internet if it’s really good. So responding to them should be your primary goal to earn that credibility in blogosphere.
  2. Forums Posts – A place where everyone can shout their mind out loud. No need to wait for anyone to approve my thoughts. If used properly forums drive immense amount of traffic to your blog. Create a thread about your guest post and discuss it on a relevant forum that you visit regularly. Most forums have a general talk section where you can create thread if the topic of your article is not relevant to the niche of the forum.
  3. Monitor your Blog – Check the referral logs, bounce rate, overall visitors, page views/visit and time spent on site. There is a saying in corporate world. You need to measure things to control them. So start measuring them first to control the matrices on your blog.

Choosing a Hosting Company? Use The Following Criterias

November 8th, 2010 in Tutorial | View Comments

Choosing your web hosting company is a crucial decision. There is no perfect web hosting company. The most important is you choose a web hosting company that works best with you.

It is very hard to find good hosting advice these days. Forums and blogs are filled with paid reviews. Reading reviews on forums doesn’t help much for 2 reasons:

  1. People who have negative experience with the company tend to post way more than people who had a positive experience. It’s a natural inclination, some psychologists call it the ‘negativity bias’ and estimate the impact of a negative experience is 5 times greater than the impact of a positive one. So going by this logic, you are 5 times more likely to tell others (online or offline) if you’ve had a negative experience with a hosting company than a positive one.
  2. Companies pay people to go and post positive reviews on forums. Trust me, I’ve been fooled a lot by unreliable companies who incentivized established users on forums to post positive reviews on them.

(more…)

Pricing Page And Plan Comparison Tables: Tips, Tricks, Advices and Showcases

June 21st, 2010 in Insipiration, Tutorial | View Comments

Pricing and signup page is the key factor to your sales. Pricing pages normally give details on various packages/options and the differences within them. They are there to make visitors clear about the product. Therefore, the design of the pricing page is very important.

Modern sites for web applications, web services and web hosting providers tend to decorate their pricing and signup pages attractive as possible. Tables are being used to compare and shows the various options available. Table is good for comparison purpose and it helps potential customers to make better decision.

Different approaches are being implemented on pricing page. Here, we are going to look into some of the creative approaches for pricing page and product comparison table designs. Also, we will be discussing about tips and advices for designing a creative pricing page. Let’s start with the tips & advices. After all, we will proceed to the showcase.

1. Comparison Tables With Detailed Feature

If you are offering multiple options for your product, and there are significant differences within each package, it is advisable to have a table and clearly list down the detailed features and differences within them.

The table should helps users spot the differences and help them to make decision.

Example: Expression Engine

Expression Engine

Expression Engine has three different type of packages: Core(free), Personal and Commercial. The pricing table clearly explains the modules included, and also term of use for each option.

(more…)

Transparency in Internet Explorer: 6 Simple Solutions

March 15th, 2010 in Resources, Tutorial | View Comments

Transparency in Internet Explorer is always a big issue for all Web Designers. There are a lot of compatibility problems with Internet Explorer 6. We have to design our website base on Firefox/Opera/Chrome, and then try it with Internet Explorer.

One of the major concern about IE6 is the transparency problem. IE6 can’t render transparent PNG image properly. As the result, your transparent and glassy design will become messy in IE6.

Luckily, there are a few solutions which can help web designer overcome the IE6 transparency problem. Each of them uses different method. Today, we are going to briefly look into these 6 methods. Please read the documentation while you are considering which method to use.

1. jQuery.pngFix.js

This solution requires jQuery and ables to work with CSS Backgrounds. To use this method, simple add both jQuery and pngFix plugin at your header section and then activate pngFix on document.ready.

(more…)

Manage Your Blog’s Content with Two Simple WordPress Hacks

December 13th, 2009 in Tutorial, Wordpress | View Comments

It’s amazing that in my own non-scientific poll, half of those who work in some technology field still get the term hacker confused. A hacker is not someone who is leering in cyberspace ready to infiltrate their unsuspecting victim’s computer and pillage any information of use from its hard drive. A hacker is someone who looks for ways to manipulate things to make them work better. So when I speak of hacks for WordPress, I am looking at ways to change the code to make the application work better for us, not how to scrape content or steal log in information.

Hacks vs. Plug-ins

There are many different plug-ins available to help manage content on a WordPress blog so why would we want to mess with the code?

For starters, getting our hands dirty with the code of WordPress gives us a much better insight as to how the software works. As we become more comfortable with the source that powers our blog, we gain a better understanding of how to secure it from malicious attacks.

A second reason to avoid turning to a plug-in as a first resort is that an accumulation of plug-ins causes your blog to become bloated. Eventually, this bloat may begin to affect the way your blog loads and delivers to your audience.

Finally, if you pride yourself on going green or you just want to do what you can for the environment, you may be interested to know that code bloat can unnecessarily burden your server’s CPU. Making your server work harder uses more energy. Cooling a hard working CPU uses even more energy. Reducing code bloat saves energy.

Instead of relying on plug-ins, we are going to look at a few hacks that can help better manage a blog’s content. Each one of these hacks requires a bit of PHP knowledge and the ability to upload to your server.
(more…)

50+ Awesome Photoshop Poster Design Tutorials

November 30th, 2009 in Photoshop, Tutorial | View Comments

We use posters at a lot of places. For example, we have posters for movies, games, events and books. Photoshop is a great application for poster design. With the help of Photoshop actions, filters, powerful features and tutorials from community, we can easily create beautiful poster.

If you are looking for tutorial to design your poster, then you had came to the right place. Today, we are going to share 50+ awesome Photoshop tutorials for designing and creating poster.

(more…)

7 Areas Of PHP You Might Want To Optimize

October 16th, 2009 in PHP, Tutorial | View Comments

PHP is undoubtedly one of the preferred development methods chosen by many to create dynamic web pages. As contents get bigger, there is a real need to manage our PHP codes so that it runs faster. Unfortunately for many beginners, designers and enthusiasts, making PHP codes run faster requires intricate knowledge of the overall infrastructure around PHP. It could be your Apache settings, your operating system, or even the memory of your machine.

But we can start from somewhere. Here are 7 areas of your own PHP code that you can modify for performance.

PHP static Keyword

Usage of the static keyword on functions is often programmer’s first choice for optimization. It allows methods within a PHP class to be accessed without the need to instantiate it.

<?php
class Foo {
public static function staticMethod() {
// put codes here
}
}
Foo::staticMethod();
?>

The process of instantiating an object is always expensive and as we can see here, the function staticMethod() can be called without creating a new Foo object. This optimization could lead almost up to 4 times speed improvement.
(more…)

Extremely Simple Way To Display Delicious Counts For WordPress Users

September 3rd, 2009 in PHP, Tutorial, Wordpress | View Comments

Delicious is the most popular social bookmarking service. If you pay attention on WDB, then you may notice that most of WDB’s articles are being saved more than 100 times by Delicious users.

There are a lot of ways for you to display your Delicious saved counts. But today we are going to show you how to use Delicious API together with WordPress custom field to save and display the Delicious saved counts.

What you need to know before start writing the code?

  1. MD5 – You need the URL’s Md5 hash value in order to lookup its Delicious saved counts. You can read more by reading the PHP md5() function.
  2. serialize() and unserialize(). We will need to serialize the data before storing to the database, and then unserialize them after retrieve from database.
  3. Custom field. We use the custom field to store the Delicious saved counts to the database. By saving the Delicious saved counts to the database, we can reduce the number of calls to Delicious’s API and also drastically speed up your post loading speed. Imagine, if you have 1k visitors per hour, then you will have 1000 requests sent to Delicious per hour. So, we have to save the counts in our database in order to reduce our server load too.

    4. (more…)

Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite

June 17th, 2009 in Javascript, Tutorial | View Comments

News Ticker is a fantastic way to present headlines or minor updates to your readers. The smooth scrolling effect will attract your readers and generate more clicks to your site. I am writing this tutorial as there are readers ask about this after they read my tutorial about content slider.

There are a lot of great tutorials discussing on how to implement news ticker, however most of the tutorials that i found are not really suitable for a beginner. So, i decided to use jQuery and its plugin jCarousel Lite to create a simple yet powerful news ticker.

Why i choose jCarousel Lite? it is because jCarousel Lite is a tiny but powerful plugin. Furthermore, you can easily tweak/configure it to achieve different effects. News ticker is just a sample application for this plugin.

Let’s start to create our news ticker using jCarousel Lite. Download both jQuery and jCarousel Lite before we can start.

news-ticker

Step 1

Let’s create a blank index.htm file, and include jQuery and jCarousel Lite. Also, create a blank style.css file for later use.

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="jcarousellite_1.0.1c4.js" type="text/javascript"></script>
</head>
</html>

(more…)

Page 1 of 212