Blog Design

How to put a watermark on your photos- for free, yo.

Hi. I’m a PC. If you’re a mac, you should have a program on your computer to do this. I don’t know what it is or how to use it. If you’re a PC, this tutorial is for you.

Download Photoscape. It’s free. It’s easy to use. I like it a lot. Open it up. You can go into the batch editor (and watermark all at once) or you can just edit one at a time. I like to do it one at a time because then I get to choose where the watermark goes on each picture.  Choose your file on the right side that you want to watermark.

To watermark using TEXT only (easiest): 

From there, click on the “object” tab.


Under this tab you’ll see a “T”  in the second row down. Click on that and it’ll bring up a menu bar like this:

In the blank area, fill in the text you want to watermark with. You can use the name of your blog, your initials, (probably stay away from racial slurs), etc. Choose a color that isn’t going to compete with your photo. Most of the time I choose white. Just for kicks, I chose yellow this time. I like to live it up. Then I play with the opacity a little bit. You don’t want the watermark to be too too noticeable, just enough that people won’t steal your photos and use them for evil. When you like the way it looks, click “ok”.  From there, you can use the arrows on the sides to size it down where you want and drag it to wherever on the picture you want. Click “save” and you’re done. Easy, yes? 
To Watermark Using An Image: 
It’s basically the same process, you just click on the little mountain and sky image on the first row.  Go to the top and click on “photo.” Make sure your watermark image you are going to be using is saved in a PNG file (you can use any illustrator program for this) and that the background is TRANSPARENT. It’ll end up looking like this:
 aaaaand you’re welcome.
Blog Design

How to Create “Pages” tabs out of images

More HTML nonsense from me. I’m working on my other blog (I have a sinus infection and am too miserable to do anything else…) so I thought I’d share how to make the cool tabs above. They’re made out of images that are “hot linked” (I think it’s called) to the pages you create.

Create Pages:
So first, go to where you create your posts. On that page you’ll see “edit pages“. Click on it. Then you’ll see a blue box that says “New Page” click on that as well. It looks like any regular post page, but here you’ll add anything you want people to be able to come back to.  I’ll show you how to do an “about me” page. Anyways, make all of the pages you’re going to want.  When you are done click on “publish“. When you get to the next page, it’s going to ask you how you want to publish it. Click on “No Gadget“.  You’re going to create the gadget. Unless you’re okay with the tabs just being in the font of the rest of your post titles, in which case, do it however you want. You’ve wasted my time.

Once you’re done making your pages you need to know all of the web addresses to them. So after you publish them, go to “View Page“. Then go up to the address bar and copy the address. Open any word processor (I use Word, but even the notepad works) and paste the address. It’s super helpful to do this with all of them so you don’t have to keep going back to them when you create the gadget.

Create Image:
You can use any image you want for these. There are a lot of blog building sites out there where you can get “buttons” or images for these tabs. I really just like using the font itself. Open up your favorite illustrator. Paint works well for this. Since almost everyone has that, I’ll give my example using it. If you use another program, it’s basically the same thing.

If you’re using Paint, make sure you crop the image down to right around the letters. Then save as a “JPEG” file. If you’re using an illustrator program that lets you choose how big your file is, I would choose no more than 1,000 pixels wide for these pictures. You’ll be able to resize them later, but you won’t want the file to be too big because as you try to compress it, it makes it look all jagged with some fonts)

Save to Photobucket Account:
Do this with all of the titles for all of your pages. Now go to www.photobucket.com. Make an account if you don’t already have one. Don’t give up on this tutorial because I’m making you do this step. I almost did when I was trying to figure it out. There’s no other way. I promise. Just do it. Do it now.

After that, upload all of your images to photobucket that you just created. After you save them to your album, it’ll give you a list of codes. Click anywhere in the “HTML Code” and it’ll automatically  copy it for you. Then go to your word document and put the html codes with all of the pages web addresses. Like this:

It makes it a ton easier, I promise. Now for the tricky part:


Creating the Gadgets:
 If you’ve never used html code before, the one thing you have to know that it HAS to be perfect or it won’t work. Go to your “Design” page (top right if you’re looking at your blog home page). Click on the bar across the top under the header bar that says “Add a gadget”.  Click on “HTML/Javascript” . This is where you’re going to enter the code. There’s going to be a lot of copying and pasting. Do not delete the quotation marks and make sure you’re putting your text in between them. Very important.

<a href=”YOUR WEBADDRESS HERE” target=”_blank”><img alt=”YOUR PHOTOBUCKET CODE HERE” ></a>

So it ends up looking like this:

<a href=”http://mostlycopiedcrafts.blogspot.com/p/fa.html&#8221; target=”_blank”><img alt=”Photobucket” border=”0″ src=”http://i1084.photobucket.com/albums/j406/mostlytruestuff/aboutyme-1.jpg&#8221; /></a>

To make sure it looks right, click on “rich text” up in the corner of the popup window you’re working in:

This will show you how the picture looks. Depending on how big you saved the file in Paint (or your illustrator) it might show up huge. You can scale it down by clicking it, then dragging the image.

Go back to where it says “edit html” and repeat the steps with all of your pages.

Then save. They should be laid out across the top of your blog, right under the header, just like mine do.

Centering Pages Tags: 
To center them (if necessary) you need to add the center tags. Before ALL of the text add: <center>
Then after all of the text add: </center> . Click on the “rich text” again and see that they are centered.

Spacing Out Pages Tags:
If your tags are all mushed together there are a couple of things to try. First, go to the “rich text” part in the html box and hit “enter” a few times in between the tags so there are spaces. Click on save and see if that changed anything. If it didn’t, you’ll have to manually add the html code for spaces.

The HTML code for putting spaces is: & n b s p ; But without the spaces (it won’t let me use a text box to show up (the reason for the text boxes is if I enter the code for you to copy, blogger goes ahead and interprets it, so you see whatever I was making- like a space- instead of the code)).

Using “Labels” as pages:
Do you “label” your posts? It’s that little window underneath each post page. You can give your blog posts different categories. If you want to make one or more of those categories a tab under your header (like if you were me and wanted to add one that included every post that I had labeled “Blog design” up at the head of the page) you can. Just click on that link in whatever you have the labels listed (if you do, like in your sidebar…if you don’t have them listed anywhere why on earth do you even have them? Lame sauce. You’ll probably have to go make a “labels” gadget). Copy and paste the web address for that page and do the same like you did any of the other pages. Easy, eh? I should do it with mine, but I’m not going to right now.

Questions? Leave them for me in the “comments” section. You might end up helping someone else, too.

Blog Design

Remove Gray Shadows (borders or frames) around pictures in Gadgets

So you post a picture in the gadget section and get that awesome grey (gray?) shadow around it. You hate it and want to get rid of it. Here’s how.

Go to: DESIGN
then EDIT HTML
click on “expand widget templates”

then hold down control on your keyboard and the letter “f”

type this into the search :
]]>   (you may just want to type in ]] and see if the rest of the code comes up)

right before that copy and paste this code:

.Profile img, .Image img {
padding: 2px;
background: #ffffff;
border: none;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
}

and you’re welcome

Blog Design

Removing gray box around the body of your blog:

I’m mostly just adding these in case I need to go back and remember how to do them. I hate searching for the right clues.

You know that aweful gray (or whatever color it is) box around the body of your blog? Want to get rid of it and get a sleek looking blog like mine? Yes?

Go to: Design
Then: Advanced
Then: CSS
and enter this into the box:

.content-outer
{
-moz-box-shadow: 0 0 0px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 0px #333333;
box-shadow: 0 0 0px rgba(0, 0, 0, .15);
}
click ‘enter’ and you’ll see it in the preview. No more obnoxious box.