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 25, 2007 under HTML, css, how to |
Suppose you have a list of links:
TimesToCome Mobile
Herselfs AI
Herself’s Houseplants
And you’d prefer to lay them out horizontally on your page like:
TimesToCome Mobile|Herselfs AI|Herself’s Houseplants
Or better yet, like the 3 social bookmark links at the bottom of this post are laid out.
This is especially useful for the list of social bookmarks at the bottom of your page.
You can in HTML just place the links one after the other with a ‘|’ in between. Or you can use CSS to line them up for you and space them out nicely. The float: left; is what makes your list horizontal instead of vertical.
#socialbookmarks ul
{
margin:0;
padding:0;
}
#socialbookmarks li {
float:left;
margin:0;
padding:0;
list-style-type: none;
white-space: nowrap;
}
#socialbookmarks li a
{
list-style-type: none;
padding: 0 18px;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 1px;
}
The bookmarks are added in the form of an HTML list to the web page
<div id=”socialbookmarks”>
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<br />
You need a break ( br ) tag at the end to prevent the links from wrapping if the next item in your template is also a float item.
Posted by ljmacphee on April 30, 2007 under HTML, blogger, blogger template, gimp, graphics, hack your template, how to, osx |
The image you see next to the website URL or in your bookmarks menu is called ‘favicon.ico’.
If you are hosting your website on your own server, just add a 16×16 pixel ‘favicon.ico’ file and a 32×32 pixel ‘largefavicon.ico’ file to the top directory. This is the same directory your index.html page for the site is kept.
If you are hosting your website on blogger or another service where you do not have access to the main directory you have to host your favicon.ico image file where ever you host your other website images.
Then add the following two lines to the html files on your site. These lines go in the <head> section of each file. If you are on blogger are using another blog type set up just edit the main html file for your site. { On blogger go to Layout->Edit HTML and put the two lines under the line <head> }.
Now edit these two lines so the path is where your favicon.ico is kept:
<link rel=”shortcut icon” href=”http://imagehosting.com/favicon.ico” />
<link rel=”icon” href=”http://imagehosting.com/favicon.ico” />
To create your favicon.ico file you can use your favorite photo editor. I use Gimp. Create the icon you want and save it as a 16×16 pixel png file. After you have created and saved the file, change the file name from favicon.png to favicon.ico.
More information:
What is favicon.ico?
How to Make Favicon | Macinstruct