Bloggers Resources

Adding favicon icon to Blogger URL

2008-02-27T16:31:00.000-08:00

When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”. You would first need to have an icon which you would like to use, bearing the extension .ico format. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the net.

As for myself, I went to vso software site and downloaded a very small program called VSO Image Resizer (download) which can transform images into .ico format. Run the program. It is rather simple to use. While you can create icons in 2 sizes – 16x16 and 32x32 – I would think a 16x16 icon is preferable since it is readable in most older browsers. and safe it under jpg, gif or png format.

If you do not wish to download any software, you may also try creating an icon online. Just enter the keywords “online icon generator” into your Google search bar, and you should be able to find several programs that you can try.

Once you have created an icon, save it into your hard disk. The next step of attaching the icon is a little tricky. The only method to use will be to upload the icon into some free photo hosting such as photobucket and create a link.

Once you have done that, take note of the URL of your icon. If you are using photobucket , you will see that the file is stored under a directory which looks like this:

http://i245.photobucket.com/albums/gg69/dk/icon-1.ico

Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-

Copy and insert the following code below the line:-

Examples icon file format:

IF you use png. or jpg. or gif. format file, its code should be like this :

Examples png. files format:

Examples gif. file format:

Examples jpg. file format:

Label List and Label Widget open in new window

2008-02-27T16:25:00.000-08:00

If you have created a list of Labels through Template -> Page Elements -> Add a Page Element, you can also have your Labels open in new browser windows or tabs.

Scroll to these lines and add the code in red.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url' target='_blank'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>

Link List open in new windows

2008-02-27T16:17:00.000-08:00

To have the Link List open in new windows when clicked, we first go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>

Scrollbar in One Widget

2008-02-14T21:25:00.000-08:00

We can add the scrollbar only to one or several of the widgets. To do that, we must first know the ID of the widget. When we are at Template - Edit HTML, scroll towards the bottom of the template code. You will see something like this:-

In this example, we have added a Label1 Page Element into our Sidebar and the ID for this widget is “Label1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of the widget ID.

Now add the overflow property into the stylesheet under /* Sidebar Content */ . Insert this piece of code.

#Label1{
height:200px;
overflow:auto;
}

In this example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

/* Sidebar Content
----------------------------------------------- */

#Label1{
height:200px;
overflow:auto;
}

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Scrollbar in selections sidebar

2008-02-13T21:17:00.000-08:00

If you wan't to modified your template to include an additional selection sidebar, the style that can be inserted into the template will be this:-

Login and go to Template - Edit HTML. Insert this piece of code. Depending on which sidebar your widgets are at (#newsidebar or #leftsidebar or # rightsidebar etc).

.#newsidebar .widget{
height:200px;
overflow:auto;
}

* Sidebar Content
----------------------------------------------- */

#newsidebar .widget{
height:200px;
overflow:auto;
}

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Scrollbar in All Widgets

2008-02-13T21:07:00.000-08:00

When the contents in the widget exceed a certain specified height or width, there will be a vertical or horizontal scrollbar to enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for our Link List or Labels widget which may be very lengthy. It reduces the total height of the widget and yet allows readers the option of scrolling through and viewing the entire content. We shall discuss how to customize the template design to include the scrollbars and the various modifications that can be made to the stylesheet.

Login and go to Template - Edit HTML. Insert this piece of code.

.sidebar .widget{
height:200px;
overflow:auto;
}

/* Sidebar Content
----------------------------------------------- */

sidebar .widget{
height:200px;
overflow:auto;
}

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Uploading animated gift to bloggers

2008-02-12T20:34:00.000-08:00


Upload via bloggers photo uploader	Upload via free photo hosting

Examples site

If you upload the animated image direct via the Blogger photo uploader, the animated image will no longer be animated as you can see from the first image which was uploaded via the Blogger photo uploader.

If you want the image to remain animated, you must first host the animated .gif image with the free images hosting, I prefered to use photobucket .

After upload your pictres to photobucket, you can see the above diagrams. Copy the HTML code and paste it to your blog post or your html page elements.

Pictures open in new URL

2008-02-12T20:22:00.000-08:00


Original Uploading Pictures	Pictures open in new windows	Pictures open in new url

Here is the trick when you upload year image you would see has part of code that would look something like below :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/intechclan.jpg"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/intechclan.JPG" alt="" id="BLOGGER_PHOTO_ID_5165934739229656114" border="0" /></a>
<div style="text-align: center;">Original Uploading
pictures

changes the codes, as per below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL Address">
<img style="cursor: pointer;" src="http://4.bp.blogspot.com/intechclan.JPG" alt="" id="BLOGGER_PHOTO_ID_5165934739229656114" border="0" /></a>
<div style="text-align: center;">Original Uploading
pictures

Images open in new windows

2008-02-11T20:11:00.000-08:00


Original Uploading Pictures	Pictures open in new windows

Here is the trick when you upload year image you would see has part of code that would look something like below :

copy a below codes :

target="blank"

paste its, as per below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/intechclan.JPG"target="_blank">
<img style="cursor: pointer;" src="http://4.bp.blogspot.com/intechclan.JPG" alt="" id="BLOGGER_PHOTO_ID_5165934739229656114" border="0" /></a>
<div style="text-align: center;">Original Uploading
pictures

"No Right Click" Codes!

2008-02-11T19:25:00.000-08:00

Here is the one to prevent people from copying text. It's Good for protecting information, stories, poems, etc. Prevents mouse highlighting.

Find the codes </head> Tag in your template and add all the below code after it.

</head>



<body oncontextmenu='return false'/>



<body>

Unclickable Images

2008-02-09T19:41:00.000-08:00


Original Uploading Pictures	Unclikable Pictures

What is the difference in the two photographs? Well looking At the two photographs in the post there really isnt much difference isnt it.

The photographs here drank cuts been posted in different ways. If you click one of the photo in the left, nothing happens At all goal but when you click one the image one the right the link pointing to the image takes you to has new page.

Here is the trick when you upload year image you would see has part of code that would look something like below :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/intechclan+logo.JPG"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/intechclan+logo.JPG" alt="" id="BLOGGER_PHOTO_ID_5165934739229656114" border="0" /></a>
<div style="text-align: center;">Original Uploading
pictures

You need removed the highligted code (red), Once that is done you pictures now unclikable.

Scrollbars in yours widget box

2008-02-06T18:17:00.000-08:00

This tutorial shows you how to create widgets or boxes with scrollbars. Now that we know what the code does, we can apply it to our template. If we have many widgets in our sidebar, we can specify a fixed height for all the widgets. Carefully planned, our layout can look very neat since all the widgets will have the same height.

Login and go to Template -> Edit HTML. Insert this piece of code. For easy reference, we have added it under the /* Sidebar Content */(see pictures):

The code is :

.sidebar .widget{
height:200px;
overflow:auto;
}

With this codes all your widget in sidebar should be setting in scrollbar.

Single widget code scrollbar.

We can add the scrollbar only to one or several of the widgets. If you want, choose specific widget to scroll, just follow this instructions.

must first know the ID of the widget. When we are at Template -> Edit HTML, scroll towards the bottom of the template code. You will see something like this:-

Look at your template and identify the widget. Take note of the widget ID and change the highlighted red codes with yours new widget id including additional sign "#":

.sidebar .widget{
height:200px;
overflow:auto;
}

examples:

#LinkList1{
height:200px;
overflow:auto;
}

Blog examples:

Clikckable Roller text or marquee

2008-02-05T16:13:00.001-08:00

You can make your roller texts clickable use this code:

<marquee> <a href="url_goes_here">Description</a> </marquee>

your intech blog

More marquee click link use this code:

<marquee> <a href="http://intechclan.blogspot.com/">intech blog</a><a href="http://online-explorer.blogspot.com/">|money blog|</a><a href="http://y-mercedes.blogspot.com/">- mercedes blog</a> </marquee>

intech blog |money blog|- mercedes blog

You can make your roller texts click link open in new windows use this code:

<marquee> <a href="url_goes_here"target="_blank">Description</a> </marquee>

forex blog

Roller text or marquee text colour

2007-11-17T15:34:00.000-08:00

You can change you roller text background use this codes (Change the colour in red):

<marquee direction="right" scrolldelay="50" width="70%" bgcolor="white"> Standard background </marquee>

Standard background
Red background
Black background
Yellow background
Green Background

But if your font colour not matching with your background your can't read anything from your roller text bar. So you must change your text colour use below codes:

<font color="white"><marquee direction="right" scrolldelay="100" width="70%" bgcolor="red"> Red background White font </marquee></font>

Red background White font
Standard background
Yellow background Red font
Green Background Yellow font

Used scrollbox in your widget template

2007-11-16T16:53:00.000-08:00

Examples:

Magnetic Jewelry Clasp

My_De Collection's

Use the scroll box codes and change its height & width suitable value and paste at yours widget tabs in bloggers.

Codes :

<div style="overflow:auto; height:300px; width:400px">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td>Put your stuff here</td>
</tr>
</table>
</div>

Examples:

height:140px; width:140px

link
link
link
link
link
link

height:40px; width:300px

link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link-link

height:300px; width:50px

-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link
-link

Roller text or marquee text width

2007-11-15T15:17:00.000-08:00

You can set a roller text or marquee text width:

Standard width

Standard Width

Width =70%

<marquee direction="right"scrolldelay=50 width=70%> 70% Width </marquee>

70% Width

Width =50%

<marquee direction="right"scrolldelay=50 width=50%> 50% Width </marquee>

50% Width

Width =30%

<marquee direction="right"scrolldelay=50 width=30%> 30% Width </marquee>

30% Width

Roller text or marquee text time delay

2007-11-13T16:48:00.001-08:00

If you wan set the roller or marquee text delay time just fill in the value in red:

"marque text with scrolldelay "100"

"marque text with scrolldelay "200"

"marque text with scrolldelay "500"

"marque text withscrolldelay "1000"

Roller text or marquee text

2007-11-12T15:46:00.005-08:00

This is basic code for rolling text or marquee text:

Code

Your Text Here

You can change marquee directions :

Right

<marquee direction="right"> Your Text Now Right </marquee>

Your Text Now Right

Left

Your Text Now Left

Up

Your Text Now Up
Down

Your Text Now down

Your Text Here
alternate

<marquee behavior=alternate> Your Text Now alternate</marquee>

Your Text Now Alternate

Add this Social Booking icon at the footer

2007-11-12T15:46:00.003-08:00

How to add "add this" Social Booking icon at the every footer post?

To add the AddThis icon to the bottom of posts, get into your template editor, tick the "Expand widget template", then look for this line of code:

Paste directly "Add this Social Booking icon" codes, below the above codes. (see below):

How to resize your yourtube video?

2007-11-12T15:46:00.001-08:00

If your wan't to resize your youtube video just follow this instruction.

This is original youtube video size embended code(width="425" height="355"):

Its look light this :

If you wan't to resize your embended youtube video, just change the highlihted value:

Examples :

youtube video size embended code(width="255" height="255")

youtube video size embended code(width="100" height="100")

Social Book Marking Widgets

2007-10-01T21:42:00.002-07:00

Social bookmarking is a method for Internet users to store, organize, search, and manage bookmarks of web pages. In a social bookmarking system, users save links to web pages that they want to remember and/or share. These bookmarks are usually public, and can be saved privately, shared only with specified people or groups, shared only inside certain networks, or another combination of public and private domains. The allowed people can usually view these bookmarks chronologically, by category or tags, or via a search engine.

Found this site that offer an easy way for you to add those social bookmarking icons for a blog or a website. There are now so many social bookmarking sites, and adding as many icons as possible can make your blog or website look cluttered.

Now with AddThis, you can get just a single icon to put on your blog or website, and a visitor clicking on the single icon will get to a page where he can choose whatever social bookmarking service or services he is subscribing to.

The icon include many social bookmarking services. When clicked on, it will open up a pop-up:

(click to enlarge)

Simply copy-and-paste the code into your pages, between the <body> and the </body> tags. If your website uses templates, you can also copy the code into your template, so the button will appear on all your pages automatically.

<a href="http://www.addthis.com/bookmark.php" onclick="addthis_url = location.href; addthis_title = document.title; return addthis_click(this);" target="_blank"><img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="AddThis Social Bookmark Button" /></a> <script type="text/javascript">var addthis_pub = 'dekerinchi';</script><script type="text/javascript" src="http://s9.addthis.com/js/widget.php?v=10"></script>

Note: The codes here are for illustration purposes only. You should get the codes direct from your own account in AddThis as otherwise, you will not be able to see the statistics as it will enter my account instead.

How To Autoplay YouTube Video?

2007-10-01T21:42:00.001-07:00

All you have to do is get rid of everything before the first "embed" and after the second "embed" til it looks like this below.

After that you add to the url this code :

;autoplay=1

See examples below (higlight with red colour):

Why more space above my tables?

2007-09-20T19:03:00.001-07:00

When you uses HTML to construct a table in a blogers , you often finds that there are large white spaces above the table, like a below:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

See how far that table from the existing posting.How to avoid large white space above tables when you make a posting? Follow this guides lines: you just write the HTML code for the table in one single line, without pressing the ENTER key.

The exisiting codes is like this :

<table border="1">
<tbody>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</tbody>
</table>

Changes the HTML look like this (Typing the HTML for the table in a single line, without line breaks(Typing the HTML for the table in a single line, without line breaks):

<table border="1"><tbody><tr><td>row 1, column 1</td><td>row 1, column 2</td></tr><tr><td>row 2, column 1</td><td>row 2, column 2</td></tr></tbody></table>

Now you see my table just to closed with my posting......


row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Linklist open in new windows

2007-08-28T23:47:00.000-07:00

Notes : Whenever you make changes to the template, backup the current template PLUS the Page Elements first. Refer to Backup and edit New Blogger template or Backing up and changing New Blogger template. Remember also to edit your Page Elements one by one and save them into preferably the same folder as the one where you save the backup template. Some Page Elements may be deleted or become empty Page Elements if you reload the backup template.

Here is how you can make links open in new windows:

1) Sign into Dashboard

2) Click LAYOUT / EDIT TEMPLATE

3) Check EXPAND WIDGET TEMPLATES box. You will need to look for a block of code.

4) After the template has been expanded, look for this block of codes:

<ul>
<div id="link">
<b:loop values="data:links" var="link">
<li>
<a href="data:link.target">
<data:link.name></data:link.name></a></li>
</b:loop>
</div>
</ul>

5) Look particularly for this code:

<a href="data:link.target">

6) Add it with :

<a href="data:link.target" target="_blank">

(notes: make sure have one spacing before your type target="_blank")

7) Then click safe, now your link list open in new windows...good luck.

How to make a more border ?

2007-08-28T22:12:00.001-07:00

How to make a single border ? Tables are defined with the <table> tag. A table is divided into rows (with the <tbody> <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Single border codes

<table border="1">
<tbody>
<tr>
<td>Single border</td>
</tr>
</tbody>
</table>

Two row in border : Just copy this codes:

<tbody>
<tr>
<td>Single border</td>
</tr>
</tbody>

and paste after first row </tbody> codes ( see the red one):

<table border="1">
<tbody>
<tr>
<td>First row</td>
</tr>
</tbody>
<tbody><tr>
<td>Second row</td>
</tr>
</tbody></table>

You tables now, should be look like this:

First row

Second row

How about, to build a second column? just copy this codes:

<td>First column</td>

and paste after first column </td> codes ( see the red one):

<table border="1">
<tbody>
<tr>
<td>first column</td>
<td>second column</td>
</tr>
</tbody>
</table>

You tables now, should be look like this:

First column

Second column

If your combined, this two codes ( row and column codes)you tables now, should be look like this:

row 1, column 1	row 1, column 2
row 2, column 1	row 2, column 2

How to make a single border ?

2007-08-28T22:11:00.004-07:00

Single border

With a no border: Codes

<table border="0">
<tbody><tr>
<td>Single border</td>
</tr>
</tbody></table>

Example:

Single border

If you want to show a border or thick its, just change border value ( <table border="1"> )

With a standard border:Codes

<table border="1">
<tbody><tr>
<td>Single border</td>
</tr>
</tbody></table>

Example:

Single border

With a thick border:Codes

<table border="1">
<tbody><tr>
<td>Single border</td>
</tr>
</tbody></table>

Example:

Single border

How to make a scroll boxes

2007-08-28T22:11:00.003-07:00

How to make scrollable box. One of the way do this is to paste this code in your edit html tab on your blog post editor:

<div style="overflow:auto; height:300px; width:400px">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td>Put your stuff here</td>
</tr>
</table>
</div>

Example :

Horizontal or, most often, vertical scrollbox or both. A vertical scrollbox is a narrow strip drawn up the side of the window containing a "bubble" whose position in the scrollbox represents the position of the visible part within the whole document. By dragging the bubble with the mouse the user can scroll the view over the entire document. Arrow buttons are usually provided at the end(s) of the scrollbox to allow the window to be scrolled by a small amount, e.g. one line of text, in either direction by clicking them with the mouse. Some programs provide a second pair of buttons for scrolling a page at a time or some other unit. Clicking on the scrollbox outside the bubble will either, depending on the particular {WIMP}, move the bubble to that point or move it some amount (typically a screenful) in that direction. Different {WIMP} systems define different standards for whether scrollboxs appear on the left or right, top or bottom of the window, and for their behaviour. To reduce mouse movement, the up and down scroll buttons should either be next to each other at one end of the scrollbox (as in {NEXTSTEP}) or should reverse their effect when clicked with the right-hand mouse button (as in the {X Window System} and {RISC OS}). The fraction of the scrollbox filled by the bubble should indicate the fraction of the document visible in the window. (1998-06-26)

How to put image wider than the main column. If you try to put image wider than the main column into a post, will cause the sidebar to slide down to the bottom of the page. If you ever want to put a large image in your blog without the problem of sidebar sliding to the bottom of the page, put it in a scroll box. Just cut and paste your upload image to "Put your stuff here".

Example :

How TO Displaying HTML tags in your post

2007-08-28T22:11:00.001-07:00

If you try to displaying HTML tags or codes, in the blog posting such as :

<head>

and you type it exactly as you see it above, what will be displayed is nothing. To display the exaxtly codes , what you had to do is to change:

Example :

You can do it manually one by one if the codes is simple but a smarter way is to put the HTML code you want to display into a Notepad file and use Edit-Replace tab, from the menu bar and let Notepad find and replace all the < and > automatically for you. See screenshot below:

Welcome To The Board

2007-08-28T21:05:00.000-07:00

Welcome to Blogs Mybloggerlog... This space is accessible to any kind of bloggers resources notes , tutorial, tips and tricks collection.