Without CSS, a page is bare but still, something of modesty it is because browsers down a set of default properties that will be applied unless the change. Have some differences depending on whether a browser or the other but, in general, are precisely those properties non-identified, that cause us problems because we do not usually taken into account.

The body of a page is where they are defined by default some of these properties is more or less known than the bottom (background) of a page is white and the color of the text (color) is black but has some more than likely to interfere For example, the margin (margin):

body {
background: # FFF url () repeat top left;
color: # 000;
font-family: Times New Roman;
font-size: 16px;
margin: 8px;
}

The links also have default properties, are blue and is underlined. All title tags are in bold fonts (font-weight: bold) and also a size that is related to the size of the font defined in the body. To make matters worse, it also has limits:

h1 font-size: 2em; margin: 21px 0;
h2 font-size: 1.5em; margin: 19px 0;
h3 font-size: 1.2em; margin: 19px 0;
h4 font-size: 1em; margin: 21px 0;
h5 font-size: .8 em; margin: 21px 0;
h6 font-size: .7 em; margin: 26px 0;

Or DIV or SPAN tags have default properties but if P is labeled, this has a top and bottom margin equal to the size of the default font (margin: 1em 0).

More labels with pre-defined properties:

blockquote margin: 16px 40px;
pre font-family: monospace; margin: 16px 0;

Images that act as links have a border of color like the color of links (border: 2px solid # 0000EE) .

Probably labels cause more conflicts are lists as both OL and UL have several properties, including margins and separations:

ol margin: 16px 0; padding-left: 40px; list-style-position: outside; list-style-type: decimal;
ul margin: 16px 0; padding-left: 40px; list-style-position: outside; list-style-type: disc;

Usually we read that to avoid all these properties do not bother us, it is best to "reset", ie to the beginning of our staff, some definitions to "clean" stuff. There are dozens of examples that can be found but for normal use, do not need much, just add a few right at the beginning of our staff within <style> </ style> or <b:skin> < / b: skin>..

* {Margin: 0; padding: 0;}

html, body {height: 100%;}
body {height: 100%;}

a, a: visited, a: link, a: active {outline: none; text-decoration: none;}
a: hover {outline: none; text-decoration: none;}
a img {border: none; outline: none; text-decoration: none;}

object, embed {outline: none;}

ol, ul, li {list-style: none;}

body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px ; padding: 0; text-align: center}. clear {clear: both; line-height: 0; height: 0} # navbar-iframe {height: 0; visibility: hidden; display: none} a, a: visited , a: link {color: # AAA; outline: none; text-decoration: underline} a: hover {color: # FFF; outline: none} a img {border: none; outline: none; text-decoration: none} object {outline: none} h1, h2, h3, h4, h5, h6 {font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif; margin: 10px 0}

a {/ * this is an error * /
color: # AAA
outline: none
text-decoration: underline
}

a {/ * this is fine but the latter one has no semicolon * /
color: # AAA;
outline: none;
text-decoration: underline
}

a {/ * this is OK * /
color: # AAA;
outline: none;
text-decoration: underline;
}

div {/ * this is a mistake because between the closing parenthesis and the word no-repeat missing space * /
background: # AAA url () no-repeat top left;
}

div {/ * this is fine but no space between the colon and color * /
background: # AAA url () no-repeat top left;
}

div {/ * this is OK * /
background: # AAA url () no-repeat top left;
}

Within a label <style> NEVER add other tags, only style rules are added to their properties. The same goes for the tag <b:skin> Blogger. He never includes the comments:

div {/ * this is an error * /
<! - Comment comment comment>
background: # AAA url () no-repeat top left;
}

div {/ * this is OK * /
/ * Comment comment comment * /
background: # AAA url () no-repeat top left;
}

These days, CSS is essential, even more when it comes to dynamic pages as a blog and that is what allows us to simplify the way we write tickets. The editors give us tools for that and these tools are useful but at the same time are misleading so you have to use them wisely. It is true that we can format our text with a single click and ready, put the color of the paragraphs, font type, all great but ... What if you change your mind tomorrow?

JqFancyTransitions is a jQuery plugin that allows you to create an image gallery with different transition effects between them.
To use it we have jQuery in the template so if you do not have it before </ head> add the library directamenete from Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </ script>

And below, the plugin, either by loading from a server where you have previously hosted:

<script type="text/javascript" src=" URL_jqFancyTransitions.js "> </ script>

or copy and paste the code and placing it between tags:

<script type="text/javascript">
//<![ CDATA [
... here copy and paste the contents of the file ...
//]]>
</ Script>

You do not need anything else, now, to use, we have several alternatives that we can see explained in the page developers but the simplest is to place the images in a DIV like this:

<div id=" migaleria ">
<img src="URL_image1" />
<img src="URL_image2" />
<img src="URL_image3" />
... and continue to add as many pictures as you want...
</ Div>

Then call the function:

<script> $ ('# migaleria'). jqFancyTransitions ({options}) </ script>


Width and height set the size
Effect is the type of transition and may be wave, zipper or curtain
Position is the position from where you start transción and may be alternate, top, bottom, alternate or curtain
Direction is the direction and may be fountainAlternate transción, left, right, alternate, random or fountain
Delay is the time delay remains the imaegn visible (default is 5000 or 5 seconds)
Strips is a number indicating the number of "pieces" in which the image desompone (default 20)
StripDelay is the time that remains visible each "piece" (default 50)

Other options let you control who can add text to images, placing them in the alt attribute:

<img src="URL_imagen1" alt="Text to show" />

TitleOpacity indicates the opacity of the text
TitleSpeed ​​is the time it takes to be shown

Alternatively, we can use images instead of links

<a href=" URL_imagen1 />

In that case, the options are two:

Navigation can be true or false and add navigation buttons.
Links can be true or false to set whether images are links or not.

In this example, the options used are the simplest and the function called this way:

<script> $ ('# migaleria'). jqFancyTransitions ({width: 640, height: 400, direction: 'random', delay: 2000, effect: 'wave'}); </ script>