One of my most popular tutorials tells how to disable right-click at your site. However, several people have commented that while right-click is disabled at their Blogger blog, people are still able to left-click their pictures, which opens the picture in its own window from which the visitor can then download (steal) the picture.

I have the solution for your problem.  First, because people have asked, let me state that even if there was a way to do it, you would never want to disable left click.  Without left-click ability, links (including navigation links) would be useless, and you would lose readers faster than you can say boo.

The reason people can left click on your pictures and download the photo that appears that way is because when you upload an image Blogger automatically links your post image so that clicking on it brings up the image by itself.  You can fix this by doing the following for each picture. (I’m sorry there’s not a quick and easy fix that I know of.)

1. After you have uploaded the picture into your post, click on the Edit HTML tab of the writing area.
2. You should see code at the top of the page that looks something like this:
<a href="http://yoursiteurl.com/yourpicture.jpg"><img alt="S7302723" src="http://yoursiteurl.com/yourpicture.jpg" width="184" align="left" border="0" height="244"/></a>
3. Delete the following sections:
<a href="http://yoursiteurl.com/yourpicture.jpg">
and   </a>
Those are the parts that make the image into a link.
4. MAKE SURE you leave the img section:
<img alt="S7302723" src="http://yoursiteurl.com/yourpicture.jpg" width="184" align="left" border="0" height="244"/>
5. Preview your post.  If your image is still there and does not go to a separate page when you click on it, you did everything correctly and can
save your post or continue writing it.

You will have to make changes to each of your already published pictures individually, but if you really don’t want people to be able to bring them up on a separate page, it would be worth it.

Please let me know if you have any questions or comments regarding this tutorial. I’d be happy to help you in any way that I can.

*To view all of the posts in this series, either click on the following link, or type Blogger Tutorials into our search box.*

My last tutorial (it can’t possibly have been nearly 4 months ago when I published it!) told you how to use a non-Blogger font in a post.  But what if you want all of your posts to be written in a non-Blogger font, or what if you, like Daniel, want to change your blog title’s font?  It would be a big pain to have to code each post individually!  There is a much better way to change your universal fonts: change them in your blog’s template.

Important: Before I divulge the secret, please note that specifying a font does not necessarily mean that your reader will see that font.  A font will only be visible to a reader if they have that font already installed on their computer.  Have fun with this new trick, but make sure you specify several fonts to give your readers the best chance of seeing your blog as you intended.

On to the good part.  Here are the steps needed to change the universal fonts to something other than the default Blogger fonts:

1. Login to your blog and go to Layout.
2. Click on Edit HTML.
3. Find the variables section.
4. Find the variables that have font names.  You can change any or all of these. 
   Example – the Blog Title Font:
   <Variable name=”pagetitlefont” description=”Blog Title Font”
   type=”font” default=”normal normal 200% ‘Calisto MT’, ‘Bookman
   Old Style’, ‘Baskerville Old Face’, ‘Book Antiqua’, serif” value=”normal
   normal 200% ‘Calisto MT’, ‘Bookman Old Style’, ‘Baskerville Old Face’, ‘Book
   Antiqua’, serif”>
5. (still using the example) Change the fonts in value=”normal normal 200% ‘Calisto MT’, ‘Bookman Old
   Style’, ‘Baskerville Old Face’, ‘Book Antiqua’, serif” to be want you want.
   Remember to specify several fonts so that visitors who don’t have one font
   can view it in another.  End with serif or sans-serif, depending on what
   type of fonts you chose.
6. Preview your changes.
7. If you like what you see, save your changes.

Please feel free to leave your questions and comments in the comments for this post or to contact us directly.

One of my most popular posts at The Porch Light is where I talk about discovering how to use in a post a font other than the default Blogger fonts.  Apparently, a lot of people want to know how to do that.

Before I divulge the secret, it is important that you know that specifying a font does not necessarily mean that your reader will see that font.  A font will only be visible to a reader if they have that font already installed on their computer.  Have fun with this new trick, but realize that not everyone will know that you have used it.

On to the good part.  Here are the steps needed to change a portion or even the whole post into a non-Blogger font.

1. Click on the Edit HTML tab for your post.
2. Insert your cursor directly in front of the first word that you want to be in a different font.
3. Type the following: <span style=”font-family:occidental, georgia, ‘times new roman’, serif”>
   
   Note: You should replace the font names I used with the names of the fonts you want to use. Names with multiple words, like Times New Roman, should be enclosed in single or double quotes, and I recommend specifying several fonts so that if your viewers’ computer doesn’t have the first font (or second), it they have additional options.  I also recommend having serif or non-serif as your last font in case none of the fonts you chose are installed on your viewers’ computer.
4. Now place your cursor directly after the last word you want in the special font and type </span>.
5. Click the Compose tab to see how it looks.
6. If you like it, publish your post.

If you want to write the whole post in a different font, simply place the code from step 3 at the very beginning of you post and place </span> at the very end of your post.

Please feel free to leave your questions and comments in the comments for this post or to e-mail them directly to revka@designsbyrs.com.

My next tutorial will tell you how to change your template HTML so that your whole blog is written in a non-Blogger font.  Until then, happy blogging!

Questions or comments? Just share your thoughts in the comments, and I’ll be happy to be of service.

I’d like to thank Amy for asking me about this. As I told her, I had never had anyone request this feature, and I have acquired new knowledge because of her question. I must also thank Text*Snippets for providing this code.

If you wish to protect your images from theft, you will be interested in these instructions. This is not a fool-proof method; there is no such thing. However, disabling the right-click function will deter many would-be image thieves, and because this is not javascript, it will work even if your reader’s browser is not javascript enabled.

1. Go to the Edit HTML tab.
2. Find the <body> tag. (Scroll down to the end of the CSS code but before the <div> code starts showing up. You should see </head> followed by <body> on the next line.)
3. Change <body> to <body oncontextmenu="return false">.
4. Preview your changes. Right clicking should do nothing.
5. Save your template.

It really is that easy!
Please let me know if you have any questions or comments regarding this tutorial. I’d be happy to help you in any way that I can.

*To view all of the posts in this series, either click on the following link, or type Blogger Tutorials into our search box located at the bottom of our sidebar.*

We often get questions about how to customize your post footer links (the links under your posts) and and dates. The most common questions are: How do I delete the time stamp? How can I change “comments” to something else? How do I change time stamp and date? Usually the answer is; go to Settings and find it there.

There is a much easier way to answer all those questions now: Go to your Layout page – Page Elements- Click Edit on Blog Posts.

Let me show you what it looks like:

This is the first thing you will see. *Image size fixed*

* Go to your dashboard- Layout- Page Elements- Click the Edit button on your post widget.

It should look like the image to the left.

Once you have clicked edit a new window will pop up and show you the following screen;

As you can see I have numbered the options that comes up in the new window.

1: This is the number of posts that show up on your first page. Remember that the more post you have on the front page the longer your blog will take to load, especially if you add images to your posts. A good number of posts on the front page is usually 6-10.

2: This is where you change the way you want your date to be displayed, if at all.

3: Don’t like how it says “posted by” after each post? Change it to something else!

4: Time stamp- keep it or delete it.

5: Comments- Change the wording comments to something more fun!

6: Want people to see who link to that special post? Tick the box. If not, do not tick.

7: Labels; you can change the wording to soemthing else if you like and choose if you want to chow labels after each post.

8: Want to be able to quickly edit your own posts? Tick the box! You will see a pen after each post.

9: Want others to be able to email your post to themselves? Tick the email icon.

10: Show ads in between posts. This is a really nice feature that comes with new Blogger. You can insert your Adsense in between posts. Tick the box and it will expand into this;

Here you can decide how often you want to insert Adsense between posts, what colors you want it to be and format.

You can see a preview of what it would look like.

You also have the option of switching Adsense account if you want to. Otherwise it will show you how to add one if you do not already have one.

So what does it look like now when we have made some changes?

Lets take a look at what it looked like from the beginning:

After we changed it a little it now looks like this:

As you can see it is quite easy to change and customize your Blogger posts.

Want to learn more on how to customize your Blogger template? Revka has written guides on How to Change Your Borders, Leaving comments using Open ID and How To change Background Colors. And we have more coming up!

Like this post? Leave a comment and feel free to link to this post and help other Blogger bloggers customize their blogs.

I think it’s high time I added another tutorial to my series Blogspot 101.

The border tutorial was a big hit, and I am happy to have been able to help you spruce up your design. I have had many requests for a tutorial detailing how to create an image border. I will get to that eventually. That can be a complicated task requiring a lot of tweaking.

Several people have asked how they can have their background one color and their content area another. That is actually quite a simple task, and I will show you how to do that in this tutorial.

1. From your dashboard (I’m assuming you’ve already logged into your blog), click on Layout.
2. Click on Edit HTML.
3. Scroll through the code until you see the section that begins with the word body.
4. Under that line, look for a line that begins with “background:” (the word and the colon, not the quotation marks). If that line is not there, simply add it. Make sure to add the colon after the word background.
5. To change your page’s background color, you will need to insert a color code, which is the pound sign (#) followed by a six digit/letter code. For this example, I will use, #000000. That is the code for black. (You can find web-safe color codes at Page Tutor or WebsiteTips.com. WebsiteTips.com also offers free color schemers and color palette tools.) After you type in the code, finish with a semicolon. Your line of code should look like this – background:#000000;
6. Next, you need to change your content area background color. Scroll further down in the code until you find the section that begins with outer-wrapper.
7. Follow steps 4 and 5, but change the color code to #ffffff. That is the code for white. Your line of code should look like this – background:#ffffff;
8. Click on Preview. If you have done everything correctly, your page background should be black (or whatever color you specified), and your content area should be white (or other color).
9. If everything is correct, click on Save Template.

Let me know if you need any assistance implementing this tutorial. Happy tweaking! *smile*

Since Blogger recently made changes to their comment form, I thought I would fill you in on how to use the updated form.

There are three ways to post a comment on a Blogger blog.

1. Logging in

I actually think this is a pretty good change. You can log in with your Blogger/Google, AOL/AIM, LiveJournal, TypeKey, or WordPress.com account, or you can use Any OpenID. Click the circle to the left of Sign-in … ; then click the drop down box, choose an account type, and fill in the additional field that appears. You will be taken to a login page. Your blog or website name will appear at the top of your comment and will link to the website associated with your account. When you are done, click publish.

2. Using a nickname

This is my favorite way to leave a comment. It’s faster than logging in, you can put whatever name you would like, and you can choose whether or not to link that name to a URL. To use this option, click the circle to the left of Nickname. Fill in what you would like to appear as your name. (I often use “Revka of RS Designs” for my nickname.) If you want to link your nickname to a website or blog, fill in the URL field with the appropriate information. When you are done, click Publish.

3. Retaining your anonymity

I’m not very fond of this option. My experience has been that many people choose this option in order to leave a negative comment without revealing their identity. In my book, that is the coward’s way out. However, I have seen this option used in other ways, and it is there, so I will go over this choice as well. This one is the easiest option to use. Simply click the circle to the left of Anonymous and then click Publish.

Now you know how to leave a comment at a Blogger blog using whichever method you choose.

Questions? Comments? Let me know; I’d be more than happy to be of service to you.

I had to pick somewhere to start, and the first thing I thought of was borders. Borders are pretty simple once you get the hang of them, and they can really enhance your blog. I am always changing the borders on my blog – removing all or parts of a border, widening a border, changing the style, or adding borders.

I am going to try to make this tutorial easy to understand by using screen shots in conjunction with written explanation. If at any point I lose you in my explanation, please leave me a comment so that I can clarify that point.

For my example, I am going to start with the Minima template. Here’s a screen shot. (Click for a larger view.)

Without any changes, this template features two complete borders around the header, a dotted partial border between each blog post, and a dotted partial border between sidebar widgets. I have circled the borders in yellow and have an arrow pointing to each one for good measure.

I am going to remove the header border, add a double border around the whole content area, and change the style of the border between the posts and comments. Here are the steps I need to take:

1. Click on the Edit HTML tab on my dashboard.
   
2. Scroll down to the portion of the code that starts with
   /* Header
   ———————————————–
   */
   
3. Find the code for the outer header border. It is in the #header-wrapper section, which is where styles are specified for the entire header area. (There are also smaller header sections, like the description area, that have their own styles.)
   
   Notice that there are three parts to the border code: the line width (specified in pixels – this example has a width of 1px), the type of line (this example is a solid line), and the color (this example uses the Blogger variable $bordercolor, but you can also use a six-digit color code, such as #000000, which is black.)
4. There are two ways to delete this border: I can either entirely delete that line of code, or I can set the border width to 0 or to “none”, effectively making it disappear without deleting the code. I prefer the latter method simply because if I ever decide to put the border back in, I need only change the pixel code instead of having to type that whole line back in.
   
   Here is what my blog now looks like:
   
5. I still want to get rid of the remaining header border. So I scroll down a little further, looking for header code that says border. I find it under #header, not very far from the #header-wrapper section we just edited.
   
6. I repeat step 4 with this line of code, too, changing the border width from 1px to 0 (it is not necessary to put px after 0). Here is what my blog looks like now – the borders are completely gone from the header. Success!
   
7. Next, I want to change the style of the partial border separating each post. (Here is a link to allowed border styles with explanations about what each style does.) I want a dashed border instead of a dotted border. Since I know this is the post area, I scroll down to find that section of code.
   /* Posts
   ———————————————–
   */
   
8. I look for the line of border code and find it under .post.
   
9. Notice that this border code specifies border-bottom. That is a handy trick to know: to create a complete border, just state “border”. However, you can create a partial border by specifying a certain section of the border: border-top, border-bottom, border-left, or border-right. I still want this border to come at the bottom of the posts, so I will leave it as border-bottom. However, I want to change the border style from dotted to dashed, which is a very simple change to make.
   
10. Here is the result of that change (I changed the border color variable to black so that you can see it better):
    
    Notice the difference between the border I just changed and the border separating elements in the sidebar. That one is still dotted.
11. Next, I want to change that sidebar border. For kicks, I want to change it to a double border. First, I need to locate the code. I know it will be in the sidebar section of the code.
    
    Sure enough, there it is.
    
12. Changing a dotted border to a double border is only slightly more complicated than changing a dotted border to a dashed border. With a double border, you need a width of at least 3px to ensure that there is space between the two lines. A width of 1px only allows one line to show, and a width of 2px makes the double line appear to be one thick line. 3px will give you separation between the two lines, and you can experiment to see how wider widths will affect the end result. I’m setting my border to 3px double.
    
13. Here’s the result:
    
14. We’re almost done. All I have left on my wish list is to add a double border around the entire content area. First, I need to find the container for this area:
    /* Outer-Wrapper
    ———————————————– */
    
15. This time, there is no border, so I am going to have to add my own line of code to make a border. First, I need to decide where it needs to go. There are three sections under Outer Wrapper: #outer-wrapper, #main-wrapper, and #sidebar-wrapper. If I didn’t already know where I need to add the border code, I could figure it out by process of elimination. I don’t want a border around just the sidebar, nor do I want a border around just the main section where my posts are. That leaves only the outer-wrapper. This is where I will add my code.
    
16. Remember, there are three parts to border code: width,type, and color. I want a double border 4px wide the same color as my other borders. So I need to add this line of code:
    border: 4px double $bordercolor;
    
17. Here is the result:
    
    You can see that I have accomplished all I started out to do: “I am going to remove the header border, add a double border around the whole content area, and change the style of the border between the posts and comments.”

If I were making these changes for real, I would also add some padding at the top and bottom so that the double border would show up better, and I would probably widen that content area. However, we can talk about how to do those things later. This tutorial was only about borders.

As a recap, here are important things to remember when customizing your borders:

• Border code begins with the word border.
• There are three parts of code needed to create a complete border: width, type, and color.
• There are several different types of borders: solid, dotted, dashed, and double are the ones used in our example.
• You can create complete borders by starting your line of code with the word border; you can create partial borders by starting your line of code with border-top, border-right, border-bottom, or border-left.

I hope that I made sense and that you have learned a bit more about borders because of this tutorial. Your comments and questions are appreciated.

I know that many of you would like to be able to customize your blog but simply don’t know where to begin. I have decided to share with you some of what I know about customizing your Blogger blog. This will be an on-going series, and I plan to publish the first tutorial this week. If you have a particular question you would like me to address, just let me know, and I will accommodate your request as I am able.

*To view all of the posts in this series, either click on the following link, or type Blogger Tutorials into our search box.*