Best Orange – Plantilla para blogger

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.

0
Shares

16 thoughts on “Best Orange – Plantilla para blogger

  • noviembre 8, 2013 en 5:37 pm
    Permalink

    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

    Responder
  • noviembre 8, 2013 en 7:18 pm
    Permalink

    Tal vez tengas duplicado el datapost:body

    Responder
  • noviembre 8, 2013 en 10:56 pm
    Permalink

    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.

    Responder
  • noviembre 9, 2013 en 4:27 am
    Permalink

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

    Responder
  • noviembre 9, 2013 en 7:49 pm
    Permalink

    Creo que te refieres al estilo css.

    Responder
  • noviembre 9, 2013 en 8:24 pm
    Permalink

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

    Responder
  • noviembre 9, 2013 en 9:02 pm
    Permalink

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

    Responder
  • noviembre 10, 2013 en 3:51 pm
    Permalink

    Excelente plantilla, me gusta.

    Responder
  • noviembre 11, 2013 en 12:52 am
    Permalink

    Gracias por compartirnos esta hermosa plantilla

    Responder
    • noviembre 20, 2013 en 5:08 pm
      Permalink

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

      Responder
  • enero 29, 2014 en 6:22 pm
    Permalink

    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!

    Responder
    • febrero 4, 2014 en 9:48 pm
      Permalink

      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

Deja un comentario

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