techcrank.com » Blogging

How to Decrease the Loading Time of Your Blog- DIY

Shubham — Sat, 10 Apr 2010 18:28:42 +0000

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.

Top 5 Ultimate Internet Explorer Designing Hacks

Shubham — Tue, 09 Mar 2010 15:15:27 +0000

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.

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 -

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.

20+ Color Tool For Web Designers/Webmasters and CSS Geeks

Shubham — Fri, 05 Mar 2010 18:30:38 +0000

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.

How To Access Blocked Sites on Your Network

Shubham — Fri, 05 Mar 2010 03:34:31 +0000

Want to access the blocked sites in your network? Here’s a list of 100+ Working Proxy Websites to connect to a targeted website with a different IP; thus hiding hiding your actual origin. There are many reasons Internet users use proxy sites for, some use to access blocked websites by their college or workplace, some use it to test their scripts for different countries. I used them to test geo-location ads, and block low paying Ad URLs. Surf to blocked sites like facebook, myspace, orkut, gmail, twitter etc.

Here’s my collection of 100+ working proxies to access the blocked websites:

1. http://www.hidemyass.com

2. http://www.anonymizer.com

3. http://www.wujie.net

4. http://www.ultrareach.net

5. http://surfshield.net

6. http://www.guardster.com/subscription/proxy_free.php

7. http://anonymouse.ws/anonwww.html

8. http://www.browser-x.com

9. http://www.spysurfing.com

10. http://www.xerohour.org/hideme

11. http://www.proxyz.be

12. http://www.sc0rian.com/prox

13. https://www.proxify.us

14. http://kproxy.com/index.jsp

15. http://www.brawl-hall.com/pages/proxy.php

16. http://www.proxify.net

17. http://proxy.computersteroids.com/index0.php

18. http://www.unipeak.com

19. http://flyproxy.com

20. http://alienproxy.com

21. http://proxify.com/

22. http://www.unfilter.net

23. http://www.proxymouse.com

24. http://www.surfonym.com/cgi-bin/nph-proxy

25. http://www.superproxy.be/browse.pl

26. http://www.websiteguru.com/mrnewguy

27. http://www.letsproxy.com

28. http://www.fsurf.com

29. http://indianproxy.com

30. http://www.letmeby.com

31. http://Boredatschool.net

32. http://www.ibypass.org

33. http://www.ipzap.com/

34. https://proxify.biz

35. http://kproxy.com/index.jsp

36. http://www.attackcensorship.com/attack-censorship.html

37. http://mrnewguy.com

38. http://www.evilsprouts.co.uk/defilter

39. http://www.proxify.info

40. http://www.torify.com

41. http://www.switchproxy.com

42. http://www.proxifree.com

43. http://www.secure-tunnel.com/

44. http://www.proxify.cn

45. http://www.arnit.net/utilities/webproxy/new

46. http://www.proxify.co.uk

47. http://www.betaproxy.com

48. http://www.proxify.org

49. http://www.proxychoice.com

50. http://www.proxysnail.com

51. http://www.anonypost.com

52. http://www.thestrongestlinks.com

53. http://www.hujiko.com

54. http://www.anonproxy.info

55. http://www.peoplesproxy.com

56. http://www.freeproxy.us

57. http://www.proxyweb.net

58. http://www.nopath.com

59. http://urlencoded.com

60. http://www.pole.ws

61. http://www.browseany.com

62. http://www.spiderproxy.com

63. http://www.clickcop.com

64. http://www.sneakysurf.com

65. http://www.mywebtunnel.com

66. http://www.thewebtunnel.com

67. http://www.3proxy.com

68. http://www.yourfreeproxy.com

69. http://www.proxy7.com

70. http://www.fireprox.com

71. http://www.stupidcensorship.com

72. http://www.letsproxy.com

73. http://www.sneak2.com

74. http://www.cecid.com

75. http://www.freeproxy.ca

76. http://www.ibypass.org

77. http://www.goproxing.com

78. http://www.projectbypass.com/

79. http://www.ipsecret.com

80. http://www.nomorelimits.net

81. http://www.proxify.de

82. http://www.bywhat.com

83. http://www.snoopblocker.com

84. http://www.anonymizer.ru

85. http://www.proxyking.net/

86. http://www.perlproxy.com

87. http://www.proxylord.com

88. http://tntproxy.com

89. http://satanproxy.com

90. http://zombieinvasion.info

91. http://demonproxy.com

92. http://www.myfreeproxy.com

93. http://www.gezcem.com/nph-proxy.pl.old

94. http://mpleger.de

95. http://www.the-cloak.com/login.html

96. https://www.mastercloak.com

97. http://secure88.com

98. http://netplore.info

99. http://www.proxut.com/

100. http://myusproxy.info/

101. https://www.megaproxy.com/freesurf/

102. http://www.boomproxy.com/

103. http://www.sre8.com/

Disclaimer

Some of these website’s get down due to ban of their IP addresses and may go offline for week. I am not encouraging you to use these bypass sites for using banned sites in your college, place etc. Use them with cautions, whatsoever you have done I will not be responsible for it.

Share it if you like this article and do add your comment.

8 Best Helpful Online Code Editors

Shubham — Fri, 26 Feb 2010 22:21:27 +0000

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.!

Bubble Effect With CSS – Thesis Array

Shubham — Wed, 10 Feb 2010 20:17:04 +0000

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 (){
?>


Full RSS Feed


Feed via email


Follow me on Twitter


I am on Facebook



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


Full RSS Feed


Feed via email


Follow me on Twitter


I am on Facebook



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.

Test Your Cross Browsing Compatibility

Shubham — Wed, 13 Jan 2010 14:04:02 +0000

Every Web designer knows that browser differences can create plenty of problems. Finding and fixing out problems is very difficult when you are not equipped with right tools. I faced many problems with Internet explorer and as I did all my work with Mozilla Firefox(every one does), debugging the css was very difficult and time consuming. I Googled some interesting resources for making your browser testing more easier.

Browsershots

Browsershots is a popular free service that will provide screen shots of a page from just about any browser from all of the common operating systems. All you have to do is enter your URL and select the browsers and operating systems that you want to test. Browsershots will then enter your information into the queue, and in a few minutes you should have the screen shots.

There is a paid option that will give you priority over the free requests. When the service is busy it can take a while to get the free screen shots, but you can pay $15 per month for priority processing.

BrowserCam

Browsercam

BrowserCam provides several different services for browser testing. There is a browser capture option that will give you screen shots from any browser and any operating system. There is also a device capture option for working with Blackberry and PDAs. The Remote Access service will test JavaScript DHTML, forms and other dynamic functionality on any platform.

BroswerCam is a paid service with options for daily, monthly, or yearly. They also offer a free trial that will allow you to test the screen capture service by getting up to 200 screen captures within the 24-hour trial.

IE NetRenderer

Netrenderer

IE NetRenderer is a free tool that’s great for testing websites in Internet Explorer, typically the most troublesome browser. With IE NetRenderer all you have to do is choose a version of IE and enter the URL that you want to test, and you’ll instantly get a screen shot of the page being tested.

BrowserCamp

Browsrcamp

BrowserCamp allows you to test the compatibility of your design with Mac OS X browsers. You can quickly enter the URL that you want to test and get a full length screen shot at several different screen widths. Additionally, for full testing you can pay $3 for a two-day subscription, or $99 for a one-year subscription, with a few options in between.

IE Tester from DebugBar

IEtester

IE Tester from DebugBar s a free web browser that allows you to have the rendering and JavaScript engines of IE8 beta 2, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

CrossBrowserTesting

Crossbrowsing

CrossBrowserTesting.com will allow you to test your website, including AJAX and JavaScript. The service is free for less than 5 minutes per session, or you can buy credits for additional minutes. There are no monthly subscription fees, just pay for what you use.

ieCapture

IEcapture

ieCapture is a free tool for getting screen shots from websites in Internet Explorer. It’s very simple, just enter a URL and in a moment your screen shot will appear.

iPhoney

iphoney

iPhoney is a free iPhone web simulator for designers. To use iPhoney you’ll have to download the program, but there is no cost.

Thanks to all the wonderful tools that made my work easier. Well If you have something to share, do add you comment.

Prevent Your Site From Getting Indexed, The Right Way

Shubham — Tue, 05 Jan 2010 20:49:59 +0000

Many websites use robots.txt to block Google to index their pages and thus preventing the pages from showing up in the search engine. But the fact is that robots.txt doesn’t actually do the latter, even though it does prevent your site from being indexed. Before getting back to the explanation why Google does that? Lets have a view at some basic terms involved:-

Indexed / Indexing – The process of downloading a site or a page’s content to the server of the search engine, thereby adding it to it’s “index”.

Ranking / Listing – Showing a site in the search result pages (aka SERPs).

So when the process of indexing to listing, it is not necessary that the site should be indexed to get listed. If a link points to a page domain or wherever, that link will be followed. If you block that page from robots.txt still that page will be followed and will be listed in the search results. Here is what Matt Cutts explains why a page that is disallowed in robots.txt may still appear in Google’s search results.

So if you want to effectively hide any pages from appearing in the search results, you need them to get indexed. When search index those pages you can tell them not to list them. The tag below does that for you.

You need to copy them to all your pages which you don’t want to get indexed by search engines. In WordPress there is a Robots Meta option in the Edit Post page in the right hand side column (under the categories). To not list them in search engines, just select noindex, nofollow.

If you have something to ask or share, do add you comment.

WordPress 2.9 Carmen- What’s New?

Shubham — Sun, 27 Dec 2009 18:25:30 +0000

WordPress 2.9 is released and out for upgrades to the new version named “Carmen”.The version is named after Carmen McRae a jazz singer. This time WordPress is loaded with many new options, so you can have play with many more features. The main features I have actually seen so far are the addition of the “post thumbnail box” in the writing screen, Trash status for posts, pages, and comments (includes restore and permanent delete).

Here is the list of the major WordPress changes made in version 2.9:

Built-in Image Editor- Now you can crop, edit, rotate, flip, and scale your images inside the WordPress. You can use the edit image option in the library to do that for you. Now you can say Goodbye to your paint or photoshop (unless you don’t have too add some effects).

Easier video embeds- It allows you to just copy and paste the url and it magically turns it into the proper embed code, with Oembed support for YouTube, Daily Motion, Blip.tv, Flickr, Hulu, Viddler, Qik, Revision3, Scribd, Google Video, Photobucket, PollDaddy, andWordPress.tv (and more to be added in the next release).

Global undo/”trash” feature- Which means if you have accidentally deleted a post, page or comment you can bring it back from the grave( i.e. the trash). This also eliminates the “Are you sure” messages which used to prompt on every delete.

Batch plugin update and compatibility checking- Which means you can update 10 plugins at once instead of making multiple clicks. The new compatibility data gives you better information about whether your plugin’s are compatible with the latest version of WordPress or not.

You can have a look at the WordPress Codex for more new features.

Well these where my find. Do comment here, what you think about the new WordPress Carmen. Do share things you find new from the previous versions.

Cool Follow Me Gadget WordPress/Website Mash Gadget

Aditya — Tue, 17 Nov 2009 20:49:45 +0000

The Mash Gadget is the cool flash gadget for wordpress. It gives links to your page for 4 major pages twitter, RSS, Email Subscription Feedburner and Facebook.

It can be embedded into sidebar or anywhere in the site to have a cool flash widget so that users can easily go to your pages to follow on twitter and facebook or subscribe to feeds.

It’s basically a swf file with a configuration text file which one can edit to add his or her links in the swf. It’s currently a beta version with limited capabilities, but I’ll surely develop it furthermore in future to give it more features and interactivity.

The gadget currently has a resolution of 275×130 pixels with a background of white color. However it is scalable from both x and y coordinates on HTML editors (taking correct x:y ratio). All the drawings and graphics are vector images rather than raster so they won’t blur when scaling and will always be sharp.

The Mash Gadget is a replica of the widget on the mashable.com. The gadget is a flash version of the widget. We made the HTML/Javascript version of the gadget but it is having some issues with wordpress. The HTML/Javascript version will be available soon. Till then you can have the flash Gadget for your website.

The download link to the mash gadget is here. You need to configure it before it can be used for your website.

The contents on the zip file are:

Follow Panel.swf (The main flash(swf) file)
FollowConfig.txt (Configuration codes)
Readme.txt (Help regarding configuration)

For help regarding anything related to this post or for suggestions or for a request for special modification of the flash file please contact on the contact us section.