Tutoriales: Mostrar la cantidad de entradas y Como mostrar u ocultar los blogs

waa le queda super cool!

Hola mis loqueros!! Hoy hablaremos sobre  este tutorial! extrañaba hacer uno jajaja  aunque no es nada del otro mundo bueno!  aprovechando las pocas vacaciones que queda  espero que les gusten el vídeo  diganme su opinión  de que si esta bien o le falto!  NECESITO SUS OPINIONES PARA MEJORAR!!  jajaja ok no los asusto mas y nos vemos el sabado!

Gracias por tu visita!

Tutoriales: Multi-pestañas con efecto Jquery

Y asi son las pestañas =)

      

       Hola mis loqueros!! Hoy hablaremos sobre este tutorial que espero que les sea muy util y la verdad es que es muy sencillo se trata sobre unas pestañas en donde pueden colocarle cualquier cosa con tal de que tengan el codigo HTML ya con eso basta! Pueden ver el demo clic en el boton.

 

★ VIDEO TUTORIAL ★

ESCRITORIO►PLANTILLA►EDICIÓN DE HTML►CTRL F (PARA BUSCAR)

►Primero buscan a </head> y arriba de este pegas el siguiente codigo:

Script

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function(){<br />  var alltabs = $('div.tab');<br />  var tabs = $('#tabs');<br />  alltabs.first().show();<br />  tabs.find('li:first').addClass('on');<br />  tabs.find('a').on('click', function() {<br />    alltabs.hide()<br />    tabs.find('li').removeClass('on')<br />    $(this).parent().toggleClass('on')<br />    var tabref = $(this).attr('rel')<br />    $(tabref).fadeIn(500)<br />    this.blur()<br />    return false;<br />  })<br />})<br />//]]><br /></script>

►Segundo Ahora debes colocar el codigo para mostrar las pestañas, es decir, en algun gadget o en una entrada ( donde usted quiera que se vea )

HTML
 

<div class='tabber'>
  <ul id='tabs'>
    <li><a href='#' rel='div.tab2'> titulo 2 </a></li>
    <li><a href='#' rel='div.tab1'> titulo 1 </a></li>
  </ul>
  <div class='tab tab1'>
    
AQUI CUALQUIER COSA QUE QUIERA MOTRAR EN LA PESTAÑA 1

  </div>
  <div class='tab tab2'>

AQUI CUALQUIER COSA QUE QUIERA MOTRAR EN LA PESTAÑA 2

  </div>
</div>

►Y ahora elija el diseño de su caja. Solo copia y pega el codigo de una de las cajas (hechas por mi)  arriba de ]]></B:SKIN>

 

Pestañas de Miku

CSS
 

.tabber {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU1f2Q5fqSPyNlAZXRFVE-pxbVEK_sWz0VjbbYSXX96UW6ap94UEZyA_4EC45qxFZAxlxMd1jHiklxywnGFmcD81mdRrtsYrGloRRqhTuKzLakaGChrfJ5fM6eTevx7bUpuFZ0BfWsr3w/s1600/gif1.gif") no-repeat scroll 0 0 transparent;
    height: 530px;
    text-decoration: none;
}
#tabs {
    width: 100%;
}
#tabs li {
    border-radius: 10px 0 0 2px;
    float: right;
    height: 2em;
    margin-left: -120px;
    margin-right: 185px;
    margin-top: 210px;
    text-decoration: none;
}
#tabs li.on {
    color: #CCCCCC;
}
#tabs li a {
    color: #666666;
    font-family: Verdana;
    font-size: 18px;
    padding: 0 0 0 15px;
    text-decoration: none;
}
#tabs li.on a {
    color: #666600;
}
#tabs li a:hover {
    color: #333300;
}
#tabs li.on a:hover {
    color: #000000;
}
.tab {
    clear: both;
    display: none;
    font-size: 12px;
    height: 210px;
    margin-bottom: 50px;
    margin-left: 30px;
    overflow: auto;
    padding: 20px;
    width: 395px;
}

Pestañas de Magic

CSS
 

.tabber {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNtSGO_rKWrje6Xp_tWHDOcdBXEnttU-SaP4Z7VC3O465Jjlb749cCltJEW_zvyqMh5LWnVzOnIMvbgSUW55T7Mf4V1jZKq3XUHkVTmBlN6VWwl18WnD-eLtpvD9Of8IOIzg3K2kz1VPE/s1600/gagdet.png") no-repeat scroll 0 0 transparent;
    height: 540px;
    text-decoration: none;
    width: 300px;
}
#tabs {
    width: 100%;
}
#tabs li {
    border-radius: 10px 0 0 2px;
    float: right;
    height: 2em;
    margin-left: -125px;
    margin-right: 150px;
    margin-top: 190px;
    text-decoration: none;
}
#tabs li.on {
    color: #CCCCCC;
}
#tabs li a {
    color: #2E9AFE;
    font-family: Verdana;
    font-size: 18px;
    padding: 0 0 0 15px;
    text-decoration: none;
}
#tabs li.on a {
    color: #666600;
}
#tabs li a:hover {
    color: #333300;
}
#tabs li.on a:hover {
    color: #000000;
}
.tab {
    clear: both;
    display: none;
    font-size: 12px;
    height: 250px;
    margin-bottom: 50px;
    margin-left: 20px;
    margin-top: 10px;
    overflow: auto;
    padding: 10px 50px 50px;
    width: 160px;
}

Pestañas Luna

CSS
 

.tabber {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ7GikhgfkYo7GWSuWRR_G9pPHiUYZJ7icsF27W9-Zp4cvtZUl6AcH9lEx02HV_GkioM_Qcw3ld5bXkqueF9LxISbgdPRaXqlUKrSDKusWRVoLX7GghsLXLgN_HOFtDNPglFKJ7HGvIkc/s1600/luna.png") no-repeat scroll 0 0 transparent;
    height: 540px;
    text-decoration: none;
    width: 300px;
}
#tabs {
    width: 100%;
}
#tabs li {
    border-radius: 10px 0 0 2px;
    float: right;
    height: 2em;
    margin-left: -30px;
    margin-right: 100px;
    margin-top: 155px;
    text-decoration: none;
}
#tabs li.on {
    color: #CCCCCC;
}
#tabs li a {
    color: #B40404;
    font-family: Verdana;
    font-size: 18px;
    padding: 0 0 0 15px;
    text-decoration: none;
}
#tabs li.on a {
    color: #666600;
}
#tabs li a:hover {
    color: #333300;
}
#tabs li.on a:hover {
    color: #000000;
}
.tab {
    clear: both;
    display: none;
    font-size: 12px;
    height: 250px;
    margin-bottom: 50px;
    margin-left: 20px;
    margin-top: 10px;
    overflow: auto;
    padding: 10px 50px 50px;
    width: 160px;
}

Y listo esto es todo! GUARDAS y ya puedes ver los resultados =)

Gracias por tu visita!

Tutoriales: Modificar los títulos de las entradas

La verdad que este truco me pareció muy interesante :)

Hola mis queridos loqueros!! 

Hoy!! ¿como están?

yo aquí por fin con mi primer tutorial!!

espero que lo entiendan y les gusten... como verán empece hacer tutoriales

así que me pueden pedir su tutorial por la sección de CONTACTAME :)

        Vídeo Tutorial

         El truco trata de corregir el titulo de las entradas de su blog! es decir, digamos que su titulo pasa de 3 lineas en la entrada pero usted lo quiere en una sola linea para que no descuadre el orden o la visibilidad del blog o entrada! ( mas o menos me entiendo eso?) no? jajaja bien empecemos poco a poco haber.... 

Anteriormente mi titulo de la entrada se veía así!

Ahora se ve así!!

si quieres colocar este truco en tu blog entonces

Debemos estar en el escritorio de tu blog >> ir a plantilla >> clic en Editar HTML 

le das clic dentro (en donde están los códigos y le das CTRL + F)

• Primero debemos saber cual es el código que presenta el titulo de las entradas de su blog la gran mayoría utiliza este  .post h2  si el tuyo usa este código genial! sino entonces busca cual es el código ok ya con este código lo copias y pegas en la barra de búsqueda... una vez localizado solo debemos agregarle 3 códigos que son:

overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;

quedara así mas los otros códigos que tengas en ese código:

.post h2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

le dan clic en guardar y hasta hay ya lo tienen como se los mostré anteriormente

      Yo se que me van a preguntar!! que si al entrar a esa entrada el titulo se va a ver completo!! la verdad si se puede solo que aun no eh podido saber como se hace entonces ¿que hago? simplemente coloque en el :hover (que al pasar el cursor este me muestre el titulo completo) ... para hacer esto debemos buscar el siguiente código  .post h2 strong, .post h2 a:hover el cual quedara de esta forma:

.post h2 strong, .post h2 a:hover {

color: #5F04B4;

white-space: normal;

-webkit-animation-duration: 5s;

}

lo que esta en rojo es lo que deben de agregarle a ese código y ya 
con eso le dan clic en guardar y listo!! tendrán lo siguiente:

Alguna pregunta ... no dudes en preguntarlo!!!