Del.icio.us (0 saved)
Finally! Blogger now officially supports Scheduled Publishing! Simply create a new post, click the "Post Options" dropdown (next to the Labels field), set "Post date and time:" to a future date, and publish. The post will then be filed as "Scheduled".
To view your scheduled posts, go to the "Posting" tab, select "Edit Posts", and choose to show either "All" or "Scheduled" posts.
'Bout time :D
Del.icio.us (0 saved)
For a while now, I've been considering migrating this blog from Blogger to WordPress. I've never actually used WordPress before, but I've heard lots of ranting and raving about this WordPress plugin and that WordPress plugin. I love FireFox and its extension capabilities, and the idea of using plugins for stuff on my blog is very appealing. Even better, WordPress has a New Blogger import tool, which claims to make the transition rather easy.
The main holdback I have is forwarding existing traffic. I already use Feedburner, so forwarding my RSS should be a snap. But what about Google traffic? What about all those blogspot-centric URLs I've scattered about the net? They will inevitably link straight here, but is there a way to automatically forward incoming links to the new location? And what about the ever-important (sarcasm) technorati ranking? Granted, I'm only rank 17 right now, but I'd rather not lose what little "credibility" I have.
Does anyone have any tips for a truly seamless Blogger-to-WordPress transition? Or at least some tips on maintaining my current traffic?
Del.icio.us (0 saved)
Over my spring break, I decided to spruce up my blog a bit (read: redesign). Unfortunately, I am design-challenged and too cheap to pay someone to create a new design for me. So I started perusing the designs available at OSWD, and found a nice template called Blue Spring.
After finding, downloading, and familiarizing myself with the template's HTML and CSS, I set about hacking it into Blogger XML submission. It was mostly an effort of looking at my existing template, as well as the generated HTML, and revamping the CSS to support the structure produced by the Blogger widgets (mainly the Blog and Header widgets).
After combining HTML and CSS into one XML file and making sure the CSS supported all the widgets one might want in the sidebar, I set about "making it customizable". Not everyone likes to muck about in the CSS code -- some (most?) prefer to use Blogger's "Fonts and Colors" tab to do what they can. Supporting this was a simple matter of pulling out all the major colors and fonts into skin variables. After that, I made sure that all the widget sections had the proper settings.
Now, a "how to" on usage. In the original template, there were designated spots above and below the header for links, namely "navigation" and "other". I have left these as two empty sections, with a limit of one widget each. They are optimized for the "Link List" widget, but, as you can see by the search bar I've placed at the top, you may be able to fit other widgets in them. Beware when putting something other than a LinkList widget in the bottom slot, though -- it can seriously mess up your layout (and can usually be fixed by removing the widget).
The "Page Elements" layout is slightly a mess; as I have no clue how to modify the XML file to fix this -- without melting the layout -- you'll just have to deal with it :) The "edit" link for the top LinkList section is hidden by the logo. To get around this, move the widget to the lower slot (or a slot on the sidebar), edit it, then move it back.
Before uploading the template to your blog, be sure to upload the images to a hosting service, and replace all images used in the template with the appropriate URLs. Searching the XML file for "images/" will show you the images to be replaced. If you have a favicon for your blog, find the following section:
<!-- link href='#favicon-url-here' rel='shortcut icon' type='image/gif'/>
<link href='#favicon-url-here' rel='icon' type='image/gif'/ -->
Uncomment it, and replace "#favicon-url-here" with the URL of your favicon. If you want a small RSS icon to the right of the bottom LinkList section, find this section:
<!-- span id='feedlink'>
<a href='#your-rss-feed-here'>
<img alt='Subscribe' src='images/rss.gif' />
</a>
</span -->
Uncomment it, and replace "#your-rss-feed-here" with the URL of the feed you want visitors to subscribe to.
As the devil is in the details, you will, more likely than not, come across issues if you try to add custom or third-party code to the sidebar (or any other part of the template, for that matter). The CSS has been tweaked to make most of the official Blogger widgets look good; anything unofficial is just that, unofficial. Please keep in mind that I am not your personal HelpDesk, nor will I likely have time to help everyone "fix" their blog. There are Blogger help forums, as well as HTML/CSS help forums, that will be more than happy to help you, if you ask.
For you web standardistas out there, I don't know if the Blogger engine puts out standards-compliant code or not, but almost any Bloger blog you try to validate will turn out hundreds of errors :) as such, I didn't quite worry about making the template standards-compliant. If it is, it's completely on accident :P The theme does NOT render properly on IE6-. Seems to work fine on IE7, IE8 is unknown.
As always, with anything remotely related to technology, BACKUP!!! Go to your blog's layout, select the "Edit HTML" tab, and click the "Download Full Template" link. Save the XML file to your computer, so you have a backup to restore from if you prefer your old template.
The template's footer (and some comments in the CSS) credits the designer, DCarter, and the one who converted it into a template (Templater?), me. If you do use this template, please leave this info intact.
[ 5/11/08 ] Update: Turns out the first version would break when text size was increased, if you had menu items. Fixed by adding overflow:hidden; to the first #main-wrapper declaration. Still doesn't work in IE6. Also added overflow:hidden; to the #sidebar declaration, and the layout now mostly works in IE6 (there are still a few quirks, but it's usable). The sidebar is strangely displaced in IE5.01 and slightly off in IE5.5 and IE4.01 according to browsershots.org, but the template now supports "all major browsers on all major operating systems".
Additional links:
Download the Blogger template
OSWD: Blue Spring template
Blue Spring WordPress template
Open Source Web Design
The header image I use
This template featured at the The Blogger Templates
Del.icio.us (0 saved)
While perusing the AdSense Optimization Tips, I came across a section on Blogtimizing, optimizing ad placement on a blog. That article, however, linked to the more interesting concept of section targeting - the idea of super-targeting your ads to a specific section of content, rather than all content on the page (which, on a blog, includes navigation links, blog title, sidebar content, and all sorts of non-topic-specific junk). From the section targeting page:
Section targeting allows you to suggest sections of your text and HTML content that you'd like us to emphasize...when matching ads to your site's content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting.
To implement section targeting, you'll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you'd like to emphasize...for ad targeting.
The HTML tags to emphasize a page section take the following format:
<!-- google_ad_section_start -->
<!-- google_ad_section_end -->
So, essentially, to super-target your ads, just wrap the relevant content in these special HTML comment tags. For Blogger blogs using the XML templates, however, it's a bit trickier. More likely than not, you'll want to target your ads to the content of your blog posts. To do so, it would appear obvious to wrap the <data:post.body/> Blogger tag with the appropriate comment tags, like so:
<!-- google_ad_section_start -->
<p><data:post.body/></p>
<!-- google_ad_section_end -->
The problem is, Blogger's template engine strips out all HTML comments contained within <b:includable> tags. Fortunately, Blogger themselves have a solution to this issue: <data:adStart/> and <data:adEnd/>:
<data:adStart/>
<p><data:post.body/></p>
<data:adEnd/>
These tags will be expanded by Blogger into the desired HTML comments, allowing you to super-target your AdSense ads.
Beware of being too specific in your targeting, however. Google has put in measures against "keyword spamming" your ads:
Include a significant amount of content within the section targeting tags; including insufficient content may result in less relevant ads or PSAs. Please also be sure only to emphasize significant sections of your site's relevant content, since it's against our program policies to the ad targeting to result in ads that are not relevant to the content of your pages.
That means no exclusively targeting your post titles or post tags.
Also of use are the "ignore tags" that go hand-in-hand with the targeting tags:
You can also designate sections you'd like to have ignored by adding a (weight=ignore) to the starting tag:
<!-- google_ad_section_start(weight=ignore) -->
This is good for topic-irrelevant content that appears on pages, specifically the content-ridden sidebar(s) that almost every Blogger blog has. Simply wrap the sidebar div in these tags to de-emphasize its content.
The way I set up my ads was to enable per-post ads (blog layout -> page elements -> click "edit" on the "Blog Posts" element -> check "Show ads between posts"), then move (only!) the <data:adCode/> line to the desired position within my post template, after the fashion of an article on Woork. I then removed all Blogger-added adStart and adEnd tags, and placed my own around my <data:post.body/> line, as specified above. I've found it works rather well on the individual posts' pages, though it seems to get a little confused on the front page. This is understandable, since there are multiple targeted content sections to process on the homepage, all with different content.
After specifying the targeted sections, I wrapped my sidebar content in the ignore tags. In my template HTML (no need to "expand widget templates"), I searched for the sidebar section:
<b:section class='sidebar' id='sidebar' preferred='no'>
...all the various widgets...
</b:section>
And wrapped the entire section in the ignore tags:
<!-- google_ad_section_start(weight=ignore) -->
<b:section class='sidebar' id='sidebar' preferred='no'>
...all the various widgets...
</b:section>
<!-- google_ad_section_end(weight=ignore) -->
And, voila, ads that are more relevant to my content! Enjoy!
Del.icio.us (0 saved)
Original article: Most Popular Posts list for blogger
In my last article "Most Popular Posts list for blogger," I presented my version of Chris Riley's Analytics API workaround. I also promised to go through the JavaScript for those who were interested :)
Without further ado, the code:
<div id="popularposts"><noscript>Please enable javascript to view the most popular posts list.</noscript></div>
<script type="text/javascript">
<!--
function topcontentCallback(obj) {
try {
var url,title,output;
output='<ul>';
for (i=0; i< obj.count; i++) {
url = obj.value.items[i].url;
try {
title = obj.value.items[i].name[0].content;
title = title.replace('<title>', '');
title = title.replace('</title>', '');
title = title.replace('Tech Knack: ', '');
}
// if we didn't get the title (bad Pipe!), give a pseudo-
// title from the URL
catch (e) {
title = url.substring(url.lastIndexOf("/")+1,
url.lastIndexOf(".html"))
.replace(/\-/g, " ");
}
//remove the <title> tags the pipe leaves in.
output+= '<li><a href="'+url+
'" title="'+title+'">'+title+'</a></li>';
}
output += '</ul>';
document.getElementById("popularposts").innerHTML = output;
}
catch (e) {
var error = "Error fetching data: "+e;
if (e.toString().indexOf('i')!=-1) error += "<br />i: "+i;
document.getElementById("popularposts").innerHTML=error;
}
}
//-->
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=bi6F5qPK3BGfvuxf1vC6Jw&_render=json&_callback=topcontentCallback" type="text/javascript"> </script>
<div id="popularposts"><noscript>Please enable javascript to view the most popular posts list.</noscript></div>
The div with id "popularposts" is the div whose content will be replaced with our list. It initially contains some noscript text for those without JS.
function topcontentCallback(obj) {
The topcontentCallback function is the function used to handle the JSON output by the Yahoo! Pipe. "obj" is the JSON string passed in by the Pipe.
try {
......
}
catch (e) {
var error = "Error fetching data: "+e;
if (e.toString().indexOf('i')!=-1) error += "<br />i: "+i;
document.getElementById("popularposts").innerHTML=error;
}
We enclose the main processing code in a try block. Firefox2 and IE6 (and presumably 7 and 8) support try blocks in JS. This way, if there is a problem processing the data (a referrenced node is missing, etc) the user gets a nice little error message rather than a JS error thrown by the browser. In te case of an error, the previously mentioned div's content is set to "Error:
var url,title,output;
output='<ul>';
Declare some variables, initialize the output variable (we use an unordered list for display).
for (i=0; i< obj.count; i++) {
url = obj.value.items[i].url;
We loop over the items given by the Pipe. First we pull the url of the popular page.
try {
title = obj.value.items[i].name[0].content;
title = title.replace('<title>', '');
title = title.replace('</title>', '');
title = title.replace('Tech Knack: ', '');
}
// if we didn't get the title (bad Pipe!), give a pseudo-
// title from the URL
catch (e) {
title = url.substring(url.lastIndexOf("/")+1,
url.lastIndexOf(".html"))
.replace(/\-/g, " ");
}
//remove the <title> tags the pipe leaves in.
Here we try to pull the page's title, as pulled by the Pipe. I've noticed that, occasionally, the Pipe will have trouble getting the page's title, and so leaves the title blank, which doesn't play well with our script. Within the try block, I get the content of the title; I then try to replace (remove) the title tags and the site's title. If there is no title text from the Pipe, this will throw an error. In the catch block, we use the page's url to "guess" the title, removing the ".html" at the end using url.substring(), and replacing the intermittent dashes which replace punctuation and spaces with .replace(). These two commands are strung together to be url.substring().replace(). The result: if the article titled "CSS trick - two background images" doesn't have a title attribute in our JSON, the title is given as "css trick two background images". For this reason, you should enable "post pages" in your template's preferences.
output+= '<li><a href="'+url+
'" title="'+title+'">'+title+'</a></li>';
Here we append to our ul an li containing a link to the popular page.
}
output += '</ul>';
document.getElementById("popularposts").innerHTML = output;
After the for loop, we add the final </ul> and replace the div's contents.
All this is just a function; without calling it, it is no good.
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=bi6F5qPK3BGfvuxf1vC6Jw&_render=json&_callback=topcontentCallback" type="text/javascript"> </script>
This imports the JSON created by the Pipe, telling it to render in JSON format (&_render=json) and to call our function to handle the JSON (&_callback=topcontentCallback). If you copy and paste the src to a browser window, you'll see that the content is simply a function call with the JSON as the parameter:
topcontentCallback({"count":7,"value":{"title":"TechKnack".......}});
Del.icio.us (0 saved)
Last week I was looking for a way to have a "Most Popular Posts" widget here on blogger. The first and only true "widget" I found was Affiliate Brand's Most Popular Posts Widget. The only problems: it has a default color scheme that doesn't really go with that of my blog, and the height is pretty much fixed. It seems that you can change the look-n-feel with an external CSS sheet...but, unless you have another file host, that's a luxury we cheap Blogger bloggers don't have :)
Not satisfied with AffiliateBrand's widget, I kept searching. To no avail; that was simply the only pre-packaged blogger widget out there. Then the thought occurred to me to use my Google Analytics data to roll my own pseudo-widget. Genius, no? Well, it would be, if Analytics had an API :(
Fortunately, there are geniuses out there who have done genius things. In this case, Chris Riley of Blogoscoped has mashed up a combination of Google and Yahoo! offerings in such a way that we poor Blogger users can have a Popular Posts widget!
The basics are these:
1) Have analytics setup on your blog
2) Setup a Google Group
3) Setup a GMail account
2) Setup email notifications from Analytics' top pages to a GMail account
3) Setup GMail forwarding to your Google Group
5) Setup a Yahoo! pipe to fetch and process your top content report
6) Setup a pseudo-widget script on your blog to display the pipe's results
While Chris provides his Yahoo! Pipe for others to clone, I had issues getting it to work with fetching the page's title contents. Here's the pipe that I'm using. Of course, a different pipe means different code for parsing the results.
Here's the javascript that I use to display my pseudo-widget:
<div id="popularposts"><noscript>Please enable javascript to view the most popular posts list.</noscript></div>
<script type="text/javascript">
<!--
// Robust pipe-output-handling function
// as found at http://techknack.blogspot.com/2008/01/most-popular-posts-list-for-blogger.html
function topcontentCallback(obj) {
try {
var url,title,output;
output='<ul>';
for (i=0; i< obj.count; i++) {
url = obj.value.items[i].url;
try {
title = obj.value.items[i].name[0].content;
title = title.replace('<title>', '');
title = title.replace('</title>', '');
title = title.replace('Tech Knack: ', '');
}
// if we didn't get the title (bad Pipe!), give a pseudo-
// title from the URL
catch (e) {
title = url.substring(url.lastIndexOf("/")+1,
url.lastIndexOf(".html"))
.replace(/\-/g, " ");
}
//remove the <title> tags the pipe leaves in.
output+= '<li><a href="'+url+
'" title="'+title+'">'+title+'</a></li>';
}
output += '</ul>';
document.getElementById("popularposts").innerHTML = output;
}
catch (e) {
var error = "Error fetching data: "+e;
if (e.toString().indexOf('i')!=-1) error += "<br />i: "+i;
document.getElementById("popularposts").innerHTML=error;
}
}
//-->
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=bi6F5qPK3BGfvuxf1vC6Jw&_render=json&_callback=topcontentCallback" type="text/javascript"> </script>
Yes, my JS is admittedly a bit more robust than Chris's. This is mostly because of various issues I either ran into or thought of while trying to implement the widget. For those who are interested, I'll post an explanation of the code in another post.
For this to work, you must enable "post pages" in your template's preferences. There might be a way to get this to work without post pages, but I wouldn't recommend it ;)
If you are going to copy and paste this code (probably after cloning my pipe), be sure to change things appropriately:
Change the pipe ID in the last script element to the ID of your new pipe
In the "title fixup" section:
try {
title = obj.value.items[i].name[0].content;
title = title.replace('<title>', '');
title = title.replace('</title>', '');
title = title.replace('Tech Knack: ', '');
}
The last "title.replace" line removes the site-wide title that is used on every page. Change it according to your Blogger setup (if you leave it as-is, though, it shouldn't hurt anything).
Additional links:
No Google Analytics API? No Problem!
Yahoo! Pipes
Del.icio.us (0 saved)
I chose the dark design for this blog from the default blogger themes...a looong time ago (or so it seems)! Since then, I've taken a usability course in school, read many things on the web concerning usability, and been active at Deviant Art.
I believe it is time for a fresh look :D
The testing grounds: techknack2.blogspot.com ;)
One of the things I've heard recently is that white text on dark backgrounds is not all that usable. Cool, but not usable. As I've gone back and read a couple of my posts, I've realized that it's true, especially for long blocks of text; the text just seems to fade into the background after a rather short amount of time.
Another issue I've had is clutter; the more I look at my blog, the more clutter I see. Whitespace is good; simpler is better. Keep it simple, stupid.
In my search for templates for the new Blogger, I've found but one that I really like: Azul by karan at Skins4Bogger. Unfortunately, the XML download is for a completely different theme...
As per usual, I appreciate any and all feedback. What do you expect to see in a blog's layout? Where do you expect to see these things? Should the comment count be before the post, or after? Etc :)
Del.icio.us (0 saved)
You may have noticed my slight change in layout: I've added a blogroll to the right-hand sidebar. According to Wikipedia's list of blogging terms, a Blogroll is "A list of blogs. A blogger features a list of their favorite blogs in the sidebar of their blog." And, according to the latest Google Reader Blog Post, Steve Lacey of the Google Reader dev team decided to implement a blogroll generator for the aggregator. Adding a blogroll to your blogger blog is a cinch:
Head over to the "Tags" section on the settings page, make one of the tags you use for subscriptions public, and click on "add a blogroll to your site."The resulting window gives you three options: look-n-feel (including title, and with a snazzy preview, but not very customizable), Add To Blogger, and C&P javascript code. The Add to Blogger button brings a new window which lets you choose which blog to add the blogroll to (assuming, of course, that you actually have a blogger blog), verify your blogroll's title, "Edit Content" (JS tags) and "Edit Template" (blogger template XML). Not exactly sure of the usefulness of those last two, but whatever ^_^ the feature is still in the Google Labs phase, after all. Clicking the Add Widget button takes you to the Edit Template page in Blogger (I believe you have to verify, via Blogger, that you are adding content from Google the first time you do this), where a new widget has been added to your layout. As with all the other page elements, it can be dragged about and configured as normal. However, unlike Google Ads, for example, the colors are not yet customizable via javascript variables. The specific tag that I've added here is "tech blogs." You may have also noticed, at one time or another, a Google Tech News RSS feed at the bottom of my pages. Regrettably, I don't really keep up with Google tech news as much as I keep up with the RSS feeds in my blogroll. Ugh. I believe I've reached a point of Blogorrhea, "meaning excessive and/or incoherent talkativeness in a weblog." So I'll just stop now and proofread tomorrow XD
Save to Delicious (
