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

Slideshow

Dos menús desplegables

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'>&#9660;</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'>&#9660;</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

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Plantillas Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.