Star Dũng Blog

Este tutorial es para aquellos bloggers que comparten plantillas de Blogger, WP, Joomla o Drupal, este tutorial es ideal para ti.
Tal vez si han visitado proveedores de plantilla de Blogger a menudo obtener una página de demostración utiliza la barra de herramientas como en BTemplates, ZoomTemplates, ThemeForest.

Antes de comenzar veremos una demostración:

• Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo encima de ]]></b:skin> pegamos la siguiente linea CSS

#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiH6rH3x_zOLMV2rrRq87uR4dI98xLHz_14XtIXLyl7n9g3ih72CLBkf9UzpNb9esz18F4EnYqC2iLREGuFVk2oXij-_zy056DETQAYN7xNkZO6uA1E6TkqUCSC2djMBcgVhxPiuzYMoo/s1600/loader.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
left: 0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-v-eu-X62mVF0QE80sqDYzZxbfNNkRrEZV4Fi8_vuauHRt4kZ_s0drZTQimJQ-BlTVqkdqo28I6njt5AGZsClv2Z2j5pXPkttYgRv5XX7LkdWLTbEaqCQgFTPWAi-HfOqII99rTFC1tk/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:0;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-v-eu-X62mVF0QE80sqDYzZxbfNNkRrEZV4Fi8_vuauHRt4kZ_s0drZTQimJQ-BlTVqkdqo28I6njt5AGZsClv2Z2j5pXPkttYgRv5XX7LkdWLTbEaqCQgFTPWAi-HfOqII99rTFC1tk/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1XPC_7RhAodBWPW4t4Dq8snZ7lKzzqsflP6GBYv4SMTg06Uu6CFd0E1HzACKB9epG10t9mp-6SiYGgjww0IUTAORA1ZNYj1pC_Bz8L4W0eujdAnXBq6japQtg_59qxtHyk_c74zuu0Ho/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1XPC_7RhAodBWPW4t4Dq8snZ7lKzzqsflP6GBYv4SMTg06Uu6CFd0E1HzACKB9epG10t9mp-6SiYGgjww0IUTAORA1ZNYj1pC_Bz8L4W0eujdAnXBq6japQtg_59qxtHyk_c74zuu0Ho/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:158px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIl0q1rJ-mKCIqWD9eRyHgyZZz35SDk2-5GlFG6jPK3dUxiy2cYVbDKcC_4Jkhhb1poXt-aQz4mEWH1c7uVfxCptafeLuemyNMF2Nr6gknNjB4vicc-lkhAmOpyJOMXHWrLf0PFxOKX7U/s1600/ki-logo.png)no-repeat left center;
padding-left:55px;
font-size:17px;
font-weight:normal;
font-family:Oswald, Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}

Antes de Seguir en la plantilla aremos un paso extra 

• Paso 1 bis: Vamos a Blogger>> Pajinas>> Pagina Nueva>>
• Paso 2 bis: Y Colocaremos el nombre que decees como por Ej: Demostraciones
• Paso 3 bis:  Creamos nuestra nueva pagina 

Seguimos

• Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F)

</body>

• Paso 5: Justo por encima de </body> pegamos la siguiente linea 

</b:if> 
<b:if cond='data:blog.url == &quot;http://blog.kangismet.net/p/template-demo.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return (false);
}
window.onload = function() {
 var url  = getQueryVariable("url");
 var download  = getQueryVariable("download")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;
};
//]]>
</script>

<div id='tab-demo'>
<a class='demologo' href='http://blog.kangismet.net'>KI Template Demo</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>