First of all, you need to know the size specifications for the site you're using. For Facebook, the maximum image height for vertical images is 720 pixels and the maximum width for horizontal images is 960 pixels. If you'd like to size a picture to use for your timeline cover, those exact dimensions are 851 pixels by 315 pixels.
Blog picture width will vary, so try to look it up where you got your template. For example, my photography blog is from ProPhoto Blogs and they specify that my template holds pictures that are 900 pixels wide. The same is true for websites... they each vary so find out from your web designer or the place where you purchased your template.
To start, go to the "image" tab, then to "image size".
First change the resolution to 72 pixels per inch - the web resolution standard (just for your information, 300 pixels per inch is the printing standard). Then if the image is vertical, change the height to 720 pixels and the width will automatically be adjusted accordingly. If the image is horizontal, change the width to 960 pixels and the height will automatically be adjusted accordingly.
The next step is to sharpen...
And there you go! You can follow these same steps to size images according to your blog or website specifications. And they will look awesome!
If you're interested, you can download a free Photoshop web sharpening action at Totally Rad Actions (which is what I use).
