ACTION

MAKE USE OF CSS TOOLTIP

2010-04-18T12:51:00.000-07:00

Create a tooltip using CSS is lighter than using javascript. That's why I prefer to use tootip with css. If you are a beginner blogger and do not know how to activate can follow the way below.

Login to your blog.
Choose a layout.
Click edit html.
Position code above the code ]]></b:skin> that its position is as follows:

.Tooltip (position: relative;)

.Tooltip div (display: none;)

.Tooltip: hover span (

display: block;

position: absolute;

width: 200px;

left: 20px;

top: 20px;

background-color:#006633;

border: 3px solid#0099FF;

padding: 5px;

font-size: 15px;

color: # 000000;

text-decoration: none;

font-family: Verdana, Arial, Helvetica, sans-serif,)

]]></b:skin>
Then click Save.

HOW APPEARANCE IN THE POST.

<a href = "http://actionnn.blogspot.com/2010/04/make-use-of-css-tooltip.html" class="tooltip"> <span> <tooltip MAKE USING CSS< / span> Tooltip </ a>

If you want to change the background image, simply change the background-color:#006633; with the address of your own image.

COLOR CODES

2009-12-15T22:17:00.000-08:00

<FONT COLOR="#0000CC">This text would be blue</FONT>

#000000	#000033	#000066	#000099	#0000CC	#0000FF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

MAKE AUTO LINK

2009-12-08T19:14:00.000-08:00

The function of the automatic link is actually no different from the links I posted once before.

Why do we call the automatic link, because without us click on this link will open by itself. Point your mouse over the link, the link will open a new page.

If the previous link made like this <a href="http://URL"> information </a> then the automatic link is only added the code: "onmouseover =" window.location = this.href ".

If combined the results as below:

<a href="http://URL"onmouseover="window.location=this.href"> information </a>

Examples of automatic link:

<a href="http://actionnn.blogspot.com/2009/11/how-to-make-link.html"onmouseover="window.location=this.href">How to make link</a>

Below is the result of writing the link above, if you want to know the results point the mouse over the link:

How to make link

CONGRATULATIONS TRY

ADDING A SIDEBAR COLUMN

2009-11-20T19:45:00.000-08:00

To consider before adding sidebar column is:

Outer-wrapper = 660px;
Header-wrapper = 660px;
Footer-wrapper = 660px;

* Now go to your blog.

* Click on the layout.

* Edit html.

* Do not give check on widged Expand templates.

Find the code like below:

/ * Outer-Wrapper
----------------------------------------------- * /
# outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $startSide;
font: $ bodyfont;
}

# main-wrapper {
width: 410px;
float:right;
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 * /
}

# sidebar-wrapper (
width: 220px;
float:$startSide;
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 * /

This outer-wrapper is a frame in which the main wrapper, sidebar, header and footer in it.

If you want to add a sidebar you have to add also the width of the frame. For example you want to add one sedebar with the same width. Cloning and add the value of the width of the sidebar on the Outer-wrapper = 660 +220 = 880.

Give a sidebar with a different name. For example you give sidebarnew name-wrapper, so the results as follows:

/ * Outer-Wrapper
----------------------------------------------- * /
# outer-wrapper {
width: 880px;
margin: 0 auto;
padding: 10px;
text-align: $ startSide;
font: $ bodyfont;
}

# main-wrapper {
width: 410px;
float: $ endSide;
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 * /
}

# sidebar-wrapper {
width: 220px;
float: right;
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 * /
padding: 5px;

# sidebarnew-wrapper {
width: 220px;
float: left;
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 * /
padding: 5px

For the red color is the result of cloning sedebar-wrapper that we give the name sidebarnew-wrapper, for the blue color is extra wide so that there is distance between the font. yellow color is where lies the sidebar is.

Do not forget to also replace the width value of:
header-wrapper = 880px;
footer-wrapper = 880px;

After changing the value broadly and gave a sidebar, then drag it to the bottom of your template code. Find the code like below:

<div id='main-wrapper'>
<b: section class = 'main' id = 'main' showaddelement = 'no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</ b: section>
</ div>

Put the following code immediately above it:

<div id='sidebarnew-wrapper'>
<b:section class='sidebar' id='sidebarnew' preferred='yes/'>

So the result as follows:

<div id='sidebarnew-wrapper'>
<b:section class='sidebar' id='sidebarnew' preferred='yes/'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</ b: section>
</ div>

* Click the preview.

* Click save template.

HOW TO MAKE A LINK

2009-11-12T01:14:00.000-08:00

To direct visitors to your site or blog to other sites you need a link.

How to make this link does not seem familiar to owners of blogs, even according to them to make the link is obligatory.

Viewed from the function of this link there are several kinds.
* Link opens in window or the same tab:

<a href="http://URL/"> information </ a>

For example: <a href="http://actionnn.blogspot.com/">Click here</a>

We can change the address and information as we want.

So the result: Click here

If you use the link above then this will be covered with a new page.

* Links open in new windows or new tabs:

<a href="http://alamat/"target="_blank">Description</a>

We add the target = "_blank" after the address.

For example: <a href="http://actionnn.blogspot.com/"target="_blank">Click here </a>

So the result: Click here

If we direct this link to another site it will open a new window or tab without befall our blog.

* Link to bring the title:

<a href="http://actionnn.blogspot.com/"target="_blank" title="ACTION"> See here</a>

So the results: See here

If you mouse over the link will display a title.

HOW TO MAKE TEXT AREA

2009-11-09T10:10:00.000-08:00

If you ever write or post html code but when you upload these posts were not appearing as you want. Well .. this is the function of the text area, to create html code that are not legible when we upload. example code for the link exchange or any use of html code that is easy to copy.

Basically, we can put any text into the area. This may be a simple description of the text area. And to make it you can see the ways below:

<a href="http://www.actionnn.blogspot.com" target="_blank">ACTION</a>

Text or the link above if we write it is not going to appear in the post, so we have to be read into the text area. Way as below:

<p align="left"><textarea rows="2" name="code" cols="40"><a href="http://www.actionnn.blogspot.com" target = "_blank">ACTION</a></textarea></p>

Another example of text area:

<p align="left"><textarea rows="4" cols="50" name="code" style="background-color:green; color:blue;"> TEXT OF THIS AREA IN CENTRAL POSITION WITH HIGH "4 "AND HAVE WIDE" 50 "BACKGROUND COLOR GREEN WITH BLUE TEXT </textarea></p>

Below are the results from the code above:

TEXT OF THIS AREA IN CENTRAL POSITION WITH HIGH "4 "AND HAVE WIDE"50"BACKGROUND COLOR GREEN WITH BLUE TEXT

GOOD USEFUL

INCREASE THE SIZE OF THE TEMPLATE

2009-11-04T09:53:00.000-08:00

Maybe you feel the template provided by blogger too narrow or less wide. Would you like to change your template to be more broadly? I usually use the following way, which I think is the simplest.

There are some parts of the template that will be resized:

Outer-wreper: The width of the template as a whole
Main-wrapper: section where we normally post articles
Sedebar-wrapper: usually located on the right or left of the main wraper
Header-wrapper: The top part of the template
Footer-wrapper: Basic or in the bottom

Now log into your blog, click the layout and then click edit html. Do not be a check in Expand widget templates.
Then find the following code:

# outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $ startSide;
font: $ bodyfont;
}
# main-wrapper {
width: 410px;
float:;
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 * /
}
# sidebar-wrapper {
width: 220px;
float: $ endSide;
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 * /

You can change the size of the red text.

# outer-wrapper {
width: 950px;
margin: 0 auto;
padding: 10px;
text-align: $ startSide;
font: $ bodyfont;
}

# main-wrapper {
width: 500px;
float:;
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 * /
}
# sidebar-wrapper {
width: 400px;
float: $ endSide;
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 * /

If the outer-wrapper width: 950px then the main distance-sedebar-wraper and wraper should be adjusted:

Main-wrapper: 500px
Sedebar-wrapper: 400px
While the rest of 50px is the distance between sedebar and posting.
After that, do not forget to also adjust the width of the header and footer-wraper same wraper and outer-wraper

# header-wraper {
width: 950px
margin: 0 auto 10px;
border: 1px solid $ bordercolor;
}

# footer {
width: 950px;
clear: both;
margin: 0 auto;
padding-top: 15px;
line-height: 1.6em;
text-transform: uppercase;
letter-spacing: .1 em;
text-align: center;

Which must be changed is the red text. If you already click preview, if you felt was appropriate and in the save.

Good luck ...!!!

MAKE IMAGE FLOATING CORNER

2009-10-29T09:26:00.000-07:00

Have you ever seen a picture in the corner of the blog page, which floated even though you move the scroll anywhere. This image will remain in the position where they are located. Images that you see is called the float image.

If the blog you want it decorated like and do not know how to make it, you can follow the steps below:

1. Login to blog

2. Choose your layout

3. Click edit HTML

4. Search code ]]></ b: skin>

5. Put the below code above, to his position as follows:

# image (
position: fixed; _POSITION: absolute; bottom: 0px; left: 0px;
clip: inherit;
_top: expression (document.documentElement.scrollTop +
document.documentElement.clientHeight-this.clientHeight); _LEFT: expression (document.documentElement.scrollLeft + document.documentElement.clientWidth --
offsetWidth);
)

]]></ b: skin>

Note the bold image: bottom can be converted to the top, and the left can be changed to right.

6. Then look for the code </ body>

7. Put the following code above:

<div id='image'>
<a href='http://actionnn.blogspot.com'>
<img alt; = 'create animated gif' border = '0 'height = '175'
src = 'http://picasion.com/pic12/0bf21899daaad5548594af6e750ceccf.gif'
width = '150 '/> <br/> </ a>
</ div>

Replace red text with your blog address. Blue color change to your image address. To try you can use the image above address and can determine its size.
height = '175 'and width = '150' ------>> can resize

8. click save

9. View results

10. done

DEVIDE COLOMN FOOTER

2009-10-25T08:29:00.000-07:00

If a single column footer you think still less, you can divide these into several colomn.Footer very useful for me, I think its function is similar to the sidebar.

I often look at various blogs, they like to use with three column footer, this really depends on individual taste . How to make it will be discussed together.

Usually different templates, different size accordance with .So size template you have, here we make use size percent (%), so you do not trouble to change . Make it let us see the steps below:

* Login to your blog.

* Click on the layout.

* Choose Edit HTML.

* Do not click expand widgets.

* Find code ]]></ b: skin> and place the following code on it, until

his position as follows:

/ * Footer_wrapper
---------------------------- * /
# footer_wrapper (
width: 100%;
position: relative;
float: left;
background: # ff69b4;
border: px solid # FF0000;
padding:%;
)

# footer_wrapper1 (
float: left;
width: 30%;
margin: 1px;
background: # 7cfc00;
padding: 1%;
)

# footer_wrapper2 (
float: left;
width: 30%;
margin-top: 1%;
margin-bottom: 1%;
background: # 7cfc00;
padding: 1%;
)

# footer_wrapper3 (
float: left;
width: 30%;
margin: 1%;
background: # 7cfc00;
padding: 1%;
)

]]></ b: skin>

* Then pull down on the body find the following code:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/&gtl
</ div>

* If you've found, put the following code immediately above it so that

its position as follows:

<div id='footer_wrapper'>
<b:section class='footer' id='footer_wrapper1'/>
<b:section class='footer' id='footer_wrapper2'/>
<<b:section class='footer' id='footer_wrapper3'/>
</ div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</ div>

* And see the results on the layout, to see the results you need to

add the gadget.

Note: The code is the original red, black is the code added.

Hopefully useful.

HOW TO MAKE READ MORE

2009-10-23T19:12:00.000-07:00

hen you do a few posts on the front page,if you view all the posts woult appear to meet the page. Sure you want to look simple and the process of opening the page not too long. How to summarize the page? One way to use read more. Maybe it's a lot to know about how to use it. If you do not know can follow the following steps below:

Select a layout and then click edit html.

To download a template full of anticipation in advance or copy and paste the template code in to notepad and then save. If something goes wrong you can restore the code back in the starting position.

Tick the 'expand template widged'.

Search code below:

If you've met remove and replace it with code like the following.

<b:if cond='data:blog.pageType=="item"'>
<style>. fullpost {display: inline;}>

</atyle>
<p> <data:post.body/> </p>
<b:else/>
<style>. fullpost {display: none;} </style>

<p> <data:post.body/> </p>

<a expr:href='data:post.url'> Rad More.....</a>

Then click the save menu template.

Click settings.

Click format.

See the empty text area, fill in the following text:

Click save settings.

How to post an article:

Make sure to position the edit menu HTML. In this position would appear the code:

Enter the code early article before <span class="fullpost"> and the article remaining after <span class="fullpost"> and before the code </span>

Example:

Postings are summarized <span class="fullpost"> More postings </span>

Good luck..!!