Online Car Repair Estimates

Posted by Mrs. M on July 19th, 2008

I found this news story through VistaNews newsletter. It’s a terrific news letter (e-zine) full of great tech articles.

The news story is about RepairPal.com. It sounds terrific!

RepairPal, which went live roughly three weeks ago, culls data to determine how much every car repair will cost based on the region. RepairPal licensed information on how much it takes mechanics to repair something from an undisclosed data provider. The company will also alert users to what other parts may need to be replaced when getting a specific service.

Unfortunately it’s true– when it comes to car repairs, most of us are at the mercy of the auto mechanic. I don’t like that. When I have car problems, I’ve always done a search first, but it’s been like finding a needle in a haystack to find something relevant about my repair. This looks like a great site to bookmark!

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Quick Tip For Printing with MS Word

Posted by Mrs. M on July 14th, 2008

I do a lot of printing. I print worksheets for my children’s schoolwork. I also have a small business where I need to print out all my expenses and profits every month. UGH! I used to like paperwork, but now… lol. Anyway, I have this problem where sometimes a small portion of my information prints out on a second sheet of paper. Paper is becoming very expensive (I remember when I could get a ream for $15, and now it’s $40!). I’m always looking for tips and other small business opportunitites to save me money or time.

Here’s a terrific tip I found for saving a little bit of money when printing documents in Microsoft Word. I use an older version of Word, so the details may be different for your version. The option will still be there, you’ll just have to look around a little.

I click File>>> Print Preview

Choose “Shrink to Fit” button.

When you do this, Word will automatically tweak the page (the font size, the margin space, etc). Of course, if you don’t like it, go to Edit>>> Undo, and it will take you back to where you were.

Cool idea, huh!

Hat tip WXPNews.com, a great website!

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Extract Images from Microsoft Word

Posted by Mrs. M on July 10th, 2008

Before I had image-editing software, and before I knew what I was doing, I used to paste all my images in Microsoft Word. But after saving it, I had NO IDEA how to get the image onto, say, a web page. My image had been essentially locked by Word.

I came across a helpful blog post explaining how to extract images from Word.

Just open up the Word document, then go to file> save as option and save the document as a web page. This will create a new document with the images in a separate folder with the same name. Go into the folder and you will get 2 version of the image, one is in .jpg and the other is in .png.

The .jpg will be the smaller size and the .png will be the original size. If you like to use the original image since it is much larger to view but wanted in different format, just open up your image viewer and save the image in the format that you prefer.

I haven’t tried this yet, but I will. It looks like it would work perfectly. It’s a handy tip!

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Usint Drop Caps for Blog Articles

Posted by Mrs. M on June 27th, 2008

Here’s a terrific tutorial I found for using drop caps for your blog posts. I have been wanting to do this on one of my blogs for quite a while! It’s for Blogger blogs, but saavy bloggers could figure out how to do this with Wordpress. I am going to tinker with it! Drop Caps look so classy. :)

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Extend Your WiFi Signal Range

Posted by Mrs. M on June 12th, 2008

I have a wireless DSL modem in the house. I have been unhappy with my very weak WiFi signal in my bedroom upstairs. I had heard that there’s an easy way to increase WiFi signal range, and I found this entertaining video about how to make a homemade “parabolic reflector” with stuff around the house. This looks cool!

The template these guys are referring to is this one. I’m going to try this and see if this fixes my problem. I’ll be sure to give a review when I do it! Now if only making Adirondack patio furniture was so easy!

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

How to Capture a Screenshot

Posted by Mrs. M on May 18th, 2008

I was asked to explain how one captures a screenshot of your computer desktop. Believe it or not, it is extremely easy! :D And very fun.

Simultaneously press “ctrl” and “PRTSC/SYSRQ” on your keyboard. This essentially copies what’s on your desktop to your clipboard. What’s needed now is how to paste your copied content into a document. This is where things get varied, because not everyone has the same software.

The most basic graphic program is Paint. It’s not terribly sophisticated, but it will do the job. You can also download a plethora of free editing programs, like Irfanview or Paint.NET. I have a tutorial on using Irfanview here, and I have written something up about making small thumbnails here. You can find Irfanview for free by doing a search at download.com.

I use PaintShopPro, because I like to crop my graphics. Irfanview does not crop images, but it does resize them. Paint and Paint.NET do crop images; they resize images but I think Irfanview does a better job with resizing.

OK, so I’ll just tell you what I do, and you can choose your software program and take it from there.

I make a copy of my desktop image. I then crop the image so I only get what I want in the photo. Then I resize the image to, usually, about 180 width (about how wide my sidebars in my blog are). I then sharpen the image for clarity.

Then, I upload my little graphic to Photobucket. They have a cute little editing program, too. I use this to build a picture frame around my graphic, and I save it like that. And this is what I wind up with:

Photobucket

As always, if you have any questions, leave a comment or email me via the contact form, and I’ll try my best to answer your questions in a timely manner.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

SmartFTP Tutorials

Posted by Mrs. M on May 17th, 2008

Do you have your own blog on your own domain, or manage a website? I have to admit, for a long time I was in the dark about ftp and such. I actually am still learning the ropes, after finally taking the leap into my own domain several months ago. I use a variety of ftp programs, but tend to like SmartFTP more than FileZilla. For the longest time, I had no idea what I was doing! a lot of what I have learned has been trial and error. Emphasis on the error, lol.

I found, by pure accident, some excellent tutorials for SmartFTP users. They are flash movies, and are really good. So if you use SmartFTP, or are even desiring to learn the ropes of ftp, these tutorials may help; they are here.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Frugal Hacks: Blogroll in a Scrolling Box

Posted by Mrs. M on April 13th, 2008

I was recently asked to help configure the burgeoning Frugal Hacks blogroll into a scrollbox. I have a thorough tutorial about how to do that here, but for ease (since most Frugal Hackers are very busy moms), I thought I’d just post the whole code right here.

<div style="height:250px; overflow:auto;">
<p class="sideheader">Frugal Blogroll</p>
<a href="http://frugalhacks.com/?page_id=65"> **join here**</a>

<script src="http://rpc.blogrolling.com/display.php?r=ae7cadbf39b863c96fca9f4c21d0d51e" language="javascript" type="text/javascript"> </script>
</div>

If you post that code into your sidebar, you will see this:

Frugal Blogroll

**join here**

Now, the width of the scrollbox goes with the width of your sidebar. It will not be as wide in your narrower sidebar. You can change the height to be anything you want. 250px is what I like, but the font in your sidebar may be larger, and thus a longer scrollbox may be required. Experiment a little.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Did You Make It?

Posted by Mrs. M on March 10th, 2008

How did the time change go for you all this morning? I have noticed that with all the electronic gadgets everywhere, keeping up with something so seemingly simple as a time change can be very, very hectic. Is it just me, or does it get worse every year?!

I love this site I found, Retrevo. It is the do-all end-all place to go for everything Daylight Saving Time, and more. Here’s the scoop from the site about DST:

Last year (2007) was the first time in 20 years that new days were established for changing to Daylight Saving Time. Chances are you survived last year’s change to Daylight Saving Time on March 11th and then back to Standard Time in November. The problem is unless your device was upgraded to use the new dates your clocks will not change automatically on the right day this year, the second Sunday in March (March 9, 2008) and your clocks may then mistakenly try and adjust the clock on the old date which was the first Sunday in April (April 6, 2008).

I hadn’t considered the April “reset” settings that some gadgets might have! Gulp! I’ll have to watch for that! We are constantly accumulating more and more electronics that require specified settings. Don’t have the time to fiddle with the gadgets and *hope* that you get the time settings correct? Check out Retrevo for tons of manuals for your electronic device. I LOVE their easy search feature! This is an outstanding site to bookmark. For future reference, I have placed this site in my “Help” sidebar widget. Use this site for when you need a manual!

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

How To Create Your Own Page Template for Wordpress

Posted by Mrs. M on February 6th, 2008

I have a Wordpress-based travel blog, New York Traveler.net, and I utilize Google Maps as an interactive method of mapping my travels and for easy reference. Google Maps are great because you can do so much with them, and you can customize the size you want to put the map on your blog. So I put my New York Travel map on a separate page on the blog. Yet I was only able to put a small portion of my map on the page, because all my blog’s pages have the basic blog’s template header, footer, and sidebars. I wanted to keep the header and footer, but I didn’t want the sidebars and I wanted the map to expand the entire width of the page.

I only wanted to have this style for just that one map page– all my other pages I still wanted the sidebars. There was nothing in the Wordpress options that enabled me to change the page’s style for only this one page.

I am pleased to say that I figured it out! It wasn’t terribly difficult (trial and error). It helped immensely to do a little research. I’m hoping that this technique can help you somewhat. Obviously, unless you have the same Wordpress theme that I have, your results may differ. But the basics are very similar. If you are comfortable with doing a little coding, this will come easy.

I’m going to direct you first to this Wordpress tutorial about Pages, from their documentation site. Read it and understand it.

Second, read this tutorial I did on how to add text to a category page. You might not be doing this exact thing, but the concept is pretty much the same. Because what you are going to do with Pages here is you are going to create a new .php file with code in it, and upload it to your server. It’s the same general idea, and I think my tutorial will give you that added edge of know-how that may help you avoid a slip-up later. It’s brief and concise, so check that out.

I am assuming that you have some knowledge of working with coding and that you are familiar with making pages in Wordpress. Let’s get down to business.

When you write a page, you have the option of choosing a different template to display it. Look for yourself. Go to your Wordpress dashboard and choose “Write” and then “Write Page.” Look in the sidebar on the right. Do you see a choice that says “Page Template”? There’s a dropdown menu there. I had some things in there, but they didn’t do anything. Once we create and upload our special page template, it will appear in this dropdown menu; so remember this.

Page 1

I’m going to give you instructions on building a new page template leaving the header and footer intact, just as I did with mine. Because there are so many, many ways to design a page, I’ll leave all those design decisions up to you! I wanted to retain my blog header and footer, and just remove the sidebars and widen the post box. There are certainly ways to remove or add whatever you want. But that’s a whole ‘nother ball game! For this tutorial, I’ll just show you how I made my own page template the way I wanted it, and you can take the information from there and explore your other options. The Wordpress forum is a great place to start for more information.

OK, so… open up Notepad (or your favorite code editor– I like Notepad Pro+). Copy the following code:

<?php
/*
Template Name: Travel Map
*/
?>

…and paste it into the Notepad document.

You are going to change the Template Name to something you yourself choose, but before you do, go to your Wordpress Dashboard, to your Theme Editor page (”Presentation” and “Theme Editor”). Here’s hoping your Wordpress theme has something called a “Page Template.” It might be titled something different, but it should have the “official” name “page.php.” This is pretty universal for Wordpress. Click to view the page.php file. This is what mine looks like.

Page 2

Copy all that information and paste it into your new Notepad document underneath the code I had you put in it already. Save the document and name it something you’ll remember– just be sure to name it as a .php file. For example, I named my page Travel Map.php. This is the special template I am using for my Travel Map. Whatever you name it, make sure it is unique. DO NOT name it with a name that may be another Wordpress file! Even if you have to name it something weird like Snarfer.php or Special page template.php, that’s fine. It will easier to locate later, too. Be careful and be sure you don’t name it after another Wordpress file! It could mess up your files.

Now, go back to your Notepad document and get rid of the “Travel Map”– unless you really want to name your new Page template that, lol. Give it that name that you have chosen

This here:

<?php
/*
Template Name: Travel Map
*/
?>

should now be something like this:

<?php
/*
Template Name: WHATEVER-YOU-ARE-NAMING-YOUR-PAGE-TEMPLATE
*/
?>

So you should have your Notepad document saved as a unique .php file, with the information you copied and pasted from the regular page.php file. If you were to upload this file and use it, there would be no difference between this and all your other pages. Let’s change things a little. First, here’s an example of the file I had:

Page 3

With my own Travel Map page template, I wanted to keep the header and the footer, and just remove those sidebars. This would enable me to fit in a huge Google map. All I did was change the code. Look at the image below.

Page 4

You can see that all I changed was

<div id=”primary-content”>

to

<div id=”content” class=”widecolumn”>

You are almost done! Save this Notepad document and upload it into your Wordpress files. This file needs to go into your Theme folder, whichever theme you use. For example, I used my FTP program and put this file in public_html/wp-content/themes/unamed-one021-b. The folder “Unnamed-One 021-b” is the name of my theme; funny, huh? I love the theme despite it’s weird name.

Page 5

OK, once your file is uploaded, you can go back to your Wordpress Dashboard area. Go to your “Presentation” and “Theme Editor” page and make sure your new .php file is listed there. If it is, all systems are go and you can start using your new special page template! Go to “Write” and “Write Page” and check the dropdown menu on the right. You should see it there. Choose that, and your new page will have that new design!

Page 6

This coding that we did removed the sidebars and widened the post area. You can see the live demo at work– go to my blog’s home page here and you’ll see the sidebars. Go to the special Travel Map here and you’ll see no sidebars.

For additional coding and design help, refer to the Wordpress document about pages that I mentioned earlier. I found it helpful and no doubt you will also.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

How To Put Blogrolls in a Scrolling Box

Posted by Mrs. M on January 29th, 2008

I have a few blogrolls, and some are extraneously long. One way to harness long blogrolls is to insert the code into a “scrolling box.” The scrolling box is merely some html code that tells the computer how to show the text.

ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE

The code for this is actually looks like this:

<center><div style=”border: 1px dotted blue; overflow: auto; height: 100px; width: 270px; color: red; background-color: white;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

You can change anything you want to customize the scroll box. Here, I tinkered with a little of the code:

ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE

Which is the code here:

<center><div style=”border: 5px solid black; overflow: auto; height: 150px; width: 350px; color: blue; background-color: gray;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

Let me break down the html code in a language you can understand. It’s very easy, and I’m sure you’ll get the hang of it very quickly. Let’s take the tags one by one.

The first tag you see is <center>. This is the opening tag that determines text align. Think of an opening tag as the beginning of a story. You need to have an ending, too. If you look at the last tag, you’ll see </center>. There it is. This is telling the computer to show everything placed between those two tags to be centered within the space it’s placed. If you don’t want your scroll box to be centered, just remove those opening and closing tags. The scroll box will move to your default text align position.

The next tag you see is <div style=”. This is another opening tag. Look for the closing tag that matches it. </div>. The brain of the scroll box goes between these two tags. If you are missing the opening or closing “div” tags, as we call them, then your scroll box will not work. It’s kind of like the “skin” that holds the “guts” inside. Well, that’s how I think of it, lol.

Also, see those quotation marks– the ones that start after div style=” and end with white;” ? You must keep all your information within the realm of those quotation marks, as you do with the div tags. This is the way your computer reads the code. If your scroll box isn’t working properly, always check your code to make sure the quotation marks, semi-colons, and div tags are complete. More often than not, when code doesn’t work, the cause is usually a missing tag feature.

OK, now let’s tackle the fun stuff inside.

In my scroll boxes, I have borders of varying width and color. You can easily change these, or eliminate the border.

border: 1px dotted blue;

can be changed to border: 3px solid black; or to border: 1px dashed yellow;

You can be creative, but remember to keep it basic. Your choices for the border width are measured by pixels (px). Your color choices are simple (no magenta or chartreuse here), and your choices of style are solid, dashed, or dotted. Or, you can enter “none” and have nothing there. For example, change this:

<center><div style=”border: 1px dotted blue; overflow: auto; height: 100px; width: 100px; color: red; background-color: white;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

to this:

<center><div style=”border: none; overflow: auto; height: 100px; width: 100px; color: red; background-color: white;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

to get this:

ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE

Next in the html code you’ll see height: 100px; width: 100px;. These determine, obviously, the box’s height and width. You can change this to be anything you’d like, within the bounds of the code you’re putting your box in (for example, of your sidebar is only 200px wide, your scroll box won’t work properly if you make it 300px wide).

Next you see: color: red; background-color: white;. The first color determines your text color. The “background-color” determines the interior box color. Again, basic colors work best here.

Finally, your TEXT! Where do you put your text? Easy to see, right?

>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE

You can make a list of links using code (manually), or some blogroll networks give you a javascript text to insert. Just put your text or javascript code between the > and the </div>. It should all work!

P.S. Unless your text is really large or long, a scroll for the scroll box may or may not appear. Depends partially on your blog coding and partially on other’s browsers. All the text that you insert should appear, though.

Use Buzzfuse* to easily rate, review, and share this item

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Great Blogger How-to Blog

Posted by Mrs. M on January 1st, 2008

MilehiMama over at Mama Says is asking for help with a new ‘do. Template tutorials are always difficult over long distances (like the Internet), but there are thousands of people with websites who can help. I was sifting through my free Blogger templates links, and found a very nice and simple Blogger tutorial. Check out Blog Flak for some really great lessons and how-to’s on basic template techniques. The site hasn’t been updated in a while (life and writing tutorials with pictures sure can consume time; boy, do I know that!) but what is there is very good.

I’m hoping Mama gets a really smashing (not crashing) new template– her site will look like a million bucks when it’s over, I’m sure!

P.S. Her posts are very good! Check it out.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

How To Customize Your Header in Blogger- a Thorough Guide

Posted by Mrs. M on December 15th, 2007

A customized header is not difficult. You just need to know what you are doing. Because templates vary, header widths and heights vary. You’re going to have to find your templates’ allowance for the header width and height and make a header the same size– or– make a header and adjust your template’s width and height measurements.

Neither one is difficult. However, if you are brand-new at this and are worried you’ll wreck your template, you can back up your template by downloading it to your computer (and uploading it if you want to revert back to it). If you don’t know how to backup your template, go here for a quick tutorial.

I am assuming that you 1) have a new header already made and 2) that this new header is in the dimensions according to your template. For example, if your template has an existing header that is 950px wide and 167px high, you need a header that is 950px wide and 167px high. 3) your new header is already uploaded to a photohosting website.

Another thing is… your template may not even have a header. I have had templates that had nothing about a header, because all it had at the top was space for your blog title. There are ways to change that, but that is a whole different tutorial and goes beyond the scope of this post. You’d have to build a section of html code within your template to make a header. It’s up to you; but if it was me, I’d just get another template with a header, so I could adjust it. It’s so much easier.

So, before you continue on in this tutorial, you should have:

  1. created a header in the pixel dimensions for your template
  2. uploaded your header onto a phothosting website
  3. made a backup of your existing template

OK, with your template saved and your header ready to go, it’s time to get our hands dirty.

Sign in to Blogger and go to your dashboard. For the blog you want to change, choose “Layout.” This will take you to the Layouts page, showing many options. The page you automatically go to is “Page Elements.” You’ll see other pages, like “Fonts & Colors,” “Edit HTML,” and “Pick a New Template.” Choose “Edit HTML.”

You can see the guts (the html code) of your blog’s template in the window, below where it says “Edit Template.”

What you need to do is expose more of the code than is showing. You do this by checking the “Expand Widget Templates” checkbox. The page will reload.

Now, in this window, scroll down and look for this line of code:

<!– begin header –>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’HTML6′ locked=’true’ title=” type=’HTML’>
<b:includable id=’main’>

It is usually right after the

</head>
<body>

part of your template.

Here’s a tip. Your browser has a search function built in it, using CTRL + F. If you press the CTRL key and the F key, a little window will pop up (for Internet Explorer, a separate window pops up; for Firefox, a section of the status bar enlarges). Type in the word “locked” and click “next” or “search.” Keep clicking until you find the string of code I specified above. This will find your code much quicker than scrolling through endless symbols. There are several areas in a template that have the word “locked” in it, so be sure you have the correct section. Like I said, every template varies slightly.

You are basically looking to unlock your header. So this keyword “locked” will be in an area that determines information about your header.

Once you’ve found the code, changed the word “true” to the word “false.” For example, if your code says this:

<!– begin header –>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’HTML6′ locked=’true’ title=” type=’HTML’>
<b:includable id=’main’>

Change it to say this:

<!– begin header –>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’HTML6′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>

What you are essentially doing is telling Blogger that you want to be able to remove the Blogger header. You want to get rid of the old header and put in your new customized one. Save your template changes by clicking “Save Template.”

This part of the template work is done. Go to the page that says “Page Elements.” At the top, see where your header is located? (Right below the NavBar). Click on the “edit” link. A new window should pop up.

A new window should pop up. What you should see now is a button that gives you the option to “Remove Page Element.” This is the result of that html coding we did in the template.

The next step is to remove this page element. You want to get rid of the old Blogger header and put your own in here. It is very easy– but I’ll admit that I still tread very carefully when I do this. But there is really nothing to be nervous about, because you can always add the old header back: just click “Add a Page Element.” When the window pops up, scroll down and you will see the option to add a Page Header. See?

So, now that you have dumped the old “Page Element” header, You’ll want to create a new Page Element. Go ahead. Don’t worry if you don’t see at option to add a Page Element in the header area. Just pick one from the sidebar. When the new window pops up, choose “HTML/Javascript.” This will enable you to link back to the header image on your photohosting site, with the added bonus of making your new header linkable to your blog’s homepage.

Here’s what my code looks like:

You’ll need to change a few things here. For example, my header image is hosted at Photobucket. When people click on my header, I don’t want to direct them to Photobucket! I want them to return to my homepage. So you’ll need to change your code as I need to change mine. This is what I did. I changed this:

<a href=”http://photobucket.com” target=”_blank”><img
src=”http://i201.photobucket.com/albums/aa84/mrsmecomber/
headerimage.jpg” border=”0″ alt=”Photo Sharing and Video Hosting at Photobucket”></a>

To this:

<a href=”http://mightytemplatetester.blogspot.com”><img
src=”http://i201.photobucket.com/albums/aa84/mrsmecomber/
headerimage.jpg” border=”0″ alt=”Mighty Template Tester”></a>

I just changed the URL to direct the header’s link back to my blog’s homepage. I also got rid of the target=”_blank” coding because this would only reload my blog’s homepage into another browser tab or browser window. The reader would find that very annoying. Finally, I changed the text from Photobucket hosting to something more appropriate for my blog.

Once you have the code configured, save the changes.

Now return back to your “Page Elements” page in Blogger, You’ll probably see your new header (called “HTML/Javascript”) in the sidebar! You have to guide it to where it belongs. Drag the box up toward the header. get it in the right spot, and it will drop in. When you’ve finished, click the orange “SAVE” button near the top. View your blog and you’ll see your new template header, complete with a link back to your homepage!

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

How To Backup Your Blogger Template

Posted by Mrs. M on December 15th, 2007

If you plan on doing any html work in your Blogger blog, it is wise to backup your template. Here’s a very quick and easy way to do it:

Sign in to Blogger and go to your dashboard. For the blog you want to change, choose “Layout.” This will take you to the Layouts page, showing many options. The page you automatically go to is “Page Elements.” You’ll see other pages, like “Fonts & Colors,” “Edit HTML,” and “Pick a New Template.” Choose “Edit HTML.”

You’ll see an option that says “Backup/Restore Template.” Underneath, it says “Before editing your template, you may want to save a copy of it.” This is what you want to do. Click the link “Download Full Template.” Choose a safe place, like My Documents, to store this file on your computer’s hard drive.

If you make a mistake or don’t like the work in your new template, you can always come back to this page and upload the file you stored. This will take you back to your template.

Now, I have uploaded, downloaded, copied, and pasted a lot of templates. I have noticed that when I do a complete template change with a non-Blogger template, Blogger wipes out my widgets. Therefore, I recommend that you save all the information in your widgets before switching to a new template. I regularly save the information in them, anyway, as a precaution.

Note that just changing a few things in your existing template does not wipe out your widgets. And changing a Blogger default template (for example, you had Minima and now are going with Blogger’s Rounders) does not wipe out your widgets, either. It only occurs when you switch to a different, non-Blogger template.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

How to Add a StumbleUpon Button to your Blog

Posted by Mrs. M on December 9th, 2007

I love StumbleUpon. It’s a type of social network, but of websites, not people. Created originally as a Firefox addon, it has expanded into a whole community meetinghouse. There’s a great toolbar you can download at the StumbleUpon site. You can start up an account with StumbleUpon, choose your interests, and surf websites under those topics. But it has a catch:

StumbleUpon will only take you to the websites that have been submitted by StumbleUpon users.

So, there are gaps. If users have not submitted a good deal of, say, travel blogs, then the surfing of your interest in travel blogs will be quite brief. I posted about this here, at my travel blog.

At the StumbleUpon website, you can download the handy toolbar and learn all about it there. I’m here to show you how to install the StumbleUpon button to each and every post in your Blogger blog. If you have a different kind of blog (like Wordpress), do a Yahoo! search and you’ll find a plethora of tutorials to help you there. Or you might find this helpful.

What you need to do is tinker with your Blogger template here. The first thing you need to do is get the SU button and download it. You need to upload it onto a photohosting service in your own account (say, Photobucket). You can find an assortment of buttons here at SU’s site.

If you have an old Blogger blog, there are some good instructions here. But if you have a New Blogger blog, those directions won’t work for you.

Once you’ve got your SU button uploaded, go to your Blogger Layout page. Click “Edit HTML.” Look for the small checkbox that says “Expand Widget Templates” and check it. The page will reload right away. Now, before you start changing your template, be sure to save it. Click on the link “Download this template” and save the file to a safe place in your computer. Should your template tinkering go wrong, this template can be uploaded and you’ll have your old template back. (It is also a good idea to save any important widgets you have. Blogger wipes out widgets whenever you change your template).

OK, so in the template html code box, you’re going to carefully scroll down, maybe halfway or so, looking for this line of code:

<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
<div class=’post-footer’>
<p class=’post-footer-line post-footer-line-1′>

Below that area, put this in:

<!– StumbleUpon Button Begin –>
<a expr:href=’”http://www.stumbleupon.com/submit?url=”+ data:post.url + “&amp;title=” + data:post.title’ target=’_blank’><img alt=’Stumble Upon’ src=’YOUR_STUMBLEUPON_PHOTO_URL_HERE’/></a>
<!– StumbleUpon Button End –>

Where you see the YOUR_STUMBLEUPON_PHOTO_URL_HERE, put in the URL of the little StumbleUpon button you’d uploaded to your photohosting site. Be sure is is inbetween the apostrophes in the code above, and be sure it begins with http://

Before you click on “Save Template,” click on “Preview” so you are sure you have the button just where you want it. Now, everyone’s template is different. If the button is in the wrong place for you, try putting the StumbleUpon button code in a different (but nearby) area. Because I have a photo of my signature at the end of each post, and I wanted my SU button after my signature, I had to paste the code below the URL for my signature.

When you are sure you have things just as you like, click on the “Save Template” button and the changes will be saved and made permanent.

It is not hard to add a button (or anything) to the code. For me, the hardest thing is getting it exactly where I want it, because I am picky.

Now, whenever anyone browsing your site thinks your post is worth sharing, they can add it to StumbleUpon’s collection of favorited sites. And if you enjoy an exceptionally good post on a blog, be sure to stumble theirs, too!


A web development agency is not only responsible for coming up with new web templates for the site, but is also responsible for its seo. Using powerpoint templates is the thing of bygones. Anyone with even a basic web development degree can work out a beautiful script in no time. The use is as easy as taking a prepared resume template and entering your details. With more web development courses, you can mould any template as easily as a cv template.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Copyright © 2007 Mrs. Mecomber’s Scrapbook. All rights reserved.