phydeaux3

delicious2blogger - Categories for Blogger

Installation Page - Configuration Page

Comments, questions or complaints should be left at the home post for these scripts at delicious2Blogger - Categories for Blogger.

Note: For the purposes of these instructions, if I say 'category' I'm referring to how it displays on Blogger, if I say 'tag' I'm referring to how it's on del.icio.us. But in essence I'm talking about the same thing. Ones tags is the others category, and vice-versa.

To install the delicious2blogger scripts you must follow these steps -

Step #1

Backup Your Template !!!!!
You should always keep a current backup of your Blogger template. But especially if you are going to try this. You may want to revert back, or recover from a mistake. Once everything is setup like you want, make a backup of that copy of your template also in case something happens to it.

Step #2

You must have a del.icio.us account. If you don't already have one, sign up and get one. Note your del.icio.us username. We'll need it.

Step #3

Login to Blogger and your blog. First you need to create a new post. Give it the title of 'Category' and copy and paste the following code without alteration.

<div id="del-container"></div>


<script type="text/javascript">d2bWriteCat();</script>

Also, click on the "Post and Comment Options" link in the lower left corner of the Post Editor to open them up, then set "Allow New Comments on This Post" and " Allow New Backlinks on This Post " to NO. Since this is a 'special' post, those features won't be wanted. Also, set the date to a time before you started your blog, I recommend setting it to January 1, 2001. This gets this 'special' post out of the way and into it's own archive. Instructions on how to hide this post so it doesn't appear to come from this time will come later.

Then Publish Post, you will get an error saying
Your HTML cannot be accepted: Tag is not allowed: <script type="text/javascript">
No worries, just check off the box that says
Stop showing HTML errors for this post
then Publish Post again and it will go through normally.

After the category post is published, go to your blog. We need to find out the url of that post and it's archive for use in a moment. Easiest thing to do is to click on the Jan 2001 archive that should now be showing and open that up in one window, then also click on the permalink for the category post in that archive in another window so we have both urls handy.

Step #4

Now, keeping the windows with your category post/archive open (or copy them down), open up another window for blogger and goto your template. The following needs to be added there.

The following needs to be added to the CSS portion of the template, between the <style></style> tags. Easiest thing to do is find the closing </style> tag and paste everything right before that tag.

/* Delicious2Blogger CSS Styles
----------------------------------------------- */

/* Delicious Tag Cloud Styles
----------------------------------------------- */
#d2bCloud {font-family:arial,sans-serif;}
#d2bCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#d2bCloud a{text-decoration:none}
#d2bCloud a:hover{text-decoration:underline}
#d2bCloud ul{list-style-type:none;margin:0 auto;padding:0; text-align:justify;}
#d2bCloud .delicious-cloud li{ display:inline; background-image:none !important; padding:0 2px;margin:0; vertical-align:baseline !important; border:0 !important;}
#d2bCloud li a{}
#d2bCloud .delicious-cloud {}
#d2bCloud .delicious-tag-count{padding-left:0.2em;font-size:9px;color:#000}
#d2bCloud .delicious-cloud li:before{content:"" !important}

/* Delicious Sidebar List Styles
----------------------------------------------- */

#d2bList ul {}
#d2bList ul li {}
#d2bList ul li a:link{}
#d2bList ul li a:visited{}
#d2bList ul li a:active{}
#d2bList ul li a:hover span{}
#d2bList span.delicious-tag-count {}

/* Delicious Category Page Styles
----------------------------------------------- */
#del-container {}
#del-container a {}
#del-container a:hover {}
#del-container ul.delicious-posts { list-style:none; font-weight:normal;margin:0;padding:0;}
#del-container li.delicious-posts { padding:2px 0 4px 10px; }
#del-container .delTitle { font-size:140%;line-height:1;margin:0;padding:0 0 5px 0;}
#del-container .delNote { padding:0px 5px;}
#del-container .delNote a {white-space:nowrap;}
#del-container .small-del-tags{padding:0px 10px 10px 0;text-align:right;}
#del-container a.small-del-link {}

h3.catPostHeading {margin:0 0 5px 0;padding:0;}
#del-container h3.catPostHeading img {border:0;margin:0px 0 0 0; padding:0 5px 0 0;vertical-align:baseline;background:transparent;}

/* Delicious Category Post Links
----------------------------------------------- */

span.cattags {}
span.cattags a{}

/* Delicious Category Select Menu Styles
----------------------------------------------- */

#d2bSelect {}
#d2bSelect select {}

/* End Delicious2Blogger CSS Styles
----------------------------------------------- */

This is all the CSS code for the different things the scripts will add. You can style anything added by the scripts with these. A detailed explanation of what does what will be provided on the Configuration Page, but for now the default settings will do.

Then you need to copy and paste the following code in your template in the <head></head> section. Again the easiest thing to do is find the closing </head> and paste this right before that tag.

<script type="text/javascript">
// Delicious tag variables

var delTagPost = 'INSERT-YOUR-CATEGORY-POST-URL-HERE';
var delArchivePost = 'INSERT-YOUR-CATEGORY-ARCHIVE-URL-HERE';
var delUserName ='INSERT-YOUR-DELICIOUS-USERNAME';
var delCommonTag = 'false';
var delThrottleTag = false;
var delShowTags = true;
var delShowNotes = true;
var delNoteAppend = '...';
var delSep = ' , ';
var d2bPostCatHeading = "Category: "
var d2bSelectHeading = " - - Categories - - ";
var delPostMore = true;
var delPostMoreText = ' Read More >>> ';
var delTagLinkText = "View all posts filed in ";
var delCatShowText = "Showing ";
var delCatEntryText = " entries";
var delShowRSS = true;
var delRSSImg = 'http://photos1.blogger.com/blogger/6303/602/1600/RSS.gif';
var showCountList = true;
var showCountCloud = false;

// Tag Cloud Variables
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];

</script>

These are the script setup variables and again most of these will be covered in detail in the Configuration Page, but for now there are 3 items that must be changed right away.

var delTagPost = 'INSERT-YOUR-CATEGORY-POST-URL-HERE';
you need to paste in the url of the category post permalink page you initially created here. Keep it between the ' marks. And make sure it's the category permalink page and not the archive page.

var delArchivePost = 'INSERT-YOUR-CATEGORY-ARCHIVE-URL-HERE';
Same thing only with the archive url of the category post. Again, keep it between the ' marks.

var delUserName ='INSERT-YOUR-DELICIOUS-USERNAME';
Type in your del.icio.us username here. Keep it between the ' marks also.

Everything else can be configured, but it can wait. These are the only ones that need to be modified for now.

STEP #4C

Then copy and paste these scripts AFTER the variable setups.

<script type="text/javascript">
//<![CDATA[
var catSplit=/\s?,\s?/g;if(delCommonTag =='false'){ctwrite = '';}else {ctwrite = '\/'+delCommonTag;}
if(typeof delThrottleTag == 'undefined'){delThrottleTag = false;}if(!delThrottleTag){tThrottle = '';}
if(delThrottleTag){tThrottle = '&count='+delThrottleTag;}
document.write('<script type=\"text\/javascript\" src=\"http:\/\/del.icio.us\/feeds\/json\/tags\/'+delUserName+ctwrite+'?sort=alpha'+tThrottle+'\"><\/script>');
var pageCheck = decodeURIComponent(document.location);var d2bCurrent = pageCheck.split('?');
if(d2bCurrent[0] == delTagPost){enTag = encodeURIComponent(d2bCurrent[1]);
if(delCommonTag == 'false'){document.write('<script type=\"text\/javascript\" src=\"http:\/\/del.icio.us/feeds/json/'+delUserName+'/'+enTag+'?count=100;\"><\/script>');}
else {document.write('<script type=\"text\/javascript\" src=\"http:\/\/del.icio.us/feeds/json/'+delUserName+'/'+enTag+'\+'+delCommonTag+'?count=100;\"><\/script>');}}
function d2bWriteCat() {stripTag = d2bCurrent[1].replace(/_/g,' ');document.title = d2bPostCatHeading+stripTag;
catTarget = document.getElementById('del-container');if(document.getElementById('delpost-title')){
document.getElementById('delpost-title').innerHTML = d2bPostCatHeading+stripTag;}
if(document.getElementById('delpost-date')){document.getElementById('delpost-date').style.display = 'none';}
if(delShowRSS){dcatHeading = document.createElement('h3');ar = document.createElement('a');
if(delCommonTag == 'false'){ar.href = 'http://del.icio.us/rss/'+delUserName+'/'+enTag;}
else {ar.href = 'http://del.icio.us/rss/'+delUserName+'/'+encodeURIComponent(delCommonTag)+'\+'+enTag;}
ar.title = 'Subscribe to this Feed';img = document.createElement('img');img.src = delRSSImg;
ar.appendChild(img);dcatHeading.appendChild(ar);entryCount = Delicious.posts.length;
dtxt = document.createTextNode(delCatShowText+entryCount+delCatEntryText);dcatHeading.appendChild(dtxt);
dcatHeading.className = 'catPostHeading';catTarget.appendChild(dcatHeading);}
ul = document.createElement('ul');ul.className='delicious-posts';for (var i=0, post; post = Delicious.posts[i];i++){
var li = document.createElement('li');li.className='delTitle';a = document.createElement('a');
a.setAttribute('href',post.u);a.appendChild(document.createTextNode(post.d));li.appendChild(a);
ul.appendChild(li);if(delShowNotes){if(post.n){var liNote = document.createElement('li');
liNote.className = 'delNote';liNote.innerHTML = post.n;liNote.innerHTML += delNoteAppend;
if(delPostMore){am = document.createElement('a');am.setAttribute('href',post.u);am.title = post.d;
amt = document.createTextNode(delPostMoreText);am.appendChild(amt);liNote.appendChild(am);}
ul.appendChild(liNote);}}if(delShowTags){var d2bSkip = false;li2=document.createElement('li');li2.className='small-del-tags';
for (p = 0; p < post.t.length; p++){var tags = post.t[p];strip = tags.split(',');for(r = 0; r < strip.length; r++){
if(strip[r] == delCommonTag){d2bSkip = true;continue;}if(d2bSkip){if( p > 1){dsep = document.createTextNode(delSep);
li2.appendChild(dsep);}}else if( p > 0 ){dsep = document.createTextNode(delSep);li2.appendChild(dsep);}
stripper=strip[r].replace(/_/g,' ');a2 = document.createElement('a');a2.className = 'small-del-link';
a2.setAttribute('href', delTagPost+'?'+strip[r]);a2.title = delTagLinkText+stripper;a2.appendChild(document.createTextNode(stripper));
li2.appendChild(a2);}} ul.appendChild(li2);}}catTarget.appendChild(ul);}
function d2bWriteList(sortMode){var ul = document.createElement('ul');ul.className = 'linklist';if(sortMode == 'alpha'){
for (p in Delicious.tags){tagURL = encodeURIComponent(p);var strip = p.replace(/_/g,' ');if(strip == delCommonTag){
continue;}li = document.createElement('li');a = document.createElement('a');a.href=delTagPost+'?'+tagURL;
a.title=delTagLinkText+strip;atxt = document.createTextNode(strip);a.appendChild(atxt);if(showCountList){
span = document.createElement('span');span.className = 'delicious-tag-count';stxt = document.createTextNode('('+Delicious.tags[p]+')');
span.appendChild(stxt);a.appendChild(span);}li.appendChild(a);ul.appendChild(li);}
document.getElementById('d2bList').appendChild(ul);}if(sortMode == 'freq'){delSort = new Array();
for(i in Delicious.tags){delSort[delSort.length] = [i,Delicious.tags[i]];}delSort.sort(mysortfn);
for(i = delSort.length-1; i >=0; i--){tagURL =encodeURIComponent(delSort[i][0]);strip = delSort[i][0].replace(/_/g,' ');
if(strip == delCommonTag){continue;}li = document.createElement('li');a = document.createElement('a');a.href=delTagPost+'?'+tagURL;
a.title=delTagLinkText+strip;atxt = document.createTextNode(strip);a.appendChild(atxt);if(showCountList){
span = document.createElement('span');span.className = 'delicious-tag-count';stxt = document.createTextNode('('+delSort[i][1]+')');
span.appendChild(stxt);a.appendChild(span);}li.appendChild(a);ul.appendChild(li);}document.getElementById('d2bList').appendChild(ul);}}
function s(a,b,i,x){if(a>b){var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)} else{var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}return v}
function d2bWriteCloud(sortMode){var ta=0;var c=[];var delCount = new Array();for (p in Delicious.tags){
if (!delCount[Delicious.tags[p]]){delCount[Delicious.tags[p]] = new Array(Delicious.tags[p])}}
tz = delCount.length-1;del2 = document.getElementById('d2bCloud');ul = document.createElement('ul');ul.className = "delicious-cloud";
if(sortMode == 'alpha'){for(var t in Delicious.tags){for (var i=0;i<3;i++) {c[i]=s(minColor[i],maxColor[i],Delicious.tags[t]-ta,tz)}
var strip = t.replace(/_/g,' ');if(strip == delCommonTag){continue;}var fs = s(minFontSize,maxFontSize,Delicious.tags[t]-ta,tz);li = document.createElement('li');
li.style.fontSize = fs+'px';li.style.lineHeight = "1";a = document.createElement('a');a.title = delTagLinkText+strip;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';a.href = delTagPost+'?'+encodeURIComponent(t);
if (showCountCloud){span = document.createElement('span');span.innerHTML = '('+Delicious.tags[t]+') ';
span.className = 'delicious-tag-count';a.appendChild(document.createTextNode(strip));li.appendChild(a);
li.appendChild(span);} else {a.appendChild(document.createTextNode(strip));li.appendChild(a);}
ul.appendChild(li);abnk = document.createTextNode(' ');ul.appendChild(abnk);}del2.appendChild(ul);}if(sortMode == 'freq'){
var delSort = new Array();for(p in Delicious.tags){delSort[delSort.length] = [p,Delicious.tags[p]];}delSort.sort(mysortfn);
for (t = delSort.length-1; t >=0; t--){for (var i=0;i<3;i++) {c[i]=s(minColor[i],maxColor[i],delSort[t][1]-ta,tz)}
strip = delSort[t][0].replace(/_/g,' ');if(strip == delCommonTag){continue;}fs = s(minFontSize,maxFontSize,delSort[t][1]-ta,tz);
li = document.createElement('li');li.style.fontSize = fs+'px';li.style.lineHeight = "1";a = document.createElement('a');
a.title = delTagLinkText+strip;a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';a.href = delTagPost+'?'+encodeURIComponent(delSort[t][0]);
if (showCountCloud){span = document.createElement('span');span.innerHTML = '('+delSort[t][1]+') ';
span.className = 'delicious-tag-count';a.appendChild(document.createTextNode(strip));li.appendChild(a);
li.appendChild(span);}else {a.appendChild(document.createTextNode(strip));li.appendChild(a);} ul.appendChild(li);
abnk = document.createTextNode(' ');ul.appendChild(abnk);}del2.appendChild(ul);}}
function d2bWriteSelect(sortMode){var sel = document.createElement('select');sel.style.width = "95%";
sel.onchange = function(){location.href=this.options[this.selectedIndex].value;};sel.options[0] = new Option(d2bSelectHeading,'/');
q = 1;if(sortMode == 'alpha'){for (p in Delicious.tags){tagURL =encodeURIComponent(p);strip = p.replace(/_/g,' ');
if(strip == delCommonTag){continue;}otext = strip +' ('+Delicious.tags[p]+')';ourl = delTagPost+'?'+tagURL;
sel.options[q] = new Option(otext,ourl);q++;}}if(sortMode == 'freq'){delSort = new Array();for(i in Delicious.tags){
delSort[delSort.length] = [i,Delicious.tags[i]];}delSort.sort(mysortfn);for(i = delSort.length-1; i >=0; i--){
tagURL =encodeURIComponent(delSort[i][0]);strip = delSort[i][0].replace(/_/g,' ');if(strip == delCommonTag){
continue;}otext = strip +' ('+delSort[i][1]+')';ourl = delTagPost+'?'+tagURL;sel.options[q] = new Option(otext,ourl);
q++;}}document.getElementById('d2bSelect').appendChild(sel);}
function d2bWritePostCat(bIN, bTgs){cat = document.getElementById('cat-'+bIN);itemTags = bTgs;
if(itemTags){cat.innerHTML = d2bPostCatHeading;linkTags = itemTags.split(catSplit);for (i = 0; i < linkTags.length; i++){
if (i > 0){cSep = document.createTextNode(delSep);cat.appendChild(cSep);}strip = linkTags[i].replace(/ /g,'_');
encodeTags=encodeURIComponent(strip);a = document.createElement('a');a.href = delTagPost+'?'+encodeTags;a.className = 'small-del-link';
a.title = delTagLinkText+linkTags[i];tx = document.createTextNode(linkTags[i]);a.appendChild(tx);
cat.appendChild(a);}}else {cat.style.display = 'none';}}
function d2bAdminWrite(adN,adTgs,adTitle,adURL){d2bAdmin = document.getElementById('d2bAdmin-'+adN);var itemTags = adTgs;
var urlTags = '';var linkTags = itemTags.split(catSplit);for (i = 0; i < linkTags.length; i++){var strip = linkTags[i].replace(/ /g,'_');
urlTags +=strip+' ';}if(delCommonTag != 'false'){urlTags += delCommonTag;}encoTags = encodeURIComponent(urlTags);var postTitle = adTitle;
urlTitle = encodeURIComponent(postTitle);a = document.createElement('a');tx = document.createTextNode('Delicious');
a.appendChild(tx);a.href = "http://del.icio.us/"+delUserName+"?url="+adURL+"&title="+urlTitle+"&tags="+encoTags;a.title = "Post to Delicious";
d2bAdmin.appendChild(a);}
function d2bCloakRecentUL(){rec = document.getElementById('recently').getElementsByTagName('a');for(i=0; i < rec.length; i++){
if(rec[i].href == delTagPost){rec[i].parentNode.style.display = 'none';}}}
function d2bCloakRecentSelect(){rec = document.getElementById('posthide');for(i=0; i < rec.options.length; i++){
value = rec.options[i].value;if(value == delTagPost){rec.options[i] = null;}}}
function d2bCloakArchiveUL(){arc = document.getElementById('archive-list').getElementsByTagName('a');for(i=0; arc.length > i; i++){
if(arc[i].href == delArchivePost){arc[i].parentNode.style.display = 'none';}}}
function d2bCloakArchiveSelect(){rec = document.getElementById('archivehide');for(i=0; i < rec.options.length; i++){
value = rec.options[i].value;if(value == delArchivePost){rec.options[i] = null;}}}
function d2bCloakPostFooter(){if(d2bCurrent[0] == delTagPost){document.getElementById('delpost-footer').style.display = 'none';}}
function mysortfn(a,b) {if (a[1]<b[1]) return -1;if (a[1]>b[1]) return 1;return 0;}
//]]>
</script>

These should be pasted without modification. Originally the #4C section of scripts was linked to an external file hosted at googlepages. For various reasons, I'm no longer linking to that file and new users should insert the scripts into the template. If you have a place to host scripts, and want to keep your template a little cleaner, then you can use the #4C section and save it as a txt file with a .js file extension and link to it. The link to an external file should be placed AFTER the variables. Otherwise, for most people just copy and paste the scripts into the template itself.

Step #5

Now, still in your template go down the where your sidebar is. We will insert the code snippet that will display your tags from del.icio.us. Wherever you want the 'Categories' to be listed.

<h2 class="sidebar-title">Categories</h2>
<div id="d2bList"><noscript><p>Javascript must be enabled for Categories</p></noscript></div>
<script type="text/javascript">
d2bWriteList('alpha');
</script>

Now, save the template changes and republish the entire blog. If you have already tagged some posts on del.icio.us then they should start showing up now. If not, now would be a good time to tag a couple of your posts on del.icio.us to see if everything is setup correctly. Once you have something on del.icio.us it should show in your sidebar, and clicking on the link should take you to the 'category' page and it should display the post's title, tags, and if entered it's notes. For the moment just use the del.icio.us tools to tag a couple of posts, there will be more on how to tag at delicious later.

If you want the category listing to be based on frequency (the number of posts in each category) rather than alphabetically, change the

d2bWriteList('alpha');

to

d2bWriteList('freq');

If you want to use a "Category Cloud" listing in place of or in addition to (you can have both if you want) insert the following code where you want the "Cloud" to appear.

<h2 class="sidebar-title">Category Cloud</h2>
<div id="d2bCloud" class="delicious-tags"><noscript><p>Javascript must be enabled for Categories </p></noscript></div>
<script type="text/javascript">
d2bWriteCloud('alpha');
</script>

Again, if you want a listing based on frequency rather than alphabetically, change the alpha to freq. This will get a cloud based on the default variable settings which should be tweaked to get the size/color/layout you want. Complete details on the settings for the cloud available on the Configuration Page. You can change the text in the h2 heading to whatever you want for both of these, or give that heading a different class style if need to match your template.

If you want the list of categories in a drop down menu then copy and paste the following code where you want it to appear.

<div id="d2bSelect"></div>
<script type="text/javascript">
d2bWriteSelect('alpha');
</script>

Again you can change the sort method by changing alpha to freq. You can use any one of these 3 scripts to show the category listings, or you can use all 3. Only one call is made to del.icio.us for these and the sorting is taken care of on this end.

This is the very minimum steps that need to be done to get a basic listing. Everything else that follows is tweaks. If this isn't working then don't go any farther until you figure out why

All of the following steps are optional but add some feature or tweak to the method. Use what you want.

Step #6

Cloaking the category post and archive - If everything is working and pulling in the posts from del.icio.us now you may want to 'hide' the category post so it never shows in your 'recent posts' listing, and also to hide the archive it's in so it doesn't show.

For the Recent Posts listing, find where the code is in your Blogger template, it should look something like this

Note - for this script to work, the recent posts must be in a ul list with the id of "recently". This is the default setup in most Blogger templates. Now copy and paste the following snippet directly after this section.

<script type="text/javascript">
 d2bCloakRecentUL();
</script>

Now similar procedure for the archives. Find the bit of code for it. It should most likely look something like

Note - by default most Blogger templates have the archive code in a ul with a CLASS of "archive-list". This must be changed to an id="archive-list" per the example for the following code to work. Now just copy and paste the following snippet after the archive code.

<script type="text/javascript">
 d2bCloakArchiveUL();
</script>

Code for Hiding When Using Drop Down Menus + -

Step #7

Creating links to the category for each post - Now if you want to add a link for each post showing which category(s) it is in here's how to do it. We'll be using a feature of Blogger that most are not using in it's intended manner to 'hold' the category for each post (and this will also be used to create the one-click posting to del.icio.us in the next step). But this requires that you are not already using the Blogger "Link Field" option. Most aren't. If you don't know, then you aren't.

First we have to enable the "Link Field" option in Blogger. Login and goto Settings>Formatting> Scroll down to you get to Show Link Field and set to yes. Then scroll down to the bottom of the page and save your settings. If you want to see if it works, go to create a new post and there now should be a new box underneath the "Title" field labelled Link. This is where you will be able to enter in the Category for each post. If you have already been using the Link Field option then you cannot start using this for the categories. And you cannot enable this and step #8. But most Blogger's don't even know it's there so it shouldn't be an issue for most people.

Now, we have to take care of a few more things in your template to use the link field as we want. Some cleanup first. Most standard templates have the tags output by the "Link Field" setup to display around the posts title. The Blogger tags the Link Field uses are <BlogItemUrl><$BlogItemUrl$></BlogItemUrl> . We need to find those tags if they are in your current template and remove them and anything inside those tags so we can use them somewhere else. So here is how most of the templates have them setup

    <h3 class="post-title" >
   <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
   <$BlogItemTitle$>
   <BlogItemUrl></a></BlogItemUrl>
    </h3>

The two lines highlighted in yellow are the ones that need to be completely removed from this template setup, leaving just the <h3 class="post-title" ><$BlogItemTitle$></h3> behind. What these tags normally do is when a URL is entered in the 'link field' they create a link setup around the post's title to that URL. But if you've never entered anything in the field, they haven't done anything so you won't miss them. And we need them to do our evil bidding.

Once those are purged from your template, here's the code snippet you need to insert so we can use the link field option. Now you can put this either after the post in the footer section, or before the posts starts after the title/date section, where ever fits your needs. This will create a default listing that says " Category: Your Entered Category ". Customizing that link will be covered in the Configuration Page.

<span class="cattags" id="cat-<$BlogItemNumber$>"></span>
<script type="text/javascript">
d2bWritePostCat("<$BlogItemNumber$>","<BlogItemUrl><$BlogItemUrl$></BlogItemUrl>");
</script>

A note on naming your 'categories'. When you make a new post, enter in the category you want to put that post in "Link Field" box underneath the title. You can put a post in more than one category by separating them with a comma. And although del.icio.us does not support "mulitple word tags", the scripts simulate them by adding an _ where there are spaces, then stripping out the underscores when displaying the tags as categories on your blog. So for an example, if you enter in Cat Pics, Fluffy in the link field, the post should be tagged as Cat_Pics Fluffy on delicious. If you implement the one click posting to delicious in step#8 then this is taken care of automatically by the scripts. Just keep that in mind if you use some other method to tag your posts at del.icio.us. You can put a post into as many different categories as you want, just separate them with commas in the link field.

Also a note for illegal characters in category names. You should NOT use double quote marks " in your category names NOR should you use the double quote marks in your Post Titles. Single quote marks ' ' are ok. The plus sign (+) and most other special characters (*&%$) should be avoided. Some are ok and some aren't. # and @ are OK. Also for international users, if your language has non-English characters such as umulats and accent marks, they are ok but your blog should be using a UTF-8 encoding to make sure they work correctly.

Note, just putting the category into the link field does not post it to delicious...it just takes care of the links on the blogger side. But if you implement step #8 next, then posting to delicious is one-click super easy and you only have to enter in your categories once.

Step #8

One-click posting to delicious with title,url, and tags pre-filled - If you have step #7 setup, then you can follow this to setup your one-click post to delicious that makes everything very easy. What this will be is a link on your blog for each post that when click will take you to your delicious account and fill out everything (except notes) for you. You only have to enter in your categories/tags once in the Blogger link field. But since this link is hardcoded to your delicious account (it has to be to pass the tags information to it) you probably don't want to have this link available for visitors to your blog to see. Since we want to pass as much information as possible with it, it's not like all the other 'bookmark on delicious' links you have seen on most blogs, or that you may already have.

Now the way we can make this link available only to you is in the same manner that the Blogger Quick Edit Links work. If you have those enabled and working properly, then follow these steps. A little involved but worth the effort.
Complete details on how to setup a "conditional" link on Blogger is available from their help page on it but in a nutshell you need to do a View Source on your blog page and find in the spot where the Quick Edit icon shows up it will be surrounded by a tag that looks like

<span class="item-control admin-XXXXXXX pid-YYYYYYY">

where the XXXXX's and YYYYY's will be numbers just for your account that will allow only you to see it. You'll need to copy the admin -XXXXXX pid-YYYYY bits from your blog's source and substitute it in the following code.

Tip: If you are using Firefox, you can find that section more readily by highlighting the Quick Edit Link and a small bit of text before it, right-click, choose "View Selection Source" to bring up the source for just the highlighted section of the page.
For other browsers, View Source then do a search/find for the word "item-control" and it should bring up the relevant section quickly.

<span id="d2bAdmin-<$BlogItemNumber$>" class="item-control admin-XXXXXX pid-YYYYYY">
</span>
<script type="text/javascript">
d2bAdminWrite("<$BlogItemNumber$>","<BlogItemUrl><$BlogItemUrl$></BlogItemUrl>","<BlogItemTitle><$BlogItemTitle$></BlogItemTitle>","<$BlogItemPermalinkUrl$>");
</script>

Copy and paste that code wherever you want the post to delicious link to appear (if you want it next to the Quick Edit Link-look for the Blogger tag <$BlogItemControl$> and place it after that), again remember to replace the admin-XXXXXX pid-YYYYYY part with the appropiate numbers for your blog. Like I said this works just like the Quick Edit links, so if those are working for you and you set it up correctly, then only you will be able to see this link.

Then when creating a new post it's as easy as -Make the post- Fill out the category you want in the Link Field- Publish, View your blog, then click on the delicious link to add it to delicious with the tags etc all filled out. Now if you want to add a note to each post (as I do) so it will be displayed when that category is selected, what I do is just copy the first few lines I want to add before clicking the delicious link, then paste it in the notes field at delicious before saving. I believe the limit on the notes field is 255 characters at delicious, so if you go over that it will just truncate it. Good enough for several lines of text anyway.

Step #9

Tweaking the Category Page - There are a few tweaks to how the category page displays that need some changes to the template to occur. What can be changed is on the category page when selected, the displayed title heading can be made to show which category was selected, the date header can be hidden for that page, and the normal post-footer area can also be hidden. If you want these options here's how to get them.

In your template, you'll have to find first where your post's date is displayed. Most standard Blogger templates will have it looking something like this, although other templates should have something similar.

However yours is setup, we need to add an id to the tag surrounding the <$BlogDateHeaderDate$> , whatever kind of tag it is. Here it's an h2 tag. We need to add the id of 'delpost-date' to it, so our example would end up looking like

Similar procedure for the post's title. Find the code for it. Here's another example

Here we need to add another id, this time is an id of "delpost-title" so our example would look something like this.

Once these are in place, then the title will automatically be changed to display the selected category on the category page, and the date will be hidden.

Now, since the category page is a little different from your normal post page, you may also want to hide the "footer" area of your post also for that page. If you do then find the area for the post footer. Here's another example.

<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> etc etc etc a bunch more code here.

We need to add another id to the html tag that is containing the footer information. Here's it's a p tag, but it could be anything depending on your setup. Whatever it is add an id of "delpost-footer" to it so it looks something like

<p class="post-footer" id="delpost-footer">
<em>posted by <$BlogItemAuthorNickname$> etc etc etc a bunch more code here.

Then one more thing needs to be added for the footer section to be hidden. Right after the footer section copy and paste this snippet

To see if these are setup correctly, save the changes in your template. Republish the entire blog, and check the category page out (make sure to load the new page out of your browsers cache). The title should change based on the category selected, the date should be hidden, and the footer should also be hidden.

For HardCore HTML'rs

That's about it with the installation of the scripts. Hopefully if you've made it this far everything is operating. Detailed instructions on the Configuration of all the scripts and some tips on the CSS stylings can be found in the Configuration Page. And if you have any comments or questions, you can always leave them at the blog post.