En estos días e estado trabajando en una nueva plantilla para blogger que hoy compartiré con ustedes llamada Best Orange
La plantilla es mayormente de color naranja, con iconos de redes sociales en la parte superior que giran al pasar el cursor, un menú desplegable arriba de las entradas, también incluye el leer más automático en todas las entradas y otras características que la hacen única.

Para modificar los enlaces de los iconos sociales arriba del blog busca en la Edición HTML esto:

<div class=’social-icons’ id=’social-iconos’>
<ul>
<li class=’social_icon’><a href=’#facebook‘><img border=’0’ src=’http://lh3.googleusercontent.com/-9RgnEDN1jFc/UKK9O1S1TPI/AAAAAAAADSk/KOIvtDu-oSM/s36/social-facebook.png’/></a></li>
<li class=’social_icon’><a href=’#twitter‘><img border=’0’ src=’http://lh4.googleusercontent.com/-KtqAlZRCokQ/UKK9PbLsnSI/AAAAAAAADSg/njBnVDn3O9I/s36/social-twitter.png’/></a></li>
<li class=’social_icon’><a href=’#googleplus‘><img border=’0’ src=’http://lh4.googleusercontent.com/-4PWKT-fgHJ8/UKK9O7mGEPI/AAAAAAAADSY/ENZ0BHmO6TY/s36/social-googleplus.png’/></a></li>
<li class=’social_icon’><a href=’#rss‘><img border=’0’ src=’http://lh5.googleusercontent.com/-6hu6NkWouSw/UKK9PIQCrHI/AAAAAAAADSc/5QI5O-H7EYs/s36/social-rss.png’/></a></li>
<li class=’social_icon’><a href=’#youtube‘><img border=’0’ src=’https://lh5.googleusercontent.com/-l-dUM9Ftfx0/UnwyCShDfrI/AAAAAAAACcs/98_EhX55hsI/s1600/social-youtube.png’/></a></li>
<li class=’social_icon’><a href=’#ask‘><img border=’0’ src=’https://lh4.googleusercontent.com/-KUsf7rnBv6o/UnwzJSZugcI/AAAAAAAACc0/AwKQIuSkLAI/s1600/social-ask.png’/></a></li>
<li class=’social_icon’><a href=’#blogger‘><img border=’0’ src=’https://lh6.googleusercontent.com/-GqN0pxxiwB4/UnwzyhrblJI/AAAAAAAACc8/jIn1hOCSMzw/s1600/social-blogger.png’/></a></li>
<li class=’social_icon’><a href=’#pinterest‘><img border=’0’ src=’https://lh5.googleusercontent.com/-_RfK_R561Ms/Unw0jmCGr8I/AAAAAAAACdQ/BEUO8bDIGvE/s1600/social-pinterest.png’/></a></li>
<li class=’social_icon’><a href=’#instagram‘><img border=’0’ src=’https://lh4.googleusercontent.com/-oSl2vipEUaU/Unw0iASbUBI/AAAAAAAACdI/YE7xCIlD5sc/s1600/social-instagram.png’/></a></li>
</ul></div>

Solo reemplaza lo que está en rojo por la URL que indica. Si quieres agregar más iconos, solo agrega arriba del </ul></div> una linea como esta:

<li class=’social_icon’><a href=’URL del enlace‘><img border=’0′ src=’URL de la imagen‘/></a></li>


Para modificar el menú horizontal arriba de las entradas busca esta parte:

<div id=’menuWrapper’>
<ul class=’menu’>
<li class=’top’><a class=’top_link’ href=’URL del enlace‘><span>Pestaña 1</span></a></li>
<li class=’top’><a class=’top_link’ href=’#’><span class=’down’>Pestaña 2</span></a><ul class=’sub’><li><a class=’fly’ href=’#’>Pestaña 2.1</a><ul>
<li><a href=’URL del enlace‘>Pestaña 2.1.1</a></li>
<li><a href=’URL del enlace‘>Pestaña 2.1.2</a></li>
<li><a href=’URL del enlace‘>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class=’mid’><a class=’fly’ href=’#’>Pestaña 2.2</a>
<ul>
<li><a href=’URL del enlace‘>Pestaña 2.2.1</a></li>
<li><a href=’URL del enlace‘>Pestaña 2.2.2</a></li>
<li><a href=’URL del enlace‘>Pestaña 2.2.3</a></li>
<li><a class=’fly’ href=’#’>Pestaña 2.2.4</a>
<ul>
<li><a href=’URL del enlace‘>Pestaña 2.2.4.1</a></li>
<li><a href=’URL del enlace‘>Pestaña 2.2.4.2</a></li>
<li><a href=’URL del enlace‘>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href=’URL del enlace‘>Pestaña 2.2.5</a></li>
<li><a class=’fly’ href=’#’>Pestaña 2.2.6</a>
<ul>
<li><a href=’URL del enlace‘>Pestaña 2.2.6.1</a></li>
<li><a href=’URL del enlace‘>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=’URL del enlace‘>Pestaña 2.3</a></li>
<li><a href=’URL del enlace‘>Pestaña 2.4</a></li>
<li><a href=’URL del enlace‘>Pestaña 2.5</a></li>
</ul>
</li>
<li class=’top’><a class=’top_link’ href=’#’><span class=’down’>Pestaña 3</span></a>
<ul class=’sub’>
<li><a href=’URL del enlace‘>Pestaña 3.1</a></li>
<li><a href=’URL del enlace‘>Pestaña 3.2</a></li>
<li><a href=’URL del enlace‘>Pestaña 3.3</a></li>
<li><a href=’URL del enlace‘>Pestaña 3.4</a></li>
</ul>
</li>
<li class=’top’><a class=’top_link’ href=’#’><span class=’down’>Pestaña 4</span></a>
<ul class=’sub’>
<li><a href=’URL del enlace‘>Pestaña 4.1</a></li>
<li><a class=’fly’ href=’#’>Pestaña 4.2</a>
<ul>
<li><a href=’URL del enlace‘>Pestaña 4.2.1</a></li>
<li><a href=’URL del enlace‘>Pestaña 4.2.2</a></li>
<li><a href=’URL del enlace‘>Pestaña 4.2.3</a></li>
<li><a href=’URL del enlace‘>Pestaña 4.2.4</a></li>
<li><a href=’URL del enlace‘>Pestaña 4.2.5</a></li>
<li><a href=’URL del enlace‘>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href=’URL del enlace‘>Pestaña 4.3</a></li>
<li><a href=’URL del enlace‘>Pestaña 4.4</a></li>
<li><a href=’URL del enlace‘>Pestaña 4.5</a></li>
<li><a href=’URL del enlace‘>Pestaña 4.6</a></li>
</ul>
</li>
<li class=’top’><a class=’top_link’ href=’#’><span class=’down’>Pestaña 5</span></a>
<ul class=’sub’>
<li><a href=’URL del enlace‘>Pestaña 5.1</a></li>
<li><a href=’URL del enlace‘>Pestaña 5.2</a></li>
<li><a href=’URL del enlace‘>Pestaña 5.3</a></li>
</ul>
</li>
</ul>
</div>

Solo te queda modificar lo que dice URL del enlace.

Para cambiar la imagen de Read more en las entradas de leer más automático, busca esto:

<div id=’readmore’><img src=’http://4.bp.blogspot.com/-jbTFn7gyBpM/UnrgBI8oKII/AAAAAAAACcA/P65r_D8BRM8/s1600/READ+MORE.png‘/></div>

Y reemplázalo lo que está en rojo por la URL de la imagen que quieres, solo recuerda que tienes que reemplazarlo 3 veces, puesto a que hay 3 de ellos. Si lo que quieres es cambiarlo por un texto (Leer más) borra del <img… hasta …</div> (x3), y reemplázalo por el texto que desees.

Recuerda que esta plantilla esta hecha a base de una del diseñador de plantillas, así que podrás modificar algunas características en el Editor de plantillas.

Categorías: Plantillas

16 comentarios

Elclasico Sport · noviembre 8, 2013 a las 5:37 pm

dicurpa hermano no se mucho de esto de platilla pero en esto dias es hecho canbia con mi platilla y aora en mi blogger me aparesen dos entrada cuando publico una entra aprese en la dos entrada qu tiene el blogger algien que me ayude

Juvinao · noviembre 8, 2013 a las 7:18 pm

Tal vez tengas duplicado el datapost:body

Jonathan LR · noviembre 8, 2013 a las 10:56 pm

Estoy de acuerdo con lo que dice Juvinao, esos errores se presentan cuando haz cambiado mucho la plantilla de tu blog, la solución es que borres los datapost:body que sobran.

Eh no · noviembre 9, 2013 a las 4:27 am

Cuáles son las etiquetas que añadiste? La principal que veo es el blockquote, cuáles más? o.o

Jonathan LR · noviembre 9, 2013 a las 2:07 pm

Al referirte «etiquetas» estas hablando de las categorías.

Juvinao · noviembre 9, 2013 a las 7:49 pm

Creo que te refieres al estilo css.

Eh no · noviembre 9, 2013 a las 8:24 pm

Nada, olvidalo, ya ví, gracias aún así.

Afasfa · noviembre 9, 2013 a las 9:02 pm

Muy bonito, aunque me gustaría que hicieses un Chat HTML para blogger q.q

Jonathan LR · noviembre 10, 2013 a las 12:04 am

entra http://www.xat.com/

Kicksilver · noviembre 10, 2013 a las 3:51 pm

Excelente plantilla, me gusta.

Jonathan LR · noviembre 10, 2013 a las 4:29 pm

Que bueno que te guste Kicksilver

Joel · noviembre 11, 2013 a las 12:52 am

Gracias por compartirnos esta hermosa plantilla

Roberto García · noviembre 18, 2013 a las 1:42 pm

Como puedo cambiar el color del menú horizontal de pestañas? Gracias. Un saludo.

    Jonathan LR · noviembre 20, 2013 a las 5:08 pm

    Busca: background:#FF8000; /* Color de fondo */, y cambia #FF8000 por el codigo del color que quieras ponerlo. (o)

Ana Bueno · enero 29, 2014 a las 6:22 pm

Hola. Voy a instalar esta plantilla en mi blog, pero necesito que el menú horizontal permita más pestañas. Ahora mismo sólo permite la longitud que tiene, sin meterse en la columna lateral. ¿Es posible cambiarlo y que ocupe todo el ancho del blog? Y que la barra lateral empiece justo debajo. Muchas gracias!

    Jonathan LR · febrero 4, 2014 a las 9:48 pm

    Hola Ana un gusto saludarte, bueno…
    Para cambiar el ancho del menú deberás buscar el código #menuWrapper { en los estilos css (si no lo encuentras vuelve a intentarlo borrando el espacio), más abajo podrás encontrar el valor width: 70%;, sustitúyelo por width: 100%;, con eso será suficiente para lograr tu objetivo.

    Un saludo :>)

Responder a Roberto García Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *