Wednesday, August 29, 2007

Remove 'pencil' and 'screwdriver and wrench (spanner)' quick editing icons permanently

Update: Now you can choose to hide or display the quick editing tool by going into Blogger edit post options but do read about why you should keep the quick editing tool before you remove them.

(If you only want to know how to permanently get rid of those quick editing icons, skip to Permanently get rid of pencil icon or Permanently get rid of screwdriver/wrench icon but I hope you will read the explanation on why you should not remove those useful icons)

Important note: those quick edit icons is really useful and only visible to you. My recommendation to you is not to remove them although many bloggers have asked how to remove/hide them


We have received numerous complaints of bloggers seeing those "irritating" quick editing icons - the pencil New Blogger quick edit pencil icon quick edit icon for the posts, and the screwdriver and wrench (spanner) New Blogger screwdriver and wrench quick edit icon quick editing icon for the Page Elements (widgets). Personally they don't irritate me at all.

To me, these are really useful features, especially if you put a lot of HTML/Javascript Page Elements and you don't type a title for the Page Element (which is the norm). In the LAYOUT, they will all read "HTML/Javascript" and there is no way for you to tell which HTML/Javascript is for what unless you click on EDIT to look at what is inside. On the other hand, if you are logged in and you go the the blog, you will know exactly which Page Element you want to edit/delete and all you have to do is to click the New Blogger screwdriver and wrench quick edit icon icon and you will be editing/deleting the Page Element you want to edit/delete.

Further, they are only visible to me when I am logged into Blogger. No one else will see it. I have written about it before at How to get rid of the irritating "pencil" and "screwdriver and wrench (spanner)" quick edit icons (click BACK button to get back to this page). This however don't seem to satisfy some bloggers, especially those who have private blogs and can view their blogs only when they are logged in.

Here is one comment from a particularly irritated blogger:

"Okay 300 ducats to cooked art, his method worked. The other anwers are basically saying, 'Don't worry -- nobody who uses your blog will see these eyesores but you.' Which seems like an odd thing to tell me, since I will be using my blog more than anyone else, and I don't actually enjoy looking at eyesores any more than they would."
OK, if getting rid permanently of those very useful quick edit icons is what you want, here is how you can do it:

Permanently get rid of quick editing Pencil icon for posts

Sign into Blogger (Dashboard), click SETTINGS for the relevant blog and you will be in the SETTINGS > BASIC sub-tab by default. Just a bit down from the top of the page, you will see "Show Quick Editing on your Blog?". Click the down arrow and select "No" At the bottom, click "Save Settings". (Warning: There is a button "Delete this blog" very near that "Save Settings" button, and it is not uncommon to hear of bloggers who accidentally deleted their blog this way). Once you have done that, you will never see the quick editing Pencil icon again.

Permanently get rid of quick edit screwdriver and wrench (spanner) icons for Page Elements (widgets)

Sign into Blogger (Dashboard). Click LAYOUT for the relevant blog. Click TEMPLATE tab, followed by EDIT HTML sub-tab. Before you do any editing of the template, backup the template PLUS the Page Elements. See Backup and edit New Blogger template PLUS backup Page Elements. Once you are done with that, you will still be in the template editor window. Tick the "Expand widget templates" box and wait for the template to fully expand. Then look for this line of code:

<b:include name='quickedit'/>

If you face difficulties finding that line of code, press ctrl+F and you will see a "Find" followed by a box for you to type or copy-paste what you want to find. Type or copy-paste the above line of code into the box and click "Next". The scroll bar will scroll down to the line and the line will be highlighted. Use your mouse to highlight that line of code again and press the DELETE key. Preview, and if you don't get any error message, click "Save Template". You will never see the "irritating" (to me, useful") screwdriver and wrench icons again.

Update: 25 May 2010: A commentator Susie Hovendick Chan said that she got rid of the quick edit icons by putting

quickedit:display none;

at the end of the style sheet, that is, just before ]]> thus ending with

quickedit:display none;
]]>

Update: A comment from a blogger which I myself haven't tested. Updating here in case any visitor interested in what he has to say. If you do try it, do give us some feedback by leaving a comment: "Sweet! I realized that the wrench icon was causing layout problems in IE7; I got rid following your instructions of it even though its pretty useful.

In case if this helps anyone: the wrench icon is floated right. Float right inside divs that are already right floated will cause the div to stretch unnecessarily in IE7."

Monday, August 27, 2007

Disable right-click to prvent copying of photos

(If you are only interested in how to disable right-click and you don't want to be bothered with all this arguments about why you should not do it, skip all this and go to the bottom of the post).

This has been requested many times, but in my opinion and also the opinions of many others in the know, disabling right-click to prevent visitors from copying your photo is a very bad idea. To me, it is an exercise in futility. If you still want to do it, I will outline how I did it for this blog Right-click have been disabled for this blog. Note that in that post which contains a photo, you can't right-click on the photo.

Before I show how to disable right-click, try clicking on the photo in Right-click have been disabled for this blog. You will be taken to a page with only the photo. Confirm that you can right-click on the image, select "Save image as" and copy the photo into your computer.

If clicking on the photo does not work, you can always click VIEW > SOURCE and look for the HTML used to display the photo. Below in a scroll box is the portion of the source code for that post. There will be two URLs there, one highlighted in red, and one highlighted in green. To see the green one, you will have to scroll down the box:

<div class='post-body'>
<p>There have been numerous requests on a post to disable right-click because it is easy to copy photos by right-clicking on it and selecting "Save image as". Some bloggers just cannot stand the idea of their photo being copied. So this blog is to demonstrate that it is not difficult and is entirely possible. Try right-clicking on the photo below and see what happen:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jizoPL28qCY/RtJYHqGWbPI/AAAAAAAAAmM/GU3Mmr9XkPs/s1600-h/MoreCatsInTown+wit+copyright+notice.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_jizoPL28qCY/RtJYHqGWbPI/AAAAAAAAAmM/GU3Mmr9XkPs/s400/MoreCatsInTown+wit+copyright+notice.JPG" border="0" alt="Photo with copyright notice. Right-click disabled"id="BLOGGER_PHOTO_ID_5103238216347446514" /></a><br /><br />It is better that you add a copyright notice to your photo using a simple free photo editor like <a href="http://blogger-tricks.blogspot.com/2006/10/using-irfanview-photo-editor-for.html" target="new">Irfanview</a>. More expensive photo editors like Adobe Photoshop can also embed digital watermarks in images which are not visible, but can be detected electronically in case you need to take legal action. But tell me, how many bloggers are prepared to go to court over copyright infringements?<br /><br />This impediment can also cannot deter a determined copycat. All he has to do is to click VIEW > PAGE SOURCE and look for the HTML used to display the photo. He can then go to that page and copy the photo from there. Another easy way is just to take a screenshot.<br /><br />Further, this can cause many inconveniences for your visitors. I am used to right-clicking on a link and choosing the page to open in a new tab with a browser like <a href="http://firefox-alert.blogspot.com/2006/09/what-is-firefox-and-why-you-should-be.html" target="new">FireFox</a> which has tabbed browsing. However, try right-clicking on the link above and see if you can do it?</p>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>

<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>

Posted by Peter Chen

</span>


You will be able to find the URL of the photo in the HTML. Just copy the URL and paste it into the address bar of a new tab with a browser like FireFox which has tabbed browsing. If you copy-paste the first URL (highlighted in red) into the address bar of the browser press ENTER and you will be taken to the page with the photo where you can right-click and copy the photo. If you copy-paste the second URL (highlighted in green) and press the ENTER key, you will get a "pop-up" to either open the image with a photo editor or a photo viewer, or save it into your computer.

Another simple way is just to take a screenshot by pressing PRINTSCREEN, open up a photo editor like Irfanview (click BACK button to get back to this page), paste the screenshot into the photo editor window, crop the section you want if necessary, and save.

Fashion Critic also left a comment stating you can also (my own addition: minimise the window so that the desktop is visible) and drag the picture into your desktop. I tested that at Right-click have been disabled for this blog and found that it worked. So I hope you are convinced that disabling the right-click will only inconvenient your visitors but wouldn't do much to help prevent those who want to copy your photos from doing so.

A better way is to add a copyright notice to your photo as described in Put a copyright notice into your photo. More expansive photo editor like More expensive photo editors like Adobe Photoshop can also embed digital watermarks in images which are not visible, but can be detected electronically in case you need to take legal action. But tell me, how many bloggers are prepared to go to court over copyright infringements? But you do have the option to report the copyright infringement by report it to relevant parties by emailing abuse@google.com, abuse@blogger.com, etc., but whether action will be taken will be completely up to them.

Disabling right-click will also cause great inconveniences to your visitors. I used FireFox browser with tabbed browsing and frequently right-click on a link and chose "open in new tab". I get very irritated when I can't do this. I have put two links at Right-click have been disabled for this blog. Try right-clicking on the links there and see what happens. I also often right-click on a link and select "copy link location" to copy the URL into clipboard, but I can't do that for the above blog.

If you cannot stand your photo being copied, don't upload them to the web is my motto.

Disabling right-click

OK, after all the talk about why you should not disable right-click, if you still want to do it, this is how I did it for Right-click have been disabled for this blog. Sign into Blogger to get to the Dashboard, click LAYOUT for the blog which you want to disable right-click. Click the TEMPLATE tab, followed by clicking on EDIT HTML sub-tab. This will take you to the template editor. Search for the tag

<body>

I then added the line oncontextmenu="return false;" into the <body> tag so that it becomes

<body oncontextmenu="return false;">

Review, and if you don't get any error messages, save the template.

Acknowledgement: This tip was adapted from Disable right-click on page.

Sunday, August 26, 2007

Video uploading is now out of beta (Blogger in Draft) and available in all Blogger account

When Blogger in Draft (actually just a name for an experimental Blogger account where new features for Bloggers are introduced and tested), it just introduced 2 features - Autosave (Rat called this Auto####) and video upload direct from your Blogger post editor. They later introduced Polls and Enclosure links. As at time of publishing, Polls are still having problems and Enclosure links which allow you to turning your blog into a podcast easy.

There is some controversy over Autosave (including 2 bloggers who complained that they like to play with editing of their old post and if they don't like it, they just don't publish. Now with Autosave, their old post get overwritten without their "permission". I also complained that while doing edition of old post, before I finish with the editing, the untidy, unfinished post get published. I have to add the phrase "under editing" at the top of the post to warn readers). I have been pestering Blogger to give bloggers an option to turn off Autosave in such circumstances, but for unknown reasons, this very reasonable request was turned down.

Now Video Upload is out of beta (Blogger in Draft) and I am wondering if anyone will discover any similar problems. Now when you get into your Blogger post editor, you will see an extra video upload Blogger video upload icon in the post editor tool bar icon in addition to the other standard icons.

I will probably test it at Testing Blogger Beta (now New Blogger)

Blogger Buzz: 3, 2, 1, Action!

Saturday, August 25, 2007

Guestbook for your blog

A reader asked how to create a visitor registration. I can only think of 2 thing - a Guestbook and a Shoutbox. There are many sites offering free Guestbooks, but most of them require a script, which is usually remotely-hosted and written in a language such as Perl, PHP, Python or ASP. You should also be aware that this leaves you open to link spam where visitors leave messages for the purpose of leaving a link to their sites.

Lycos Tripod's HTML Gear Guest GearAnyway, I have installed a Guest Book at Natural Remedies. It is currently at the bottom of the left sidebar and I added a title "Please sign my Guest Book". You can try leaving a message there or just click "View My Guestbook". I used Lycos Tripod's HTML Gear to generate the script for the Guestbook. You got to sign up and then click the link "get gear" at the section "Guest Gear" (see screenshot at beginning of paragraph) to generate your code. In the resulting page, fill in the required details. You can chose it to be open (anyone can just leave a message) or moderate the messages, open in same or new window, filter swear words, allow or disallow HTML, links, <b>, etc, type of button, etc. When you are finished, click "Save and create", highlight the script, copy, and paste into a HTML/Javascript Page Element in the LAYOUT. Drag and drop it to wherever you want it.

As mentioned above, this Questbook will be hosted on another site. If you want things to remain on your site, you will have to install a "Shoutbox". More about that later.

Friday, August 24, 2007

Haloscan Installation Wizard for Blogger

(Important: see update at bottom of post)

Some people people prefer Haloscan commenting system to Blogger commenting system because you get the email addresses of commentator, etc., and I have previously tested Haloscan commenting system hack for Blogger. That was before Haloscan introduced an installation wizard for Blogger which makes the process a breeze.

All you need to do is to sign into your Blogger account, click LAYOUT for the blog you want to install Haloscan, then the TEMPLATE tab followed by the EDIT HTML sub-tab and click "Download Full Template". For full instruction, refer to Backup New Blogger template and Page Elements and Backup and change New Blogger template. Note the advice about backing up the Page Elements as well as in the process of changing to a different template, some Page Elements (widgets) may be deleted or become empty.

When you download your original template, it may be a good idea to save it in a folder "templates" followed by a sub-folder "name of blog". Name the file "blog title before Haloscan date" or something meaningful.

It is best to use a browser like FireFox which has tabbed browsing and is also recommended by Blogger. Then you can open a new tab and to to
http://www.haloscan.com/members/install-blogger.php
where you will see

Haloscan commenting system installation wizard for Blogger

Click "Browse" and locate the template you backed up in the step above, then click "Upload Blogger Template". You will then be taken to step 2 of the Haloscan Installation Wizard. Click "Download New Template" and save the revised template in the same folder as the one above with a slightly different file name like "blog title after Haloscan date" or something similar.

Go back to the tab where you have the Blogger account opened, and in the template editor page,



click "Browse" and locate the new template revised by the Haloscan installation wizard. Click upload. You may or may not get a warning that certain widgets will be deleted. If you don't mind that, and you have your Page Elements saved, then you may not mind that and go ahead to upload the new template. You will then have to add back the deleted Page Elements.

NOTE: The Haloscan Installation Wizard will work well with Blogger standard templates, but may not work with third party templates. I tested the Installation Wizard with Good Etiquette which uses the standard Blogger Minima 2 column template and it worked flawlessly. However, I tried to repeat it with Medical Matters which uses the BloggerBuster Sweet Dreams New Blogger template and found that after going through all the steps above, I still got the old Blogger commenting system.

Update 24 August 2004, 9.30am: According to Haloscan, using their Installation Wizard will not delete the old Blogger comments. Read their notes at
http://www.haloscan.com/help/MovingfromBloggerConsiderations

However, a reader had a bad experience. His old Blogger comments were all deleted. Read the comments. I will ask him if his is a standard Blogger template or a modified Blogger template, or a third party template. If you happen to use the last 2, please be extra careful.

Thursday, August 23, 2007

Change blog title from all uppercase to only first alphabet uppercase

The previous post Change blog title from all uppercase to all lowercase or vice-versa (click BACK button to get back to this page). This post will describe how to change a blog which has its blog title all in all uppercase to only the first alphabet of a word in uppercase, with the rest in lowercase.

This has been tested on the blog Natural Remedies which you will notice have only the first alphabet of the blog title and description in uppercase. Previously, the blog Header looked like this:

blog Header with title and description all in uppercase

This was how the blog title and description was changed to only the first alphabet in uppercase. Before you do anything with the template, it is always wise to backup your current template PLUS the Page Elements as described in Backup New Blogger template plus Page Elements and edit template. When you are finished with what the above post instructed, you will still be in the template editor. Look for this block of codes:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Add a line

p:first-letter

to the block of codes so that it become

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
p:first-letter
text-transform:uppercase;

letter-spacing:.2em;
font: $pagetitlefont;
}

For the blog description, look for this block of codes:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Just as above, add the line

p:first-letter

so that the block of codes become

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
p:first-letter
text-transform:uppercase;

letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Preview, and if everything is OK, save the template.

NOTE: Both the examples in the previous post Change blog title from all uppercase to all lowercase (click BACK button to get back to this page) and this post use New Blogger Minima template modified to 3 column by Hackosphere (click BACK button to get back to this page). If you are using a different template, the codes may be different or the particular lines may be missing altogether. If so, just add the necessary lines in.

Tuesday, August 21, 2007

Change blog title from upper case to lower case or vice versa

I use New Blogger Minima template modified to 3 column by Hackosphere (click BACK button to get back to this page) for my blog Generating revenue from your blog. Originally, the blog text title is all in uppercase font. Below is a screenshot of what it used to be:

original blog header of Generating Revenue from your website with upper case text blog title

This is how I changed the blog text title to lowercase font. I sign into Blogger (Dashboard) and see a list of blogs including "Generating Revenue from your Website". At that section, I click on LAYOUT, then click the TEMPLATE tab. Whenever, your make any changes to the template, it is always wise to backup your current template AND the Page Elements. Refer to Backup your New Blogger template PLUS Page Elements and edit the template. This is all explained in that post. After you have backup your template, you will still be in the template editor window. Look for this block of code:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

This is what is originally in the template. Note in particular this line:

text-transform:uppercase;

If you want to change the blog title font to lowercase, just change the line to

text-transform:lowercase;

so that the block of code become

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:lowercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Preview, and if you are happy with the result, click "Save template".

Different templates may have different #header. Yours may not have the line

text-transform:uppercase;

If so, and you want it in lower case, just add the line

text-transform:lowercase;

Just do the opposite of the above if your blog title font is in lowercase and you want to change it to uppercase.

Thursday, August 16, 2007

Feed for your blog

Under editing:

Feed

Feed is a way of getting updates on your website without having to visit it by subscribing to the feed either through an online feed reader or by subscribing to the feed via email. In practice, feed can be set to full or short. If set to short, the feed is supposed to display the first few lines, and if this attract the attention of the feed reader, then he/she will surf over to the actual site to read the full content. However, I have noticed that when I set my feed to short, in many cases, what is displayed is only the post title. So for it to be meaningful, you will have to use a very descriptive post title.

But here is a bit of good news. Google has bought over Feedburner and have given bloggers the option "burning" their feed at Feedburner and then redirect your Blogger feed to Feedburner feed. The methods and the advantages will be explained in the section below. However, for this, you must set your feed to full, otherwise, you cannot use this feature.

Amazon products for RSS feed

Feedburner

To "burn" a feed for your blog, go to
http://www.feedburner.com/fb/a/home
Type or copy-paste your blog URL into the field provided,

Feedburner burn feed

If you do podcast, tick the "I am a podcaster" box, otherwise just click "Next".

Feedburner will identify the feed URL's for your blog. For blogger, there will be an Atom feed and a RSS feed. I would suggest the more popular RSS feed. I would also suggest you copy the feed URL's into a Notepad file and save it into your computer so you can retrive them when you need them.
Tick this and click "Next".

If you are trying to keep track of what is going on in many sites and have no time to keep visiting them to see what is new, this is a great way to keep updated. You can read the feed online with sites like
www.google.com/reader (Google Reader)
(to be continued)

You can also chose to subscribe to feed by email.

Previously, Blogger only offer Atom feed. Many have been hankering for the more popular RSS (Really Simple Syndication) feed, and in New Blogger, they have added RSS feed. You probably have come across the familiar icon RSS feed subscribe button or the less common RSS feed subscription alphabet button button. Other common feed subscription button includes the "Add to Google Reader button Add to Google Reader feed subscription button, "Add to My Yahoo" button Add to My Yahoo feed subscription button, "Add to Bloglines" button Add to Bloglines feed subscription button, "Add to Newsgator" button Add to Newsgator feed subscription button, and a whole lot more.

Adding a feed subscription button to your blog

I will first deal with the popular Feedburner subscription button. You will first have to go to "burn" a feed for your blog. Go to
http://www.feedburner.com/
and type in paste your blog URL. Click "Next" and Feedburner will look for available feed for your blog. For Blogger, there will be Atom and RSS. I normally chose RSS.


Blogger and Feedburner

Recently, Google have bought over the popular Feedburner and now you can integrate your Blogger feed with Feedburner. The advantage of doing this is that you can get statistics about your blog subscribers via Feedburner.

Putting links for visitors to subscribe to your blog



(to be continued)

Adding a feed email subscription form to your blog



(to be continued)


Blogger previously only offer Atom feed

Official Google Blog: Adding more flare

Wednesday, August 15, 2007

New Blogger 3 column Templates by Blogger Buster

NOTE: Before you edit or change template, make sure you backup your curremt template PLUS Page Elements. Refer to Backing up current template PLUS Page Elements before changing new template

New Blogger 3 column Sweet Dreams template

Amanda of BloggerBuster have created a number of New Blogger templates. However, please note that the templates uses many images hosted by Amanda, and when you download her templates, included also will be the images. This is like implying that you should upload those images to the web yourself, get the URL's and substitute them in the relevant parts of the templates. This may be because she don't want you to increase the bandwidth load from her site. In any case, it is probably wise for you to upload the images yourself as then these images will be controlled by you and not Amanda. If Amanda remove the images from the web or her site goes offline, the images in your blog will disappear.

Amanda's templates have some features very much different from the other templates including a Lable (category or tag) List in the form of a Label Cloud, animated or fixed gif images, widgets to add a mp3 music player plus a mp3 music file, search box, etc.

However, I have noticed that after downloading her templates, some don't include the images (Blues) and some have some missing images. However, this is no problem as I will show you how to get the images, upload them to the web, get the URL's and substitute these with the the relevant URL's in the template. If you want to depend on Amanda, you can skip all those explanation, just download, backup your current template PLUS the Page Elements, upload her template and just forget about the rest. However, she has indicated that she prefer you to host your own files and images. If you want control over the images yourself and you don't know how, then you will have to read my instructions on how to get the missing images, upload the neccessary images and files plus get their URL's.

I will start with one of her template and explain the process fully, and the others, if you want to use them, the instructions for the first template will be exactly the same.

New Blogger 3 column Sweet Dreams template

An example of a blog using this template is Medical Matters. You can download it from Download "Sweet Dreams" 3 column template (zip file). Save the zip file into a suitable folder, perhaps called "BloggerBuster Sweet Dream template" or something. After you downloaded and unzipped the file, you will get 3 column Sweet Dream xml template (highlighted with a red rectangle), a HTML file which when clicked on opens a webpage giving some instructions, an image folder, a music folder, a widger_code folder, and an xml template folder.

Blogger Buster New Blogger template folders and files

Refer to Backup and change New Blogger template. If you have already done some customizations (add Page Elements, etc.) edit the Page Elements one by one, paste them into Notepad files and save them into the same folder as some of the Page Elements will be deleted or become empty after you change to the new template. Click the TEMPLATE tab, then the EDIT HTML sub-tab to open the template editor. Click "Browser" and browser to the xml template highlighted with a red rectangle in the screenshot above. Click "Upload". You may get a message that some Page Elements (widgets) will get deleted. Go ahead and upload.

Update 11.10pm 15 August 2007: I found I missed some image URL's below when I recorded the original image URL's found in the original templatge, so created a test blog and tried uploading the template again and got a zip file. When I click on the zip file, I got the folders plus

Blogger Buster Sweet Dream template, problem uploading template

When in Window Explorer, I click on the zip file, then a "Sweet_Dream" folder, I can get to the folders plus HTML and xml files as shown in the first screenshot above. However, when I click "Browse" to upload the template and and click on the zip file to get to the folders plus HTML and xml files, the zip file got loaded into the "browse" window instead. So I was forced to open Windows Explorer, went to the folder containing the folders and HTML and xml files shown in the screenshot above and drag them into the folder above. If you faced this problem, this is what you may need to do. I don't know why I didn't have this problem the first time I did it.


After you have uploaded, the new template will be in the template editor window. Look for line of codes that contain something like url(http://........gif). To illustrate, I will put in the relevant sections I found into the scroll box below:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background: #000 url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/sweet_dreams.gif) bottom right no-repeat;
border: 1px solid #404040;
margin:22px 0 0 0;
padding:0px 0 0 0;
color:$titleTextColor;
}
#header {
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star2.gif) top left no-repeat;
height: 165px;
padding:8px 15px 8px;
}
-----------------------------------------------
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
--------------------------------------------------
.comment-author {
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 2px .3em;
margin:.5em 0;
padding:0 0 0 20px;
font-weight:bold;
}
-----------------------------------------------------
background:url("http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/profile_icon.gif") no-repeat 0 .1em;
padding-left:15px;
font-weight:bold;
}
-----------------------------------------------------
#left-sidebartop h2 {
line-height:1.5em;
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif) center left no-repeat;
padding: 0 0 0 20px;
color:$topSidebarHeaderColor;
border-bottom: 1px dotted $topSidebarHeaderColor;
margin-bottom: 0.5em;
font: $headerFont;
}

#sidebartop h2 {
line-height:1.5em;
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif) center left no-repeat;
padding: 0 0 0 20px;
color:$topSidebarHeaderColor;
border-bottom: 1px dotted $topSidebarHeaderColor;
margin-bottom: 0.5em;
font: $headerFont;
}
----------------------------------------------
.music {
line-height:1.5em;
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif) center left no-repeat;
margin:.5em 13px 1.25em;
padding: 0 0 0 20px;
color:$topSidebarHeaderColor;
border-bottom: 1px dotted $topSidebarHeaderColor;
margin-bottom: 0.5em;
font: $headerFont;
}
-----------------------------------------------
.sidebar h2 {
line-height:1.5em;
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif) center left no-repeat;
padding: 0 0 0 20px;
color:$topSidebarHeaderColor;
border-bottom: 1px dotted $topSidebarHeaderColor;
margin-bottom: 0.5em;
font: $headerFont;
}
-------------------------------------------------
.sidebar ul li {
background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $borderColor;
line-height:1.4em;
}
--------------------------------------------------


The image URL's are highlighted in red and the relevant URL's are

http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/sweet_dreams.gif
http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star2.gif
http://www.blogblog.com/rounders/icon_comment.gif (repeated 3 times)
http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/profile_icon.gif
http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif (repeated 4 times)
http://www.blogblog.com/rounders/icon_arrow_sm.gif


These are images uploaded onto the web by Amanda and she has expressed the desire that those who use her templates upload them on their own which I have done. The way I did it was to copy-paste the image URL one by one into a browser window which will get me to the webpage containing just the image. I then right-click on the image and selected "Save Image As.." to copy them into my computer. From here you have various choices - upload them into Photobucket or upload them into a Blogger post. I uploaded them into a special blog post BloggerBuster Sweet Dreams which I used to host images, publish the post, opened the page, click on the image one-by-one, in the page containing just the image, click VIEW > PAGE SOURCE, then copied the actual URL of the image from the page source. To illustrate, I paste the page source of one of the images into the scroll box below:

<html>
<head>
<title>star1.gif (image)</title>
<script type="text/javascript">
<!--
if (top.location != self.location) top.location = self.location;
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="http://2.bp.blogspot.com/_jizoPL28qCY/RsKtOH3xPzI/AAAAAAAAAdw/3H7BCsuEYm0/s1600/star1.gif" alt="[star1.gif]" border=0>
</body>
</html>


The URL I need is highlighted in red. Note that the last word in the URL is star1.gif

So I go into the template, look for all the url that ends with star1.gif, replaced it with my own URL wherever I find it. This is repeated for other images. When it is done, preview the template, and if everything seems fine, click "Save template". Now you have the images hosted and controlled by yourself instead of Amanda.

If you don't want the bother, you can use my images URL's for your template, but it will mean you are dependent on me. If my post goes offline, your images will disappear.

Amanda of Blogger Buster now don't require bloggers to using her templates to host the images themselves, plus added more templates. I will be making a new post as soon as I have the time and post the link here

More New Blogger templated


New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense

Scramble email address

I have previously published a post Make a link for visitors to eMail you. As mentioned in that post, using the mailto: link can enable email address harvester to harvest your email address for sending spam. However, I created a special gmail address for this purpose, and had not been much troubled by spam as practically all of them end up in the spam folder.

However, I moderate comments via email notification using the same email address, and have been complaining to Blogger that not all comments get email notifications as described in Problem in moderating comments via email moderation still not solved. I have been requested to check the spam folder, and this means going through quite a lot of spam messages even though it is not that difficult because they are all in the same folder and are easy to recognise. However, it still takes time. Further, I have found that some genuine requests for help had ended up in the spam folder.

I now have changed to scrambling the email address in the hope that this will prevent most email harvestor in getting the email address. If you want to do that, surf over to
http://tools.blogflux.com/emailscramble/
Type in your email address and the message you want to display in the link (I used "Click here to contact me"), then click "Scramble email link >>". Copy the script, get into LAYOUT, click on Add A Page Element and select HTML/Javascript. Paste the script into the window and save. This will appear at the top of the section in the LAYOUT. Click and drag it to wherever you want, and then click "Save" at the top of the LAYOUT. You can see the link near the bottom of the left sidebar of this blog.

There are many other sites that offer encryptation and you can google for them by typing "encrypt email" or "scramble email" into the search box above, tick the WEB radio button and search.

This may not be 100% foolproof, but will still be better than using the mailto: link. If you want to be doubly sure, use graphic to display your email address instead. In this case, those who want to contact you cannot just click on a link. They will have to observe the email address in the graphic and type the email address into the To: field in the compose mail editor window of their mailbox. I believed I have written about it, but can't find it at the moment. If I find it, I will post the link here. Otherwise, I will do a new post and also post the link here.

Acknowledgement: Found out about this site from Amanda of Blogger Buster

Tuesday, August 14, 2007

Increase traffic: Add Interests, Favorite movies, music, books to Profile

In the old classic Blogger, your Interests, Favorite Movies, Music and Books that you added to your profile was clickable. This means that other surfers/bloggers can use that to find blogs sharing the same interests. However, when Blogger Beta (now New Blogger) was introduced, these became unclickable words, thus useless.

Now according to Blogger Buzz Browse Profiles! Find new blogs to read!, as of 7 August 2007, these interests that you list in your profile are now active links, that means if you have put "blogging" as one of your interests, anyone viewing your profile can click on "blogging" and find other blogs whose interests are also blogging. This apply not only to your profile, but also other bloggers' profiles as well. This implies the more interests, favorite movies, music, books, that you add to your profile, the higher the chances that some other surfers/bloggers will find your blog. So put as many of them as you can into your profile. That is a very good way to try to bring more traffic to your blog.

If you do not know how to do that, sign into Blogger at blogger.com and you will end up in the Dashboard containing a list of blogs you have created. At the top right corner, click EDIT PROFILE and you will get the page where you can add all the interests, favorite movies, music and books you want.

Making and editing screenshot

This is something I frequently do and sometimes I get questions where I have to request for screenshots, so might as well make a post in detail on making and editing screenshots.

Irfanview photo editor

To take a screenshot of the computer screen, press the "Print Screen" (Print Scrn|Sys Rq) key on your keyboard. This will copy the image into your clipboard. I like to use Irfanview (click BACK button to get back to this page). It is free, lots of features and very good. However, the creator of the program do accept voluntary donations. If you want that, just type or copy-paste "irfanview" into the search box above, tick the WEB radio button and search. You will find lots of sites to download Irfanview.

Once you have Irfanview in your program, open the program, click EDIT > PASTE in the menu bar at the top and the screenshot will be pasted into the photo editor window. If you want only a specific section of the screen, click and drag your mouse around the section. The section will be surrounded by a black box. Then click EDIT > CROP SELECTION in the menu bar and the section will be cropped. Then click FILE > SAVE AS.... and save it into a suitable folder in your computer. I normally save this in a folder I named "Temporary".

If you want to show the cursor (mouse) in the screenshot, first, make sure you are at the website of which you want the screenshot, then go to Irfanview. Click the "C" key and a screen capture set-up will appear:

Irfanview photo editor screen capture setup

At the top left, you will see the hot key for executing the screen capture direct into Irfanview, and by default, it is set to ctrl+F11. I suggest you leave it as it is unless you have used that for some other purposes. You can chose to capture the whole screen or only the foreground. The radio button to include the mouse cursor is ticked by default, and you should leave it as it is if you want to show the mouse cursor in the screen capture. Once everything is set to your satisfaction, click START and you will be taken to the page you were in before. Place your mouse where you want it to show. If there is a drop-down menu, and you want to show the choices, click the down arrow. If what you see is what you want in the screenshot, press simultaneously ctrl+F11 and the screen will appear in the Irfanview photo editor window. You can do whatever you want like crop, insert text, resize the image, etc, and when done, you can save it in a very wide range of file formats, the most popular ones would be .jpg or .gif

Windows Paint

You can also use Windows Paint which comes with MS Windows and is accessible via START > ACCESSORIES. You can same thing as above, that is press PRINT SCREEN, then paste into Paint. You can also crop, but the process is much more cumbersome than with Irfanview which I prefer.

There is one thing available in Paint that I can't do with Irfanview, that is, highlight a section with a colored circle or point to something with a line or an arrow you will have to draw yourself using line. To illustrate, I will make a screenshot of the post editor as I am preparing this post.

highlight part of screenshot with red ellipse

This screenshot was first done with MS Paint, the color red was selected by clicking on the red square in the color palette at the bottom left:

MS Paint color palette

clicking on the elipse icon in the left sidebar:

MS Paint icons for drawing lines, rectangles, ellipse

then clicking, drag and let go to draw the ellipse around the word "Windows Paint". The file was saved in the .jpg format, reopened in Irfanview, the section I want cropped, saved again and uploaded into this post.

Monday, August 13, 2007

Poll: Another way to add poll to your post

I have previously published a post with a poll Should links to external sites open in new windows/tabs? (click BACK button to get back to this page) which also described how you can make your own poll. However, when I checked, I see to my disappointment that the poll had been closed, contrary to my wish and there is not even a link to see the result of the poll (bad, see screenshot).

Also, the new Polls Page Element (widget) which just came out of beta (Blogger in Draft) is not working, so we need an alternative.

I am now trying to see if there might be a better alternative free poll. I have done another poll at Poll: Is the world round or flat? Has important implications on Malaysia. This poll was generated at pollcode.com and it looks like you can type your questions and have as many choices of answers as you want (I don't see any limit). I also don't see a provision for a date to close the poll, which is what I want, as I want my poll to not have a closing date and end up replaced with what you see in the screenshot above. You can change font and font color, background color and there is also a box to tick if you want respondent to be able to leave comments. I will have to make a note to check if the poll generated ever go out of date with not provision to see the results.

Saturday, August 11, 2007

Change background color of New Blogger sidebar

A blogger commented that he could not find the sidebar color code in the template to change the background color of the sidebar. The CSS (Cascading Style Sheet) of every template is written different and if something is missing, all you need to do is to add the relevant missing part in.

For example, in the standard Blogger Scribe template, this is the section in the CSS (Cascading Style Sheet) for the sidebar:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

There is nothing mentioned about background. So what I did was to add a single line

background: #FFFFFF;

(#FFFFFF is the hexadecimal color code for white) to that section, so that it became:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
}

You can see the result at Standard Blogger Scribe Template.

BTW, instead of using hexadecimal color codes like #FFFFFF, you can also use most names of colors like red, blue, white, etc. If you want to blend the color to the colors of the site, try typing the search term "colorpic" or "iconico colorpic" into the search box above, tick ( ) Web radio button and search, and I am sure you would see the link as the first result in the SERP (search engine result page) to download a very useful tool I use to get the color code of colors on any website. (I don't want to put too many outbound links as I understand outbound links can lower your PageRank).

I also find
Color Blender very useful if I want some "in-between" color or colors. If anyone is interested on how to use that site properly, just make a comment and I will do a new post on how to use it.

Related post:
How to change sidebar title background color
How to add background image to sidebar

Friday, August 10, 2007

Link open in new window widget

So you want to make links open in new windows without the bother of having to add the target="_blank" or target="new" attribute. Or perhaps you are not comfortable and use the COMPOSE mode and the link icon Google Blogger link icon to create your links. Links created in this way open in the same window. You may also add blogroll in the sidebar by using the Link List Page Element (widget) in the New Blogger LAYOUT. Links added via Link List open in the same window. There is a hack to make them open in new window described in Make links in Link List open in new windows/tabs but that involve tampering with the template and some bloggers may not be comfortable with that or don't want the bother.

Well here is an easy way to do it. Use the OBE1 links open in new windows widger. All you need to do is to make sure you are signed into Blogger, go to that site, click OBE1 Add to Blogger offsite links open in new window/tab widget and in the "pop-up", click Add to Blogger offsite links open in new window/tab and select from the list of your blogs you want in install this intriging and so easy to implement widget.

OEB1 Widget Installer

Select the blog, click OEB1 Add Widget button and the widget is automatically added to your selected blog. I have tested this on Good Health Information and it worked like a charm. Test it out yourself. We are not supposed to ask people to click on AdSense ads as that can get us into trouble, but we don't earn anything from visitors click on link units, so it is OK for us to ask you to click on a link in the AdSense link unit in the above blog. AdSense don't allow us to tamper with the script use to display that link unit and clicking on the link will open a page in the same window. I have not tampered with the script, but try clicking on a link (for example the one highlighted by a red circle below)

a

Change font size of blog Header

There was a request for changing the font size to 615px. I tested that at Testing team member removal. The result wasn't pretty. I am putting a screenshot of part of the page below as obviously, I don't want the blog to remain that way and may change it anytime to its original state:

Chnange font size of Blogger blog header

Note that you can't see the whole page and there is a horizontal scroll bar at the bottom when previously, there were none.

This is the way I did it. The first thing you should do before editing or changing template is to backup the template PLUS Page Elements. Refer to Backup and edit New Blogger template and Page Elements and Backup and change New Blogger template PLUS backup Page Elements.

This is the way I did it. I opened the template editor as explained in the above 2 posts and looked for this block of code:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

I added font-size: 615px; to anywhere to the line of codes, for example, at the bottom as shown below:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
font-size: 615px;
}

Of course, if 615px is too large a font size for you, but you still want to change font size, you can still do it as described above, but give a different (smaller) value to the font size.

BTW, I reread the commentator's question and it appear that what she wants may be to change the graphic image width. If that is so, I may do a new post.

Thursday, August 09, 2007

Problem signing into Blogger with Opera

NOTE: Please see update below:

This is the result when one try to sign into Blogger when using the Opera browser:



Let's hope Blogger is working on the problem. Never had that problem before.

UPDATE 12 November 2007: You can now sign into blogger.com with Opera.

UPDATE: 13 November, 2007
Got a not so polite comment from a blogger in my post Why you should be using more than one browser. I seldom use Opera since I have 4 browsers, and have plenty of choices. I normally have 3 opened simultaneously, but seldom use Opera as that 3 is sufficient for my use. Anyway, after that blogger's comment, I decided to check this post and also tried to sign into Blogger with Opera again. I found that after signing in, you don't get automatically logged into Dashboard, but have to click a link "click here to continue".



That blogger said Opera is now up to 9.5 now, but my version is 9.24. Contacted that blogger, and now waiting to see if he respond before I update this post further.

Saturday, August 04, 2007

Problem with Poll (New Blogger, just out of beta)

Most bloggers will already now that there is a new Page Element which just come out of beta (Blogger in Draft). A lot of bloggers seem to have problem with it, some reporting getting messages like ""Oops... Polls are currently not available, please come back later." Some got worst problems. They can't edit it or delete it.

I personally testing adding a Poll, and it worked fine. I am using FireFox (it is always good to give as much information, example, browser your are using, as you can when you have a problem and is asking for help).

I have one reader who complained he can not edit or delete Poll Widget and got the error message

bX-prxtbp

when he tried. I have ignored error message and tried other ways to solve the problem before and have succeeded. If you have tried those suggestions in the post linked above, and still can't solve the problem, go to LAYOUT, click TEMPLATE tab, then the EDIT HTML sub-tab to open the template editor. Then look for the widget below:

<b:widget id='Poll1' locked='false' title='Are you having problem with Poll?' type='Poll'/>

You may have a different title="" depending on the question you are asking, plus if you have more than one poll, you may see id='Poll2' instead. Delete this or these widgets and you should be OK. In the meantime, you just have to wait for Blogger to solve the problem. They are aware that there is a problem with some bloggers, although I am the lucky few who didn't encounter any problem.

Udate 9 August 2007: This update should have come earlier, but was reminded by a reader that my poll is not working but hers is working fine. I don't know if I will have a problem deleting it from the LAYOUT as some reported and have to resort to going into the actual template, but I think I will just leave it as it is as Blogger said they are working on the problem. Just hope it don't take long as I really want to know how many of my visitors are irritated by me making links to external sites open in new window/tab. I myself is not troubled as I prefer to have the original site intact and just close new window/tab if I don't want it anymore.

You can get more information from Polls, a new Page Element (widget) for New Blogger

Error messages (code): What to do. Include error code report form

When you try to do something, very frequently, you may find you are unsuccessful and Blogger gives an error message. There is a long list of error possible messages and it is hard to keep track of them. You can try posting problem to Google Help group and to contact Blogger support or Blogger support 2

Update 2008: You can now only contact Blogger Support on account related matters. For error codes, please report your error codes at Blogger error code reporting form and a human from Blogger is supposed to look into the problem and try to fix it although they will not respond to your report. For me, I will do this as well as try what is described belowL

It will not be easy, but from feedback, bloggers have got helped, one within a day of getting through to Blogger support.

I have ignored error messages before and tried again AND succeeded.

Other thing you can try - use a different browser. It may or may not help depending on the cause, but that has helped me through many diffferent difficulties. Once you have the browsers in your computer it is very easy to do.
http://firefox-alert.blogspot.com/2006/04/blogger-what-to-do-when-you-cant.html
http://blogger-tricks.blogspot.com/2006/08/why-you-should-be-using-more-than-1.html

Others have recommended clearing cache and cookies, Me, I prefer to do that when I chose and not when I am forced to, to leave that as a last resort because clearing cache and cookies means you have to start a lot of thing from scratch and some pages may take longer to load. Once you have extra browsers installed, it is a very simple matter to use a different browser.

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics