Mini Dosis

Para los que saben de SEO, saben que el NoFollow es una herramienta muy importante.
Desde el comienzo de los tiempos del SEO, Google impuso una regla, el Page Rank o PA. Esta es una escala del 0 al 10 donde 0 es lo peor y 10 lo maximo (de momento no existe web que llegue a PA 10, Google mismo tiene PA 7) y sirve para establacer la calidad de la pagina. Esta estadistica se basa en los enlaces entrantes de otras paginas a nuestro sitio, y con los ultimos cambios del algoritmo en estos años, valen mas enlaces 2 entrantes de PA alto, que 1000 enlaces de PA 0.
Pero no solo influye eso, si no los enlaces salientes de nuestra pagina. En cuanto ponemos un enlace saliente de nuestra pagina a otra pagina, le estamos otorgando parte de nuestro PA, y eso en un foro, es un suicidio posicional.
Para evitar esos enlaces con fuga de Page Rank, se crearon dos tipos de enlaces (ademas del natural):
rel="nofollow"

Estos enlaces estan marcados para que NO sean seguidos por el rastreador de Google.
rel="dofollow"

Estos enlaces estan marcados para que SI sean seguidos por el rastreador de Google.
Lo que hara este pluglin, es hacer esto automaticamente. Buscando por internet encontre el pluglin (gracias a Ados del foro principal de MyBB), y la modificacion, es obra propia.
Paso 1: Modificacion
Esto es muy facil, nos vamos a la carpeta /inc/ de nuestro FTP, y buscamos el archivo class_parser.php, buscamos esto:

$link = "$name";

Y lo sustituimos por:

$link = "$name";

Ahora TODOS los enlaces, seran nofollow.
Paso 2: Plugin
Este plugin hara que los enlaces INTERNOS de nuestro foro (que conduzcan solo otra vez a nuestro foro) no tengan el rel="nofollow".
Facil, se sube a la carpeta /inc/plugins y se activa.

Leeme

La gente lo esta flipando ultimamente con los scripts que salen para los foros que se crean gracias a foroactivo.

Habra algunos que tambien adaptan scripts para su propio uso en algun foro, pero no lo publican, y yo soy de esos. Pero supongo que tengo tiempo para escribir este mini tutorial para utilizar todos los chats que puedas poner en foroactivo con el plus de que sea desplegable.

No voy a enseñar a poner un chat, si no la forma de hacerlo para poner cualquier chat.

El tutorial de donde saco los codigos y los "adapto" es este: Asistencia.Foroactivo.com

El uso que hace es crear un iframe flotante que se abre al hacer click en la imagen tambien flotante.
Asi que basicamente, lo que vamos a hacer es poner el script de alguna pagina como xat.com, 99chats.com, chatango.com (en este la explicacion requerira ademas una cuenta de blogger) y demas en un pagina html, y luego configurar el script para que en vez de recoger la pagina del chatbox, recoja la de tu nuevo chat.

Lo primero, sera crear la cuenta correspondiente del chat que queramos usar.

Luego, si vamos a utilizar cualquier sistema (chatango mas abajo), nos vamos a nuestro foro, e inciamos sesion en el Panel de Administracion.

Una vez alli, nos vamos a la pestaña "Modulos", y en la misma, en el recuadro "

HTML & JAVASCRIPT", entramos en "Gestion de las paginas HTML".

Cuando estemos dentro, hacemos click en crear una pagina nueva en modo avanzado HTML.

Alli, incluyes el codigo del chat que se te proporciono. Repito, Chatango mas abajo, no se porque no lo acepta Foroactivo, pero con un par de trucos se puede.

Cuando este, lo guardamos y nos volvemos a la gestion de paginas HTML, para copiar el enlace.

En realidad, lo que necesitamos del enlace, es solo la parte despues del primer /. Por poner un ejemplo:

http://foro.foroactivo.com/h1-xat

La parte en verde es la necesaria para el proceso.

Ahora, nos vamos a la gestion de codigos javascript, para crear el nuestro personalizado:


//Inicio variables a editar por el usuario
var imagen_chatbox_desplegable = "http://i45.servimg.com/u/f45/17/45/19/77/chat10.png";
var posicion_chatbox_desplegable = "derecha"; //Admite también 'izquierda'
//Fin variables a editar por el usuario

        document.write("<div id=\"chatbox_ret_cont\" class=\"chatbox_" + posicion_chatbox_desplegable + "\">");
        document.write("    <div onclick=\"(document.getElementById('chatbox_ret').style.display=='block')?my_setcookie('chatbox_ret','0',0,0):my_setcookie('chatbox_ret','1',1,0); jQuery('#chatbox_ret').toggle('normal');\">");
        document.write("        <span id=\"chatbox_ret_online\">");
        document.write("            <img title=\"Abrir o cerrar el Chat\" src=\"" + imagen_chatbox_desplegable + "\">");
        document.write("        <\/span>");
        document.write("        <span id=\"chatbox_ret_offline\"><\/span>");
        document.write("    <\/div>");
        document.write("    <iframe src=\"\/chatbox\" id=\"chatbox_ret\" name=\"chatbox_ret\" ");
        document.write("       scrolling=\"no\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"1px\"");
        document.write("       onload=\"if(cb_new){cb_start();cb_new=0;}\">");
        document.write("    <\/iframe>");
        document.write("<\/div>");

¿Veis la palabra "chatbox" que he coloreado de rojo? Eso lo tendras que sustituir por lo que copiaste antes. Unicamente eso.

Y voila. Ya tendreis ese chat en forma desplegable. Ojo, lo mas probable es que no te quede ajustado porque el codigo usado en el tutorial del foro da un CSS con un alto y ancho predeterminado, pero puedes cambiarlo asi:

      #chatbox_ret_cont{
         x-index: 10000;
         z-index: 10000;
         background-color: transparent;
         position: fixed;
         bottom: 0;
        }
        #chatbox_ret_cont.chatbox_derecha{
          right: 0;
        }
        #chatbox_ret_cont.chatbox_izquierda{
          left: 0;
        }
        #chatbox_ret_cont div{
          cursor: pointer;
        }
        #chatbox_ret_cont iframe#chatbox_ret{
          background-color: white;
          border: 2px solid grey;
          display: none;
          height: 450px; /* AQUI CAMBIA EL ALTO */
          margin-bottom: 0;
          width: 900px; /* AQUI CAMBIA EL ANCHO */
        }

Y listo, cambialo a tu gusto para ajustarlo.

Para poner un chat de Chatango desplegable en Foroactivo, lo primero sera crear el chat, y cuando tengas el codigo, copialo.

Lo siguiente, entra en www.blogger.com, create una cuenta o si ya la tienes, crea un blog, solo servira para esto.

Una vez lo tengas creado, te vas a la seccion "Plantilla", y haciendo click en "Editar HTML" haces uso de tu raton o de Ctrl+A para seleccionar todo el codigo que se te muestra para borrarlo.

Una vez borrado, metes este:


<!DOCTYPE html>
<html>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
      -----------------------------------------------
       Plantilla en blanco
      ----------------------------------------------- */ 
      body {margin: 0;} /* Deja el documento sin márgenes */  
      #navbar {display: none;} /* Oculta la navbar */      
    ]]></b:skin>
  </head>

  <body>
    <b:section id='main' showaddelement='yes' />  
  </body>
</html>

Y haces uso de "Guardar Plantilla".

Una vez esta guardado, te vas a la pestaña "Diseño", y alli veras una unica seccion para añadir Gadgets. Añades uno "HTML/Javascript", sin titulo, y dentro pones el codigo de chatango. Lo guardas, y listo.

Y ahora volvemos un poco mas arriba, para seguir el tutorial normal, pero en vez de añadir el codigo del chat, añadimos este:


<iframe style="width: 100%; height: 100%;" name="Iframe" src="URL DEL BLOG" frameborder="0" scrolling="no"></iframe>

Y alli donde pone URL DEL BLOG en color rojo, lo sustituyes. Pegas ese codigo, y haces lo mismo de copiar la parte despues del "/" y ponerlo en el script, como se explica arriba para los xats normales.

A mi personalmente no me gustan estos chats porque una vez se vuelve a cerrar, es como si se reiniciara la pagina, pero oiga, para gustos, colores, mientras foroactivo no ponga sonido en los chats, ahi nos quedan estos trucos.

Tutorial probado en: PunBB, pero funcionando en todos.

Si tienes alguna duda: COMENTAMELA, podria ayudarte asi.

Ala, a disfrutar.

Leeme

Hace un tiempecillo se publico un post en el foro oficial de prestashop que existia un menu mucho mas atractivo que el que viene de serie (cualquiera es mas atractivo que eso), con muchisimas opciones y una configuracion 100% personalizable, y el nombre original del creador es Kick-Butt CSS3 Mega Drop-Down Menu (ahi esta el codigo que si necesitas, pero como la gente es muuuuy vaga, tambien lo dejare por aqui).

Aclaro que si has llegado hasta aqui, sabes un minimo de HTML, que es lo que necesitas para configurar el menu como tu quieres. Incluso puedes mejorarlo un poco con CSS, pero aqui lo que te ayudo es a instalarlo, porque el usuario dejo alli el codigo base, pero no como instalarlo, lo deja todo a la imaginacion. O era por fardar de menu.

Bien, uno de los problemas al instalarlo, era que el menu quedaba por debajo de los otros objetos de la pagina, asi que tranquilos, con este truco se soluciona tambien (sin tocar el z-index).

Bueno, el truco es muuuy facil. Hace tiempo os contaba como instalar el menu Prestalove Easy Menu, mucho mas configurable que el que viene de serie, pues bien, instalar ese, es casi el 90% de este truco.

Lo primero sera meter este codigo que te traigo al final del global.css (la ruta es: /themes/tu-plantilla/css/global.css) de tu tienda prestashop:


    #menu {  
        list-style:none;  
        width:940px;  
        margin:30px auto 0px auto;  
        height:43px;  
        padding:0px 20px 0px 20px;  
      
        /* Rounded Corners */  
          
        -moz-border-radius: 10px;  
        -webkit-border-radius: 10px;  
        border-radius: 10px;  
      
        /* Background color and gradients */  
          
        background: #014464;  
        background: -moz-linear-gradient(top, #0272a7, #013953);  
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));  
          
        /* Borders */  
          
        border: 1px solid #002232;  
      
        -moz-box-shadow:inset 0px 0px 1px #edf9ff;  
        -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
        box-shadow:inset 0px 0px 1px #edf9ff;  
    }  
      
    #menu li {  
        float:left;  
        display:block;  
        text-align:center;  
        position:relative;  
        padding: 4px 10px 4px 10px;  
        margin-right:30px;  
        margin-top:7px;  
        border:none;  
    }  
      
    #menu li:hover {  
        border: 1px solid #777777;  
        padding: 4px 9px 4px 9px;  
          
        /* Background color and gradients */  
          
        background: #F4F4F4;  
        background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));  
          
        /* Rounded corners */  
          
        -moz-border-radius: 5px 5px 0px 0px;  
        -webkit-border-radius: 5px 5px 0px 0px;  
        border-radius: 5px 5px 0px 0px;  
    }  
      
    #menu li a {  
        font-family:Arial, Helvetica, sans-serif;  
        font-size:14px;   
        color: #EEEEEE;  
        display:block;  
        outline:0;  
        text-decoration:none;  
        text-shadow: 1px 1px 1px #000;  
    }  
      
    #menu li:hover a {  
        color:#161616;  
        text-shadow: 1px 1px 1px #FFFFFF;  
    }  
    #menu li .drop {  
        padding-right:21px;  
        background:url("img/drop.png") no-repeat rightright 8px;  
    }  
    #menu li:hover .drop {  
        background:url("img/drop.png") no-repeat rightright 7px;  
    }

Esto es lo que le da el estilo, los colores y todo eso.
Lo siguiente sera implementar el codigo, es mas facil de lo que parece.

Entrais en la ruta:

/public_html/modules/prestaloveeasymenu

Y cogeis el archivo prestaloveeasymenu.tpl para editarlo.
Alli dentro del codigo, sustituis el:

{$MENU}

que encontrareis, por el HTML del menu ya maquetado, o sin maquetar para ir probando:


<ul id="menu">  
      
    <li><a href="#" class="drop">Home</a><!-- Begin Home Item -->  
      
        <div class="dropdown_2columns"><!-- Begin 2 columns container -->  
      
            <div class="col_2">  
                <h2>Welcome !</h2>  
            </div>  
      
            <div class="col_2">  
                <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>               
                <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>               
            </div>  
      
            <div class="col_2">  
                <h2>Cross Browser Support</h2>  
            </div>  
              
            <div class="col_1">  
                <img src="img/browsers.png" width="125" height="48" alt="" />  
            </div>  
              
            <div class="col_1">  
                <p>This mega menu has been tested in all major browsers.</p>  
            </div>  
            
        </div><!-- End 2 columns container -->  
      
    </li><!-- End Home Item -->  
  
    <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->  
      
        <div class="dropdown_5columns"><!-- Begin 5 columns container -->  
          
            <div class="col_5">  
                <h2>This is an example of a large container with 5 columns</h2>  
            </div>  
              
            <div class="col_1">  
                <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>  
            </div>  
              
            <div class="col_1">  
                <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>  
            </div>  
              
            <div class="col_1">  
                <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>  
            </div>  
              
            <div class="col_1">  
                <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>  
            </div>  
              
            <div class="col_1">  
                <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>  
            </div>  
          
            <div class="col_5">  
                <h2>Here is some content with side images</h2>  
            </div>  
             
            <div class="col_3">  
              
                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />  
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>  
          
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />  
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>  
              
            </div>  
              
            <div class="col_2">  
              
                <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>  
              
            </div>  
          
        </div><!-- End 5 columns container -->  
      
    </li><!-- End 5 columns Item -->  
  
    <li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->  
      
        <div class="dropdown_4columns"><!-- Begin 4 columns container -->  
          
            <div class="col_4">  
                <h2>This is a heading title</h2>  
            </div>  
              
            <div class="col_1">  
              
                <h3>Some Links</h3>  
                <ul>  
                    <li><a href="#">ThemeForest</a></li>  
                    <li><a href="#">GraphicRiver</a></li>  
                    <li><a href="#">ActiveDen</a></li>  
                    <li><a href="#">VideoHive</a></li>  
                    <li><a href="#">3DOcean</a></li>  
                </ul>     
                   
            </div>  
      
            <div class="col_1">  
              
                <h3>Useful Links</h3>  
                <ul>  
                    <li><a href="#">NetTuts</a></li>  
                    <li><a href="#">VectorTuts</a></li>  
                    <li><a href="#">PsdTuts</a></li>  
                    <li><a href="#">PhotoTuts</a></li>  
                    <li><a href="#">ActiveTuts</a></li>  
                </ul>     
                   
            </div>  
      
            <div class="col_1">  
              
                <h3>Other Stuff</h3>  
                <ul>  
                    <li><a href="#">FreelanceSwitch</a></li>  
                    <li><a href="#">Creattica</a></li>  
                    <li><a href="#">WorkAwesome</a></li>  
                    <li><a href="#">Mac Apps</a></li>  
                    <li><a href="#">Web Apps</a></li>  
                </ul>     
                   
            </div>  
      
            <div class="col_1">  
              
                <h3>Misc</h3>  
                <ul>  
                    <li><a href="#">Design</a></li>  
                    <li><a href="#">Logo</a></li>  
                    <li><a href="#">Flash</a></li>  
                    <li><a href="#">Illustration</a></li>  
                    <li><a href="#">More...</a></li>  
                </ul>     
                   
            </div>  
              
        </div><!-- End 4 columns container -->  
      
    </li><!-- End 4 columns Item -->  
  
    <li class="menu_right"><a href="#" class="drop">1 Column</a>  
      
        <div class="dropdown_1column align_right">  
          
                <div class="col_1">  
                  
                    <ul class="simple">  
                        <li><a href="#">FreelanceSwitch</a></li>  
                        <li><a href="#">Creattica</a></li>  
                        <li><a href="#">WorkAwesome</a></li>  
                        <li><a href="#">Mac Apps</a></li>  
                        <li><a href="#">Web Apps</a></li>  
                        <li><a href="#">NetTuts</a></li>  
                        <li><a href="#">VectorTuts</a></li>  
                        <li><a href="#">PsdTuts</a></li>  
                        <li><a href="#">PhotoTuts</a></li>  
                        <li><a href="#">ActiveTuts</a></li>  
                        <li><a href="#">Design</a></li>  
                        <li><a href="#">Logo</a></li>  
                        <li><a href="#">Flash</a></li>  
                        <li><a href="#">Illustration</a></li>  
                        <li><a href="#">More...</a></li>  
                    </ul>     
                       
                </div>  
                  
        </div>  
          
    </li>  
  
    <li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->  
      
        <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->  
              
            <div class="col_3">  
                <h2>Lists in Boxes</h2>  
            </div>  
              
            <div class="col_1">  
      
                <ul class="greybox">  
                    <li><a href="#">FreelanceSwitch</a></li>  
                    <li><a href="#">Creattica</a></li>  
                    <li><a href="#">WorkAwesome</a></li>  
                    <li><a href="#">Mac Apps</a></li>  
                    <li><a href="#">Web Apps</a></li>  
                </ul>     
      
            </div>  
              
            <div class="col_1">  
      
                <ul class="greybox">  
                    <li><a href="#">ThemeForest</a></li>  
                    <li><a href="#">GraphicRiver</a></li>  
                    <li><a href="#">ActiveDen</a></li>  
                    <li><a href="#">VideoHive</a></li>  
                    <li><a href="#">3DOcean</a></li>  
                </ul>     
      
            </div>  
              
            <div class="col_1">  
      
                <ul class="greybox">  
                    <li><a href="#">Design</a></li>  
                    <li><a href="#">Logo</a></li>  
                    <li><a href="#">Flash</a></li>  
                    <li><a href="#">Illustration</a></li>  
                    <li><a href="#">More...</a></li>  
                </ul>     
      
            </div>  
              
            <div class="col_3">  
                <h2>Here are some image examples</h2>  
            </div>  
              
            <div class="col_3">  
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />  
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>  
      
                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />  
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>  
            </div>  
          
        </div><!-- End 3 columns container -->  
          
    </li><!-- End 3 columns Item -->  
</ul>

Y ya. Facil, sencillo y para toda la familia. Ojo que ya no tendras problemas de z-index, por en parte el css de prestaloveeasymenu.

Ala, si tienes alguna duda, a los comentarios.
Y para agredecer, tambien.

Leeme

Lo que ha triunfado esta semana

Quiza te interese algo de:

Mini Dosis

Mini Dosis de Informacion. No busques nada en especial en este blog, solo tengo un poco de todo.

NoFollow a todo lo externo en MyBB

Como adaptar el script del Chat Despleglable de ForoActivo

Como instalar Mega Menu en Prestashop