Turn the Blog Archive into a Calendar widget

I noticed whilst adding posts predated to the 1970s that the standard Blog Archive widget would not display the posts prior to 1990. This was really annoying. How could I fix this problem? Well, searching the Internet I came across a tutorial for converting a standard blog archive widget into a blog archive calendar widget. I thought I'd give it a try to see if it works.

I've added blog archive calendar widgets before and they weren't impressive. But after adding all the code to another template I now have the 1970s posts being displayed. It solved my problem and it came with a bonus - you can actually customize the look of the calendar to make it match the look of your blog.

Having posts dated prior to 1990 on Blogger is a bonus because you can put unimportant information in these posts and people generally won't go looking for them in your blog archives widget.

Anyway, hop over to the bloggerstop.net site and check out the tutorial. Its really simple to follow, and the widget is easy to instal.

http://bloggerstop.net/2009/12/add-blogger-archive-calendar-widget.html

WIDGET FIX AS OF 31 JANUARY 2013:
Delete the existing script that goes directly above the </head> and replace it with this code below:

<!-- Start Blogger Archive Calendar -->
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK1zW7mgP7KjVsbNppgrO3yAvEU5ta8dCV3Ej2ZPlYhA5bOX6XMKvVw8c4-py-L3FbzcmX-iSsSBz3yKaRhsWLzgj4tlPv1rVgqDRq9tKiHGbB0RC2fS6aqNJdWS1iVWvMykwP9UsCkYY/s400/loading-trans.gif.png";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];
// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();
//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
   document.getElementById('calLoadingStatus').style.display = 'block';
   document.getElementById('calendarDisplay').innerHTML = '';
  }
function closeStatus(){
   document.getElementById('calLoadingStatus').style.display = 'none';
  }
function bcLoadStatus(){
   cls = document.getElementById('calLoadingStatus');
   img = document.createElement('img');
   img.src = bcLoadingImage;
   img.style.verticalAlign = 'middle';
   cls.appendChild(img);
   txt = document.createTextNode(bcLoadingMessage);
   cls.appendChild(txt);
  }
function callArchive(mth,yr,nav){
// Check for Leap Years
  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
   calMonth = mth;
   calYear = yr;
   if(mth.charAt(0) == 0){
      calMonth = mth.substring(1);
      }
   callmth = mth;
   bcNavAll = document.getElementById('bcFootAll');
   bcNavPrev = document.getElementById('bcFootPrev');
   bcNavNext = document.getElementById('bcFootNext');
   bcSelect = document.getElementById('bcSelection');
   a = document.createElement('a');
   at = document.createTextNode(bcArchiveNavText);
   a.href = bcNav[nav];
   a.appendChild(at);
   bcNavAll.innerHTML = '';
   bcNavAll.appendChild(a);
   bcNavPrev.innerHTML = '';
   bcNavNext.innerHTML = '';
   if(nav <  bcNav.length -1){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavPrev;
      bcp = parseInt(nav,10) + 1;
      a.href = bcNav[bcp];
      a.title = 'Previous Archive';
      prevSplit = bcList[bcp].split(',');
      a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
      bcNavPrev.appendChild(a);
      }
   if(nav > 0){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavNext;
      bcn = parseInt(nav,10) - 1;
      a.href = bcNav[bcn];
      a.title = 'Next Archive';
      nextSplit = bcList[bcn].split(',');
      a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
      bcNavNext.appendChild(a);
     }
   script = document.createElement('script');
   script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
   document.getElementsByTagName('head')[0].appendChild(script);
}
function cReadArchive(root){
// Check for Leap Years
  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
    closeStatus();
    document.getElementById('lastRow').style.display = 'none';
    calDis = document.getElementById('calendarDisplay');
    var feed = root.feed;
    var total = feed.openSearch$totalResults.$t;
    var entries = feed.entry || [];
    var fillDate = new Array();
    var fillTitles = new Array();
    fillTitles.length = 32;
    var ul = document.createElement('ul');
    ul.id = 'calendarUl';
    for (var i = 0; i < feed.entry.length; ++i) {
      var entry = feed.entry[i];
      for (var j = 0; j < entry.link.length; ++j) {
       if (entry.link[j].rel == "alternate") {
       var link = entry.link[j].href;
       }
      }
      var title = entry.title.$t;
      var author = entry.author[0].name.$t;
      var date = entry.published.$t;
      var summary = entry.summary.$t;
      isPublished = date.split('T')[0].split('-')[2];
      if(isPublished.charAt(0) == '0'){
         isPublished = isPublished.substring(1);
         }
      fillDate.push(isPublished);
      if (fillTitles[isPublished]){
          fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
          }
      else {
          fillTitles[isPublished] = title;
          }
      li = document.createElement('li');
      li.style.listType = 'none';
      li.innerHTML = '<a href="'+link+'">'+title+'</a>';
      ul.appendChild(li);
      }
   calDis.appendChild(ul);
   var val1 = parseInt(calDay, 10)
   var valxx = parseInt(calMonth, 10);
   var val2 = valxx - 1;
   var val3 = parseInt(calYear, 10);
   var firstCalDay = new Date(val3,val2,1);
   var val0 = firstCalDay.getDay();
   startIndex = val0 + 1;
  var dayCount = 1;
  for (x =1; x < 38; x++){
      var cell = document.getElementById('cell'+x);
      if( x < startIndex){
          cell.innerHTML = ' ';
          cell.className = 'firstCell';
         }
      if( x >= startIndex){
          cell.innerHTML = dayCount;
          cell.className = 'filledCell';
          for(p = 0; p < fillDate.length; p++){
              if(dayCount == fillDate[p]){
                  if(fillDate[p].length == 1){
                     fillURL = '0'+fillDate[p];
                     }
                  else {
                     fillURL = fillDate[p];
                     }
                  cell.className = 'highlightCell';
                  cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
                 }
              }
          if( dayCount > fill[valxx]){
             cell.innerHTML = ' ';
             cell.className = 'emptyCell';
             }
          dayCount++;
         }
      }
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
    if(visTotal >35){
        document.getElementById('lastRow').style.display = '';
       }
  }
function initCal(){
   document.getElementById('blogger_calendar').style.display = 'block';
   var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
   var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
   document.getElementById('bloggerCalendarList').style.display = 'none';
   calHead = document.getElementById('bcHead');
   tr = document.createElement('tr');
   for(t = 0; t < 7; t++){
       th = document.createElement('th');
       th.abbr = headDays[t];
       scope = 'col';
       th.title = headDays[t];
       th.innerHTML = headInitial[t];
       tr.appendChild(th);
      }
   calHead.appendChild(tr);
  for (x = 0; x <bcInit.length;x++){
     var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
     var stripMonth = bcInit[x].href.split('_')[1];
     bcList.push(stripMonth + ','+ stripYear + ',' + x);
     bcNav.push(bcInit[x].href);
     }
  var sel = document.createElement('select');
  sel.id = 'bcSelection';
  sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
  q = 0;
  for (r = 0; r <bcList.length; r++){
       var selText = bcInit[r].innerHTML;
       var selCount = bcCount[r].innerHTML.split('> (')[1];
       var selValue = bcList[r];
       sel.options[q] = new Option(selText + ' ('+selCount,selValue);
       q++
       }                  
   document.getElementById('bcaption').appendChild(sel);
   var m = bcList[0].split(',')[0];
   var y = bcList[0].split(',')[1];
   callArchive(m,y,'0');
}
function timezoneSet(root){
   var feed = root.feed;
   var updated = feed.updated.$t;
   var id = feed.id.$t;
   bcBlogId = id.split('blog-')[1];
   upLength = updated.length;
   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
   else {timeOffset = updated.substring(upLength-6,upLength);}
   timeOffset = encodeURIComponent(timeOffset);
}
//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>
<!-- End Blogger Archive Calendar -->

The widget will then display properly again.

Add scrolling text to your blog

Scrolling text on a blog can be quite useful, especially if you want to alert your visitors to up-to-date news or information that they might want to hear about. It is often a good way of getting a message across to people that is easily distinguishable from all the written text on your blog. But often scrolling text can slow down your blog from loading and this can be a problem when you might have similar scrolling text or picture widgets, and a toolbar or two on your blog.

This particular scrolling text widget is searchable by Google, and probably other web search engines too.

There are lots and lots of scrolling text widgets available on the internet. I have found that most of them I came across were not customizable in any way or were of such poor quality that they actually slowed down my blog from loading, or would not scroll smoothly when the code was tweaked.

I got the marquee below from a website page on this site:
http://www.wishafriend.com/generators/scrollingtext but discovered once the marquee/scrolling text was created you can simply copy and paste the widget anywhere and it will work. The best thing about this scrolling text widget is it is fully customizable. You can add other bits of code to it and it will not be slowed down at all. I like to use this scrolling text widget a lot, and find it is the best one around that doesn't complicate things too much. It is easy to add information to, easy to customize and easy to add to your blog.

Here is the scrolling text code from wishafriend.com with a bit extra code in it:

<marquee style="width:100%; height:20px; background:#ffffff; margin:0 0 0px 0px;" direction="left" behavior="scroll" scrollamount="4">Add all your text here!</marquee>

To add this scrolling text widget to your blog, click on the "Design" link on your homepage, then click on any "Add a gadget" and select a "HTML/Javascript" widget from the"basics" section. Then you simply copy the code above and paste it into a "HTML/Javascript" widget in the "Edit widget" section, enter the text you want then click on "save". Click on "save" on the "Page Elements" section too as you just added a new widget, and then view your blog again.

At any time, day or night, you can re-edit the scrolling text widget, and update the text to something else. You can also add a background image to the text, add animated gifs or pictures to the scrolling text widget, and give it a border, etc. This widget is not one of those widgets that once you have the code you cannot change the code to suit your tastes or blog design. This widget can be changed whenever it suits YOU!

You can also change the direction of the text by changing "left" to "right", "up", or  "down", change the height and width of the width itself, and basically tweak it as much as you like. Also, the speed of the text scrolling by can be changed too. The "scrollamount" controls the scrolling speed. "scrollamount="4"" is a medium speed for the text but if you want the text to go faster change "4" to a higher number, like "6", for example. If you want the text to go slower change the "4" to a "2" - any number between "0" and "3" actually. "0" (zero) is the slowest speed ever for the scrolling text to travel at.

FOOTNOTE: If you are adding an animated gif or image that is larger than 20px in height, you must change the height of the scrolling text widget to match the size of your image otherwise the scrolling text will be pushed below the widget's margin and you will not see the text at all.

This is what the marquee looks like. A marquee is another word for scrolling text. I have given this one a yellow background and have set the text to bold.

Problem with marquee. If you add a lot of text, as in the above example, a lot of the text at the end will be cut off. To solve this problem set the marquee with to a higher % width. In the marquee below I have set the width to 200% and all the text is displayed within the marquee.

This is what the marquee looks like. A marquee is another word for scrolling text. I have given this one a yellow background and have set the text to bold.

Add a Google Translate widget to your blog

Have you ever been on Google browsing the web, and came across the "Translate this page" link next to the web page's url and description? Let's say you click on that "Translate this page" link, and Google takes you to the url in question, and at the top of the page is a language translate toolbar sort of thing. Have you ever wanted to add that Language translate toolbar thing to your blog? Well, today is your lucky day!

Below is the code for the Google Translate toolbar thing (widget). It is NOT the exact same one but it is a close resemblance to that translate toolbar:

<p align="center"><div id="google_translate_element"></div><script>

function googleTranslateElementInit() {

  new google.translate.TranslateElement({

    pageLanguage: 'en',

    multilanguagePage: true

  }, 'google_translate_element');

}

</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></p>

To add this widget to your blog, copy the code above and then go to your "Page Elements" section, and click on any "Add a gadget". Click on the "+" button to select a  "HTLM / Javascript" widget and paste the code into that "HTML/Javascript" widget. Give the widget a name if you want to, and finally click on "SAVE" to finally add it to your template.

It is that easy and you do not have to do anything else. If you want to test the Google translate widget before you add it to your blog, have a play with the one on this blog. The Google translate widget for this tutorial, and the one on this blog are the same widget /code.

Add a Sitemap to your blog

This should be a simple and short tutorial because it only involves 4 lines of code copied and pasted to a page or new post. You'd think it should be a short tutorial but after thinking about this topic I decided to add some "NEED TO KNOW" information about this widget that will help you immensely. Please read this tutorial from beginning to end before adding the sitemap code to your blog.

Sitemaps on a website are always very useful. It is a known fact that when a visitor becomes stuck, either because of poor navigation, not knowing where to look for something, or is just having a hard time finding what they are after, they will always turn to a sitemap or table of contents page if they can find it. If they cannot find either page they will leave your website or blog and go elsewhere.

Some months ago I found several sitemap/table of contents widgets. I wanted to add one to one of my other blogs. I tried a few of them out but most of them were really complicated, and I had to add the urls manually into the sitemap.

To be honest I don't like wasting my own time trying to achieve something. Having a sitemap on any blog, even if it is not submitted to Google or some other place, is a really wonderful thing. People will stay on your blog a lot longer simply because you have a sitemap or table of contents page.

Of all the Sitemap widgets/code out there, I am going to give you the code for the best one available, and talk about it a bit more.

Below is the code for the same sitemap that I am using on this blog. I located this sitemap widget at http://www.abu-farhan.com

Here is the sitemap widget code:

<script src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js">
</script><script src=http://bloggertutorialsabforeveryone.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc>
</script>

That's all there is to it, just six lines of code.

Now, before you add the six lines of code to your own blog, THERE IS SOMETHING YOU NEED TO KNOW ABOUT THIS WIDGET. The sitemap will not have a white background as it is supposed to, if you have, let's say, a blue coloured background for your posts. I don't know why that is so, but that is just how it is with this widget. SO, BEFORE YOU ADD THIS WIDGET TO YOUR BLOG PLEASE CHANGE THE COLOUR OF YOUR POSTS' BACKGROUND TO A WHITE OR VERY PALE COLOUR THEN SAVE YOUR TEMPLATE. This you must do otherwise the sitemap will simply not display properly, or at all. If you don't change the colour of your posts background you will have to delete the widget and start all over again.

HOW TO ADD THE SITEMAP CODE TO YOUR BLOG:
Firstly you need to think about where you are going to put the sitemap on your blog. The best place to put the sitemap code is in one of the ten static pages that you have on your blog. But if you have used up all your ten static pages, then simply place the Sitemap code into a new post.

Once you have figured out where you want to put the sitemap, you can now copy the six lines of the sitemap code and paste it into the 'EDIT HTML" tabbed section - the tabbed section appears when you are editing a post or static page. Do not paste the code into the "Compose" section.

With the sitemap code pasted in the "Edit HTML" section of the post or page, if you click on the "Compose" tab nothing will show up. All that you will see is an empty white page and it looks like nothing has been added to that section at all. If nothing at all shows up in the "Compose" section then the sitemap code is working properly. The blank white page in the "Compose" section is exactly what is supposed to happen, so do not think you done something wrong. You have not done anything wrong - in fact, you added the code correctly.

I do not know why the sitemap code is supposed to go in the "Edit HTML" section, but what I do know is if you place the code in the "Compose" section the whole sitemap widget will not work and it will only display some of the javascript code itself if you click on publish then view that post or page. So just remember, place the code into the "Edit HTML" section, and it will display perfectly.

Now before you click on "save" you have to change the url in blue to your own url. If you do not change the url one of two things will happen. 1. The sitemap will not display anything at all. Or, 2. The sitemap will retrieve all my information from my blog and will add it as your own sitemap's content. So, please change my blog's url to your blog's url - only the part in blue remember, and then click on "save". That's all that you have to do.

BUT HOW DO I CHANGE THE LOOK OF THE SITEMAP ITSELF TO DISPLAY OTHER HEADINGS?
For the time being you may like the overall look of your new sitemap but after looking at it you may want to change how everything is listed in the sitemap itself. Well, let me tell you a little secret: Everything listed in your sitemap is entirely dependant on what "Labels" you give each post. Each "Sitemap HEADING" is actually an individual "LABEL" for each blog post.

Confused? Okay, let me tell it this way, and hopefully you will understand it better. Every time you add a new label to a blog post those labels become individual "HEADINGS" in your sitemap. For example, I have only added "Blogger tutorials" as this post's labels. The moment I publish this post that label will automatically be added as a new "HEADING" in my sitemap.

Underneath each "HEADING" in the sitemap will be a list of blog posts that will have the same labels attached to them. And that is how this sitemap code works and displays the contents of your sitemap.

But let's say you want to change the "HEADINGS" of your sitemap, and the list of blog posts that will be displayed underneath each heading. Okay, the very first thing you need to do is think about, and even write it down on paper, of how you want all your blog posts to appear in the sitemap. Let's say you have a blog about dogs, and that is all you write about. Sorry, I couldn't think of anything else. Let's say you want these particular headings:

* Tall dogs
* Short dogs
* Purebred dogs
* Mongrels
* Hybrids
* Police dogs
* Working dogs
* Unusual breeds of dogs
* Strange behaviour of dogs
and,
* Native wild dogs

Let's also say you already have 251 posts about all the dogs you could ever think of on Earth. Now, because this sitemap widget does not allow for subheadings to be added to the sitemap itself, your only option with this particular widget is to reword the title of each blog post.

The title of each blog post is what will be displayed underneath each heading in your sitemap. So, you will need to come up with a clever way of displaying the contents of your sitemap underneath each of the ten headings about dogs.

For example, let's say you wrote an article about Police dogs, and it was about "Training German Shephards from a young age". Maybe you gave the post this title: " German Shephard Police Dog training". Anyway, let's say you have similiar post titles but the contents of each post is different in regards to German Shephard Police Dogs being trained. You simply reword each blog title so it looks more like the table of contents page of a book. Give your blog post titles very specific "titles" so they will be more of an accurate description of the contents of the blog posts. For example, instead of having the title " German Shephard Police Dog Training" you could give it the title of "Training German Shephards at a young age", or to actually give your sitemap subheadings, reword it to something like this: "German Shephards: Training young dogs".

THE SITEMAP LISTS EVERYTHING ALPHABETICALLY
The sitemap will automatically put everything into alphabetical order for you, but it also has the habit of separating capital letters from lowercase letters at the beginning of each label. Every number label you add (e.g. "2011" or "200BC", etc) will always be at the very top of the list in the sitemap. All words that start with a capital letter that you add to a post as a label will be displayed in the middle of the list in the sitemap. And every lowercase word that you add to a post as a label will automatically be put at the bottom of the list. Within each of these three sections (numbered labels, Capital letter labels, and lowercase labels) each lot of posts will also be categorized alphabetically within/underneath each heading. So, the trick is to start each label with a capital letter. It will look like this, from top to bottom in the sitemap:

2011
Little dogs
big dogs

HOW TO AVOID BLOG POSTS FROM APPEARING MORE THAN ONCE IN YOUR SITEMAP?
There is only one solution for this and that is to only give each post one "label". If you really want a neat and tidy sitemap it is better to relabel all your posts so each post is displayed underneath the appropriate heading, and begin each "label" with a capital letter.

HOW TO CHANGE THE LABELS FROM LOWERCASE TO CAPITAL LETTERS:
If labels frustrate you when you try to change them there is an easy and quick way that will eliminate your frustration. Normally if you change a label and save it the label will resort back to the original label you gave a blog post. It doesn't matter what you type in as a label, it will always revert back to the original label. This is simply because the label you want to change will always exist until you delete it.

The trick to this solution is simple. What you do is open the blog post in the "Edit" section and delete all the lowercase labels, or the labels you want to change. Then you click on the "save as draft" button underneath. You will then be shown the "Edit Posts" page. Locate the blog post you just deleted the labels from and click on the "Edit" link next to it on the left. Your old labels have now been permanently removed so you can now add new labels all starting with a capital letter, or however you want your sitemap headings to appear as.

Once you have added the new labels to the post click on the "Publish Post" button and you are done.

Now that you have read this post in its entirety you can now go ahead and change your posts' background colour to "white", save it, and add the sitemap code to your blog. Have fun with it.