Well it is said that content rules the Web, though it does but it isn’t the only thing you should care about. Making a successful quality blog is not an easy task. One of the most important factor is the loading time of your blog. In this article let’s have a look at the various things which you should do to increase the speed of you blog.

Reduce the size of your Sliced Images-

Web designer should take care of its background images and the images used in the site. They should be of optimum size. You can use Puny PNG tool to do this, it is very effective in reducing image size without any quality loss. So whenever you make an image file do compress it.

Manage the external Requests-

One of the most important factors of slow loading of your blog is external requests. External blog requests slow the loading time of your blog. Don’t use any unnecessary widget in your blog. Some of the things like facebook fan page, Digg and Social networking icons like tweetmeme can slow down your blog. So choose wisely and don’t duplicate any of them. This will surely decrease your loading time.

Use a Good Hosting Service-

Well Hosting service is really important factor of your blog’s loading time. If you are hosting your site at good hosts, you will get good speedy blog. Well i have used Wp-web host and ipage hosting. Well also heard a lot about hostgator too.

Use Caching technique-

Caching time is a popular technique used by the Webmasters to increase their speed. You can use Wp-Super Cache to do the work for you. It is easy to install and configure. Wp-super cache create static web pages of your blog so that it can load faster. You can use it to minimize the server load and activate the Mysql Query Cache.

In order to activate Mysql Query Cache-

1. Find Mysql configuration file my.cnf

2. Change the setting of query cache type value to 1.

3. Find the query cache size and change it to 20M.

4. Also change the query cache limit and change the value to 2M.

Use Minify to Compress the JS and CSS-

Minify is a tool to compress multiple JavaScript and CSS. It removes comments and unnecessary space and comments from the CSS and JavaScript. It also provide GZ encoding and optimal client-side cache headers. You can have a look at how minify works.

Before
After

Optimize Your Database Table-

Optimizing your database table can be very efficient in terms of load time. If your database table is big in size then you should optimize it every week. Well it works very good, I use Wp-Optimize plugin to optimize my database table. Besides optimizing Database it also provides features like post revisions and cleaning spam comments.

Well you can use the free Pingdom tool to evaluate speed reports.

Any tip you want to share, feel free to add your comment.

Well those days are gone when people hesitated to use flash in their websites. Flash headers are getting very popular these days, due to its reduced size and animation features. Flash headers can be used in the theme to give it a cool look. Well inserting a flash header in thesis theme is very easy. In this post I will show you how to exactly do it.Inserting the flash into thesis header is very easy. I am assuming that you have the flash file you want to use in the header. Now place the flash swf file in the root folder directory or wherever you want to place it. Now in your thesis options open custom file editor. Copy and paste the code below to add your header function. This will create a header function  as flash_header. Edit the path of the URL to the path of the desired swf.

function flash_header() {
?>
<center><embed wmode="opaque" src="http://URL.com/filename.swf?v=4.6%3A24710" FlashVars="backgroundColor=0xFFFF99&textColor=0x003333&config=http%3A%2F%2Fwww.nablopomo.com%2Fmain%2Fbadge%2FshowPlayerConfig%3F%26size%3Dsmall" width="800" height="166" menu=false quality="high" bgColor="#adce01" scale="noscale" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></center>
<?php
}
add_action('thesis_hook_header','flash_header');

Now copy the CSS to remove the text header. The CSS will remove the text in the header.

.custom #header #logo { text-indent: -9999px; height:3px;}
.custom #header #tagline { text-indent: -9999px; }

That’s it! You’re Done.

Feel free to comment on the Flash headers and queries related to flash on it.

Every Web Designer hates Internet explorer, I too hate Internet explorer for many reasons (especially IE6). HTML 5 and CSS3 are the most powerful techniques of creating a good design but IE can’t handle them. Few tricks can do some work to give a good look in Internet explorer. The hacks like creating rounded corners, embedding HTML5, text and box shadow, Opacity are been given here.

Internet Explorer hacks

Here are few tweaks for Internet Explorer to make your Blog look on Internet explorer:

HTML5 For IE

HTML5 is very powerful, it is the major advancement of HTM: the core markup language of the World Wide Web. most of the browsers handle HTML 5 very good but for IE it can be pretty difficult. It simply ignores the markup. The html5.js can do the work for you. Embedding it can be pretty easy. You can hotlink/add the script anywhere in as shown in example below.

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Text Shadow In IE 6 With CSS

Due to recent implementation of text shadow in Firefox 3.5, it has been in use by every web designer. But this doesn’t work with Internet Explorer. IE-only filter property can create text-shadow quite well. As filter isn’t a standard CSS property so it should be isolated from different codes.

Implementation of CSS shadow effect in IE can be done as below:

p.shadowed {
  text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
  filter: glow(color=#0000ff,strength=3); /* IE */
}

CSS Box Shadow in Internet Explorer

Box shadow can be done in IE with simple codes. It is the coolest trick for creating HTML elements without using alpha channel png images. Saves load time and makes looks very impressive. A real impressive look.

.shadowed{
    box-shadow: 10px 10px 5px #888;
}

But for IE you still can’t get the shadow with the above property. You will have to use filter proprietary property. To implement it, here’s what you have to do.

.shadowed {
    filter:
        progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

Rounded Corner’s in Internet Explorer

Rounded corner’s is an way to get a good looking smooth corners. They are very popular in Web 2.0 because of its easy implementation without the use of images. For those who don’t know here’s an example-

.round{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

For IE rounded corners can be implemented by adding a JavaScript. DD roundies is a small JavaScript which can round HTML elements the way you need. The code can be explained as -

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
  DD_roundies.addRule('.roundify', '10px');
</script>

You can download the JS file from here.

Opacity in Internet Explorer

It is one of the coolest feature used by web designers. Again for IE opacity can be given by filter CSS property that can help to attain opacity. The example can be shown as-

.element{
    opacity:.7; /* Standard CSS */
    filter:alpha(opacity=70); /* IE patch */
}

These are some of the cool hacks in Internet Explorer that can make your design compatible with IE. If you have any question’s feel free to comment.

Choosing the core color of your project can be a easy task but finding the right combinations to match the core color can be difficult. Here’s a list of 20+ tools to choose the matching colors and even suggest the matching color palette when you aren’t sure what are you looking for. The list contains the best color tools web services on the internet which every web designers must know.

ColourLovers-

Color Scheme Genrator-

ColorJack-

Adobe Kuler-

Color Schemer-

Colr.org-

4096 Color Wheel-

Web 2.0 Color Palette-

Color Palette Generator-

Color Hunter-

Genopal-

Color Harmony -

Color Blender -

Color Schemer Online v2 -

Accessibility Color Wheel -

ColorDB -

Veerle’s Topp Daily Color Scheme -

Color Palette Generator -

Colorspire -

ColourMod Konfabulator -

ColorMunki -

You can share this post if you like it, do let us know what do you think about online Color tools.

As a web developer, your main objective is turn your ideas into codes. Well implementation is a difficult task. Online code editors are getting popular these days. These editors can help you with the codes from any computer having an internet access, or even a tablet. Coding is simple and more fun, no need of to carry your software’s where ever you go.

Here is a list of online code editors to make your job easier:

Kodingen

Kodingen is a great online editor tool, it is one of the most powerful tools I have ever worked on. You can create files, folders, connect to your ftp drives, use mysql databases and code. It doesn’t requires registration, though you can register to you its advanced features as SVN repositories, collaborative work, bugtracking tools etc. The most liked thing about the editor is that it supports most programming languages, syntax highlighting, line numbering and much more. A must use tool.

http://kodingen.com/

PractiCode

Practicode is a basic code editor with limited functions. It handles CSS , HTML and Visual Basic Scripts. But its the perfect tool, when you are in a hurry. You can also preview output in a new window.

http://www.landofcode.com/online-code-editor.php

EditPad

Editpad is another online code editor. It is simple and minimal. It is just a plain code editor with no project manager like the kodingen. No syntax highlighting. But work awesome with low bandwidth connections.

http://www.editpad.org/

9ne

9ne (pronounced “nine”) is a online text editor. It can assist you in code editing (specifically HTML, CSS and JavaScript). With syntax highlighting modes (Evoked with M+X XML MODE and M+X JAVASCRIPT MODE respectively).

http://robrohan.com/projects/9ne/

Jsvi

Vi is one of the the most powerful and fast text editor, the best thing is you’ll find it everywhere: GNU/linux distros, MAC and Web servers. And yeah it’s online now, you can find it with JSVI implementation. Many thinks are just the same in the web version.

http://gpl.internetconnection.net/vi/

Jsbin

Jsbin is an online text editor, specially made for JavaScript handling. The interface is really clean and easy. Before implementation it to your project you can preview it and export the code using the text file. If you are a plugin developer, this tool is all you need. It supports implementation of jQuery and Mootools so you can test your plugins too.

http://jsbin.com/

Bespin

Bespin is a web based online code editor with HTML5 standards. Its very powerful and have lots of options. It is limited to registered users, you’ll have to create an account to use the service. It can be added to any kind of projects by just adding the two files in your header.

https://bespin.mozilla.com/

DarkCopy

It is a simple full screen online code editor for distraction free writing. It provides a dark environment for your code so that you can only concentrate only on writing. Switching between the screen modes is easy with a click.

http://darkcopy.com/

If you have something to share or say, add your comment. Happy Editing.!

From the past few weeks I haven’t posted anything. Well all I can say is that I was busy the past weeks, but not on what I expected. This is my first post on WordPress Theme Customization. Well today, I will explain you how to create a dock( though not smooth like Mac) for your theme using CSS. You can easily integrate it into your theme for a cool bubble effect. Using CSS you can simply create the bubble effect in few steps.

First of all prepare your images for sprites, or download the image from here and add the sprites to the custom/images directory in thesis theme i.e copy the downloaded image in the images folder.

Well I used Flash CS3 to create sprites. If you are creating your own images, the sprites should be pixel precise. Well have a look at the sprites:

First we will create get_bubble function and we will add the code to the custom_functions.php for thesis theme.

function get_bubble (){
?>
<ul id="bubble">
<li>
<a href="http://feeds2.feedburner.com/techcrank" title="Full RSS Feed">Full RSS Feed</a>
</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=Techcrank&loc=en_U" title="Feed via Emal">Feed via email</a>
</li>
<li>
<a href="http://twitter.com/shubhamblog" title="Full RSS Feed">Follow me on Twitter</a>
</li>
<li>
<a href="http://www.facebook.com/pages/TechCrank/156882081490" title="Full RSS Feed">I am on Facebook</a>
</li>
</ul>
<?php
}

add_action('thesis_hook_before_sidebars', 'get_bubble');

Copy the codes into your custom_functions.php. Edit the links in the function. If you want to place it elsewhere just edit the hook.

Now adding CSS into custom.css, just copy the codes into your custom.css to create the bubble effect.

#bubble {list-style: none;margin: 0px;padding-top: 25px;padding-left: 22px;}
#bubble li {display: inline-block; margin: 0px;padding: 0px;}
#bubble li a.icon {background: url('images/sprites.png') no-repeat;border: none;display: block;width: 65px;height: 65px;text-indent: -9999px;}
#bubble li a.feed {background-position: -79px -3px;}
#bubble li a.feed:hover {background-position: -2px -1px;}
#bubble li a.email {background-position: -81px -72px;}
#bubble li a.email:hover {background-position: -2px -72px;}
#bubble li a.twitter {background-position: -84px -142px;}
#bubble li a.twitter:hover {background-position: -2px -141px;}
#bubble li a.facebook {background-position: -84px -212px;}
#bubble li a.facebook:hover {background-position: -2px -211px;}

This is the CSS code you need to add for the default background image of links in your custom.css. You can edit it to get the perfect look for your blog.

Adding It to Another Theme:

Adding it to another theme is easy. Just open theme editor and copy the codes into the php file where you want to place it. For example I used sidebar.php

<ul id="bubble">
<li>
<a href="http://feeds2.feedburner.com/techcrank" title="Full RSS Feed">Full RSS Feed</a>
</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=Techcrank&loc=en_U" title="Feed via Emal">Feed via email</a>
</li>
<li>
<a href="http://twitter.com/shubhamblog" title="Full RSS Feed">Follow me on Twitter</a>
</li>
<li>
<a href="http://www.facebook.com/pages/TechCrank/156882081490" title="Full RSS Feed">I am on Facebook</a>
</li>
</ul>

Now copy the above CSS into your style.css. You’re Done.! You can add more links in your function. Well you can add extra style to your CSS to get a different look.

If you have suggestions or any problems placing it, comment us. And we will reply back.

Over the last few months you have noticed that only few sites gracing the bottom of some blogs like mashable. That’s because it was only available for few partners. On Dec 21 Meebo launched the plugin for every one, as they promised. The meebo bar is now available you can grab one for you. The Stylish bar creates a good focus on your blog. Download one for your blog now.

For those who are unfamiliar with meebo bar, it’s a JavaScript plug-in that sits at the bottom of Web pages. It enables a lot of different social integration such as tweets, promoting a Facebook fan page, as well as Stumbling or Digging the page.The Meebo Bar also allows users to chat with their friends through the IM platform that made Meebo famous.Additionally, the Meebo Bar enables easy sharing of content on the page through its very slick Meebo Share Dock.

The bar is extremely easy to set up on blogs, especially TypePad, self-hosted WordPress, Blogger, and Moveable Type, all of which have preconfigured solutions, built by Meebo. For those with other setups, the installation just consists of inserting a code snippit, something to which we have become very accustomed. Users can customize which features appear on their Meebo Bar all on Bar.meebo.com. The changes are then pushed out to the installation on your site in a matter of minutes.

Meebo Bar users get all of the features of the bar, as well as detailed sharing analytics to see how people are using it.

The Meebo Bar is a really great way of enabling a lot of different types of sharing and content interaction very quickly and easily. The sharing that results could, potentially, be a big driver of traffic back to sites. It’s really great to see this rich functionality being adapted into to a “self-serve” type of system. With so many more possible installs out there, the Meebo Bar should see a huge explosion in growth.

Sign up at meebo bar at Bar.meebo.com at get yourself one.

Well share your views, do add your comment here. Share the blog’s that you are running with Meebo Bar.

Wordpress Plugins

A very useful set of WordPress plugins you would like to test. I have scanned through the WordPress plugin directory and found 5 very useful plugins definitely worth taking a look at.

Keeping in mind that they are new to WordPress plugin directory, their stability should be considered as BETA. So do create a backup before going live.

1. WP Content Slideshow:

WP Content Slideshow shows up to 5 Posts in a very nice and powerfull Javascript Slideshow. On the left side of the Slideshow it displays an image for every post. On the right side, there are all the titles (and a small description under the title) of the posts. The Slideshow highlights the active post and repeats automatically after getting to the 5th post. You have a powerfull Administration Area to adjust the category, the number of posts, the width and height, and many colors for the Slideshow!

Download: WP Content Slideshow
Compatibility: 2.6+

2. Sidebar Generator:

Now you can create as many sidebars as you need for any page you want. Thats right, page/post specific sidebars. You can easily seperate your site into sections, or make every single page have specific sidebar content on it. Great for CMS sites.

Download: Sidebar Generator
Compatibility: 2.8.0+

3. Quick Adsense:

Quick Adsense is an Ads management WordPress plugin. It offers a quicker & flexible way to insert Adsense or any Ads code into a blog post. Besides, it can randomly place the Ads anywhere within a post. It comes with a simple setting page, and it does not overwhelm you with complicated customizable options.

Download: Quick Adsense
Compatibility: 2.5 – 2.8.4 (maybe 2.8.5)

4. Members:

Members is a plugin that extends your control over your blog. It’s a user, role, and content management plugin that was created to make WordPress a more powerful CMS. The plugin is created with a components-based system — you only have to use the features you want.

Download: Members
Compatibility: 2.8+

5. Custom Login page:

With the Custom Login Page, you can change the background image of your login page, the background image/color of your login form div, the main logo image of your login page, and add custom CSS. All through a simple interface. Remember to view the Help tab at the top of the settings page of the plugin.

Download: Custom Login Page
Compatibility: 2.0.2+

Have something to say, do comment here.

Adsense For WordPress- Increase Your Adsense Revenue

Placing Adsense Ads in your wordpress blog can be a bit handy if you go with the codes. A WordPress plugin does it all for you. It manages all your Ads including the Yahoo publisher Ads on the fly.

WordPress has many tools which can integrate Adsense Ads in your website. You can manage all your Ads by a single plugin. Just configure it and leave it. You can change positions of Ads on blog/website with a single click.

So you don’t have to cut copy paste your Adsense code again and again. Not cut copy hassles, just add your publisher ID. And select from the Ad Formats. You can style your Ads with rounded corners and can also define a channel to track your Adsense earnings from a particular Ad place.

All in One Adsense and YPN! tool does it all for you. The plugin supports the latest WordPress 2.8 and is frequently updated. The top Adsense plugin for WordPress.

You can also set the Ads to not display on front pages or static pages, category pages or archives. You can choose colors for your Ads. And you can also choose to switch between text and image Ads.

Download the plugin from WordPress plugin directory and activate it for displaying Ads. Do configure it under the wordpress section. You just need top place yo9ur publisher ID and set where you want to display Ads and you are done.

Tip:- I personally use image Ads as they are more effective than text Ads. Use a very neat layout to display the Ads.

If you have some problems or something to ask, just comment. I will reply you back.

Adding A Favicon To WordPress

Add a cool favicon to your WordPress blog in simple methods. Add a  favicon to your blog and help user to remember you easily through favicon when they bookmark. Generally users get attracted to sites very easily having a unique favicon.

Do it in simple steps.

1. Adding a favicon first requires an image which is in .ico format, if you don’t have one just go to chami.com there you can upload any image and get a Favicon image(i.e ico format). You can create a animated image for favicon too.

The best size for favicon is 16.x16px.

2. Now, upload it to some where in your wordpress directory. Copy the address of the image. For ex. if i have uploaded it in root folder of techcrank.com the URL will be techcrank.com/favicon.ico(www folder).

3. Open the header of your theme, generally header.php. Now just below the <head> paste the code:

<link rel=”shortcut icon” href=”http://techcrank.com/favicon.ico”>

4. Save your file, and check back your blog. You will see a favicon inserted.

If you are a newbie another method to insert favicon is adding a wordpress plugin.

Max Blog Press Favicon plugin helps you to insert a favicon without any codes.

Downlaod Max Blog Press Favicon Plugin from wordpress plugin directory and install it to your wordpress through plugins.

In the settings option go to MBP Favicon and upload the image you want to have as a favicon. If you don’t have any image you can also choose diffrent default favicons.

If any issuies, please do comment i will reply back .