Posted by ljmacphee on July 2, 2007 under blogger, how to, perl, tools, useful sites, wordpress | 
Google Analytics is yet another free statistic collector for your website. Google Analytics tallies up the data once a day. You’ll get incoming link information, number of visitors, location of visitors and time spent on your site and the pages each visitor viewed.
Analytics will give you more data than most of the free statistics tools out there. But I’m still a fan of StatCounter too. They update data much more often.
I waited a long time to use Google Analytics because you have to enter the JavaScript with your code on every page on your website. Now that TimesToCome is cleaned up and much of it moved to blog format I decided it was time. Still there were about 500 files that needed the code added to them.
So I wrote a small PERL script ( permanent link on top left of page ) to do this. It searches every file in the directory you place it in for ‘</body>’ and adds in the Google Analytics code just before that tag. Read the notes in the script before using it. You’ll need to enter your personal analytics code number to the script.
Of course for your Blogger and Wordpress blogs you need only change the template and enter the code just above the </body> tag. One entry is needed for Blogger. You may have to change index.php, single.php and page.php for Wordpress depending on your theme. Where ever you find </body> in your template files you need to add the script.
Posted by ljmacphee on June 25, 2007 under HTML, blogger, wordpress |
If post a table of information in Blogger and you look at your post and see the table way down at the bottom of the post it is because the editor added in line breaks for you.
It is ok to use tables to display tabbular information but they confuse the editors. You know that when you type a line and hit return the editor adds a line break. Well it does this for tables as well. But rather than add the line breaks inside the table it posts them all just before the table.
This can be fixed.
This will add 5 empty lines before your table:
<tr>
<td>data</td>
<td>more data</td>
<td>some junk</td>
</td>
This will add one empty line for each and every row in your table before it prints the table:
<tr><td>data</td><td>more data</td><td>some junk</td></td>
So what you have to do is take your entire table. Everything between <table> and </table> and put it all on one long line. That will remove the line breaks before your table.
The best thing to do is use your favorite non-blog editor to create and check your table. Then remove all the line breaks and test it again. Once you have no line breaks and the table is correct, just cut and paste it into the blogging software editor.
Blogger Tips and Tricks has a different Solution which he just posted this week as well
Posted by ljmacphee on June 18, 2007 under HTML, blogger, blogger template, hack your template, how to, javascript, wordpress |
I needed to make a link list of all the posts relating to specific plants on Herself’s House Plants. I wanted people to be able to quickly scan the list looking for what ever plant they are looking for instead of having them click the specific plant label and load up 60 plant entries. Blogs are a great format for webpages but some information can get buried.
It was a far more challenging task than I planed. I still do not have a good way to do this. This is a two step hack. You can see it Herself’s House Plants here. About mid way down the side bar is a lengthly list of links to specific plants. You can also see a list of Topics in AI on the sidebar of Herself’s AI.
This is how I did it.
Step 1:
You need to create a feed that will fetch only the items from that label. I learned how to do so at Purple Moggy’s There are several feed instructions and examples there so if my example doesn’t do what you need check those out.
Feed URL
Replace {BLOG ID} and {LABEL} with your information
http://beta.blogger.com/feeds/{BLOG ID}/posts/full/-/{LABEL}
The Feed URL I used (wrapping to fit in column):
http://beta.blogger.com/feeds/999999999999999999/posts/
full/-/Specific%20plant%20information?max-results=100
What it took me several hours to figure out:
- use ‘beta.blogger.com’ not your domain or your blogger account
- 999999999999 is your blog id number Detailed directions to find your blog id number. You will see it in the url when you are logged in and working on posts etc. (?blogID=1234567890123456&post )
- Specific%20plant%20information This is your label, put %20 in place of any spaces.
-?max-results=100 This is the maximum urls you would like in the list. I only have 60 or so plants so 100 is more than I need.
That actually was the painful part. Once you have your feed test it in GReader or some place and make sure you have it correct.
Second Step:
You need a JavaScript to process the list. I used the one from Cut n’ Past JavaScript RSS Feed here. There are thousands of JavaScript from feed tools all over the net. If you have a favorite place use that one.
Then you just paste the JavaScript into a HTML/JavaScript element in your template.
Wordpress
For Wordpress the feed for a specific category:
http://www.yourwebsite.com/wordpressDirectory/category/CategoryName/feed/
category and feed are fixed, you have to customize to match your blog and category:
www.yourwebsite.com
wordpressDirectory
CategoryName
Then you will need to place the JavaScript some where in your sidebar template. Work on a copy of your template, they are fragile.
There is also a Wordpress plugin to show information from certain categories I have not tried it. I just ran across the information while researching how to do the category feed.
* If I can figure out a way to do this with out relying on a third party JavaScript/RSS processing place I’ll come back to here and post the directions.
Posted by ljmacphee on May 21, 2007 under blogger, blogger template, hack your template |
One of the things that makes your blog stand out is to use an original theme. If you are not yet ready to code your own theme, then you can go to the blogger dashboard, then to template and change your header image.
Once in template click on Page Elements. Do you see the section ‘blog name’ ( Header )? Click to edit that.
Once in the edit area you can upload an image from your computer to use as the header.
Well that is all easy enough. However, if you use an image that is a different size than the header image used originally in the template, you may have to go in and hack the html.
An easier option is to find out what size the original image is, and match your new header to that size. Every template is different. You can load up your blog in your browser and select ‘view source’. Start at the top; the heading image is probably near the top. Usually you’ll see a url to an image under one of the heading codes ( h1, h2 h3…). Once you see the url you can enter that in your browser. It will take you to a page with just the header image, nothing else. Drag and drop the image to your desktop.
Using GIMP or your favorite photo editor you can get the image size. Now just create your own image that size or using your photo editor adapt the one you downloaded. Remember you won’t see the change on your blog until you upload the image.
Some of the Blogger templates use these sizes:
TicTac and TicTac Blue Blogger templates use 847×240 pixel headers;
SnapShot, SnapShot Sable and SnapShot Tequila Blogger templates use 700×123 pixel;
Thisaway series uses 760×88 pixel header backgrounds;
See also:
How to create multi-layered web 2.0 headings