How To Make a Bootscreen !

The Art of Making BootSkins
BootSkins are certainly the skinning fashion of the moment. These are replacements for the screen that is displayed when Windows is loading.
Previously, replacing these screens had been a somewhat risky affair involving hacking your Windows application to pieces, but now BootSkin (www.bootskin.com) allows you to replace the screen without risking damage to your Windows installation under Windows 2000 and Windows XP.

Note : The Software Required are Packed and the link to it is given at the end of the turtorial

The software allows you to apply one of the default skins or one downloaded from WinCustomize (http://www.wincustomize.com/skins.asp?library=32), but how do you create one of your own?

Well, it’s actually really easy. All that are required are 2 images and one configuration file. The first thing to do is to design how you want your skin to look when it’s completed.

This is my image as I want it to look. It’s just a tweak of the standard look. What you need to bear in mind currently is that BootSkin only works with 16 color images. There are plans to change this in the future to allow more colors but we must work with what’s available at the moment so keep your image simple.
The two images are the background and the progress bar. The background incorporates everything you see above apart from the blue progress bar in the top right. The box surrounding the progress bar is an optional part of the background image.
A lot of image programs claim to produce 4-bit (16 color) bitmaps but often the format is not quite right without knowing your image editing software well. What is fortunate here is that another Stardock program can help.

SkinStudio (www.stardock.com/products/SkinStudio) is mainly a tool for creating WindowBlinds and other skins but it has a useful tool built in that can help. If you select Tools … Bootskin … Prepare Image from the menu you will launch a little utility specifically for this purpose.
If you “browse” for your image you can load it into the utility.

You should then check the “Dither” option and experiment with the different Resampling and Dithering types to find the closest 16 color representation of your original image. You can then press “Save” and save your background image.

You can then move on to prepare the progress bar. The best way to do this is to start with an existing image to tweak. Basically however, in the BootSkin, you will eventually specify how much space the progress bar will take up and then this progress bar you create will be animated as Windows loads to fill this space.
Here we are using a simple image, which also uses the same 16 color palette as the background.

OK, so on to creating the actual BootSkin.
Under the directory where you installed BootSkin there is a Skins directory. Within this directory there will be a series of folders for each BootSkin installed. To add your skin, create a subdirectory with the name of your skin. I’m creating a directory called StardockEdition. Within that folder I’m going to place my two image files and a copy of an existing bootskin.ini file from one of the other folders.

We’re almost there now. We’ve done the hard work in creating the images. Now, we just need to change the .ini file to tell BootSkin how to use these images. Lets take a look at that file now.

[BootSkin]
Type=0
Name = “XXXXXXXXXXXX”
Author = “XXXXXXXXXXXX”
Description = “XXXXXXXXXXXX”
ProgressBar=XXXXXXXXXXXXXXXXX.bmp
ProgressBarX = XXX
ProgressBarY = XXX
ProgressBarWidth = XXX
Screen=XXXXXXXXXXXXXXXXXX.bmp

Note that I’ve replaced context with a series of XXXXXs. These are the areas you need to change.
Name
Here, simply enter the name of the BootSkin you have created within quotation marks.
e.g.
Name = “Windows Stardock Edition”
Author
Here, enter your own name so you can get the credit owed for your wonderful skin within quotation marks.
e.g.
Author = “_Martin_”
Description
Enter some information about the skin you have created, again within quotation marks.
e.g.
Description = “A simple twist on the standard login to give credit to Stardock’s wonderful software”
Progress Bar
Here, you need to enter the name of the bitmap file you are using for your progress bar.
e.g.
ProgressBar=StardockEditionProgress.bmp
ProgressBarX
You need to work our where you are placing the progress bar on the screen. This represents the absolute left edge of the bar. You can use your source image to work out the location.
e.g.
ProgressBarX = 508
ProgressBarY
This is the vertical coordinate of the top left of the progress bar on the screen.
e.g.
ProgressBarY = 12
ProgressBarWidth
This is how wide you want the progress bar to be. As Windows loads, the Progress bar image that you specified will be moved across this area. Once it has moved across the width of the progress bar you have specified here the progress bar will start again from the left edge of the progress bar.
e.g.
ProgressBarWidth = 118
Screen
Here, you need to enter the name of the bitmap file you are using for your background.
e.g.
Screen=StardockEditionBack.bmp
OK, so here’s the final version of the bootskin.ini file:

[BootSkin]
Type=0
Name = “Windows Stardock Edition”
Author = “_Martin_”
Description = “A simple twist on the standard login to give credit to Stardock’s wonderful software”
ProgressBar=StardockEditionProgress.bmp
ProgressBarX = 508
ProgressBarY = 12
ProgressBarWidth = 118
Screen=StardockEditionBack.bmp

Now that you have edited the file, save it.
If you load BootSkin now, you can see you skin in the list.

Click the Apply button and your skin will be shown the next time that Windows restarts.
The final thing you can do is to share your BootSkin with others. To do this, select your skin, and select File … Export Selected Skin to File. Then, select a name for your file and a location to save it to. You will then have a .bootskin file that you can share with other BootSkin users.

Note That For This Tutorial You Required SkinStudio 4 !
Download Software From Here :
Table Of Content
1.Skinstudio 4
2.Bootscreen 10.3
3.Logonstudio-(Extra)

Compress Your Images To The Last Bytes With Smush It

smushit
If you have followed my posts previously, you will know that I am a fanatic in optimizing my site for the best performance. One of the thing that I do is to optimize and reduce the images to the smallest possible size without losing the visual quality.
If you are wondering why reducing the size of your images can help in the site’s performance, basically the bigger the size of your images, the slower it takes for the server to load, and the higher probability that your server will crash when you experience a traffic spike (like reach Digg front page). In addition, if you are hosting your images on a third party site, like Amazon S3, having a smaller image also mean lesser cost as the charge is based on the bandwidth and storage space used.

Smush.it is a service developed by the Yahoo Exceptional Performance team, aimed to improve the performance of your site. What SmushIt does is to strip all the metadata from the images and compress them using an optimization algorithm that will not only reduce the size, but also preserve the visual quality. When I first used it, I were surprised to see a 30% reduction in the size of the image that I have optimized in Photoshop. Most of the time that I use Smushit, it is able to shave 10-50%, occasionally 80% off the image size.
There are several ways that you can utilize Smush it.

Upload your image

If you have some images in your computer that you want to optimize, you can easily upload your images to Smushit via the onsite uploader. There is no limit to the number of images that you can upload, but do bear in mind that the more you upload, the slower it is.
smushit-upload

Image URL

Instead of uploading, you can also point Smushit to a Web URL (for example, your site) and get it to analyze and optimize all the images in that URL.
smushit-url

Firefox extension

This is by far, my favorite way of using Smushit. If you are using Firefox browser, you can install the Smushit Firefox extension and have quick access to it anytime, anywhere. When you are on a web page (perhaps when you are previewing your post article in your site) and you want to optimize the images on that page, simply click on the SmushIt icon on the Status bar and it will analyze and optimize all the images on that page.
Alternative to the Firefox extension is the bookmarklet that you can place on your Bookmark bar.

The result

Once SmushIt has optimized your images, it will show a report of how many bytes it has shaved off the original images and provide you a link to the zipped files of all the compressed images.
smushit-result

WordPress Plugin

Another thing, if you are using WordPress, there is also a Smushit plugin that you can use. Once you have activated the plugin, all the images that you upload to your site will automatically run through SmushIt behind the scene. There is nothing extra that you need to do. Alternatively, you can go to your Media Library in WordPress and process your existing images with SmushIt.
smushit-medialib

Have you tried out SmushIt? Is it useful to you? Share with us in the comments.

How To Make Any Firefox Add-on Compatible with All Versions

Firefox Icon Sometimes trying out newer versions of Firefox, especially ones that are still in beta, comes at a cost. Since the version you’re running is so new, add-on developers haven’t had the chance to update their add-ons to work with the newer versions.

So this is when you stumble upon an add-on that conveys the following message to you: “This add-on is for older versions of Firefox”.

Fix Incompatible Add-ons

Since your sights are set on using Firefox extensions that keep telling you they’re incompatible with the version you have, and downgrading a version or two isn’t an option, now you can discover a nifty tool called Nightly Tester Tools.

Preview

Ironically this is a Firefox add-on that will help you make all other incompatible extensions compatible with the browser version you’re running.

What’s Next

The first step you need to take is to download Nightly Tester Tools here, if you haven’t already

Next if you still have the extension that was disabled when you upgraded to a newer version of Firefox in your add-ons menu, then you will go to Tools/Add-ons and right-click on your disabled extension, then choose Override Compatibility.

now it will ask you to confirm your selection by clicking Force Install.

Bonus Features

Here you thought it was the end of this add-ons story but actually there are a few other features that this extension allows you to take full advantage of.

With Nightly Tester Tools you’re also able to take screenshots of any webpage and save them in JPEG format. You can easily restore tabs from a previous session if it just so happens that your PC froze and you didn’t have time to properly close your browser window.

Bonus

Feel free to test all other Nightly Tester Tools features and let us know how you like them in a comment below!

How To Show/Hide Text Using JavaScript Toggle Method

Show/Hide

For this method there are two steps, one is to add a code to the template <Head> </Head> region, so that you can use this anywhere [in posts, as well as widgets]

Then the second part of the code has to wherever you want to display text / images in this way.

First Step:
Log in to Blogger, go to “Layout”, click on “Edit HTML” tab.
Now find for this code: </Head>

Then immediately BEFORE this code, paste this:

<script language=”javascript”>
function toggle() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
text.innerHTML = “hide”;
}
}
</script>

Second Step:
Now wherever you want to show this type of text, add code like this:

<a href=”javascript:toggle();” id=”displayText”>Show/Hide</a>
<div id=”toggleText” style=”display: none;”>This is Hidden Text</div>

here’s the method to add this hack two times in your blog !

Once you have done the process described above, do this:

Third Step:
Log in to Blogger, go to “Layout”, click on “Edit HTML” tab.
Now find for this code: </Head>

Then immediately BEFORE this code, paste this:

<script language=”javascript”>
function toggle2() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
text.innerHTML = “hide”;
}
}
</script>

Fourth Step:
Now wherever you want to show this type of text, add code like this:

<a href=”javascript:toggle2();” id=”displayText”>Show/Hide</a>
<div id=”toggleText” style=”display: none;”>This is Hidden Text</div>

Similarly you can add any number of times, by changing the code in red to toggle3(), toggle4() etc.
But if you add it many times, then it may slow down your blog !

Add Your Sign Below All Posts In Blogger / BlogSpot Blogs

If you are using Blogger, and want to show your signature below all the posts, then you can do this in two possible ways: either add it in an HTML/JavaScript widget with the image of your signature or you can directly edit the HTML template of your blog. The second approach is recommended, as the first one may increase the loading time of blog.

In both the methods, first step is common and important, i.e. to get an image of your signature,.For this, either you can
– draw it and scan it, or
– draw it in MS paint / Adobe Photoshop or any other image editing software and save it, or
– (Recommended) Use MyLiveSignature, and type the letters (use capital letters wherever required), and continue: select font, size and color for the sign. Save / download the image.

Now upload it to either Pages.Google.com or GigaImage.com or HotLinkFiles.com, to get direct link of the image(your sign).
You will get a link like this:

http://ANY_WEBSITE.com/images/MY_SIGN.jpg

Now put that link in this code:

<img src="YOUR_DIRECT_LINK_HERE" />

Replace the code in RED color with the direct link of your sign image.

This is the second step, which has two choices (second one is recommended):

1. Adding the sign to HTML/JavaScript widget:

Log in to Blogger, go to Layout, click on Add a Gadget -> HTML/JavaScript type.
Now copy the above code and paste it here. Save the widget, then drag & drop it below the blog posts widget.

2. Adding the sign to the blog’s template.

Log in to Blogger, go to Layout, click on “Edit HTML” tab and click the radio button “Expand Widget Templates“,and find (CTRL+F) this code:

<data:post.body>

And immediately BELOW this, add the above code. And save the template.
That’s it…

It will be displayed like this:

Embed Text Resizing Widget To Increase or Decrease The Font Size

As you know, that some visitors prefer reading in small text size while others prefer larger, depending on their eye power, screen resolution, and monitor distance. So for those visitors, you can place a convenient widget to increase/decrease the font size easily.

Look the example below:
Change Text Size

+ + + + +
Or this one:

Change Text Size:

Small
Medium
Large
Larger
Largest

If you want to use any of the abve widgets, use this code:

Change Text Size<br/>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’.5em'”><span style=”font-size: xx-small;”>+</span></a> <a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1em'”><span style=”font-size: x-small;”>+</span></a> <a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1.5em'”><span style=”font-size: small;”>+</span></a> <a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’2em'”><span style=”font-size: large;”>+</span></a> <a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’2.5em'”><span style=”font-size: x-large;”>+</span></a>

And to use the second one, use this code:

Change Text Size<br/>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’.5em'”><span style=”font-size: xx-small;”>Small</span></a>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1em'”><span style=”font-size: x-small;”>Medium</span></a>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1.5em'”><span style=”font-size: small;”>Large</span></a>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’2em'”><span style=”font-size: large;”>Larger</span></a>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’2.5em'”><span style=”font-size: x-large;”>Largest</span></a>

If you want you can add this by HTML/JAVASCRIPT

or If you Want to appear this in the post than
Goto Layout > Edit HTML

And check Expand Widget Box

and search for <data:post.body/>

Then If you want it to appear on the top paste the code above <data:post.body/>

If you want it to appear on the bottom paste the code down the <data:post.body/>

And At Last Save It Over Enjoy !

ASCII Text Generator

Before blogging, I used to upload files on RapidShare and earn points with it to get premium account. It was really a great job to earn for my pocket money.

If you are a RapidShare uploader, you might have seen the ReadMe files where users write their website’s name in different styles. Here is a JavaScript code with which you can create your own beautiful ASCII text easily.

Description: “With
this wizard, you can generate your own ASCII (a.k.a. plain text) logo for your
web site. These logos are ideal if you want a catchy page header but don’t want
to have to deal with the loading time of an image or an ActiveX object.”

Important: If
you intend on putting your text logo in a standard html document, surround it
with opening and closing <PRE> tags to avoid common distortions.

Example:

Submit To All Social Bookmarking Websites At Once

Being a webmaster/blogger, after writing every interesting article you would like it to be added in as many of the popular social bookmarking websites as possible. But presently with more than 100 of these websites, the whole work of writing the same description and adding the same article-link again again everywhere, becomes too boring and almost impossible.

But now you have a website/tool – SocialPoster.com to make the process quite easier. You may be having the buttons like “AddThis” or “AddToAny”, but this website is very different from them because through this website, you have to type the url and the description only once and then simply start adding it to the large number of social bookmarking websites, available alongside.

Sites included in the list are:
Digg.com, Propeller.com, Reddit.com, Del.icio.us, Stumbleupon.com, Socialogs.com, Indianpad.com, Google.com/Bookmarks, Technorati.com, Slashdot.org, Getigadget.com, Furl.net, Diigo.com, Wirefan.com, Bibsonomy.org, Blinklist.com, Blogmemes.net, Bluedot.us, Myjeeves.ask.com, Simpy.com, Backflip.com and many more.

Logo Text:	Logo Style:
	Preview Text Style