Blogger Tutorials for everyone: Widgets

Showing posts with label Widgets. Show all posts

The perfect cross browser marquee that doesn't cut the contents off in Internet Explorer.

Tuesday, August 28, 2012 at 2:42 PM 0 comments

LIVE-DEMO (Mine), and live-demo HERE ON MY FRIEND'S BLOG .

If you do not use Internet Explorer as a web browser you may not know that these general marquee codes <marquee>TEXT GOES HERE</marquee> have the habit of cutting off the content of marquees once the width of the marquee has been exceeded. So, visitors who use Internet Explorer only see some of your scrolling text NOT ALL OF IT, if you have a lot of text and links added to a marquee.

In trying to solve the problem of marquee content being cut off in Internet Explorer but not in other browsers for my friend Taylor, I stumbled across THIS WEBSITE. I added the marquee code but found I couldn't customise the link colours. I seriously needed to customise the link colours!!! In the end I had to create my own css code for the marquee. It was complicated but this tutorial is the final result of all my hard work. NOW NO MORE TEXT BEING CUT OFF IN MARQUEES NO MATTER HOW LONG THE CONTENT IS!

Okay, if you want to add this marquee to your blog, then you need to follow my instructions below. The instructions is for creating a div area for the marquee and adding css code so you can customise the text and link colours within the marquee itself, and then adding the marquee code to a HTML / Javascript widget.

INSTRUCTIONS:

Copy and paste the code below this text directly above ]]></b:skin>

/* Scrolling Text

----------------------------------------------- */

#scroller-wrapper {

width: 1100px;

height: 20px;

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4hE9MkEOi0Q7ET8Znn7qSte2vbdqWlkLlWhP_nA7Wa0X7BWLMft5kYN7EUaCUMgFARXQYRsVIyVuw1VLQwTlltaw9yNlSK2d5EmvdLayKFIbMfQ92mHbpxNxc6OLYi62j-8GGf4bK2U/s136/youarehere.png);

background-position:left;

background-repeat:no-repeat;

margin:-10px 0 0px 0;

padding:0 0 3px 0;

}

#scroller {

float:right;

width:993px;

color:#fff;

}

#scroller a {

color:#fff;

margin-left:0;

margin-right:10px;

}

#scroller a:hover {

color: #66cd00;

}

Then, wherever you want the scrolling text to display on your blog, after the <body> tag and before the </body> tag paste in the following code:

<b:section class='scroller' id='scroller' maxwidgets='1' showaddelement='yes'/>

</div>

Then click on "Save Template". Now go to your "Design" tab and you will see an "Add a Gadget" widget where you want the marquee to be displayed. Click on the "Add a Gadget" link and select a "HTML/Javascript" widget to put there.

Now, I've had some problems with the next lot of code being added to this post, so I will have to give you the link for the original place where I found this cross-browser marquee code that goes into a widget. Click on the link HERE and copy THE CODE THAT IS IN THE SCROLLING TEXT BOX FROM THAT SITE.

Then paste that code into the HTML/Javascript widget and then click on "Save" to save the widget.

Click on the "Save" button on your "Design" page. You're almost done!

HOW TO EDIT THE LOOK OF THE MARQUEE AND SCROLLING LINKS/TEXT:

STEP 1: Firstly, go to your "Edit Template" page and then you will need to find the width of the area where you placed the marquee widget. For example, if you placed the marquee widget directly below your header, then find the width of the #header-wrapper (or header-outer) or if you don't have a width for that widget then the #content width will suffice. If you placed the marquee widget directly above your blog posts within the main-wrapper (or main) area then find the width of the #main or your #post width, if there is one. Once you find the corresponding width highlight and copy it.

STEP 2: Scroll up and locate the css code for the #scroller-wrapper (See first lot of code I added to this tutorial), delete 1100px and paste in the new width.

STEP 3: Change the #scroller colour from #fff (white) to the colour of your choice. Note that this is just for text only that will be added to your marquee and not any link colours.

STEP 4: Change the #scroller a colour from #fff (white) to the colour of your choice. This is for what colour you want your links to be displayed as.

STEP 5: Change the #scroller a:hover colour from #66cd00 (green) to a colour of your choice. This is only for the link hover colour.

STEP 6: If you want to add a visited colour as well, then add this code to the css code as well:

#scroller a:visited {
color: #66cd00;
}

and change the #66cd00 (green) to the colour of your choice.

Once you've made these changes click on "Save Template.

EDITING THE URLS IN THE MARQUEE WIDGET:
Simply replace the existing urls with your own urls, and replace the existing text with your own text that is between the <font face="Arial"></font> tags. BE CAREFUL OF WHAT YOU ARE DOING!!!

IMPORTANT AND REMEMBER THIS: When adding a link url to your scrolling text - which is now a widget - you must add the double " either side of the url. The code won't accept a single ' surrounding urls. If you make just one mistake with the urls the whole thing will not display the scrolling text. It is a very delicate, and tempermental, code.

Every bit of text you add to the marquee must be added within the <font face="Arial"></font> tags. If you alter the font code by adding more code to it, it will most likely not display your scrolling text.

Also: The scrolling text will not display anything if you add <span></span> code to it when adding links or text.

The scrolling text also will not display the content if you add hex codes for spaces between each link.

The scrolling text does not display anything if you separate links and text with line break codes <br /> nor if you add each link on a new line. However, it does not mind it if you press the space bar once or twice between each link code.

After all the changes are made to your scrolling text/marquee, you will now have scrolling text that will now be visible in many web browsers. It displays ALL THE CONTENT in Internet Explorer 7, Firefox, and Google Chrome. If you use another web browser and this works in that web browser please leave a comment below.

Add a Google Map to a blog post

Thursday, July 26, 2012 at 3:42 PM 1 comment

Browse the world until your eyes are sore!

Check out the street views of where I live - Tenterfield, Australia! You need to click on the View Larger Map link at bottom for street view mode.

View Larger Map

Some time ago, on a blog far, far away which now no longer exists, I added a Google Map to a post. It was to display where I lived in Tenterfield, New South Wales, Australia. Anyway, I saved the code for how to add Google Maps to your blog, so here is the code below:

Unfortunately I haven't figured out how to add a "Street View" Google Map to a blog post yet, but I do know it won't display in an iframe.

Turn the Blog Archive into a Calendar widget

Monday, July 2, 2012 at 2:34 AM 3 comments

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:

<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&alt=json-in-script&callback=timezoneSet'/>

The widget will then display properly again.

Add a Google Translate widget to your blog

at 1:50 AM 1 comment

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:

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

at 1:33 AM 3 comments

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&alt=json-in-script&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.

Customised Pages widgets using table code

Thursday, May 17, 2012 at 2:01 AM 0 comments

There is a live-demo of this widget on this site (right hand column at the very top). Click the expandable/collapsible "Pages" title to view it.

Searching the Internet for ideas is time consuming but I came up with an idea to create this particular widget because sometimes the static pages, the labels widget and the pages tab (standard blogger widgets and features) is simply not enough and are a bit restricting.

With this tutorial you can create a second lot of categories or pages/posts that have specific descriptions or tags. For example, on this site (Blogger Tutorials for everyone) I have a specific set of tutorial labels and the posts are displayed via a separate link list rather than a labels widget. But if you want to create something different for displaying other pages then this tutorial is ideal for that.

On Blogger you are limited to just 20 static pages. That's not many when you might have big ideas about what you want to add to your blog. Using up 20 pages can happen quite quickly, especially if you add things like a contact form page, About Me page, Sitemap page, Videos page, News page, etc. And with the standard Pages tab widget, or some other form of navigation menu bar you might have on your blog (or lack of one), you (and your visitors) might become overwhelmed by all the pages.

So, for something completely different.... I have created two Page widgets that are made from table code that can handle a whole lot of pages listed in them. The widgets (especially the one placed in a main static page) makes your blog less overwhelming and much easier to navigate.

Installing the first widget:

The first widget is placed in the side column of your blog in a HTML/Javascript widget. It displays an image for each page of the two pages listed; and a link plus text for the name of the page. Below each of the two Page's names is more text - an area where you write a brief description of what the page is about. Underneath all of that is a link that will lead you to the main page where all your remaining pages will be listed.

The bottom most link in the widget is then linked to the 2nd widget (the static page widget) using just a url address which is placed in the last lot of table code in the 1st widget. Confused? Don't worry... the instructions are below.

Go to your Design tab and select "Add a gadget". Select a "HTML/Javascript" widget from the basic menu.

Now copy the code below these images and paste it into that widget like in this image.

Hit the "SAVE" button on the Design page

GRAB THE CODE BELOW:

<tr><td style='width:20%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px;'><img align='left' alt='page 1' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin:0 1px 0 1px; border:0;' width='35'/></td><td style='width:80%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:1px;'><a href='#'><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 1</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here .....</p></td></tr>

</table>

<tr><td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><img align='left' alt='page 2' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin-right:5px; border:0;' width='35'/></td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><a href='#"><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 2</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here ..... </p></td></td></tr>

</table>

<table border='0' cellpadding='0' cellspacing='0' style='margin:0 5px 5px 10px;'><tr><td style='width:100%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; text-decoration:none;padding:5px 5px;'><a href='#"><span style='color:#00ff00;margin-left:10px;'>Click to view more Pages</span></a></td></tr>

</table>

Result: You end up with everything within the blue border anyway.

Installing the second widget:

This is what the second widget will look like

once placed in a static page.

Go to the "Edit Post" page as if you are going to write up a new post. Then click on the "Edit pages" tab. Now click on the blue button to create a new page. Write the title of the new page and then paste all the code below into the contents area and then click on the "Publish" button.

<br />

Here is some text to describe the page.</div>

</td></tr>

</tbody></table>

<br />

Here is some text to describe the page.</div>

</td></tr>

</tbody></table>

Once you have done that create new pages by add the titles for each page and add content to them. Publish each page.

Customising the Page table widget links.

Do not copy and paste the following lots of code below. It is being repeated for reference only!
With this next bit it is most helpful to have two browser tabs/windows open of your blog so you can browse your blog and collect the urls to add to the Page widgets.

Here's the first widget's code again. READ INSTRUCTIONS BELOW THE CODE!

<tr><td style='width:20%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px;'><img align='left' alt='page 1' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin:0 1px 0 1px; border:0;' width='35'/></td><td style='width:80%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:1px;'><a href='#'><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 1</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here .....</p></td></tr>

</table>

<tr><td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><img align='left' alt='page 2' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin-right:5px; border:0;' width='35'/></td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><a href='#"><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 2</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here ..... </p></td></td></tr>

</table>

<table border='0' cellpadding='0' cellspacing='0' style='margin:0 5px 5px 10px;'><tr><td style='width:100%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; text-decoration:none;padding:5px 5px;'><a href='#"><span style='color:#00ff00;margin-left:10px;'>Click to view more Pages</span></a></td></tr>

</table>

INSTRUCTIONS:

With the first page you have created, let's say you called it "Sitemap", (not the one with the Page widget on it) copy the url for it and open up the Pages widget in the sidebar of your blog. In the code above you will need to highlight and paste the url in where there is the first instance of a blue # symbol. Type in the Page's title (Sitemap) where it says "Page name 1". Then write a brief description of the page where it says"Add information about this page here .....". Repeat this step for a second page you have created.

Lastly, copy the url of the static page where you placed the "Second widget" code. Paste that url where the red # symbol is. Then save the widget.

ALMOST DONE!

With the static pages you have created that do not have these Pages widgets code on it, you need to copy and paste each url into the static page you created that does have the code in it. Simply but carefully add each url and add each title and a brief description of each page. Once you have completed the page, PUBLISH IT.

Some ideas for Pages to add to your new widget on your static page:

About
Contact
Invite a friend
Links/Favorites
Photo Album
Photo Gallery
Main Gallery
Videos
Video categories
Projects
Tutorials
Shop
Website
Disclaimer
Press Releases
Downloads
Giveaways
Polls
Advertise
Guest Book
FAQ's
Favorite Posts
Meet the team
Designs
Blog Followers
Archives
Documents and Files
Sitemap
Table of contents
Comments
Guest Bloggers

Add a simple Pages widget with mouseover background colour effect to your blog

Wednesday, May 16, 2012 at 8:06 PM 0 comments

Ever wondered how to improve the look of a Pages widget? Simply remove the widget Blogger provides us and make your own. I decided to make my own widget for another blog, going on the Facebook look-alike theme. It has your basic links but if you put your mouse over the links the background colour changes as well as the link colour. It is all thrown into a table, and each link has it's own icon. Here's what it looks like (I gave it a border to make the table more visible in this example.):

All the code below can either be placed directly into a HTML/Javascript widget and placed at the very top (or wherever you want to put it) of your sidebar column or it can be directly added to your template in the "edit html" section of the design tab. If you add the code to the "edit html" section of your template, make sure you add it to the very top of the sidebar column, just after the first line of code that states where the sidebar column begins. Alternatively, you can also place the code directly underneath the closing b:section for the entire column; that is to say between the closing /b:section and the closing /div for that side column.

<tr><td class="btnav" onmouseover="style.backgroundColor='#ff0000';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img21.imageshack.us/img21/8874/postwallicone967396.png" width="20"/><a href="#">Home</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#ff6600';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img714.imageshack.us/img714/56/infoicon.png" width="20"/><a href="#">Info</a></td></tr>

<tr><td class="btnav" onmouseover="style.backgroundColor='#00ff00';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZHq6EfcRbGow0u15-XTQFGuuRee2iO51eLnGhJjs2oHqjkFa3fPcswzriSShcWQpOWClN9nIBM3bcJYI3xc2l9ixQvCDXK_XS7ErL75d4YC5EJIdk66DebSMSqZAfXdS5v1VAEycWnLDc/s1600/1302325189_TextEdit.png" width="18"/><a href="#">Notes</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#1f75fe';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img24.imageshack.us/img24/2038/videoicont.jpg" width="19"/><a href="#">Gallery</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#7366bd';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img717.imageshack.us/img717/2828/usersfriendsicone647912.png" width="20"/><a href="#">Friends</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#8F509D';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://www.animated-gifs.eu/emoticons-hobbies/0026.gif" width="20"/><a href="#">  Watch a movie</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#cc6666';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://bestanimations.com/Sci-Fi/UFOs/UFO-03-june.gif" width="24"/><a href="#"> Animated gifs</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#cc6666';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://a4.rimg.info/8769e59f8eb7ce17ebdfd9e5a936a82a.gif" width="24"/><a href="#"> Avatars - Aliens</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#cc6666';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://www.ufoevolution.com/forums/customavatars/avatar43_3.gif" width="24"/><a href="#">Avatars - UFOs</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#eceff5';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img109.imageshack.us/img109/768/imagescaqragca.jpg" width="24"/><a href="#"> Faceblog Help</a></td></tr>

</table>

In the code for the Pages widget each icon image url is in red. In blue is a hash # symbol. The # symbol you simply replace with your own link. You can add whatever icons you want to add, and whatever links you want to add. This is a very simple, but effective, Pages widget that you can colour to your pleasing.

Okay, the links aren't perfectly aligned in this example. You can simply align the links by adding   as many times as you need, before the beginning of the text link opening bracket. For example:

   <a href="#">Info</a>

....Then remove all examples of   that are to the left of the link text in the code I have given you for the entire Pages widget.

By placing the   before the link (outside the link's code) you will not get that annoying underline to the left of the link. Here is what I mean:

Info

Enjoy!

How to add the PDF24 widget to your blog

at 4:27 PM 0 comments

Live-demo in sidebar on this site!
Click the next link to view an example pdf file created by this widget.

You may have already come across the website PDF24.org but was never able, like me, to locate the widget for turning blog posts into pdfs. It took me months, in reality, to locate this widget and once I did I still could not get a copy of it. Every webpage I went onto ended up at a dead end and there was no code available for this widget at all that I could find on the PDF24.org website. I finally resorted to copying the code from the "View Source" page on my web browser.

After having tested this widget it only sends emails with the attached pdf if you manually type in an email address. Copying and pasting an email address into the submit section fails to send the pdf, even though it says it has sent it. You simply do not receive that email.

Below is the entire code for the widget. Do not alter it in any way except for the words typed in red. You can change those words to suit you own taste. But leave everything else alone. You do not need to add your blog's url anywhere in the code. This widget automatically detects your url, no matter where you place it on your blog. Therefore, you can have this widget on more than one blog, and each PDF24 widget will work separately from each other. So, if you have, for example, added this code to your blog titled "123.blogspot.com" (for example) as well as to your other blog, titled "abc.blogspot.com" (for example) you will have two separate widgets that work independantly of each other. If you type in an email address on the "123.blogspot,com" blog, the pdf that will be created and sent to the email address will only locate the posts on the "123.blogspot.com" blog. These two widgets (if you add the code below to two blogs) will not be able to detect each other or link to each other.

The widget's code (below) can either be added into a HTML/Javascript widget on Blogger or embedded directly into your template in the body section of your template.

Here is the complete code:

.pdf24Plugin-sbp-box {

background-image:url(http://pdf24-blogger-widget.googlecode.com/svn/tags/1.1/bg.gif);

background-repeat: no-repeat;

width:190px;

height:125px;

position:relative;

margin: 0px 0 0 -11px;

padding:4px;

font-family: Verdana, Arial

}

.pdf24Plugin-sbp-title {

position:absolute;

left: 10px;

top: 4px;

text-align:left;

width:110px;

color:#fff;

font-size: 14px;

font-weight:bold

}

.pdf24Plugin-sbp-sendto {

position:absolute;

left: 10px;

top: 71px;

}

.pdf24Plugin-sbp-sendto input {

width: 169px;

height: 17px;

border:1px solid silver

}

.pdf24Plugin-sbp-submit {

position:absolute;

right: 15px;

top: 100px;

}

.pdf24Plugin-sbp-submit input {

background-color: #66A4DA;

border:0px;

border-left: 1px solid silver;

border-bottom: 1px solid silver;

color:#fff;

font-weight:bold;

padding:1px;

cursor: pointer

}

.pdf24Plugin-sbp-backlink {

position:absolute;

left: 11px;

top: 103px;

font-size:11px;

}

</style> <script language="javascript" src="http://pdf24-blogger-widget.googlecode.com/svn/tags/1.1/script.js"></script>

<div class="pdf24Plugin-sbp-title">Send articles as PDF to</div>

</form>

<div class="pdf24Plugin-sbp-backlink"><a href="http://en.pdf24.org" target="_blank" title="PDF | PDF Creator | PDF Converter">PDF Creator</a></div>

</div>

To use this widget go to the page you want created as a pdf (via a direct link or by using a blog archive or labels search) then simply type in your email address in the space provided, click on the send button and the pdf converter will display a pop up window. It then begins converting the article to a pdf then sends it straight to your email address. The PDF24 widget will only convert the post or page you want turned into a pdf. It WILL NOT ADD the sidebar, header, footer or other content to the pdf, just the post title and content itself or the page itself. This is the best widget around for converting your posts into pdfs, and believe me I've tried many of them! Disadvantage: This widget does not like any type of code, whether it be css, HTML or Javascript and it will not print the code. So avoid printing any posts that have code on it.

Blogger Tutorials for everyone

Labels

Recent Comments

Talking Avatar

Manual Page Navigation

The perfect cross browser marquee that doesn't cut the contents off in Internet Explorer.

Add a Google Map to a blog post

Turn the Blog Archive into a Calendar widget

Add a Google Translate widget to your blog

Add a Sitemap to your blog

Customised Pages widgets using table code

Add a simple Pages widget with mouseover background colour effect to your blog

How to add the PDF24 widget to your blog

Scrollbox codes

+ / - Pages

+ / - Links

+ / - Off site links

Offsite tutorials

+ / - Useful websites

+ / - Feeds

+ / - Blogroll

Twitter feed

Blog Archive

Visitors

PDF post creator

Followers

Logo

Categories

Quick links

Links 1

Links 2

Blogger Tutorials for everyone