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:
<body expr:class='"loading" + data:blog.mobileClass'>
Just below either one of them adding:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
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>
<div id='Intro'>
<div style='margin-top:200px;'>
<!-- Inicio del contenido del intro -->
<img src='URL de la imagen'/>
<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 id='ElementosAudio'>
<iframe allowfullscreen='' frameborder='0' height='0' src='http://www.youtube.com/v/XXXXXXX&autoplay=1&loop=1' width='0'/>
</div>
<!-- Fin del contenido del intro -->
</div>
</div>
</b:if>
<span class='BlogOculto' id='BlogContenedor'>
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:
<img src="URL de la imagen" />
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:)
0 comments:
Post a Comment