Plantillas para blogger Línea Cocina
En este tutorial de plantillas para blogger, publicare una plantilla de cocina Internacional. Tener una excelente
plantilla para blogger es darle un empuje a su blog de blogger. Esta nueva
plantilla para blogger la podrán usar en su blog de cocina o también en
cualquier tema que ustedes quieran. Plantilla para blogger para mi blog de cocina. Anteriormente publique algunas plantillas
para blogger de los cuales les dejo los enlaces a continuación:
Plantilla Zona, Plantilla de Noticias, Plantilla de Teléfonos, Plantilla de Espectáculos, Plantilla de Revista, Plantilla de Yahoo, Plantilla de Deportes, Plantilla Evolución, Plantilla Platón, Plantilla Negas, Plantilla Libertad, Plantilla Tiempos Modernos, Plantilla Taggui, Plantilla Cuántica, Plantilla Década, PlantillaPietro, Plantilla Buenas Noticias, Plantilla Revolución, Plantilla Newslie y Plantilla DigitalText.
Características de la Plantilla
Estructura SEO
Diseño profesional
Redes sociales incorporado
4 imágenes desplegables
Habilitado para publicidad, puede ser
Adsense o de otro tipo
4 columnas al final de la página
A continuación mire su demostración en
mi blog de demos
Te gusto!
Vamos a trabajar en la nueva plantilla
1 Ir a blogger
2 Dirígete a “Plantilla”
3 Da un clic en la parte superior derecha donde
dice “Crear copia de seguridad/restablecer”
y se te abrirá una venta en la cual tendrás que dar un clic en “Examinar” y buscar el archivo XML que se te
fue enviada. Luego das un clic en “Subir”
y automáticamente ya tendrás instalada la plantilla en tu blog de
blogger.
4 Ahora dirígete a diseño y vas a encontrar que
tus widgets están totalmente desordenados no te preocupes, no borres nada y
sigue primero las instrucciones siguientes y luego podrás ordenar tus widgets:
Primer Paso:
Da un clic en “Plantilla”
Luego un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu
plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla
“Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador
integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que
insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación
mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en
tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al
momento que yo diga busca este código.
Configuración del primer Menú
Busca este código
<li><a
href='/'>Inicio</a></li>
|
Una vez que hayas encontrado el código,
se te mostrara un código como el siguiente:
<li><a
href='/'>Inicio</a></li>
<li><a
href='#'>Tips</a></li>
<li><a
href='#'>Cocina
Internacional <font
size='1'>▼</font></a>
<ul
class='menus'>
<li><a
href='#'>Tips</a></li>
<li><a
href='#'>Cocina</a></li>
<li><a
href='#'>Ingredientes</a></li>
<li><a
href='#'>Consejos</a></li>
<li><a
href='#'>Cetegorias</a></li>
<li><a
href='#'>Cocina Nacional</a></li>
</ul>
</li>
<li><a
href='#'>Contactos</a></li>
<li><a
href='#'>Recetas de Cocina
<font size='1'>▼</font></a>
<ul
class='menus'>
<li><a
href='#'>Recetas
Internacionales</a></li>
<li><a
href='#'>Postres</a></li>
<li><a
href='#'>Noticias</a></li>
</ul>
</li>
<li><a
href='#'>Redes Sociales</a></li>
|
Realiza estos cambios:
Cambia todos los numerales que están marcados
de color azul #
por los links de las paginas que quieras dar a conocer en tu menú
Al igual borra los textos que están marcados
de color rojo por el texto que tú quieras.
Segundo Paso
Configuración del Slideshow
Busca este código
<ul class='slides'>
|
Una vez que hayas encontrado el código,
se te mostrara las siguientes líneas de código
<ul
class='slides'>
<li>
<a
href='http://blogdecocinainternacional.blogspot.com/2013/06/comida-internacional-receta-de-cordon-bleu.html'><img
class='slideimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYDD3aPPdtPUrAuxrJ8RdMsdBs1GYLHHpAnZbh2DBnUVgdW-UMZvt4AgC1EqW4x6SjXTV5fE_mcAkH1C-Am_9V9soUfBd3WKL8mEzfusNWOhcFApunTx5Ti14JkjxrlnbLig4-7u2m2y8/s1600/recetas+de+comida+internacional.JPG'/></a>
<div
class='flex-caption'>
<h3>Receta de
Cordon Bleu</h3>
<p>
Bienvenidos a Recetas Internacionales, aqui encontraras las
recetas más sorprendentes de cocina.
Aprende el arte de la cocina........
</p>
</div>
</li>
<li>
<a
href='http://blogdecocinainternacional.blogspot.com/2013/06/comida-internacional-receta-de-arroz-a-la-amaricana.html'><img
class='slideimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmp_VYhi6GJ8-WrioUvVbCOU9GOgyW_Gh59g8tSJugcX3DUH-xhH14qs_fTtKPyUlhKXmIcHpo3EOfyHqpIvzkI3apZKjjEVBCto63KZyX92VGH-Tz-VThQuvl57lTshdxODK5dxqnkTk/s1600/recetas+de+comida+internacional.JPG'/></a>
<div
class='flex-caption'>
<h3>Receta de
Arroz a la Americana</h3>
<p>
Todo lo que
necesitas saber de cocina internacional en nuestra página web.....
</p>
</div>
</li>
<li>
<a
href='http://blogdecocinainternacional.blogspot.com/2013/06/comida-internacional-receta-de-tarta-japonesa.html'><img
class='slideimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF4AM6-BgHKdTADuZ_MDhsDARvaJzU-lFwbkium-tWN5MrWXPrBgXxWxQknCd3lsxs0rq9hYNkAzzkrw-BszzYSD0cG1bG2KTbvZMQ5X-cG1vtsvSDbQHYlzBOklTqPaaNdPy2oWqcWVQ/s1600/recetas+de+comida+internacional.JPG'/></a>
<div
class='flex-caption'>
<h3>Receta de
Tarta Japonesa</h3>
<p>
Receta de Tarta
japonesa, un postre internacional para servir cuando tengas una ocasión
especial, nada de complicado pero si muy deliciosa que ya todos te van a
llenar de halagos.....
</p>
|
Realiza estos cambios:
Hay tres links que están marcados de
color azul, deberás borrarlos y poner ahí los links correspondientes de las
paginas que quieras dar a conocer.
Además he marcado de color verde los 3
links de las imágenes a mostrar en el slideshow, te recuerdo que las imágenes que
vayas a mostrar tienen que tener una dimensión de 1600 X 582 pixeles, cambia
cada una de ellas para que se muestre.
Y por ultimo los títulos están marcados
de color purpura y la pequeña descripción del slider esta marcado de color
rojo, cámbialos y pon ahí una pequeña descripción.
Tercer Paso
Configuración de las 4 imágenes desplegables
Busca este código
<h5>Nuestro Trabajo</h5>
|
Cuando hayas encontrado el código, se te
mostrara un código como el siguiente
<h5>Nuestro Trabajo</h5>
<div id='container'>
<div
id='gallery'>
<div
class='pic ' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6KWnWlCjLRtwaany9R_tr0xyz0-0nOg7x5c9SLyY6-LIZQhtLWByG7QBjQTBIh-teZyRgfM482CVc9bBfkhGXvbLDlfQy1l2tOir3iipV0bbioAQ-OI9aGvoEVAdNn7jd9le-CuWdFYw/s400/recetas+de+postres.JPG)
no-repeat 50% 50%;'>
<a
href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6KWnWlCjLRtwaany9R_tr0xyz0-0nOg7x5c9SLyY6-LIZQhtLWByG7QBjQTBIh-teZyRgfM482CVc9bBfkhGXvbLDlfQy1l2tOir3iipV0bbioAQ-OI9aGvoEVAdNn7jd9le-CuWdFYw/s400/recetas+de+postres.JPG'
target='_blank'/> </div>
<div
class='pic ' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UDNwhKc9Yj4NWOQ1Xbcj1rv77RnMba9FhV_JsWPXHpD49it6H7y1EHap_hA-cLsHguClud_gRptpUm9DBlH45m-V6X2RcM88NF4Cm6v91gsQNuGvye43xuX8EwWi5vI28oQLKweOwFk/s400/recetas+de+postres.JPG)
no-repeat 50% 50%;'>
<a
href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UDNwhKc9Yj4NWOQ1Xbcj1rv77RnMba9FhV_JsWPXHpD49it6H7y1EHap_hA-cLsHguClud_gRptpUm9DBlH45m-V6X2RcM88NF4Cm6v91gsQNuGvye43xuX8EwWi5vI28oQLKweOwFk/s400/recetas+de+postres.JPG'
target='_blank'/> </div>
<div
class='pic ' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD4Vb4NbpxK-5AUwuIHIHJKr6mif7Eyjd92jhMT0d_nF3PbFPjvgmnMCtU9l_xdWAvVM3CkntfGdq74UZG1jAS1fl2zLhIoHjOA0LNKx8SRLHi4icd3oeOFZ7zuTiFvm7CmDU_-sSC6Wg/s400/recetas+de+postres.JPG)
no-repeat 50% 50%;'>
<a
href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD4Vb4NbpxK-5AUwuIHIHJKr6mif7Eyjd92jhMT0d_nF3PbFPjvgmnMCtU9l_xdWAvVM3CkntfGdq74UZG1jAS1fl2zLhIoHjOA0LNKx8SRLHi4icd3oeOFZ7zuTiFvm7CmDU_-sSC6Wg/s400/recetas+de+postres.JPG'
target='_blank'/> </div>
<div
class='pic ' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbMeFNYVhT5RG5qRw5teXyNiXSZ7jxo6aXs6BqDO1jpPXtECwmeEz2fS8W7KpsILHr_q4eWcutchStV9C5kMR64ySqAJe2Hvt2UKKtUOoUuaP0K6GbwoExaBUze1PP6auv6SioDiVfXSY/s400/recetas+de+postres.JPG)
no-repeat 50% 50%;'>
<a
href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbMeFNYVhT5RG5qRw5teXyNiXSZ7jxo6aXs6BqDO1jpPXtECwmeEz2fS8W7KpsILHr_q4eWcutchStV9C5kMR64ySqAJe2Hvt2UKKtUOoUuaP0K6GbwoExaBUze1PP6auv6SioDiVfXSY/s400/recetas+de+postres.JPG'
target='_blank'/> </div>
|
Realiza estos cambios:
He marcado de 4 diferentes colores en
las direcciones donde tendrás que borrarlos y poner los links correspondientes
de tus imágenes.
Eso es todo hemos terminado la configuración
de nuestro Editor HTML, ahora dale un clic en “Guardar plantilla”
Cuarto Paso
Dirigete a “Diseño”
Configuración del segundo Menu
desplegable
Abre un gadget “Añadir un gadget” y
busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de código
en su interior
<style>
#mbtnavbar
{
background: #3B5998;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav
{
margin: 0;
padding: 0;
}
#mbtnav
ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav
li {
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav
li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;
}
#mbtnav
li a:hover, #mbtnav li a:active {
background: #627AAD;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;
}
#mbtnav
li {
float: left;
padding: 0;
}
#mbtnav
li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav
li ul a {
width: 140px;
}
#mbtnav
li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav
li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav
li.sfhover ul ul ul {
left: -999em;
}
#mbtnav
li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav
li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav
li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav
li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px
solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#mbtnav
li li a:hover, #mbtnav li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
#mbtnav
li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px
solid #ddd;
margin: 1px 0 0 -14px;
}
#mbtnav
li li li a:hover, #mbtnav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
</style>
<div
id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a
href='/'>Inicio</a>
</li>
<li>
<a href='#'>Tips Cocina</a>
</li>
<li>
<a href='#'>Recetas de Cocina
▼</a>
<ul>
<li><a href='#'>Internacional</a></li>
<li><a
href='#'>Recetas</a></li>
<li><a href='#'>Tips</a></li>
</ul>
</li>
<li>
<a href='#'>Contactos</a>
</li>
</ul>
</div>
|
Realiza estos cambios:
Marque de color azul en los numerales #, los
cuales debes borrarlos y colocar ahí los links de las paginas que quieras
mostrar
Al igual borra las letras que están marcadas
de color rojo y remplázalos por las letras que tú quieras.
Ahora dale un clic en “Guardar” y ubica
tu segundo menú desplegable tal como lo muestro en la siguiente imagen.
Quinto Paso
Configuración del buscador
Abre un gadget “Añadir un gadget”, luego
busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas
<style
type="text/css">
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQaNWIOe-ukNZbPI7IBpvh0_ZjEBoN8ItrD7VtiFzYc-wInF6JDyqn0Jcm_xkZ7byPUZrGg2G0b2zd52oQ3wCHkH00FQTQP6tnhQYysnbRlwNMUu58GDk2vC6Qr4m3JQUBPGDy58Pb704G/)
no-repeat scroll center center
transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display:
block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform
#s{padding: 6px 6px 6px 26px;margin:0;width:
215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform
#sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:
top;border:none;background:transparent;}
</style>
<div
id="ayudadeblogger-searchbox">
<form
id="ayudadeblogger-searchform" action="/search"
method="get">
<input
type="text" id="s" name="q"
value=""/>
<input
type="image" src="http://img1.blogblog.com/img/blank.gif"
id="sbutton" />
</form>
</div>
|
Ahora dale un clic en “Guardar” y ubícalo
tal como te muestro en la siguiente imagen
Sexto Paso
Configuración de las Redes sociales
Aun en diseño debes abrir un gadget “Añadir
un gadget”, y busca el widget “HML/Javascript” e inserta las siguientes líneas de
código
<!--Botones
sociales Widget By Ayudadeblogger.com-->
<style>
#tbisose{list-style:none;
text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose
a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose
li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose
.facebook, .googleplus, .pinterest, .rss, .twitter{position:relative;
z-index:5; display:block; float:none; margin:10px 0 0; width:210px;
height:38px; border-radius:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7kvGP_PVb69Ggw_bfbU49CPe3I3EBXGkQTa7tFGQbBwGNv0BOLpcgg2865I_nzf5yELHcIhz6PmGtdZ4VUScylM2ldWqoc2g7Opfnl6yenXfWDbT1TpSoKA-YindY6JTTcyMno1oaK8g/s800/sprites.png)
no-repeat; background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28)
0 2px 3px; box-shadow:rgba(0,0,0,.28)
0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333
0 1px 0; white-space:nowrap;
line-height:32px; -webkit-transition:width .25s
ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s
ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s
ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s
ease-in-out,background-color .25s ease-in-out; transition:width .25s
ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28)
0 2px 3px;}
#tbisose
li:after{position:absolute; top:0; left:50px; z-index:2; display:block;
height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose
.icon{overflow:hidden; color:#fafafa;}
#tbisose
.facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42);
background-position:0 0;}
#tbisose
.twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42);
background-position:0 -33px;}
#tbisose
.googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;}
#tbisose
.pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42);
background-position:0 -95px;}
#tbisose
.rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;}
#tbisose
li:hover .icon,
.touch
#tbisose li .icon{width:210px;}
.touch
#tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch
#tbisose li .twitter, #tbisose li:hover
.twitter{background-color:rgba(64,153,255,1);}
.touch
#tbisose li .googleplus, #tbisose li:hover
.googleplus{background-color:rgba(228,69,36,1);}
.touch
#tbisose li .pinterest, #tbisose li:hover
.pinterest{background-color:rgba(174,45,39,1);}
.touch
#tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul
id="tbisose">
<li
data-alt="Sigueme en Facebook"><a class="icon
facebook"
href="http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017">Sigueme
en Facebook</a></li>
<li
data-alt="Sigueme en Twitter"><a class="icon
twitter" href="https://www.twitter.com/ayudadeblogger">Sigueme
en Twitter</a></li>
<li
data-alt="Sigueme en Google+"><a class="icon
googleplus"
href="https://plus.google.com/114283163993086871162">Sigueme en
Google+</a></li>
<li
data-alt="Sigueme en Pinterest"><a class="icon
pinterest" href="#">Sigueme en
Pinterest</a></li>
<li
data-alt="Suscribete a RSS"><a class="icon rss"
href="http://feeds.feedburner.com/ForoAyudaDeBlogger">Suscribete
a RSS</a></li>
</ul>
<!--Botones
sociales Widget By Ayudadeblogger.com-->
|
Eso es todo ahora dale un clic en “Guardar”
y ubícalo tal como te muestro en la imagen a continuación:
Ahora si es momento de celebrar, has
terminado con toda la configuración de tu nueva plantilla para blogger, fácil verdad!
Es hora de organizar tus antiguos widgets
que tenias, organízalos. A continuación les voy a dejar una imagen de cómo debería
estar organizado los widgets en su nueva plantilla
Términos y condiciones de Uso
Mis términos son claros, esta plantilla es gratis y no se permite su venta ni tampoco quitar los links del autor.
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo saber
y de inmediato les responderé.
Saludos.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
26 comentarios: