Blogger Tutorials for everyone

This blog is getting a facelift

Wednesday, January 29, 2014 at 7:12 PM 30 comments

Having stared at my blog for so long I have come to the conclusion it is difficult to navigate around this site. Searching for anything in particular is quite difficult so I will be making some changes to all the links on this site over the next week. Hopefully it will be an improvement.

New tutorials coming soon

at 7:09 PM 0 comments

I have been neglecting this site for a while but it wasn't intentional. In the very near future I will be adding new tutorials to this site. Making a list of tutorials to add is easy enough but I'm afraid I'm a bit behind with my skills in doing things on blogger. Darned Facebook games!

How to align videos to centre in the sidebars

Monday, January 21, 2013 at 4:57 PM 0 comments

When you first start adding content to your template you will find that videos, in particular, may not be displayed centrally in the widget. Or, if you already have videos on your blog, they may be thrown to the left within the widget. So, you might want to realign the videos so they are centered in the middle of the widget. This is one of the easiest things to do actually. All you do is add the <center> and </center> tags into the videos widget itself.

A typical embedded video code will look like this:

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/O0hh1kSb2RE" frameborder="0" allowfullscreen></iframe>

For two or more videos I add the <p> and </p> closing tag between each video, to give a line space between each video, like so:

Once you have added all the videos you want in the videos widget, you simply add the <center> tag at the very beginning of all the video code, and </center> at the very end of all the video code. The end result will look like this:

If you don't want to get confused you can place the <center> and </center> tags on new lines by themselves. By doing so it does not affect the other code any differently, and the end result will still be exactly the same as if you put them on the same lines as the video code itself.

This usually works for centrally aligning most other widgets too. You can add the <center> and </center> tags to things like feedjit widgets, embedded images, clocks, and to some search bars, for example. Give it a try and see what works and what doesn't.

How to make Secret Pages on your blog - PART 1

Monday, January 7, 2013 at 2:22 PM 0 comments

INTRODUCTION

I have done a lot of researching on the Internet to find out how to create secret blog pages but I always end up on tutorials that tell you how to add a static page to a linkbar, then remove the tabs navigation menu bar and replace that with just a normal link. Unfortunately, I've done that with many of my static pages already, and sure it saves space if you add all your static pages into a dropdown menu but really, there is nothing secretive about that. You can still find the static pages. But that is also limiting because on Blogger you are only allowed 10 (recently updated to 20) static pages. I want, and maybe you want, 100 or more secret blog pages.

Well, the good thing about Blogger is you literally have millions - the potential is there in reality - of pages to use on Blogger. Each blog post page is a separate page on your blog, and is just as good as a static page. A lot of people whinge about Blogger because this is not right, or that is not right, or the Navbar is a nuisance, or there is not enough pages on Blogger to use, etc. Unfortunately, most people do not see the potential of Blogger as I do. I see just one blog as having the potential of being as large as any website out there on the internet. If you have, let's say, 10 blogs on Blogger all up, you literally can have one website as large as Facebook - and its all free. All you do is have one of the 10 blogs as your main blog then just link them all together.

But anyway, what I propose here today is to separate, or divide your blog in half. One half contains your normal, every day posts, and the other half contains secret content that cannot be normally accessed. The secret posts content will be invisible to everyone in the beginning because you will remove all links and all visual signs of their existance on your blog. I'm talking about normal blog posts that you can hide from any visitors that visit your site. The potential for this is huge on Blogger whether you realize it or not.

This subject became my biggest challenge when I first discovered the need for having secret pages on my old blog. The problem I had facing me was to place certain blog posts in my blog that only could be found via one specific link on my blog. This specific link also had to be hidden, and it had to be displayed on my home page so it was not an obvious link. With secret pages you need a starting point, and without it no-one, except yourself, will ever know there are even secret pages on your blog.

So, what is the purpose of having secret pages on Blogger? Well, the possibilities are endless really. Let's say you want to add content to your blog that you don't want just any visitor to find. Let's say you have top secret videos you want to display on your blog, or top-secret recipes you have found on the internet, or trade secrets of certain individual's careers you want to add but don't want to share it with just anyone. You don't want, let's say, to set your blog to private and you don't want these secret blog posts to be displayed within your normal blog posts only to show up in your blog archive. What do you do?

HOW TO GET STARTED!

With all that in mind, you first need to write down what you want your secret pages to contain. The contents of your secret blog post pages are important to figure out, especially considering it will be a secret. That is something you need to work out for yourself, as to what the contents of your secret pages will be. If I tell you what my old secret pages were then it wouldn't be a secret anymore, would it?

For arguement's sake, let's say you have top-secret recipes you wish to display on your blog. So, you will need to organize your blog's secret post pages in a different manner than your blog posts would normally be displayed. Because you will be adding secret content to these secret post pages you need to write all the urls, titles, and basic contents of each post down into a journal - basically so you know where everything is.
But why write it all down into a journal? You need to write it all down so you can keep a record of where all your secret pages are. You see, when you begin to put this tutorial into practice on your blog, you will soon learn that there are no widgets or obvious links displaying these secret post pages on your blog anywhere. The only way you, as a blog author, can truly locate each secret post page quickly is to locate the posts in your "Edit posts" section of Blogger.

What we will be doing to create these secret blog post pages is to link them together. The first link will be displayed on your homepage somewhere but it can only be found by placing a clue on your homepage somewhere. Once the clue on your homepage has been found it then needs to be clicked on. So, I will teach you how to create a link that will turn into a pop up window, and all your secret blog post pages will only be displayed and, hopefully only viewed, in pop up windows. The first pop up window linked page will be your very first secret page. That first pop up window secret page will then contain a second clue and a second pop up window link that leads to your second secret page, and so on. However, once the first pop up window secret page's link has been clicked on, the only way to get out of the whole secret pages section of your blog is to close down the pop up windows. You then have to start all over again.

In order to really be successful with creating secret pages you need to give your blog an overhaul. You will need to reorganize your blog and all its links so no secret page urls are displayed as links but at the same time you still need to make your blog's normal content visible to your visitors. It will be hard work, and time consuming, but once completed it will be worthwhile having made that effort to reorganize your blog.

In Part 2 of this tutorial I will discuss the basics of reorganizing your blog, to allow for your secret pages to be added to your blog. In the meantime think about what you want to add to your own secret blog post pages, write it all down and make a plan on how to execute the order of that content.

Eliminate those annoying advertising popup windows from your blog

Sunday, January 6, 2013 at 9:14 PM 0 comments

One of my pet hates in this world, its in my top 5 list, are those annoying popup advertising windows you see on a lot of websites. They infuriate me because they keep appearing over and over again. On some websites, when you click to go to a new page a dammed popup up advertising window will show up. Now, to make things even worse is getting embed codes from these websites, or any website really, only to find a damned popup advertising window shows up on your blog.

I have had this problem for a very long time, perhaps a year now. At first I didn't know where the first popup advertising window came from, and I done everything but delete my entire blog. I went through every bit of code on my blog but still couldn't find the code for the popup advertising window. Then I started thinking the code itself does not actually exist as a visible code that you can simply remove. If only things were that easy!

Over time I came to learn that these popup advertising windows are invisibly attached to certain objects you add to your blog. They are like a computer virus - but more like an internet virus. They are normally attached to widgets you add to your blog. For example, the website http://www.geovisites.com looks fine when you visit it but the moment you add their widget you end up with a popup advertising window on your blog or website. Even if you delete their links within the widget itself you still end up with the popup advertising window and you can't get rid of it.

However there is a drastic solution to all of this. That solution is to not only delete that widget that created a popup advertising window you got from the website but you also have to delete your entire blog template too. If you don't delete the widget first and you just decide to delete your template, you end up with the same popup advertising window attached to your new template. Its really a vicious circle!

No matter what you do to your blog, or how nice you have made it, it only takes one popup advertising window attached to your site to make you regret ever having placed widgets on your site in the first place. Advertising popup windows can be blocked altogether by programmes that are free to download but that is not the point. Not everyone will have an ad blocker on their computer. Not everyone can see your blog like you can if you have an ad blocker. You would not, in this case, even see the advertising popup windows but everyone else who doesn't have that programme can.

As a blogger you have a duty to perform, not only for youself but for others too. Your duty is to make your site as accessible as possible to other people. If you want people to continuously come back to your site you must make your site safe for them to visit. Are advertising popup windows safe? I am not about to click on one of them to find out!

HERE'S SOME FREE ADVICE: Let's say you want to add a movie to your blog, as I had done in the past. NEVER, EVER, EVER embed a movie from www.movies2k.to. You will end up with an ILivid popup advertising window that not only you can't get rid of but it also tries to download the ILivid movie manager application onto your computer. Watching movies on that site is fine. I don't trust the site to download any of their movies....who knows what would be downloaded to your computer - even if you got the movie at all. (However, downloading movies from this site using the Real Player download function is quite safe and I do this all the time.)

Any time you ever want to add something to your blog or website, use this rule of thumb: If any popup advertising windows show up on a website you are trying to get something from, DON'T GET IT FROM THAT SITE! Keep your site safe and free of popup advertising windows. If you don't you will simply lose out and visitors will refuse to come back to your site. If you do have popup advertising windows showing up on your site, the only way to track them down is to revisit each site you got your widgets from. If a popup advertising window shows up from any of the sites delete that widget straight away. Do this with all your widgets.

But, these popup advertising windows will not only just show up because they are connected to certain widgets, they can also occur because you have linked your site to a website that has these popup windows on their site. Once that direct connection between your site and their site occurs, your site is also going to display the same popup advertising windows.

Some time ago on a blog I had that no longer exists I had a chatbox widget. In that chatbox were links to some people's websites/blogs - belonging to my visitors. They kindly left me their url and so I checked them all out. However, a few of the urls I clicked on simply refused to load because they had been targeted by college popup advertising windows. Actually, these are the worse case scenario blogs/sites because the direct link to these blogs are ineffective. Meaning, if you go to click on the blog links the blog starts to load momentarily, then the blog gets redirected to another site, then redirected to yet another site, then redirected to yet another site. There simply is no way to view anybody's blog when you are being automatically redirected away from it by some f***ing popup advertising or some link that has made their site unable to load normally. What's worse is at this point you (the visitor) have no control of the redirections of urls you end up on. Your only solution is to close the web pages down before something nasty shows up on your computer or on the Internet - if that may be the case. Your desire to get to that other person's blog or website instantly becomes your worst nightmare.

Always remember to check if any of your widgets create popup advertising windows. If they don't that's great. If they do then delete the culprit widget, delete your entire blog template and replace it with a different template. That way those annoying redirections will disappear and people will happily visit your blog or website. But remember one thing - never do what you done in the first place that created those redirection links. Learn from it and be smart next time you want to add links to your site/blog.

Who knows how many people out there who have this problem who are also not receiving visitors because their site is targeted by links that either cause popup advertising windows or there's links on their site that redirect visitors away from their site? Unfortunately there is very little constructive help out there on the Internet to solve this problem. So I'm writing this article to make people aware that there is a solution to this problem. If you are the victim of advertising popup windows like I was then apply my solution to your blog/website and be free of them and never repeat the same mistake again.

Cross browser customizable playlist MP3 Player for your blog

Sunday, December 2, 2012 at 3:53 AM 0 comments

Have you ever wanted to add your own mp3 files to an MP3 player that also has a playlist? Well, now you can. Are you tired of having to join a website just to get an mp3 player's code? That is no longer necessary anymore. It's all free and you just read my instructions; copy and paste; and type a bit of text. That's all there is to it and this tutorial. I stumbled across the code for this multiplayer mp3 player with a playlist by chance but it wouldn't display at first. Now it does because I got it to work properly on one of my blogs. So now you can add it to your blog and can add your own mp3 files to it. The tutorial below is easy to follow and even easier to achieve the final result. The best thing about this player is you can add as many mp3 files to it as you want - but remember to follow the instructions in this tutorial below. Once the height of 100 pixels has been reached the player will automatically create a scrollbar so you can scroll through all the mp3 files you've added, in order to play them.

The thing is, the hardest part of this tutorial is figuring out what you want to use the mp3 player for on your blog. In my case I record bird sounds on my digital camera in video format. I then upload those videos to Youtube and then convert the uploaded Youtube videos to MP3 files. I then add those MP3 files that I've saved to my computer to my Mediafire account. Finally, I'm creating a playlist of all the different sounds that each bird species makes that I've recorded. The first playlist I've made so far is of Eastern Rosella sounds that they've made throughout the course of one year. I'll be making a lot more playlists like the one above but need to convert a lot of my videos into mp3 files before I can do that.

This tutorial is entirely about adding audio mp3 file urls from your Mediafire account to the player above. The same principle should work for other mp3 files as long as they are hosted somewhere, and there is a download link available for those files. Without a download link to click on the mp3 file urls you try to add to this player (from another website other than Mediafire) may not work.

Anyway, in a 3 hour or more attempt at finding an MP3 Player for my Birds of Tenterfield blog, to help lighten the blog loading time, I mucked around with various mp3 player codes trying to add a playlist to them. Finally I got one to work, and after figuring out how to add the playlist, my attempts finally payed off. The MP3 player above is the final result.

Below is the actual code for the above MP3 player and it's playlist. It works on Internet Explorer, Google Chrome, and Firefox. Other browsers I'm uncertain about. Here's the code:

Customizing the player

Adding your own MP3 files from Mediafire to the player and playlist:

Let's say you have already added your own mp3 files to Mediafire to speed this tutorial up. The first thing you need to do is to find an mp3 you want to add to the player. Simply click on the title of the mp3 file in your account. A download page will appear with the file above it. Right click on the green "Download" button and select the "Copy shortcut" option. In the above code there are urls for three mp3 files. Each mp3 url is separated by a | symbol, and each url must be separated by a | symbol for it to work. Highlight the first url and paste it straight over the top of mine.

The first mp3 url is:

http://205.196.120.147/2ngc03f9h2qg/d7j0b0b877dvsa8/Eastern+Rosella+14+September+2012+sounds.mp3

After you have pasted in your first mp3 url go down to the part where I have written a description of each mp3 file. Each one starts with the number "2012" - which is in reference for the year we are currently in. Type in your own description for your first mp3 file in place of my text (which is: 2012, 14 September - A lone Eastern Rosella singing a variety of calls). At the end of that text there will be a | symbol. The | symbol is needed to separate each mp3 title in the playlist, so make sure it is always there. Repeat these steps (the last 2 paragraphs) for each new mp3 file you want to add to the mp3 player. Carefully go through the urls and text you added to make sure you did not make any mistakes.

Remember, do not add a | symbol at the end of the very last mp3 url nor at the end of the text description for it.

Adjusting the width and height of the mp3 player: To adjust the width of the player change "500" to whatever width you want. There are two instances of "width" in the code, at the top and at the bottom. Change both of them to your player's new width. At the top of the code change the height from "100" to whatever height you want. The width and height are measured in pixels!

PLEASE NOTE: On changing the width - if you add a really long title for the description of the mp3 file you added, all the text may not show up in the playlist. You will need to rewrite the description and make it shorter in length.

That's it. Once you've done all of that save your post/page and you are done. Start creating your own mp3 player's playlist today and add it to your blog. Enjoy the fun!

Some suggestions for using this mp3 player:

Birds sounds
Your favourite music
Music by your favourite artist
Podcasts in mp3 format
Audio ebooks in mp3 format
Make your own recordings/tutorials and turn them into mp3 files

Emoticon problem is now fixed plus other changes

Friday, November 30, 2012 at 3:27 AM 0 comments

I'm so glad that this problem was easy enough to fix. I just removed the script for the emoticon to show up which was in the <head> of the template and it fixed the problem. There were no instances of the actual emoticon codes in the "Expand widgets template" page at all. They had previously already been removed. So no more little emoticon surprises will show up when I add a new post that has script in it.

Whilst editing my template I also added the slide panel and comments instructions in two places so it now shows up above the comment form no matter which post you are on if you want to leave a comment on this site.

This template needs replacing ASAP

at 2:32 AM 0 comments

I deeply regret that I need to change the template design for this site. I will not be deleting the blog itself, just changing the way the blog looks with fresh new code. As a result I will be deleting all instances of emoticons to add to the comments, as it is interfering with the scripts I add to posts. The emoticons keep showing up in amongst code for things in posts, and it should not be happening at all.

I'll start by deleting all the emoticon code in my template but if that does not work I will replace the entire template. If that still does not get rid of the emoticons I will unfortunately have to delete this blog and start a new blog. If that should happen I will leave this blog active and have a direct link to my new blog. Sorry for the inconveniences that everyone has come across on this site.

Alternative Recent Comments widget for Bloggers

at 2:20 AM 2 comments

Has your Recent Comments widget malfunctioned lately or you can't add a standard Blogger Recent Comments widget to your blog as the gadget is broken?

Fortunately, some time ago I came across an alternative Recent Comments widget which has been working all this time, even when other things malfunction. So, if your Recent Comments widget has malfunctioned or you cannot replace it with a standard Blogger widget, simply copy the code below and paste it into a new HTML/Javascript gadget/widget.

<div style='background:#ffffff;margin-top:0;margin-left:0px;margin-right:0px;margin-bottom:0px;padding:5px;'><script style=text/javascript src=https://sites.google.com/site/projectdigitaltomato/blogger/js/rc1blogger.js ></script>
<script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script>
<script src=http://bloggertutorialsforeveryone.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href=http://www.madtomatoe.com/recent-comments-widget-for-blogger/>Recent Comments</a> <a href=http://www.madtomatoe.com/ target=_blank title=blogger widgets>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.rcw-comments a {color:blue;text-transform: capitalize;}
.rcw-comments {border-bottom: 1px #444444 dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
#rcdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN011d8lv8wDeZJ3l1I8Up8RFwxDxtTSIS6Q61rdYpmCZgcKYEFOTz49aarGWhuzO8tOTR6p6D9STxvVY5WTJ4TcRdmtbIhxhWE_3Ixde0cIUvg_rgPYVsMnHAnSbTeycv9rFcLo7Yyibj/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rcdr, #rcdr a {color:#808080;}
</style>
</div>

Replace my blog's url (in red) with your own and then "Save" the widget. Then click on "Save" again once you have moved the widget to where you want it to show up on your blog.

At the very top of the code is an opening div lot of code. I've added it in case you want to customise the look of the widget a bit more. You can change the background colour of the widget by changing the #ffffff to any colour you like. You can adjust the width of the widget by changing the div's margin. Save the changes to the widget once you are done.

That's it. You can now view your blog again and see all the recent comments in the widget.

How to add a Youtube video as a post comment on Blogger

Thursday, September 20, 2012 at 7:02 PM 6 comments

Have you ever wanted someone to be able to add a Youtube video to your own blog in response to a post you wrote about but don't know how to do it? Well now you can in three easy steps. Today I will show you how to do that.

There are a lot of tutorials out there already on how to do this but I found all of them do not display an actual Youtube video as a comment. I had to do a lot of digging around the Internet, and eventually I came across a post on how to do it but it was written in Burmese, on a blog in Mynmar. I can't read Burmese, so I opted to study that Burmese blog's "View Source" page, and I found the following lot of code in it. I added the code to one of my blogs and it worked the first time. Mind you I also had to figure out how to get the Youtube video to actually display because typing in [youtube=the-video-url-goes-here] simply did not work.

However, despite the fact this is a really easy tutorial and it works on newly created blogs, as well as most existing blogs, sometimes the code will not display a video on a blog that has a customised template. Why this happens I do not know. I am still trying to figure that out and trying to get the video comments to display on my other blog Birds of Tenterfield, NSW, Australia. It may have something to do with various scripts clashing or the template itself (of your blog) may have too much code in it. But generally this code will work on the very first attempt when you add it to your blog's template. If it doesn't, and you have followed the instructions below carefully, then you have a problem just like I do with my other blog.

LIVE-DEMO = This site has the code added to it, so if you'd like to test it out add a Youtube video in as a comment to this post. Please keep the video comments respectable and please don't add any graphic or advertising videos. Thanks!

INSTRUCTIONS:

STEP 1: Go to your "Edit Template" to start editing it and find the opening head tag <head>. Directly below it, on the next line, copy and paste in the following code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<SCRIPT src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// Embed youtube videos in Blogspot comments by MS-potilas 2012.
// See http://www.ehlar.com/2012/03/blogger-comments-youtube-video.html //
// if oetag=0, just use video urls like:
// http://www.youtube.com/watch?v=12345678901
// surrounded by white space (video tag can be used, too)
// if oetag=1 (for nerdy blogs?), use syntax:
// [video=http://www.youtube.com/watch?v=12345678901]
// config:
var oetag = 0; // see above
var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?
var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)
//
function oe_loadscript(filename) {
var scr=document.createElement('script');
scr.setAttribute("type","text/javascript");
scr.setAttribute("src",filename);
document.getElementsByTagName("head")[0].appendChild(scr);
}

function oe_jumptohash() { // reposition to anchor
window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);
}

var oe_tid;
var oe_elems = {};
//
function oembed_callback(response) {
var resp = response;
revurl = resp.url.split("").reverse().join("");
html = oe_elems[response.callID].html();
ee = $(resp.html);
w = parseInt(ee.attr("width"));
h = parseInt(ee.attr("height"));
if(oelazy==1) { // convert to lazy load
src = ee.attr("src");
src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
ee.attr("src", src);
ee.attr("style", "vertical-align:top;");
htm = $("<div/>").append(ee).html();
htm = $('<div/>').text(htm).html().replace(/"/g,'"');
resp.html = '<a href="'+resp.url+'" class="youtube-lazy-link" style="width: '+w+'px; height: '+h+'px; background: #000 url('+resp.thumbnail_url+') center center no-repeat;" onclick="$(this).replaceWith(\''+htm+'\');return false;"><div style="width:'+(w-4)+'px;height:'+(h-4)+'px;" class="youtube-lazy-link-div"></div><div class="youtube-lazy-link-info"><b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';
}

htmlx = html.replace("[" + oetagname + "="+resp.url+"]", " " + resp.url + " ");
htmlx = htmlx.replace("[" + oetagname + "="+resp.url+" ]", " " + resp.url + " ");
htmlx = htmlx.replace('"'+resp.url+'"', '"'+revurl+'"'); // trick to preserve href="url"
htmlx = htmlx.replace(resp.url, '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')

htmlx = htmlx.replace('"'+revurl+'"', '"'+resp.url+'"'); // trick to preserve href="url"

if(html != htmlx) {

oe_elems[response.callID].html(htmlx);
if(window.location.hash.replace(/^#/, "").length > 0) {

if(oe_tid) window.clearTimeout(oe_tid);
oe_tid = window.setTimeout("oe_jumptohash()", 1000);
}

}

}

function oembed_yt(url, width, callID) {

src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);
if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;
oe_loadscript(src);
}

$(document).ready(function() {

det=$('<div class="youtube-lazy-link-div" />');
$("body").append(det);
if(det.css("position")=="absolute") {

if(oelazy != 0) oelazy=1;
}

else oelazy = 0;
det.remove();
window.setTimeout(function() {

var callID=0;
$(".comment-content,.comment-body,.comment-body-author").each(function() {

html = $(this).html();
if(oetag)
matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));
else
matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);
if(matches && matches.length) {

for(var i=0;i<matches.length;i++) {

url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);
oe_elems[callID] = $(this);
oembed_yt(url, $(this).width(), callID++);
}

}

});
}, 500);
});
//]]>
</script>

Then click on "Save Template".

STEP 2: If you want to add the instructions for adding a Youtube video to your comments section, so visitors can see it all the time, then do the following:

On the same page (Edit HTML) click on the "Expand Widget Template" option box. Hit the "Ctrl" and then the "F" key on your keyboard and paste in this code in the search bar that pops up.

<b:includable id='comment-form' var='post'>
Scroll down a bit and locate:

<p><data:blogCommentMessage/></p>

Directly below that line of code copy and paste in this text below:

To add a Youtube video as a comment type in or copy and paste the code below and replace the video url text with the one you want to add as a comment.<br/>
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-WATCH-PAGE-ON-YOUTUBE-HERE]<br/>

STEP 3: Then in the search bar copy and paste in this line of code below in order to find it, if applicable:

<b:includable id='threaded-comment-form' var='post'>

Repeat STEP 2 to add the instructions below the <p><data:blogCommentMessage/></p>.

Save your template and you are done.

FOOTNOTE: If, when searching for <p><data:blogCommentMessage/></p> and you see two instances of them within each section along with two instances of an iframe embedded comment form, place the instructions (text) below the second instance of <p><data:blogCommentMessage/></p>.

Changing a widget's background colour the quickest and easiest way ever!

Monday, September 10, 2012 at 3:31 PM 1 comment

Live demo of this is the "Talking Avatar" widget on this blog in the left hand column.

From time to time we all have widget's that we want to add a background colour to and we don't want to spend even 5 minutes doing it. So much time is wasted editing one's template to add this or that to it that after a while even you will get sick of changing the way your blog looks because it takes up too much of your time. Or worse, a whole lot of code is needed to get the same effect as we want just for one widget.

This tutorial takes you less time to apply the code than it does to read the above first paragraph. Your main delay will be deciding what colour you want the background colour to be for a particular widget.

Instructions:
Click on the "Edit" link or spanner icon and open up a widget to edit it. This will only work on the widgets that actually display content within that edit section. On a new line above all the code for the widget's content copy and paste in:

<div style="background: black; padding: 5px;">

At the very bottom of the widget content's code copy and paste in:

</div>

Change the background colour "black" to whatever colour you want. You can change "black" to "#ff1199", for example, to display hex colour codes. You do not necessarily have to type in a word for the colour.

If the padding for your widgets is already perfect then delete this bit of code:

padding: 5px;

Once you have typed in the colour you want the background to be select "save".

You are done! Couldn't be easier if you tried.

How I made the expandable/collapsible side column widgets

at 12:48 PM 0 comments

At the time I was making a new template called "Aliens, UFOs and Videos". I was trying to make a template design that had a collapsible and expandable sidebar widget header3 that would hide the widget content or display it when clicked on the header3 title, just like the website I was trying to reproduce as a blogger template design. In order to solve certain problems, that problem being how to collapse and expand widgets by clicking on the header3 title, I doubted my own ability. I searched the internet to find a clue on how to achieve this. I looked and looked. I found a few tutorials but none of them worked for me. Eventually I came across a tutorial that was for a simple widget toggle with css and jQuery. The original code can be found here : http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/

The original codes that I worked from are:

The css code:
h2.trigger { padding: 0 0 0 50px; margin: 0 0 5px 0; background: url(h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; width: 450px; font-size: 2em; font-weight: normal; float: left; } h2.trigger a { color: #fff; text-decoration: none; display: block; } h2.trigger a:hover { color: #ccc; } h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/ .toggle_container { margin: 0 0 5px; padding: 0; border-top: 1px solid #d6d6d6; background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top; overflow: hidden; font-size: 1.2em; width: 500px; clear: both; } .toggle_container .block { padding: 20px; /*--Padding of Container--*/ background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/ }

The html code:<h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3>  </div> </div>

and The jQuery code:
$(document).ready(function(){ //Hide (Collapse) the toggle containers on load $(".toggle_container").hide(); //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) $("h2.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); return false; //Prevent the browser jump to the link anchor }); });

As displayed on that website tutorial .... The code above consists of html, css, and jQuery codes to make it all work. However,there was no instructions on where to place the code in the .xml template file. In as little as 4 hours I figured out where to place all the code and got it all to work. At first the whole thing would not display properly, so I had to cheat a bit. I visited the live demo here (http://www.sohtanaka.com/web-design/examples/toggle/), right clicked on the page and selected "View source". Sure enough, the live demo had all the missing code so I copied and pasted it all over again into my template. I deleted the <h1></h1> code as I didn't need that. Once I saved the template, I found it worked as it was supposed to work. However, when I viewed my blog I clicked on the header title, to make the widget expand and collapse but the entire page jumped to the top of the page. I needed the toggle function to stop jumping. After another search on the Internet I found a line of code that fixed the problem.

Now, to achieve the impossible. With the basic function of three collapsible and expandable widgets on the blog, I now needed to create a way to add widgets to it. I wanted to add the "Add a gadet" function to the original code. After many practise attempts at trying to alter the code, and failing, an idea hit me. What if I add an entire div section between the codes?
　
<div class="container">
<h2 class="trigger"><a href="#">Web Design & Development</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Need a Website?</h3>
<img src="thumbnail.gif" alt="" />
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="trigger"><a href="#">Logo / Corporate Identity</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Need a Logo?</h3>
<img src="thumbnail.gif" alt="" />
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="trigger"><a href="#">Seach Engine Optimization</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Need to be Heard?</h3>
<img src="thumbnail.gif" alt="" />
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="trigger"><a href="#">eCommerce</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Have Product to Sell?</h3>
<img src="thumbnail.gif" alt="" />
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<p style="text-align: center; font-size: 1.1em;"><a href="http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/">Tutorial</a> by <strong>Soh Tanaka</strong>. Check out his <a href="http://www.sohtanaka.com/web-design-blog/">Web Design Blog</a> for more tutorials!</p>
</div>

Above is the code which I copied and pasted from the live demo page (in the View source section). I stripped the code down to it's basic code thus removing the actual contents of the widgets. Below is what I ended up with:

　<div class='container'>
<h2 class='trigger'><a href='#'>Web Design & Development</a></h2>
<div class='toggle_container'>
<div class='block'>
<h3>Need a Website?</h3>
Add content here.
</div></div>
<h2 class='trigger'><a href='#'>Logo / Corporate Identity</a></h2>
<div class='toggle_container'>
<div class='block'>
<h3>Need a Logo?</h3>
Add content here.
</div></div>
<h2 class='trigger'><a href='#'>Seach Engine Optimization</a></h2>
<div class='toggle_container'>
<div class='block'>
<h3>Need to be Heard?</h3>
Add content here.
</div></div>
<h2 class='trigger'><a href='#'>eCommerce</a></h2>
<div class='toggle_container'>
<div class='block'>
<h3>Have Product to Sell?</h3>
Add content here.
</div> </div>
<p style='text-align: center; font-size: 1.1em;'><a href='http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/'>Tutorial</a> by <strong>Soh Tanaka</strong>. Check out his <a href='http://www.sohtanaka.com/web-design-blog/'>Web Design Blog</a> for more tutorials!</p>
</div>

　
I then proceeded to add the same lot of code into the left column sidebar. A few other problems arose after adding this code to the template. I noticed that when I viewed the "Design" page these expandable/collapsible widgets were in the fully expanded mode. They could not be collapsed at all. This made it impossible to move existing widgets in the footer up into the sidebar, or moving widgets from the sidebar down into the footer area. After much thought I came up with an idea. That idea was to strip the code down to remove all the contents and then somehow add an existing widget to it. Eventually I ended up with the code below (This is just for one of the widgets in the entire container).
　
　
<div class='container'>
<h2 class='trigger'><a href='#'>+ / -   Seach Engine Optimization</a></h2>
<div class='toggle_container'>
<div class='block'><b:section class='sidebar' id='sidebartab01' preferred='yes' showaddelement='yes'>
<b:widget id='HTML24' locked='false' title='Get Bookmarklet' type='HTML'/>
</b:section></div></div>

</div>
　
The code in blue bold is what I added to the code that created not only the "Add a gadget" feature but it shrunk the entire container down so it was in a collapsed mode. I saved the template, and viewed my blog, and I suddenly became excited. This feature has so much potential. I found I could now add widgets to the "Add a gadget" section in the design page. I could also move widgets about and everything worked fine.

It works in Internet Explorer, Google Chrome and Firefox web browsers.

A tutorial will be written up on how to add this feature to your blog. There are 6 of these widgets on this "Blogger Tutorials for everyone" blog, in the right hand column - at the top.

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.

The best cross browser numbered page navigation menu around.

Wednesday, August 1, 2012 at 2:29 PM 0 comments

The live-demo is on this blog below all the posts!

Do you find it annoying when you add a numbered page navigation menu to your blog only for it to display posts from previous pages you clicked on? I don't remember the exact number of widgets I've come across in my time on the internet that has disappointed me by doing this but its a lot. Personally, I don't like seeing the same post I just saw on a previous page that I just came from, by clicking on the page navigation menu. I'm sure it irritates everyone else too. But what's worse than that is often what displays on Internet Explorer and Google Chrome may not display on Firefox. This can be a huge problem, as visitors become stuck trying to browse your blog with no means of accessing your older posts if the blog archive widget hasn't been added to your blog.

Well, whilst helping a friend to find a solution to this problem on a template I made for him, I found code for a cross browser numbered page navigation menu. It's so awesome I added the code to this template, and it does not disappoint. It works perfectly on Internet Explorer, Google Chrome and Firefox. I haven't tested all the browsers though but it does work on a few others too.
But before I give you the code, there is another live-demo HERE that has 213 pages to search through with this exact same numbered page navigation menu as this one. Check it out if you want to because eventually, if you add enough posts to your blog, it will display "..." as a break between the numbers of pages.

This is very simple to add to your blog. If you already have a page navigation menu (numbered or otherwise) on your blog delete all the code for it, then save your template. This also includes any code that may be in a "HTML/Javascript" widget so you need to delete that widget to, if it applies to you in this instance. Please delete your old or existing numbered page navigation menu before following the instructions below.

THE INSTRUCTIONS FOR ADDING THIS TO YOUR BLOG:

Click on your "Design" tab then your "Edit HTML" tab. You do not need to click on the "Expand Template" option for any of these instructions.

There are 3 lots of code to add to your template - 1 to alter and 2 to actually add. Firstly, find the css code for your blog-pager. Make sure all 3 bits of code (for the newer link, older link, and blog pager) do not have display:none; in it. Your pager codes should finally look something like this code below:

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
height:21px;
background:#999;
border-top:2px solid #fff;
border-left:2px solid #777;
border-bottom:2px solid #666;
border-right:2px solid #555;
text-align: center;
margin: auto;
padding: 2px 0 1px 0;
}

N.B. The reason why my blog-pager has a height of 21px is because if I did not set a height to it, in Firefox there would be a bit space below the actual page navigation menu. Adding a height to the code deletes the space below the page navigation menu in Firefox.

Now find the line of code that says ]]></b:skin> and directly above it paste in the code below this text.

/* ----- Page Navigation ----- */
.showpageArea {
color: #666666;
margin: 10px 5px 3px 5px;
padding: 0px;
float: left;
display: inline;
font-size:12px;
}
.showpageArea a {
background: #ffffff;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}
.showpageNum a {
background: #ffffff;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}
.showpageNum a:hover {
background: #CCC !important;
text-decoration: none;
border: 1px solid #000000 !important;
}
.showpagePoint {
font-weight: bold;
background: #CCC;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}
.showpageOf {
background: #ffffff;
padding: 1px 5px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
line-height: 21px;
}
.showpage a {
background: #ffffff;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}
.showpage a:hover {
background: #CCC !important;
text-decoration: none;
border: 1px solid #000000 !important;
}
.showpageNum a:link,.showpage a:link {
background: #ffffff;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}

Finally, find your template's </body> code. Just above that line of code paste in the code below this text.


<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord ='« Previous';
var downPageWord ='Next »';
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>


Then click on "Save Template".

If you want to change the amount of posts to be displayed from 4, to say 6, you need to change these two numbers which I've changed to a blue colour in the code that goes directly above the </body> tag. (See the last lot of code I added above.) Once you've made the changes, click on "Save Template" again. Then you need to go to your "Design" tab and click on the "Edit" link that is attached to your "Blog Posts" widget, and change the very top number to the new number of posts you want to display for each page. Once you have done that click on "Save" to save the changes to that widget.

That is it. You will now have a numbered page navigation menu that will display all your posts and none of the posts will be repeated on any of the page numbers you click on, and can be seen on many different web browsers. Feel free to change the colours of this numbered page navigation menu to suit your own taste and your blog's colour scheme.

FIX FOR THIS CODE - 20 November 2012:
In the last few days this pagination code malfunctioned and refused to work. On top of that a popup box has been displaying which prevents any page on this site from fully loading. The popup prevents you from minimizing the browser window tab as well. So, here is what I done to fix the problem. Below is the instructions and code to fix this problem, which I'll be applying to this blog as soon as I've published this post.

Go to your "Edit template" page. Do not click on the "Expand template" box. In the original tutorial above find this code:

<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>

Click on the link below to get the code needed. My blog is playing up so it won't display the code properly, hence this link below. At the top of the post on this stylifyyourblog website is the code for replacing the script code. Ignore the bottom half of that post. You just want the code from the top part of the post. When copying the code into your template don't foget to remove the numbers "1, 2, 3, 4, 5" to the left of all the code. Those numbers are just numbers for the lines of code and are not needed in the replacement code at all.

The website: http://www.stylifyyourblog.com/2011/10/pagination-in-blogger.html

Save your template. The pagination widget restores itself and the popup disappears and it does not return. Problem fixed!

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.

Embed RSS feeds into a blog post or static page

at 3:04 PM 0 comments

The iframe containing the RSS Feeds above is the live-demo for this post.

This is really a great idea if you don't want to clutter up your blog with RSS feeds in your sidebar. You can actually create a new post or a static page, and add all your RSS feeds to it in iframes. The code for adding the RSS Feeds iframe to a blog post is below.

<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="yes" src="http://abductedbyets.blogspot.com/feeds/posts/default" width="600"></iframe>

You paste the code into the "Edit HTML" section of your post. Simply change my url in red to the one you want to display and change the width of the iframe to match that of your own post's width (and height to suit your own taste). It couldn't be any simpler!

Talking avatars

at 2:17 PM 0 comments

Recently I came across a blog that had a talking avatar on it. I investigated the website that makes the avatars and found you can create your own talking avatar without even signing up for an account. Just click on the "Create" tab at the top, and start making the avatar. If you want to add your own message to the avatar just select the "text to voice" option when creating the avatar. On the left where the avatar is you might need to click on the random avatar button to find a good avatar that you want and go from there. You also need to click on the "Publish" button before you can get the code for the talking avatar. You'll get a popup asking you to create an account but you can just close that window and the code will be displayed on the right hand side of the page. Anyway, I've put a talking avatar in the sidebar of this blog as it does not display in a post for some reason. Click on the avatar in the sidebar to start making your own. my talking avatar is not full sized. The original size of the avatar was 200px wide. Mine is 150px wide.

Add a background image to an individual post.

at 1:01 PM 0 comments

Sometimes we just want to do something different and adding a background image to an individual blog post can style the post. The background image itself can compliment the visual effect of the post content, giving it more appeal to the readers, or yourself. So here is the code for adding a background image to an individual post.

<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NAce1txa9rOI_4JoA0-DJlHa_IgE0xZd66XtuPEOmEqdgUC4yg2U9iRMPi5zrBFaEZ5NvEMr4KRI8Orb3Vy2N7Mxkad0ybtnqz2WYfstAVZ1DZlKkp2CpNm9bRqJYDQG4ceQrcwdpM0/s620/798px+wide.jpg) #000 no-repeat; color: white;padding:5px;"> ADD YOUR POST TEXT AND OTHER THINGS YOU WANT TO ADD TO YOUR POST HERE</div>

Just change the background url for your own and change the colour of the text to your own colour. Don't forget, this code is supposed to be added to the "Edit HTML" section, not the "Compose" section of your blog post.

If you have a really big picture you want to use as a background, like this one I am using, it is best to write a fairly long post so all the image shows up. Have fun!

Add colourful multicoloured link tabs as a widget to your blog

Friday, July 20, 2012 at 1:05 PM 0 comments

This widget did not take me long to create and it is best located across the entire width of your blog, just below your header for example. There are two parts to this code, the css code and the HTML code. As in the example below the header on this site, each background for each tab is coloured differently and each tab (when hovered over) has its own different background colour. You can also set a different font colour for each tab text when the tab is not hovered over.

Go to your dashboard, then design then edit template. Find in your template the ]]></b:skin> . Copy and paste the code below directly above the ]]></b:skin> .

/* COLOURED MENU TABS WIDGET
----------------------------------------------- */
#coloredmenu {
width:100%;
float:left;
margin:0 0 0 -10px;
padding:0;
overflow:show;
}
#coloredmenu a {
border:0;
color:#B8860B;
margin:0;
padding:2px;
}
#coloredmenu a:hover {
text-decoration:none;
color:#fff;
}

Click on "Save Template".

Then click on the Page Elements tab and click on an "Add a Gadget" link. Select a "HTML/Javascript" widget, then paste all the code below straight into the widget:

<a href='#'><img src='http://www.animated-gifs.eu/love-hearts-7/0005.gif' height='20px' style='margin-bottom:-5px;padding:2px 4px' /></a><a expr:href='data:blog.homepageUrl'><span onmouseout='style.backgroundColor="#ff0000"' onmouseover='style.backgroundColor="#ff6600";' style='background-Color: #ff0000;color:#000; margin-right:1px;padding:2px' width='100%'>Home</span></a><a href='#'><span onmouseout='style.backgroundColor="#ff6000"' onmouseover='style.backgroundColor="#ffc000";' style='background-Color: #ff6600;color:#000; margin-right:1px;padding:2px;'>Info</span></a><a href='#'><span onmouseout='style.backgroundColor="#ffc000"' onmouseover='style.backgroundColor="yellow";' style='background-Color: #ffc000;color:#000; margin-right:1px;padding:2px;'>Notes</span></a><a href='#'><span onmouseout='style.backgroundColor="yellow"' onmouseover='style.backgroundColor="#9fff00";' style='background-Color: yellow;color:#000; margin-right:1px;padding:2px;'>Notices</span></a><a href='#'><span onmouseout='style.backgroundColor="#9fff00"' onmouseover='style.backgroundColor="#3fff00";' style='background-Color: #9fff00;color:#000; margin-right:1px;padding:2px;'>Gallery</span></a><a href='#'><span onmouseout='style.backgroundColor="#3fff00"' onmouseover='style.backgroundColor="lime";' style='background-Color: #3fff00;color:#000; margin-right:1px;padding:2px;'>Friends</span></a><a href='#'><span onmouseout='style.backgroundColor="lime"' onmouseover='style.backgroundColor="#00ff60";' style='background-Color: lime;color:#000; margin-right:1px;padding:2px;'>Tutorials</span></a><a href='#'><span onmouseout='style.backgroundColor="#00ff60"' onmouseover='style.backgroundColor="#00ffc0";' style='background-Color: #00ff60;color:#000; margin-right:1px;padding:2px;'>More</span></a><a href="#"><span onmouseout='style.backgroundColor="#00ffc0"' onmouseover='style.backgroundColor="cyan";' style='background-Color: #00ffc0;color:#000; margin-right:1px;padding:2px;'>Home</span></a><a href="#"><span onmouseout='style.backgroundColor="cyan"' onmouseover='style.backgroundColor="#00c0ff";' style='background-Color: cyan;color:#000; margin-right:1px;padding:2px;'>Ask</span></a><a href="#"><span onmouseout='style.backgroundColor="#00c0ff"' onmouseover='style.backgroundColor="#0060ff";' style='background-Color: #00c0ff;color:#000; margin-right:1px;padding:2px;'>Theme</span></a><a href="#"><span onmouseout='style.backgroundColor="#0060ff"' onmouseover='style.backgroundColor="blue";' style='background-Color: #0060ff;color:#000; margin-right:1px;padding:2px;'>FAQ</span></a><a href="#"><span onmouseout='style.backgroundColor="blue"' onmouseover='style.backgroundColor="#551A8B";' style='background-Color: blue;color:#000; margin-right:1px;padding:2px;'>Submit</span></a><a href="#"><span onmouseout='style.backgroundColor="#551A8B"' onmouseover='style.backgroundColor="#6600cc";' style='background-Color: #551A8B;color:#000; margin-right:1px;padding:2px;'>Mine</span></a><a href="#"><span onmouseout='style.backgroundColor="#6600cc"' onmouseover='style.backgroundColor="#9f00ff";' style='background-Color: #6600cc;color:#D4A017; margin-right:1px;padding:2px;'>Banners</span></a><a href="#"><span onmouseout='style.backgroundColor="#9f00ff"' onmouseover='style.backgroundColor="magenta";' style='background-Color: #9f00ff;color:#000; margin-right:1px;padding:2px;'>Banner Info</span></a><a href="#"><span onmouseout='style.backgroundColor="magenta"' onmouseover='style.backgroundColor="#ff00c0";' style='background-Color: magenta;color:#000; margin-right:1px;padding:2px;'>Fansigns</span></a><a href="#"><span onmouseout='style.backgroundColor="#ff00c0"' onmouseover='style.backgroundColor="#CD1076";' style='background-Color: #ff00c0;color:#000; margin-right:1px;padding:2px;'>Codes & Links</span></a><a href='#'><img src='http://www.animated-gifs.eu/love-hearts-7/0004.gif' height='20px' style='margin-bottom:-5px;padding:2px' /></a><br />

</div>

Click the "Save" widget button and you are done, almost. Move the widget to below your header or to a place near the top of your blog that will allow the widget to use 100% of your blog's width. Click on "Save" at the top of the Design page.

HOW TO EDIT THE MULTICOLOURED LINK TABS:

For convenience's sake separate each lot of links with a line space when editing them. When finished editing the entire lot of code, remove all the line spaces. If confused = Check the bottom-most code I've added to this post to see the entire link code for each tab link.

In the last few lines of the code above (which is actually for one entire link) I have changed the colour of some of the code. In green, change the colour of the background to either another hex colour or a word (e.g. lime) but if you add a word for the colour remove the # symbol. This has to be done twice per link tab. In green, this colour is what your link tab will look like on your blog when you just look at the link tab without moving the mouse arrow anywhere. You need to add the new colour twice into the code because the code for each link has 3 function commands: a normal background color; a mouseover background colour; and a mouseout background colour. However, the order of which these 3 commands work in sequence is: normal background > mouseover background > mouseout background > normal background - again. You need the normal background colour to reset the link tab's background colour back to it's normal colour again, and that is why you have 2 lots of background colour just for the non-hovered over link tabs.

If you want to change the mouseover background colour then change the hex colour code in blue to whatever colour you want. This is only done once per link tab.

To change the text colour of each link change the hex colour in orange to whatever colour you want.

Lastly, to add an actual clickable link to each link tab, replace the # symbol in red with the url of the page you want the link to go to; and replace the text in red with the words you want to display for that link tab on your blog.

Click on "Save" and now you are done.

If by any chance you want to delete some of the tab links, or add more so the whole thing takes up 2 rows of tabs, then add or remove the code below for every link you want to remove or add. Say you want to remove 4 tab links from the code - then remove 4 lots of the code below. To add more tab links, copy and add the code as many times as you need them.

<a href="#"><span onmouseout='style.backgroundColor="#ff00c0"' onmouseover='style.backgroundColor="#CD1076";' style='background-Color: #ff00c0;color:#000; margin-right:1px;padding:2px;'>Codes & Links</span></a>

To give you an example of why the background colour for each tab link needs to be changed twice, click on this link to a previous post, and notice the original background colour to the widget at the top of the post. Then run your mouse arrow over the page links. What happens?

Next and Previous button images

Wednesday, July 18, 2012 at 12:05 PM 1 comment

This is a follow up post to the Remove Next / Previous links and replace them with images that seems to be popular on this site. As there are limited buttons available for this function I thought I would share with everyone the small collection of buttons that I have available. I have found these buttons on the Internet so they are not ones I have made myself, nor can I claim them as my own. Some of the button sets also have additional buttons to the set. Below each set are the code for each button - feel free to use them on your own blog or website.

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAG2W-WXNyLeo8P-xrkiROqoMEicx-kevJl6AeeP3ZrwEUGiPXREbAWr9P-LKInB4XnMbcydwqoDS-giH_jGEdZ-CXtriRdJbUwd8xiyh95PP9yG1paREB2XIvVBNaoWJNafYrtLYT_8/s48/arrow_left_48.png' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqxGbuGtPylQuHVkc9M-pmc1nKUe2L7VNhJg_jHPE1n9ub2hWf1gadzeT_TPraSmTD1ZvYwhwMwy0Orm2Ba7OZf6N4z9o-66_ftnXq6efYgkUUCjB5K8hnZCktj0evG_zIxet4OKMdmEA/s48/arrow_right_48.png' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqvxI-JNBuzznwspMsEbFCrtnLKcMUVkocyrotf_UIyJDa8fNDKiyb_1Gbxb57PgGS0U3EluJwB6DBFcpcm5kS2VO56hQKuq5YAj1C7AIX_3WiKP2Nk-0b0nCiOKAFncqwdZfIgyVSRM/s48/b_back.gif' />

MORE STORIES BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyP_vXxjY3RmrxhG0CM4aZpX2L4x2qwz_c3or9M_BaDkq1jvvEdGL7Hb_DpzzhIsEi1ZC5q3WtVshAZEd_IfiXLGGN4xP-5_JNWoWLnYVPwZ9aOtssJOzCqIUDejPrGmncde7rL3wiYm8/s112/b_end.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiSDdcGZjKZpgKVWSF7teIEZXe-9Xo9PtvD3Co5I165fI8YCgANTvRUAOzWhj4YY5ipaHae8w5_C9rcDiKBYpB1olpR7s4jVHZkkgpUw224HKFfen0R5PaVAksz1PlqQlv1Lpd1tiitbE/s48/b_next.gif' />

RED PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1mIn3LTRJ6M1R_9XbkMsR_Tyt1kIyPISn3mfTe5FKWmqfx5Nyeq9uR-hrBuXqvPWPT0EOGzbgxp9vES56ebfo5JadRrxych2RVZXSy4YVAmsxZZ226u951d5AjYYxbpkfvq6HmFfDu6w/s184/Back%252520Button%252520%2528norcastle%252520red%2529.png' width='100px' />

BLUE NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQuupYN3bsNwQGT-aA5mc69Bu84Reg5xhEmOs1FdCOZKy9BHncEquI2XQSI1gOQVTIzrYUsay26IAS_hyphenhyphenKJ9QXNRzrU3bazM3Xs3ZWAX1q4juC1mW4VASQ79s0Yj1tv6edlzI7WMkQ8I/s147/imagesCAPYHR3G.jpg' width='100px' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuOQOaieuiriutJ-qS9631NHnxgHn2k8nB8Iq1E_hikFa5nC7Iil8NOPtDrNk7t9GKQjVpSD9JxjA4mBAm77szzGfVpCjpPtFP6X99rLrzc_NNM6O3Be82ZxTgzXiuFAt2bSMgMc0YCc/s150/back_button.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC70gSB-ncF59g59lTr9WWSrs5laHJANMQ8a5XZicrhVLCfXpauAhvNatkrxvdnBs0rkmCH_CupN2yinIiDcJeBiEp1an048jEqPSMw9vlpIwvGhABEDK8gBm36ZgKgGvYHvJ_98CsrjM/s150/imagesCA13IC60.jpg' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1SXwjxmsObIV_PMH33bDsK6OwlX04_3__WQ9jx4Wn8Q6BlljmnJraceByNMINZZrklKu3OAjRjawz5fOsAsVZuVQzb-fKk-ZFypWqEwIv6ceA2WDrzz9nMj5NlVQPLVaM-5aqwZ8nUs/s43/back_button_selected.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsDnBRybyeOPEJcrIJIsWDBuqSAcC2XBY5f6NB3o568VLI_FHOHWDhbI5iXrj1jpVsdANPJXaL-1DkWwxBuZj2TZEyI8cpn_3Nx-YTfmW8i9xat7nAUWxB-M9m31slEXxHetFfmOWgxo/s43/next_button.gif' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbpgQasvb8u_8-857lMfGjJZvrPVL3SFmsPFJOCvaF4j2JEBC-m4FlsAiS_tY43YQnMjwLR3_VIq3pIy64QBLXzM669EbV3g96I2qe6HhrUuCGKDLERHAfOlu67i7n3RzqqUFuYy1k8Ag/s205/Backbutton.gif' width='80px' />

HOME BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMrGaB4JygNLsRvtRlv9A5oOsV4aaoCFUE9SAlS_OhCHNYapu_KHEWuxVzaQqzwhldpGpHzdhk__GFxiX28D663fSZ04jhlr3JTwWSk1FkcCEcS2AEROUiFhLZ_QpwUIEYe1G4Q9rs8c/s169/mainpagebuttom.jpg' width='80px' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibV0vqf_hW04z9w0t8IViYF6rfWMg2BMLf0WoXg0Lw9cAwsb_nr1siCbIZX0AD3Ud5EKG1TjuNboCBqsnCUy04huoAp7dTB8ebrLormbgwme6AZOzSU6osAIPd7tCcPkp8gZfmSRt5LpE/s163/imagesCA6O90S8.jpg' width='80px' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9t4T6IiBc1RbLb2CiFdxff-RxYZRIOToVWAkyIKIVanhpyIQlJuakDMWdqtm_OMX6vqfxHWRSDnoYDbNP2dOrCIZPu0TR_dnH9n0XCOAaP_7s4FKUEb5uhyphenhyphenpgl6RnNlQXlZ8G2JRvsU/s105/previous___.png' />

HOME BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifuqZl1oeVfN0I3dcvuHylwxX1FSFWQ0K3PHGmU4mr9J9ZLsK2huP05SBHE01oWtPEq5xErZpjLg0WTu8umx64zlPde_pmYWmTFowhgPG6Rb-1kiQvpr5e971SrOl0c4bCcy7zV50Pi6Q/s146/backtohome.png' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaPfPpRXrmG80U5PwiAZhPugLWB6-YJnUJ5TK_wuEUZrSfAYft-T_JYhzhJoC8MiqKLKEhO9K3lnxmeeTWODTUVfcJguvG2aBSN9ovc6u-_AJafHX-XShkklF1-LCjAxXQNG2YAFzpLI/s71/next___.png' />

BACK TO TOP BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-BECuwF6mTu46kEwIHOm0YuPDChZM3yq7bEXZ5xhORtaDTuOMQi0GagxA4MrjdsniBwkSgAJfg6l_VC5t-YsoAOUIS6D7oiIUuomWst-zKCoGuAvRk_kS1-15HzaZqjiooZOAVThvm-Y/s167/2000Post.png' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW3kOr4pLcnEzexq2RYUsVHUXaXxFYFKrpU2Kjt1YktSHjboIFVVfbbolz-GH-TPdL_sqx3R7f8TjccLfP3RgDV_d5lyjFg5rDJCUCMVb2PXyZeSmbt4PflGsmo64ym0DSWyG94HuSpGY/s48/back_buttons.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcO08f8oh9AJeaM5wmCzvgOLDjoFUY1-lLMynVpe46lWGjO_0LRJo7FWrhzeLt3QTnplHiShNpCo0tGMFHhl2lFnzvC5Y_67M4IGpWFlcjcU1f8FuAFgL5ouTbQC2dLk0BW19GtIqweY/s48/next_buttons.gif' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0XN8etlBeF0iW2R9hVggkMLEsS8pviKVhBD5rN9_LAQRwVJCCl16Hj8M-3l6NLVRHGBf0bxzRdVkGJUjhwkyYbZrTTsrDu-Zw7PSBBM07LWXXWBDEUHJ7WxqHOs8PNbE16Y1zTPBIXl8/s56/buttonBack%255B1%255D.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1dRQyB8-22d_nFGDfC6elF9nPPQeQ5ml-cKyqjN9zJfm8khWpWRaS_SScxMTCki08m_qjGz-s6oDzpRujTFdsMFxHeZs_Jvh4ZqgTJyG_R0kTXCVjg3vc_CFeWhursW2aWZ8XZORBtaI/s56/imagesCAJ9SHO0.jpg' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqoAjFenHrG8unjvq3tsQCeQRIZlM-NhDWu5CrdpE-whmqKwJXWQ_dnmDUvsxowqSLM3dFdeJdRyB61AKJad0bKFR-RqocTpcvC7zbau1OizlKX1j6o5oy6KFOX3UZQQrkRNF0FZuaSg/s54/PREV.jpg' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkjgArvR8fNqdgHoA9tKg2roBfL-OrxxPc6DStm6XZhabTMikXK_GaIOwuVgOC8o0ONLD3PCgJgnrtPw6nN4ZTWeG0WImy3HYWo218B_mB1dHdtWY_yKYJR_6ZnDaVdvVQ0nLUdcTuogo/s54/NEXT.jpg' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaV-WMRza2FrFAcqYFUElsVn6gxBOjxFRqCIE7vmV7Dn6Prn8q5UmzxzS4dTfN0u_YRA5gRLLgetFlcvEBZvQIKTS0qxQdYumfHr1cAkIIT6X0jFb4pL3MoWcnArgX6LFwonM2rk6d8Y/s79/previous-red.png' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJ2oyJnxvjfoQwi0rSnFC9q1vkbOP-Nj_nWxZhjI6F659FtJGjNO6TB7kMXX1qnHHFCsn1QolXfvXjxn6pJZpRfZB7mIAsV_lnn0p1Tjq_dx7TyiSUVPlW_SXepY_JY3CnHtaOkGB9Pc/s79/next-red.png' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKh10lMMjCGw7cllc6hQX2NZF6_uVlVnBkrNjZVeoegGLV901472L4V-zLHG7pgX3v735y_4wJObDbIcc7WyLSIFwHfK35C0d5mKwm9MTUogFdJYwrKAZ0k26XBrxLb28SGrPRlS5updw/s62/sm-previous-red.png' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZNzuCHeBDG34c98kXlidQDGCwJ-FDKuhB3VdvfHVTILxxFzPbBbyN1JoKOVU3acEnMp6Z-OpM5YQ3vQY0aJJrlRmhWXCLoqtkjlGRy_fzNcNuca0UHJrVgn_u3uFSUZgaozQmvVAWTbY/s62/sm-next-red.png' />

>> About half of these buttons are best placed on sites with a white background.

Labels

Recent Comments

Talking Avatar

Manual Page Navigation

Scrollbox codes

Offsite tutorials

Twitter feed

Blog Archive

Visitors

PDF post creator

Followers

Logo

Categories

Quick links

Links 1

Links 2