Mrs. Mecomber’s Scrapbook

Soon my days of looking for Blogger templates will be over. But I do still have a few small blogs over there. I’m content with those templates. Since moving several blogs and websites onto Wordpress and using the Bluehost hosting service (of which I highly recommend), I’ve been scouring the Internet for applicable themes. These days, having a classy Wordpress theme is as valuable as owning Branson real estate! A smooth, readable blog in crucial if you want people to read your blog. Here’s a great batch of Wordpress themes I’ve found.

These themes have special .php files for those 125×125 widgets that is all the rage on blogs right now. (Scroll down, you’ll see that I have some). They are very convenient.

Also very popular are the “magazine” style themes. These require a little more knowledge with coding and Wordpress. They are not easily manageable if you are a “point and click” blogger. But the styles are beautiful.

And, if you are wanting to build your very own Wordpress theme, I’ve found a terrific tutorial here. This is a several part series and is well done.

If you discover any other themes out there, please leave a comment. I am always looking for more to add to my list of themes.

Here’s a quick article on adding custom text to a categories page for your Wordpress blog. First, a little background.

Wordpress sorts your blog posts into categories. See here for the definition from Wordpress. Wordpress also has something they call a “template hierarchy.” A good explanation comes from Tina Gasperson’s blog:

Because most WordPress themes have a single template for archives, aptly named archive.php, it’s not immediately apparent how to place a text ad on a specific category results page. But never fear: by default, WordPress searches using what it calls a “template hierarchy.” By taking advantage of the template hierarchy, it’s easy to make a special page that keeps your text ad where it belongs.

The template hierarchy works like this: if your visitor clicks on category #3, WordPress first looks for the most specific template: category-3.php. If it doesn’t find that, then it goes after the more generic category.php, and then archive.php, and if it doesn’t find that, it finally drops back to index.php. Armed with this knowledge, you can create a category-specific template using archive.php as a base.

Yes, armed with the knowledge of how Wordpress works, you can guide the system using this template hierarchy. You can make Wordpress show special text on certain category pages. This is not a difficult task, but I will assume that you know about coding and are familiar with the Wordpress format. This is how you do it.

So let’s say you want to post some text (for example, a text ad) under a certain category– but not all your categories. Let’s say you want to post a text ad under your category named “blogging.” Wordpress calls this category “blogging,” but Wordpress also assigns an Identity Number to this category, too. You need to find this ID number before you can do anything.

Log in to your Wordpress blog and go to “Manage” and choose “Categories.” You’ll see your list of categories. Since we are going to alter the “blogging” category, look for it in the list. Look for the ID Number.

In the image above, the ID Number we want is 73.

Now, go to “Presentation” (somewhere to the right of “Manage”) and choose “Theme Editor” tab. You will probably have a different theme than I, and your php files will look different, too. But the basic bones should be there. In the “Theme Editor” screen, look to the right-hand side and you’ll see a long list of links. Listed here are php files, like Style sheet, Header, Main Index Template, etc. Don’t worry if you don’t have the same ones that I do, or vice versa– it really depends on the theme you are using. However, some files should be the same. Just like people all have heads and eyes but different hair and eye color… your theme should have certain “body parts” but the styles may vary. Look for the php file called “archives.php.” Click it. When the page reloads, make sure it says “Editing “archive.php” at the top.

Copy all of the code in this file. Now, open up a new Notepad file. Paste the copied archive.php code into this new Notepad page. Now you are going to save the Notepad page, but you need to rename it using the ID Number of that category you wanted to change. Remember how our “blogging” category has an ID if 73? This is what I named my Notepad page:

Be sure to name your file exactly that (just use your own ID Number for your own category). Make sure there is a hypen and make sure you have the .php. Save the Notepad file but don’t close it yet!

You need to put in your text ad. Grab your text and paste it in like this (mine is in red):

<?php get_header(); ?>
<div id=”primary-content”>
<?php include (TEMPLATEPATH . ‘/theloop.php’); ?>

<p>
The kinder, gentler computer geek, <a href=”www.mrsmecombersscrapbook.com”>Mrs. Mecomber</a>, has recently issued her top ten free software programs for 2008.
</p>

</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Do you see how you are inserting your code between these two lines of code?

<?php include (TEMPLATEPATH . ‘/theloop.php’); ?>

</div>

Of course, your text ad will be different, unless you want to give me some free advertising.

Now, save your Notepad file again. Upload this file into your FTP program. Go back to your Administrative page in Wordpress (you may need to refresh or click a link elsewhere and come back to the page). You should now see your “category-IDNUMBER.php” file in the right-hand side.

You’ll notice that the Archive files remains unchanged, too.

Your text should now show up in only that category page. Ain’t Wordpress fun?

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.

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!

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.

I’ve been crazy-busy this week! I can’t believe the break-neck speed I’ve had to work at! There is a lot going on at the homestead, but I am also doing a lot of blogging, working on stuff for advertisers, and repairing templates.

My New York Renovator blog template gave up the ghost over the week. I’ve been trying to get it back on track with a new template and header. I had to *gasp* utilize a basic Blogger template until I got my new one going. I absolutely love the three-column templates, with both sidebars off to the side. It’s so organzied! While working at that, I decided to spiffy up my New York Traveler blog, also. It just took too long to load and was getting messy with all the buttons and text in the sidebars. I am very pleased with the results. Next in line is my other travel blog, New York Traveler.Net. I am not happy with the header, and the theme is just too “dark” for me. So I’ll be trying to squeeze that in this weekend. We’re getting a whopper of a snowstorm this weekend, so I won’t be doing any outdoor work!

I have to post up some tutorials on customizing blog templates and headers. Remind me if I forget. This is all fresh on my mind. It’s not difficult, you just need to know what you’re doing. I’ll try to get to that next, after all my projects. I am having trouble deciding on a photohosting website. A fellow blogger mentioned JAlbum, and I downloaded it (but haven’t had time to install it or check it out). My accounts at Flickr are almost full. I’d love to have everything all at one place… but it would be very laborious to go back and change the blog links to a new photohosting site.

At any rate, I promise I’ll have some tutorials up soon!

I’ve seen a lot of ugly templates out there in the the blogosphere. It ain’t pretty. The Blogger default templates are OK… but boring. In preparation for my upcoming series on How to Customize Your Blogger Blog, I’m going to assign you a little homework. I’ve presenting you with a list of websites that offer free Blogger templates. There are a lot to choose from. Some are better than others, of course, and not just in style. Some are easier to use, easier to customize, and some are in other languages. Here’s my list:

Gecko & Fly
Free Blogger Skins
Blogcrowds
Final Sense Blogger Templates
Template Panic
50More Beautiful Blogger Templates from Mashable
Free Blogger Templates
Blogger Templates Directory
Blogger Templates.org
Free Blogger Templates

I personally recommend the great choices from the first three links.

Tip: if English is your first language, get a template in English.

I had once downloaded and installed a template made by a Spaniard. It was a beautiful template, and I can read Spanish. Mostly. But after playing with it, I decided I didn’t want the template anymore. When I went to a new (English) template, I found some traces of Spanish still in my widgets html. So my date read “lecha” for a while until I finally noticed it, lol.

Anyway, look around at the templates in the lists below. Get a plan and I’ll soon show you how to fix up your boring, default blog into something that says you.