Please don't click on these links yet.

Under construction: ? * # 0-9 |A |B |C |D |E |F |G |H |I |J |K |L |M |N |O |P |Q |R |S |T |U |V |W |X |Y |Z

Your opinion is needed with a new "FAQ" I'm thinking of writing up. Click on this "FAQ link" now and leave a comment if you can spare the time.
Tutorials : How I made it toolbars paginations buttons widgets tweeks mega tweeks everything else inspiration ideas FAQ problems Fixing problems

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.



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:

<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="http://maps.google.com/maps?source=embed&amp;ie=UTF8&amp;hq=&amp;hnear=Tenterfield+New+South+Wales,+Australia&amp;ll=-29.060971,152.012329&amp;spn=1.226805,1.755066&amp;t=m&amp;z=9&amp;vpsrc=6&amp;output=embed" width="600"></iframe>

What you get is just the map but not the links that are visible above. Just copy the code above and paste it into a blog post or static page in the "Edit HTML" section. Add other text or content to the post/static page and publish it. You can create your own Google Map and then copy the url for your map and place it in where my src= url is, then resave the blog post/static page and you are done.

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(http://3.bp.blogspot.com/-o4B2M3HfsjE/T1sigHTffNI/AAAAAAAAF7o/Jq4gPyA6pb4/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:

<div id='coloredmenu'>
<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=&quot;#ff0000&quot;' onmouseover='style.backgroundColor=&quot;#ff6600&quot;;' style='background-Color: #ff0000;color:#000; margin-right:1px;padding:2px' width='100%'>Home</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#ff6000&quot;' onmouseover='style.backgroundColor=&quot;#ffc000&quot;;' style='background-Color: #ff6600;color:#000; margin-right:1px;padding:2px;'>Info</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#ffc000&quot;' onmouseover='style.backgroundColor=&quot;yellow&quot;;' style='background-Color: #ffc000;color:#000; margin-right:1px;padding:2px;'>Notes</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;yellow&quot;' onmouseover='style.backgroundColor=&quot;#9fff00&quot;;' style='background-Color: yellow;color:#000; margin-right:1px;padding:2px;'>Notices</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#9fff00&quot;' onmouseover='style.backgroundColor=&quot;#3fff00&quot;;' style='background-Color: #9fff00;color:#000; margin-right:1px;padding:2px;'>Gallery</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#3fff00&quot;' onmouseover='style.backgroundColor=&quot;lime&quot;;' style='background-Color: #3fff00;color:#000; margin-right:1px;padding:2px;'>Friends</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;lime&quot;' onmouseover='style.backgroundColor=&quot;#00ff60&quot;;' style='background-Color: lime;color:#000; margin-right:1px;padding:2px;'>Tutorials</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#00ff60&quot;' onmouseover='style.backgroundColor=&quot;#00ffc0&quot;;' style='background-Color: #00ff60;color:#000; margin-right:1px;padding:2px;'>More</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#00ffc0&quot;' onmouseover='style.backgroundColor=&quot;cyan&quot;;' style='background-Color: #00ffc0;color:#000; margin-right:1px;padding:2px;'>Home</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;cyan&quot;' onmouseover='style.backgroundColor=&quot;#00c0ff&quot;;' style='background-Color: cyan;color:#000; margin-right:1px;padding:2px;'>Ask</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#00c0ff&quot;' onmouseover='style.backgroundColor=&quot;#0060ff&quot;;' style='background-Color: #00c0ff;color:#000; margin-right:1px;padding:2px;'>Theme</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#0060ff&quot;' onmouseover='style.backgroundColor=&quot;blue&quot;;' style='background-Color: #0060ff;color:#000; margin-right:1px;padding:2px;'>FAQ</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;blue&quot;' onmouseover='style.backgroundColor=&quot;#551A8B&quot;;' style='background-Color: blue;color:#000; margin-right:1px;padding:2px;'>Submit</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#551A8B&quot;' onmouseover='style.backgroundColor=&quot;#6600cc&quot;;' style='background-Color: #551A8B;color:#000; margin-right:1px;padding:2px;'>Mine</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#6600cc&quot;' onmouseover='style.backgroundColor=&quot;#9f00ff&quot;;' style='background-Color: #6600cc;color:#D4A017; margin-right:1px;padding:2px;'>Banners</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#9f00ff&quot;' onmouseover='style.backgroundColor=&quot;magenta&quot;;' style='background-Color: #9f00ff;color:#000; margin-right:1px;padding:2px;'>Banner Info</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;magenta&quot;' onmouseover='style.backgroundColor=&quot;#ff00c0&quot;;' style='background-Color: magenta;color:#000; margin-right:1px;padding:2px;'>Fansigns</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#ff00c0&quot;' onmouseover='style.backgroundColor=&quot;#CD1076&quot;;' style='background-Color: #ff00c0;color:#000; margin-right:1px;padding:2px;'>Codes &amp; 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=&quot;#ff00c0&quot;' onmouseover='style.backgroundColor=&quot;#CD1076&quot;;' style='background-Color: #ff00c0;color:#000; margin-right:1px;padding:2px;'>Codes &amp; 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://lh6.googleusercontent.com/-6pcRNtLcc38/UATZPcsQ6aI/AAAAAAAAIGY/bKyy-xAl-x4/s48/arrow_left_48.png' />

NEXT BUTTON: <img src='https://lh6.googleusercontent.com/-ThhcuIveors/UATZPVFE3nI/AAAAAAAAIGU/Qk4po46izns/s48/arrow_right_48.png' />



PREVIOUS BUTTON: <img src='https://lh6.googleusercontent.com/-Y3TPbHlNddA/UATZT5waTXI/AAAAAAAAIGs/uD-1smSjfPA/s48/b_back.gif' />

MORE STORIES BUTTON: <img src='https://lh6.googleusercontent.com/-Gp9icRgaqHQ/UATZT47ip0I/AAAAAAAAIGo/PReG0IZE9pY/s112/b_end.gif' />

NEXT BUTTON: <img src='https://lh4.googleusercontent.com/-yKY_TchZys0/UATZT25McrI/AAAAAAAAIGk/hnmaVtK6CYY/s48/b_next.gif' />


RED PREVIOUS BUTTON: <img src='https://lh5.googleusercontent.com/-w7S0LrOL_0w/UATZceZTOEI/AAAAAAAAIG8/N75_nY4i9ek/s184/Back%252520Button%252520%2528norcastle%252520red%2529.png' width='100px'  />

BLUE NEXT BUTTON: <img src='https://lh4.googleusercontent.com/-q8PqeoWjy_U/UATZ2cFSaFI/AAAAAAAAIII/dQaWrHtpRcc/s147/imagesCAPYHR3G.jpg' width='100px' />

PREVIOUS BUTTON: <img src='https://lh4.googleusercontent.com/-KjiA9hQOWgQ/UATZclEJUHI/AAAAAAAAIHA/RC1qcio3z_s/s150/back_button.gif' />

NEXT BUTTON: <img src='https://lh4.googleusercontent.com/-sASpasnQBBg/UATZpPYnC_I/AAAAAAAAIHs/Ea3espi1Iq0/s150/imagesCA13IC60.jpg' />



PREVIOUS BUTTON: <img src='https://lh6.googleusercontent.com/-5M0By2-WaWg/UATZcx9mdbI/AAAAAAAAIHE/WTCuhd9vq3U/s43/back_button_selected.gif' />

NEXT BUTTON: <img src='https://lh4.googleusercontent.com/-jQfvxv7tCRo/UATZ3coOeJI/AAAAAAAAIIY/IM8xmjqPc14/s43/next_button.gif' />




PREVIOUS BUTTON: <img src='https://lh4.googleusercontent.com/-_A8-RnwVwQk/UATZofSuNcI/AAAAAAAAIHU/27ZP_UsSZBM/s205/Backbutton.gif' width='80px' />

HOME BUTTON: <img src='https://lh6.googleusercontent.com/-ZG_sgR3RkUM/UATZ23rWpmI/AAAAAAAAIIU/DdlFH3g7WrU/s169/mainpagebuttom.jpg' width='80px' />

NEXT BUTTON: <img src='https://lh5.googleusercontent.com/-LdI4jBaI9ms/UATZpbmjLKI/AAAAAAAAIH4/g5_YU2peP38/s163/imagesCA6O90S8.jpg' width='80px' />




PREVIOUS BUTTON: <img src='https://lh5.googleusercontent.com/-Po20vYfAUVQ/UATZ_0p9fqI/AAAAAAAAIJE/Biu2MayW1xI/s105/previous___.png' />

HOME BUTTON: <img src='https://lh5.googleusercontent.com/-ptMeEvS33OI/UATZoWIzUiI/AAAAAAAAIHY/JZBBYxY7org/s146/backtohome.png' />

NEXT BUTTON: <img src='https://lh4.googleusercontent.com/-QIxCoSVc6GU/UATZ3DcDvYI/AAAAAAAAIIQ/ysSCfB8iC8U/s71/next___.png' />

BACK TO TOP BUTTON: <img src='https://lh5.googleusercontent.com/-NtJjFuruPnk/UAYQJNceHZI/AAAAAAAAIJ8/tgbji1dJGLg/s167/2000Post.png' />




PREVIOUS BUTTON: <img src='https://lh6.googleusercontent.com/-aDlexYQaMe8/UATZoQDgs6I/AAAAAAAAIHc/pGPUEtgZpP8/s48/back_buttons.gif' />

NEXT BUTTON: <img src='https://lh3.googleusercontent.com/-WBCd1-f1LTY/UATZ_CNmMUI/AAAAAAAAII4/riENI4OHKI8/s48/next_buttons.gif' />



PREVIOUS BUTTON: <img src='https://lh5.googleusercontent.com/-X3sBUAeNOe0/UATZo4khYYI/AAAAAAAAIHg/UK6iQlGrvdI/s56/buttonBack%255B1%255D.gif' />

NEXT BUTTON: <img src='https://lh3.googleusercontent.com/--NaLG6VmOzE/UATZ2L4q-0I/AAAAAAAAIIM/309mYG3A3f8/s56/imagesCAJ9SHO0.jpg' />


 
PREVIOUS BUTTON: <img src='https://lh4.googleusercontent.com/-XQKewgFEjfE/UATZ_P9PO3I/AAAAAAAAIIw/hVQ09LOe3ZE/s54/PREV.jpg' />

NEXT BUTTON: <img src='https://lh6.googleusercontent.com/-rA5oZQP4XrY/UATZ2HEtnDI/AAAAAAAAIIE/GOZNlZBkRdE/s54/NEXT.jpg' />


 
PREVIOUS BUTTON: <img src='https://lh3.googleusercontent.com/-dj1SY2y2Buc/UATZ_z0rJNI/AAAAAAAAIJA/ID4ZSygs-Lo/s79/previous-red.png' />

NEXT BUTTON: <img src='https://lh3.googleusercontent.com/-4a2FvMnQet0/UATZ_EUSxRI/AAAAAAAAII0/ECEGm3gMsE4/s79/next-red.png' />


 
PREVIOUS BUTTON: <img src='https://lh3.googleusercontent.com/-TPW75VFE8w0/UATaHMDaopI/AAAAAAAAIJk/URZDfm1HVro/s62/sm-previous-red.png' /> 

NEXT BUTTON: <img src='https://lh3.googleusercontent.com/-ox3U--l3gMM/UATaALbquEI/AAAAAAAAIJI/1mIm-MknaPg/s62/sm-next-red.png' />

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

5 things to use marquees for on your blog

Monday, July 9, 2012  at 4:16 AM 1 comment
Commonly known as scrolling text, marquees can literally be used for almost anything. Today I will list 5 things which you can use marquees for that have been in use on blogs and websites.

1.  SITE UPDATES AND WELCOME TO MY BLOG INFORMATION
Adding important information that your visitors will hopefully read, I've noticed, needs to be eye catching and uniquely styled. If you just put a normal marquee with normal text on your blog your messages will probably be overlooked by everyone.

These days people tend to pay more attention to visual aides. By adding visually appealing content to marquees will help your visitors to look at it. Your information not only has to be unique that you add to a marquee, if you are bored with looking at it, the chances are other people will be too. Make the content of your marquee/s so YOU want to keep looking at it, as if it is hypnotic. How to achieve that result depends on your ability to be creative. Below is an example of a boring looking marquee and content.

WELCOME TO BLOGGER TUTORIALS FOR EVERYONE! Enjoy reading through the tutorials.

2. ADVERTISING LINKS OR POSTS
A lot of people like to use a marquee for displaing specific posts on their blog, which can be a good thing as marquees catch your eye over content that does not move. So supplying visual moving links on your blog has a much better chance of attracting visitors to click on the links rather than on, say, a recent posts link. Below is an example of blog post links added to a marquee with a pause on mouseover function added to it.

My blog post link 1    My blog post link 2    My blog post link 3    My blog post link 4

3. USING MARQUEES FOR DISPLAYING CLICKABLE IMAGES
Clickable images are great but not so great using a marquee because of the jerky scroll behaviour. It is very off putting to say the least. However, just one example for clickable images could be for displaying your Photo albums on your blog. Below is an example of some of my Picasa Web albums as I don't have any Photo Albums for this blog. All images are clickable in this example.

    

4. TO GRAB PEOPLE'S ATTENTION TO SOMETHING SPECIFIC
I've noticed on some websites that specifically advertise something to sell there are these and similiar marquees to grab your attention. As annoying as they are, they do grab your attention but generally are not clicked on. It depends upon what people are trying to sell you as to whether they will be clicked on or make the people more curious about the content. Here is one example that I made below:



STOP | | |GET IT NOW| | |STOP


5. MAKING A STATEMENT
If you truly want to do something different with your blog then you can simply make a series of marquees where you can voice your own opinion about something that you believe in.

Because I am so passionate about nature I created this image below using 4 marquees and 3 images I found on the internet. It is just one way to use marquees to voice your opinion or to express your deepest concerns. If you decide that this has a lot of potential, then I'd love to hear your thoughts.
RESTORE NATURE BY GROWING NATIVE PLANTS IN YOUR GARDEN.

There are probably many other things you could use marquees for but these are just a few. If you have any ideas for using marquees that I didn't mention in this post, feel free to leave a comment.


How to align a header image in other web browsers using Internet Explorer 7

  at 12:48 AM 0 comments
This tutorial does not include the solution for fixing the alignment of the header image in Firefox. That was a separate issue when I made this tutorial but it has since been solved. The solution for Firefox is at the very bottom of this blog post, which I discovered the next day. Please still follow all the instructions to this tutorial of the written version below, and then after that add the extra line of code to your template to position the header to the left in Firefox.

This tutorial is about, firstly, using your own header image that you made yourself which already has your blog's title on it as well as a brief description of what your blog is about. Secondly, your web browser is Internet Explorer 7. And thirdly, you want your blog to look the same in Google Chrome and Firefox as it does in IE7. This tutorial solves the problem of a misaligned header image in Google Chrome and Firefox web browsers without affecting the look of your blog in IE7.

I am no web developer genius, in fact my knowledge of most css/javascript/html codes are still pretty limited. But I am driven to learn how to fix certain problems when they arise, and that is where I get my knowledge from. That, and the desire to solve each problem as it surfaces.

This tutorial displays my lack of understanding about css/javascript/and html codes but it also displays my ability to learn and I eventually solve the problem at hand. I am only human after all but I have a keen sense of ambition! I do not quit easily on problems.

Here is the solution below:

Firstly, you have to find the code that refers to the .header-inner in your template's code.  It will be near the top of the template's code, usually right after the " .body { " code. You simply add the following line of code to that section:

text-align: center;

What a wonderful bit of code that is! If you do not have a .header-inner { section in your template's code, simply add this code to your template in the css header section:

.header-inner .Header .titlewrapper {
padding: 22px;
}
.header-inner .Header .descriptionwrapper {
padding: 0;
}

Then add the text-align: center; line of code between the two brackets, on a separate line, and click on "save template". Not sure what to add? It will look exactly like this:

.header-inner .Header .titlewrapper {  
text-align: center; 
padding: 22px;
}
.header-inner .Header .descriptionwrapper {  
padding: 0;
}

After that, go to the "Page Elements" section and click on the edit link that is on your "HEADER". Leave your header image where it is - do not remove it. Change the title of your blog to a word or two that will match the original title.

Basically, with your header background image you add the title of your blog to it, and then when you add a new name for your blog in the edit section of your header, you carry on with the blog's title by putting a word or two at the end of it. The end result will be the header image title and the original blog title will make a complete sentence.

But, don't save the changes just yet. The next thing you have to do is delete the blog description altogether. Yes, DELETE IT. Then set your header image to "BEHIND THE TITLE AND DESCRIPTION". Once you have done that you can now click on "save" and the header image is aligned perfectly in all three web browsers. That's all there is to it really.

10th March 2011: UNFORTUNATELY, this tutorial above only fixed the problem with Google Chrome. The header was still aligned to the right in Firefox when I checked it out the next day. I finally fixed the problem for Firefox, so here is the solution for that problem:

On top of what you've done above, add the following line of code to your .header-outer { section to fix the problem in the Firefox web browser:  

border: 5px solid #000000;

Of course, you can choose any colour for the border that you like. In the line above "#000000" = black. For some reason by adding a border to the header image, in Firefox, the header background image is realigned to the far left instead of positioned to the right of your blog. All I know is it works!

How many post pages can you have on Blogger?

  at 12:27 AM 0 comments
I done some calculations, and they were very rough, as I did not take into consideration leap years, but I done some math on how many post pages one can have on Blogger. Every single day it is possible to add 86,400 new pages to your blog regardless of it being a leap year or not. You'd be spamming, of course, but the option for that many posts daily is there. That is 60 pages per minute multiplied by 60 minutes per hour multiplied by 24 hours per day. That's a lot of pages. To multiply 86,400 by 365 days you get 31,536,000 post pages for one year. That is just for one year, mind you.

Now considering you can predate posts all the way back to 1st January 1970 - to 12PM (or noon/midday) well, multiply 31,536,000 by 41 and you get a super massive total of 1,292,976,000. That's over one billion pages for your blog, minus leap years and half a day for January 1st 1970. See conclusion at bottom for further notes. How many people could possibly even imagine that amount of blog pages on their blog?

A lot of people on Blogger complain there are not enough pages for them to use, but if you do the math, and understand you can add a new post every minute, those minutes add up to over one billion post pages. And this does not take into consideration of the fact you can have 2 or more published posts with the same date and time but have different titles.

Okay, so people want more static pages (currently only 20 are available to use) than post pages. What is so wrong with post pages that people don't want to use them? Static pages look no differently to normal post pages and they don't show up in your blog's archive widget or on your home page. So what! If you get rid of your blog archive widget altogether your posts won't be displayed either. It's simply a matter of reorganising your blog to link the main pages together so your blog becomes searchable.

So what does a blog with over one billion post pages actually look like? Imagine something like Facebook but smaller. Facebook has a huge amount of active users, it's into the millions but closer to the billions, and even more visitors per day. Can you make your blog have as many pages as Facebook's? I challenge you to try it, just by using your blog post pages alone.

Conclusion: You can have roughly 1,292,976,000 pages. That's from 1st January 1970 (12 PM) to 1st January 2011 (12 PM) minus 86,400 pages for every leap year between those two dates then add 86,400 for every day that has passed since the 1st January 2011 until present. Still not happy with the amount of pages you can use on Blogger? Then there must be something wrong with the way you think.

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:

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


The widget will then display properly again.

Add scrolling text to your blog

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

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

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

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

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

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

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

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

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

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

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

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

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

Add a Google Translate widget to your blog

  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:

<p align="center"><div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    multilanguagePage: true
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></p>

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

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

Add a Sitemap to your blog

  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&amp;alt=json-in-script&amp;callback=loadtoc>
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2011
Little dogs
big dogs

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

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

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

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

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

Scrollbox codes

<a target='_blank' title='DON'T TOUCH MY PHONE' href='ADDYOURURLHERE'><img src='https://lh4.googleusercontent.com/-qSyLJ0X94nk/T-_ekHbo_mI/AAAAAAAAHmY/qk0v-X5s32s/s320/58298-dont-touch-my-phone.png' border='0'/></a>

This free script provided by
JavaScript Kit

FAQ

YOUR OPINION COUNTS! A list of topics that I am thinking of writing about but need feedback from visitors before I go ahead with it.

Click to view more Pages
 

This site consists of tutorials that you would not normally see elsewhere. I am adding tutorials that I have either tweeked or created myself, using existing code already found on the Internet.

Back To Top Image by Cool Text: Logo and Button Generator - Create Your Own Logo

Scroll to Bottom Back to Top