emmooh: HTML

Showing posts with label HTML. Show all posts

Make the Cursor blink

8:25 PM | Labels: article, Blog, Cursor, HTML, Javascript

This is a very peculiar way of decorating the cursor, and somehow the page. This is done leaving the cursor flashes when it moves and end up scattered and fell to form is still moving the cursor.
You can see an example on this website for free mobile wallpapers. When you load the page moves the cursor to where you want and watch it rise and fall of the mouse flashes: the more you move the cursor will flash over.

To put this effect of the cursor on your blog, go to Layout > Edit HTML and before paste the following:

// <![CDATA[

var colour="#FFFFFF";

var sparkles=40;

/****************************

* Tinkerbell Magic Sparkle *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

In var color = "# FFFFFF"; adjust the color of the flash, in this case are white but you can change the color you want, I recommend that you only be a contrasting color to the bottom of the blog so you can see.

This way you can create a "magic"in the blog.

How to make the intro to blog

8:48 PM | Labels: article, Blog, HTML, Intro

When you think the first time make sure you blog comes to mind more style Web page with some sort of welcome screen, but then you discover that a Web page is not the same as a blog, and even a blog has too many positive points in favor of a sudden there who want to use these elements of sites to your own blog, this is the case of presentation or intro screens.

Although there are many methods to do some of these require you to create a html document that will be displayed as an introduction, however this is not recommended when trying to position the blog. So experimenting a bit I designed a method by which we will not use additional pages to not affect PageRank, and to avoid damaging the position or be penalized by Google will not hide the contents of the blog, only use two layers, one being the content I'll blog a very low z-index, and one that will be the intro to another z-index but higher, this will make Google bots can read the blog content without problems.

This intro to the blog is simple but can have more items if they wish, it will be at the discretion of each individual, so soon I will only display an image as a button to enter and background music. And attention, which will only be on the cover of the blog to not be annoying to readers, so that when operating on blog posts or pages of the intro is not visible.

Now let's see how to put it first enters Layout > Edit HTML and look for this label:

<body>

Or if you use a template from Blogger Templates Designer then find this line:

Just below either one of them adding:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

body {margin:0; padding:0; overflow:hidden;}

.entrar, #navbar-iframe, .navbar {display:none;}

.BlogOculto {z-index:-100;} #Intro {z-index:5000;}

#Intro {text-align:center;

background:#000; /* Color de fondo de la pantalla */

position:absolute;

width:100%;

height:100%;

overflow-x:hidden;

}

p.btnEntrar a {

font-size: 16px; /* Tamaño de la letra del botón */

font-style: italic;

font-weight: bold;

text-decoration: none;

color: #1C1C1C; /* Color de la letra del botón */

background: #ccc; /* Color de fondo del botón */

padding: 6px;

border: 1px solid #2E2E2E; /* Color del borde del botón */

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

}

p.btnEntrar a:hover {position:relative; top:1px; left:1px;}

</style>

<p class='btnEntrar'><a href="javascript:void(0);" onClick="document.getElementById('BlogContenedor').className = 'quitarIntro', document.getElementById('Intro').className = 'entrar', document.getElementById('ElementosAudio').innerHTML = '', document.body.style.overflow='auto' ">Entrar</a></p>

</div>

</div>

</b:if>

And then find the and above it add this:

</span>

Is that all? Yes, that's it, now we're just going to customize it.
In the first code we've added are marked in green as the color aspects that will have the intro, the font size of button, button color, etc.

Then where it says the image URL you can put the URL of the image of the logo in your blog, a welcome picture or other image. The text of the 'Login' button can be changed by anyone else, then I have indicated in bold, or if you want you can replace the button for an image, simply delete the text enter and put in place an image code:

If you do that then you should remove the border and background color of the button marked in green.
But it is VERY IMPORTANT that if you change the text or if you put an image in place, DO NOT change the code purple is around.

Any item to be added to the intro should go before where it says End of intro or content Start of content after the intro. Intros regularly do not have much a matter of presentation and that the less things have improved.

Wherein said margin-top: 200px is the distance that will intro elements over the top of the screen can be changed to another value.

I've put a background music using a YouTube video that I just put in zero values for width and height to make the player invisible. If you want to put background music also then change the ID XXXXXXX the video you want to.
If you want to put a Flash SWF file player code removed (only gray) and instead put the SWF code. But beware, should be removed only what is in gray.
If you do not want to put audio, or even a flash file you can remove the gray or leave it.

If your blog has music that plays when you enter the blog I recommend that you take off the autoplay, otherwise you will hear in the intro of the blog. Similarly, if you have a video or flash gadget at the entrances or within the template will have to follow the steps in this post for the video or gadget is not overpowered.

As a final point, when you go to Layout | Page Elements will also see the intro, but if you click on Login you will see everything as usual.

And now, it seems that's all, enjoy it:)

Read User's Comments0

How to create HTML code on your blog using WordPress

3:50 PM | Labels: article, Blog, HTML, Web, Wordpress

Tired of looking to place HTML code on your website what until now have not been able to do or not you have been well?

This article will explain how to, once and for all that you've always wanted to but so far have not been.

If you follow the sequence of images is then very soon you can put anything you want, as the experts and, best of all, without really knowing HTML using a tool WordPress.

STEP 1: First you have to do is go to your WordPress blog and create a new entry. In this case I'll make a link with picture to one of my blogs, so I'll post a picture that identifies my place and I'll paste here:

STEP 2: Next, I will place text. The text I am going to put it: "If you want to learn more and learn the techniques to create and properly and effectively manage your WordPress blog, visit us NOW at: DominaTuBlogDeWordPress.com

I will put in bold some things, for example, "techniques for creating and properly and effectively manage your WordPress blog" and "NOW. "

STEP 3: After you insert a hyperlink in the name of the site:

STEP 4: Once everything is ready, I will change the view of the document I'm writing. At the top of the document there are two tabs, the first is "seen " and the other is "HTML. " I click on HTML and I get the following:

That is, the same system HTML code throws me what I write. That's what I insert for writing one of the widgets available, namely the text.

STEP 5: Copy the code that I see in the box and go to Appearance> Widgets. Then, select a text widget and drag the area available:

STEP 6: Put a title to the Widget and space available, hit the code you copied in the previous step.

STEP 7: I go to the website to see the changes and this is the result in the website / blog:

The same can be done to place anything you want. In fact, no need to know HTML code to place banners in your blog or website, just create the complete design and then copy the HTML code that will throw the system ... and that's it!

I hope that you have provided to place your own HTML code in your website / blog.

What do you want to know specifically about the HTML code to your WordPress blog? Let me comment on the bottom, I myself will be responding.

Read User's Comments0

Popular

Followers

Categories

Make the Cursor blink

How to make the intro to blog

How to create HTML code on your blog using WordPress