Search This Blog

Friday, December 12, 2008

Social bookmark buttons at bottom of posts (detailed)

Adding social bookmark at the bottom of every post seems to be a favorite request. Fortunately, AddThis has made it very easy. You can see an example of this at the bottom of every post of Natural Remedies.

To get your own buttons, just go to AddThis social bookmark, click on GET YOUR BUTTON and that will take you to a page as shown in screen shot below:

AddThis social bookmark

select the type of button you want, chose your blogging platform which for the majority of readers of this blog will be BLOGGER, then click GET YOUR BUTTON. If you do not already have an account, sign up for an account. You will then be taken to a page where you will get the codes for adding to your template which in my case will be as shown in the scroll box below (yours will have a different addthis_pub=""):



To include the button beneath each post, go to LAYOUT, click EDIT HTML, tick EXPAND WIDGET TEMPLATE, search for <div class="post-template"> tag and paste the code immediately after the tag. A fast way of finding the tag is to press ctrl+F and search. After you have pasted the code into the template, PREVIEW and if everything OK, save template.

IMPORTANT: Always backup template and backup Widgets (formerly called Page Elements) before editing the template.

Sunday, November 02, 2008

Short Introduction to inline CSS

CSS is short for Cascading Style Sheets and is used for controlling the presentation (fonts, colors and layout) of documents written in Markup Languages like HTML, XHTML and XML such as blogs. CSS can be written in a separate document called from the template, written in the template itself or written within this post itself (inline CSS).

For example, the HTML tag for a paragraph is <p>. Now suppose we want the paragraph below to stand out from the rest of this post by adding background color, we can do that by using inline CSS.

The hexadecimal color code for the background color of this paragraph is #FFD4FF. I obtained this hexadecimal color code by using a free tool ColorPic. I set the color of this paragraph to have a different background color by surrounding the text I am now typing with the a pair of HTML tag for paragraph <p style="color:#FFD4FF;"> and </p>. To make this clearer, I will display what I am now typing by making this into a graphic and upload it as an image below for you to study:



HTML tag for paragraph and inline CSS for background color

Well, the text in the above image is a bit small. To make it clearer, I will redo the graphic below so the text is larger and clearer:

HTML tag for paragraph and inline CSS for background color

Wednesday, October 15, 2008

Screen shots for Dummies using MS Paint


Screen Shots are very useful tools for illustrating instructions. It can also be invaluable when requesting for help as it helps one to explain one's problems. Here are some useful instructions and tips and tricks regarding screen shots.

Tools for making screen shots are photo editors like Irfanview (free and very useful), MS Paint which can be found under ACCESSOEIES in all computers running MS Windows. If you want fancy stuff, there is also the open source (and therefore free) GIMP which is as good as the very expensive Photoshop.

Screen Shots with Paint

Let us start with the basics and do a screen shot of, say, this page. What you need to do is to save a copy of the screen shot of this page into clipboard by pressing the key PRINTSCREEN or PrintScrn. Now move your mouse cursor over the START button MS Windows START button, move the mouse cursor to ALL PROGRAMS, then to ACCESSORIES, and finally to MS PAINT

How to open the program MS Paint from START button

Once the program MS PAINT is opened, go to the menu bar, click EDIT > PASTE and the screen shot you earlier copied into clipboard will be pasted into MS PAINT:

paste from clipboard into MS Paint

Now if you wish, you can use various tools to highlight parts of the screen shots to bring attention to them like I have done above. In the above, I first changed the color from the default black color to red using the color palette at the bottom of MS PAINT:

MS PAINT color palette

then click on the line drawing icon MS PAINT line drawing tool icon and just use the mouse to draw whatever you want.

You may want only portion of the screen shot. For this you will have to crop. I understand that this can be done with MS PAINT but I haven't tried it myself. I always use my favorite photo editor Irfanview.

More about that later.

Monday, September 22, 2008

Add pencil quick edit icon post


Blogger has added quick edit icon Blogger pencil quick edit icon to the bottom of the post which is only visible when you are logged into your Blogger or Google account. This is a great convenience. However, if you are using some third party template and not the standard template provided by Blogger, this very convenient pencil quick edit icon may be missing. There have been a number of bloggers who have asked how to put it back.

If this convenient pencil quick edit icon Blogger pencil quick edit icon is missing and you want it back, before trying anything complicated, first check the simple things first. Check to see if you have enabled it in the settings. Sign into Blogger dashboard (blogger.com) and go to SETTINGS > BASIC and ensure that "Show Quick Editing on your Blog?" is set to "Yes":

Blogger show quick edit setting

If this is already set to "Yes", the next thing to check is the setting for the post in the LAYOUT:

Blogger LAYOUT edit blog post

Click "Edit", and make sure that "Show quick editing" is checked:



If the above all checked OK and there is still no pencil quick editing icon in your posts when you are logged in, then you will have to check the template. For this, Amanda of Blogger Buster have done a good writeup. Refer to How to add Quick Edit Pencil to Blogger Posts. Note: a scan of the comments showed that while some have succeeded, others have failed, so may I wish you luck if you want to try it.

Friday, September 19, 2008

Blogger for Dummies now 4 column



A few years ago, there were still almost 20% of visitors to this blog using the small 800x600px screen resolution and so this blog used a 3 column template designed for the 800x600 pixels screen resolution. However, large screens have become more popular and more common now and the latest statistics from statcounter visitor counter is given below:

visitor screen resolution statistics % percentage

The statistics showed that the percentage of small screen (800x600) resolution has fallen to just 2% while those with 1024x768 pixels and increased to 35%. This shows that I probably should now designing this blog to cater for visitors of 1024x768 pixels and above. Now in addition to the question of screen resolution, there is also the question of readability. As discussed in What is the best template?, a readability study showed that content should be around 60 CPL (characters per line). I tend to agree because I use a wide screen and when I come across text which stretches the whole breath of my wide screen, I find it difficult to read and to scan. When I read until the end of one line, I have to search for the beginning of the next line and that can be a bit difficult as the end of a line and the beginning of the next line can be separated by a large distance. Thus the width of the main column (content) was increased from 400 pixels to 450 pixels only.

If you want the template for a 4 column (3 sidebar and a main column), you can get it from 4 column New Blogger Minima template Yahoo group.

Free Favicon generator and host

The icon (tiny photo of mine) in the address bar (in front of the URL) at the top of this browser is called a favicon

Favicon

If you want to have a Favicon for your blog, refer to Favicon generator and host

Blogger for Dummies multilingual


Blogger for Dummies has been redesigned to become 4 column. I now thus have more room to add widgets and a Google Translate widget has been placed at the top of the leftmost sidebar. If you want this blog to be translated into your language, just click the down arrow down arrow icon of Google Translator and chose your language. If I counted correctly, you can translate into 18 languages including standard and simplified Chinese.

Blogger and his guitar

I received an email which made me think back about my school days. 40 years ago, I wanted to learn to play the guitar. I had a cheap acoustic guitar and did manage to strum along some oldies like "I started a joke", "Proud Mary", etc. However, I was no expert. After getting that email, I dug out a guitar from my storeroom (photo below):

Yamaha FG-400A acoustic guitar

It is a Yamaha FG-400A acoustic guitar. Makes this blogger's fingers itch. After all, I have been blogging for 3 good years and for 3 years, I was glued to the computer. I think it is time for a bit of diversion. However, I have never had any formal training to play a guitar more professionally.

That email contains a link to jamorama review and offers guitar courses. It seems it only cost $39.95 and it is via distance learning. Wonder if they offers special price for pensioners bloggers.

Sunday, September 14, 2008

Use active link when commenting

Not infrequently, one gets a commentator who leaves an inactive long URL when leaving a comment in a blog. Now if that URL happens to be a long one, one will get an unsightly long unbroken line like in the screen shot below:

long inactive hyperlink in comment

Depending on the situation, this unnecessary problem may be just a problem of aesthetic where the long URL juts beyond the boundary of the main column into the sidebar either obscuring part of the right sidebar of part of the URL becoming hidden, or it may be worst - sidebar pushed to bottom of the page.

There is a simple solution. Make the URL into an active (clickable) link

Sunday, August 03, 2008

Ordered list HTML

If you want to display an ordered list like for example:

  1. this is line 1

  2. this is line 2

  3. this is line 3



the HTML to display them is given below:

<ol>
<li>this is line 1</li>
<li>this is line 2</li>
<li>this is line 3</li>
</ol>

Friday, July 25, 2008

Blogger: Beyond the Basics (Book)


Press Release, May 2008

Go Beyond the Basics of Blogger with New Book

Blogger: Beyond the Basics is a new book from Packt, which will take users beyond the basics of Blogger. Written by Lee Jordan, this book will help users to take full advantage of the rich and powerful features of Blogger to transform their blog into a fresh and state-of-the-art blog as quickly and painlessly as possible.

Blogger is a blog publishing system from Google with a friendly interface specifically designed to create and maintain weblogs. It allows users to easily create dynamic blogs with great content and many outstanding features including RSS feeds, link-backs, photo slideshows, and integration with popular Google applications like Picasa. Its versatility and ease of use has attracted a large, enthusiastic, and helpful community of users.
This book will focus on transforming a typical blog into something fresh and professional that stands out from the crowd. It starts with an introduction to an example blog, discussing what it is lacking, and then adding all the features of Blogger to make it successful. This book will show users how to transform a slow-paced typical business blog into an attractive and interactive profit-making blog with measurable results. It has a very user-friendly approach and shares tips, tricks, and resources to continue to grow their blog.
This book deals with using the current Blogger and third-party tools to optimize and create widgets for a blog. Users can transform their blog using existing tools then take it further with more challenging approaches to customizing their blog. All the steps involved in each example are listed under the section called "Time for action". Similarly, the results of that action are listed under the section called "What just happened". This structure adds to the clear, simple, and focused approach of the book.

The book is aimed at current users of the Blogger platform who want to get the most out of Blogger and people who use a different blogging platform and are planning on switching to Blogger. Blog owners who promote their own services, expertise, and products, and want to increase their blog's success by pushing the limits of what Blogger can do will get the most out of this book. The book doesn't require any specific knowledge of Blogger or the related technologies: RSS, CSS, HTML, and XML. Everything users need to know to grow beyond the basics is covered in this book.
For more details on the book please visit http://www.PacktPub.com/blogger-beyond-the-basics/book.

Monday, July 21, 2008

Hack blinking text CSS javascript

Now generally, if you want to display blinking text, you would have to add something to your blog CSS (Cascading Style Script) and use Javascript. Further, this will only work with the Internet Explorer web browser. Now you can display any blinking text without tampering with the blog CSS or template and the blinking effect will be displayed in any browser. I have tested it at testing blinking text and confirmed that the blinking effect is displayed in all web browsers tested.

The way to do it is to go to blinking text live, type the text you want blinking and edit the various parameters like font-size, blinking speed, color, etc. Click "Create blinking text", highlight and copy the script and paste that into the part of your blog where you want the blinking text. Now for creating the blinking text, the price you pay is to have a link to Amazon Astore which I believe belongs to the creator of that blinking text hack. However, you can change the URL by highlighting the default URL, delete and replace with your own URL and change the text (URL displayed in red and text in green in scroll box below):

<a href="http://www.blinkingtextlive.com"><img src="http://img702.mytextgraphics.com/blinkingtextlive/2008/07/21/e40bca3f334575bda824aadba26f93d5.gif" border="0" alt="javascript blinking text - http://www.blinkingtextlive.com" /></a><br /><br /><a href='http://astore.amazon.com/buy.nintendo.ds.lite-20'>Nintendo DS Lite</a><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/CIMP/bT*xJmx*PTEyMTY2MjQ1ODE1OTMmcHQ9MTIxNjYyNTQ1NjEyNSZwPTc*MzIxJmQ9Jm49Jmc9MQ==.jpg" />

Friday, July 18, 2008

Cannot find blog with search engine?

A frequent complaint of new bloggers is that they cannot find their blog when searching for their blog with search engines. First, your blog need to be indexed by search engines. To check if your blog or website is indexed by a search engine, type:

site:URL of blog or website

for example, type this:

site:http://bloggerfordummies.blogspot.com

into the search box and press the key ENTER. If you get some results, that means the blog had been indexed. For more details, refer to check to see if website indexed.

Now even if it is indexed, the link to your blog will have to be near the top (first few pages) of the SERP (Search Engine Result Page) to be easily found. It may be very far down the lists of links in the SERP (example, in page 1001) in which case you will have to do a lot of clicking through the pages before you can find the link to your blog.

In order to come up in the first few results, you will have to do some SEO (Search Engine Optimization).

Venture capital for blogging startup

I have intention to start my own Internet business - Blogger Dough which will be related to blogging. However, I need the service of an Australian IT firm and that will cost money. With regard to this respect, it is possible to seek Venture Capital. I had a look at that website and it looks interesting and may be what I am seeking as it is a website via which small startup business can post messages (something like advertisements) in the hope of catching the attention of venture capitalists with money to provide Funding for small business startups like what I have in mind.

That website claims to be the largest community for entrepreneurs and investors and I assume is the marketplace which helps connect entrepreneurs needing funding with investors with the funds. Apparently, there are more than 4,000 investors there, which could mean possibly that entrepreneurs could very quickly find a matching Angel Investor to speed up an Internet venture.

Now what exactly are Angel Investors. According to Wikipedia, an angel investor is a rich individual who provides funding for a business startup, usually in exchange for convertible debt or even ownership equity.

Monday, July 14, 2008

Abandoned or neglected blog URL - is it available?

This request frequently crops up. A blogger wants a certain Blogger blog URL but it cannot get it because someone had already registered and either the blog is abandoned or neglected or didn't publish even a single post yet. Blogger wants to know if it is available.

Unfortunately, the answer is no. The URL is reserved in case the person who registered it decided to do something about it later. The URL will only be freed for others to register (or claim) it if the original blogger deleted that blog.

Sunday, July 13, 2008

Beginner HTML tutorial - hyperlink

Active Hyperlink HTML and attributes

One more example for this HTML tutorial. Now we will learn hyperlink. First I will show how to make a hyperlink to a blog (or any other web page) without learning HTML, then I will explain the HTML tag for hyperlink so you can type it yourself without depending on the link icon Blogger hyperlink icon, then how you can add some attributes to make it more useful.

How to get the URL of a blog or website

You can skip to the next section if you already know about URL and how to get it. Now suppose I want to get the blog URL of my main Blogger related blog - "Blogger Tips and Tricks". For you, get it from the address bar at the top of that blog (see screen shot below):

URL from address bar

Note that the URL of Blogger Tips and Tricks is:

http://blogger-tricks.blogspot.com

Highlight the URL and press ctrl+C to copy the URL into clipboard.

Other ways you can get URL of your blog.

Using the Blogger link icon Blogger hyperlink icon to make a hyperlink

To make an active hyperlink to Blogger Tips and Tricks, first type some text describing the blog. It can be the title "Blogger Tips and Tricks" or it can be other descriptive text, like Easy Instructions for Bloggers. These text are what will be displayed on the WEB when viewed with a browser like Internet Explorer or FireFox and are called "anchor text". Now highlight the anchor text as shown below in the screen shot:

highlight anchor text

After highlighting the "anchor text", click the hyperlink icon hyperlink tool icon in the POST EDITOR tool bar. This will bring up a box for you to paste the URL from clipboard into the box:

hyperlink box

click inside the box and press ctrl+V to paste the blog URL into the box. Then click OK. You will notice the the anchor text Easy Instructions for Bloggers has been surrounded by a pair of HTML tags <a...> and </a> and below is what you get:

<a href="http://blogger-tricks.blogspot.com">Easy Instructions for Bloggers</a>

Now clicking the link Easy Instructions for Bloggers will cause you to open my main blog in this same window. If you want the hyperlink to open the page in a new window, all you have to do is to add target="new" or target="_blank". For example, to make the above hyperlink open in a new window, just edit the HTML to

<a href="http://blogger-tricks.blogspot.com" target="new">Easy Instructions for Bloggers</a>

or

<a href="http://blogger-tricks.blogspot.com"> target="_blank"Easy Instructions for Bloggers</a>

Note that adding the attributes target="new" or target="_blank" has been deprecated and is discouraged, but you probably can continue to use it for a long time.

For less "long winded" explanation of hyperlinks, refer to active hyperlinks for blog posts and comments.

target and title attributes for hyperlink HTML tag

Now I am sure you can type the HTML <a href="URL">anchor text</a>. To make hyperlink open in new window or tab, add the attribute target="_blank" or target="new". Thus the HTML tag become <a href="URL" target="_blank">anchor text</a> or <a href="URL" target="new">anchor text</a>

If you wish, you can also add the title attribute so that when a visitor hover the mouse over the hyperlink, a tool tip will appear with a message. Hover your mouse over this link Beginners' Guide to Blogger. Try that yourself or refer to the screen shot below to see what may result from adding this attribute:

tool tip resulting from title attribute

Note that this title attribute can also be added to images. Try hovering over the screen shot above and note that a tool tip will also be displayed.

Saturday, July 12, 2008

Dummies Guide to HTML Part 1

HTML is easy

First, rest be assured that learning enough HTML (HyperText Markup Language, but don't let this bombastic name frighten you please) to be able to control the appearance of your blog and the properties or attributes of various things in your blog is not difficult. Just to reassure you, you can actually add HTML to your blog without knowing HTML at all.

First, in the post editor, don't use COMPOSE mode. I hate this mode and never use it. If you want to master your blog, please use the EDIT HTML mode. See screen shot below:

EDIT HTML & COMPOSE mode

HTML without sweat

Now, for example, when you want to make some text bold, first highlight the text, for example, highlight "text bold" (see screen shot below):

HTML for bold text

After highlighting, click the "bold icon" tool icon for bold. You will see that the "text bold" has been surrounded by <span styl...> and </span> and ends up as:

<span style="font-weight:bold;">text bold</span>

You can do the same thing to make text italic.

There, you see, you have added HTML into your blog post without knowing anything about HTML. Now to give you confidence, we will add a simple example where you will learn how to use HTML tags to make some text superscript.

Another simple example. Suppose you want to put some text as superscript. It is very easy. Suppose I want the "TM" in the title of my upcoming book Dream Driven LifeTM as superscript, what I have to do is to add <sup> (opening HTML tag) in front of TM and </sup> (closing HTML tag, HTML tags always occur in pairs) after TM so what I have will be

<sup>TM</sup>

and a web browser like FireFox will display the text of my up and coming book

Dream Driven LifeTM

Now I can even put the superscript in an active hyperlink Dream Driven LifeTM

That is easy isn't it? Be assured that as you read various posts in this blog and in Blogger Tips and Tricks, you will learn enough to be able to do a lot of things.

Duplicate content search engines penalty redirect

You don't have to understand HTML to be able to use it. Example code for image

link icon Many beginning bloggers have problems with the uploading of images in Blogger. This is because Blogger always upload the image to the top of the post irrespective of where the position of the mouse cursor is. Now if you use the COMPOSE mode, you will have to use the clumsy process of drag and drop to get the image to where you want it to be. I find this very cumbersome especially if you have to drag it very far down the post.

I would advise you to use the EDIT HTML mode instead. Sure in this mode you cannot see the image. However, it is very easy to copy-paste or cut-paste the image to anywhere you want it. You may have noticed that tiny screen shot of the photo upload icon right at the beginning of this post (used the NONE option for position). The script for the image is:

<a onblur="try {parent.deselectBloggerImage();}
catch(e) {}" href="http://1.bp.blogspot.com/_jPLCY/
SHfiwXlOflI/AAAAAAAABpI/kx3YGc0YHkM/s1600-h/
link+icon.jpg"><img style="cursor:pointer;
cursor:hand;" src="http://1.bp.blogspot.com/_jiz8qCY/
SHfiwXlOflI/AAAABpI/kx3YGc0YHkM/s400/link+icon.jpg"
border="0" alt=""id="BLOGGER_PHOTO_ID_5218132242"
/></a>

Now that looks like a bunch of gibberish doesn't it? However, no fear as you don't have to understand what is all that gibberish as you can just copy-paste it anywhere you want. For example, I am going to copy-paste it here: link icon. Done. Very simple. Imagine trying to successively having to drag it down the page. Copy-pasting is so much simpler. I can easily add another link icon here by just left-clicking on the mouse and selecting PASTE. So what if you don't know what all that gibberish is all about. You should be able to paste the script anywhere you want, even in another blog post or sidebar or even in the blog Header.

For more information about images, refer to Uploading and manipulating images Part 1 and Uploading and manipulating images Part 2.

Friday, July 11, 2008

How get URL own blog methods

Every blog has its own URL (Uniform Resource Locator) or an address that specifies the location of a file on the Internet. You can get the URL of your own blog either from the Dashboard. Look for the link "VIEW BLOG", left-click on it and select "Copy link location" (note: different browser will have slightly different wordings):

left click on VIEW BLOG to get URL

The other way is to left click on VIEW BLOG in the POST EDITOR, or even when you are in SETTINGS or LAYOUT:

left-click in Post Editor to get blog URL
Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications