Búscanos y Siguenos en:

Mostrando entradas con la etiqueta Template. Mostrar todas las entradas

Mostrando entradas con la etiqueta Template. Mostrar todas las entradas
Mostrando entradas con la etiqueta Template. Mostrar todas las entradas
Fecha
4/10/11
Hora
15:10:00
0
Comm
by
daras

Como poner el widged de raciones en nuestra plantilla de blogger.
{[['', '']]}

Para que  aparezca el widged de reaciones en cada post o entrada en blogger solo tenéis que seguir los siguientes pasos:
  1. Tenéis que entrar en blogger con vuestra cuenta y a continuación, ir al código de la plantilla y expandir los artilugios.
    Home → Diseño → Edición de HTML → Expandir plantillas de artilugios
  2. Tenéis que buscar la siguientes entrada dentro de vuestra plantilla:
    • class='post-footer-line post-footer-line-1'
    • class='post-footer-line post-footer-line-2' suele contener la lista de etiquetas.
    • class='post-footer-line post-footer-line-3' muchas veces no tiene uso.
    Una vez que ya las tenemos localizadas pondremos el siguiente codigo dentro de una de ellas o si  lo prefieren pueden crear una entrada nueva con el mismo testo solo que canbiando el numero.

    <div class='reaction-buttons'>
    <b:if cond='data:top.showReactions'>
      <table border='0' cellpadding='0' width='100%'><tr>
      <td nowrap='nowrap' valign='center' width='1%'>
        <span class='reactions-label'><data:top.reactionsLabel/></span>
      </td>
      <td>
        <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no' textColor='#fff'/>
      </td>
      </tr></table>
    </b:if>
  </div>

    Aunque el estilo de este script es poco modificable, algunas de ellas podemos modificarlas si agregamos las los siguienetes estilos ccs en la plantilla, justo antes de </b:skin>:

    .reaction-buttons {
  /* es el área donde se muestra */
}

/* como todo esta una tabla, estas on las posibles definiciones */
.reaction-buttons table { ... }
.reaction-buttons table td { ... }

.reactions-label { /* el texto Reacciones */
  margin:3px 0 0; /* es la propiedad por defecto */
}
.reactions-iframe { /* es el iframe */
  /* tiene alguna propiedades por defecto  */
  background: transparent none repeat scroll 0 0;
  border: 0 none;
  height: 2.3em;
  width: 100%;
}

    Una vez que ya temos todo hecho solo tenemos que ir a:

    Home → Diseño →Elementos de la página →

    Una vez hay vamos al widged de Entradas del blog y le damos a editar y marcamos la casilla que pone reaciones.
    read more

    Etiquetas: , , , , , ,
    Fecha
    29/7/11
    Hora
    13:06:00
    0
    Comm
    by
    daras

    Como cambia el color de las estrellas de calificacion con js-kit-rating
    {[['', '']]}

    Buenas como ya puse en un post anterior como poner a hora os voy a eplicar como cambiar el color de la puntuación de las estrellas.

    • "userColor" : cambia el color del la calificación del usario. 
    • "starColor" : affecta el color de la calificación de la comunidad.

    <div class='js-kit-rating' userColor='Violet' starColor='Golden' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>

    A continuación os dejo la leyenda de colores para cambiar el color de las estrellas, lo único que tenéis que hacer es sustituirlo en el código anterior.

                            starColor="Ruby"                userColor="Ruby"  

                            starColor="Red"                  userColor="Red"              

                            starColor="Golden"             userColor="Golden"       

                            starColor="Green"              userColor="Green"
                                 
                            starColor="Emerald"          userColor="Emerald"
     
                            starColor="Blue"                userColor="Blue"

                            starColor="Indigo"             userColor="Indigo"

                            starColor="Violet"              starColor="Ruby"

    read more

    Etiquetas: , , , , ,
    Fecha
    14/7/11
    Hora
    17:08:00
    0
    Comm
    by
    daras

    Agregar boton +1 de google a tu sitio ,blog
    {[['', '']]}



    Para poner el botón es muy fácil solo tenéis que poner el siguiente codigo justo antes </head> en el template:


    <script type=“text/javascript” src=“http://apis.google.com/js/plusone.js”></script>

    y luego ponemos el siguiente código donde queramos que aparezca el botón en nuestra pagina o blog:


    <g:plusone></g:plusone>
     
     
    • entremedias de estas dos etiquetas tenemos que poner la url de nuestro blog o web y deberia de quedaros algo como esto
     <g:plusone href="http://videodarasgamen-v2.blogspot.com/"></g:plusone>

    Sitio web | Botón +1 Google
    read more

    Etiquetas: , , , , ,
    Fecha
    Hora
    13:36:00
    3
    Comm
    by
    daras

    Como agregar paginación a blogger
    {[['', '']]}

    Asta ahora en blogger la única forma que había  de avanzar para ver los demás post era para:Avanzar (Newer Post) o Retroceder (Older Post); pero con el siguiente script podemos avanzar y retroceder por las distintas paginas como se ve en la siguiente foto.

    Lo único que tienes que hacer es copiar el siguiente código y tenemos buscar lo siguiente fragmento </body> y lo pegamos el codigo justo antes de este fragmento </body>.
    
<script type='text/javascript'>
var pageCount=10;
var displayPageNum=8;
var upPageWord =&#39;&#171;&#39;
var downPageWord ='Siguiente>>';
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='Anterior';var downPageHtml='Siguiente';htmlMap[htmlMap.length]='/';postNum++;for(var i=pageCount-1,post;post=json.feed.entry[i];i=i+pageCount){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}var banyaknomer=htmlMap.length;if(json.feed.entry.length%pageCount==0){var banyaknomer=htmlMap.length-1;postNum=postNum-1};for(var p=0;p<banyaknomer;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span class="showpageOf"> Page '+thisNum+' of '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;htmlMap[htmlMap.length]=labelHtml;postNum++;for(var i=pageCount-1,post;post=json.feed.entry[i];i=i+pageCount){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;itemCount++}var banyaknomer=htmlMap.length;if(json.feed.entry.length%pageCount==0){var banyaknomer=htmlMap.length-1;postNum=postNum-1};for(var p=0;p<banyaknomer;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span class="showpageOf"> Page '+thisNum+' of '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]></script>

    • var pageCount=esto se escarga de determinar el numero de post o entradas que se muestran en cada pagina, pon con un numero decimal exacto para determinar el numero de post que quieres que aparezca. 

    Ahora para darle una apariencia como la de la foto de la derecha tenemos que pegar el siguiente cogido justo antes de este fragmento ]]></b:skin>, os dejo 6 estilos diferente el orden de los estilos se corresponde con el orden en el que aparecen en la foto para que elijáis el que mas os guste, espero que os sirva yo lo he probado en mi blog ya y la verdad es que me a gustado bastante como queda, os recomiendo que os lo pogais en vuestro blog adios . 



    • Estilo 1

    .showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

    • Estilo 2

    .showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #919106;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  border:1px solid #aeae0a;
  background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #919106;
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

    • Estilo 3

    . showpageArea {
  font-family: Verdana, Arial, Helvetica;
  color: # 000;
  font-size: 11px;
  margin: 10px;
  }
  
. showpageArea a {
  color: # fff;
  }
  
. showpageNum a {
  padding: 3px 8px;
  margin: 0 4px;
  text-decoration: none;
  background: # 363636 url (http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0-25px repeat-x;
  }
  
. showpageNum a: hover {
  background: # 044697 url (http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0-50px repeat-x;
  }

. showpagePoint {
  color: # fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: # e30000 url (whttp: / / i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

. showpageOf {
  margin: 0 8px 0 0;
  }

    • Estilo 4

    .showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 4px;
  margin:0 4px;
  text-decoration: none;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -25px repeat-x;
  }
  
.showpageNum a:hover {
  border-top:2px solid #999;
  border-left:1px solid #999;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  background: #999 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }


    • Estilo 5

    .showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #333 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -25px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #06a2b9 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

    • Estilo 6

    . showpageArea {
  font-family: Verdana, Arial, Helvetica;
  color: # fff;
  font-size: 11px;
  margin: 10px;
  padding: 8px 20px;
  background: # 333;
  }
  
. showpageArea a {
  color: # fff;
  }
  
. showpageNum a {
  padding: 3px 8px;
  margin: 0 4px;
  text-decoration: none;
  background: # 666;
  }
  
. showpageNum a: hover {
  background: # 888;
  }

. showpagePoint {
  color: # fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: # da6100;
  text-decoration: none;
  }

. showpageOf {
  margin: 0 8px 0 0;
  }
    read more

    Etiquetas: , , , , ,
    Fecha
    10/7/11
    Hora
    14:51:00
    12
    Comm
    by
    daras

    Poner estrellas de calificacion en mi blogs con js-kit-rating
    {[['', '']]}

    bueno js-kit-rating es un widget gartuito que sirve para que nuestros usuarios puedan calificar nuestros post es tan facil como copiara es código



    <script src="http://www.yourjavascript.com/15890923101/JS-Kit_by_ShinoxAyuda.js"></script>

    y pegarlo en la plantilla justo antes de </body>, A continuación para que aparezca en nuestro post tenemos que copiar el siguiente código

    <div class='js-kit-rating' userColor='Violet' starColor='Golden' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>

    y lo pegamos dependiendo de en que zona queramos que aparezca, si queremos que aparezca debajo del titulo del post lo pegaremos justo debajo de esto


    <div class='post-header-line-1'/>

    pero si por el contrario queremos que aparezca al final del post, tendremos que pegarlo detras del siguiente codigo

    <p class='post-footer-line post-footer-line-3'>



    read more

    Etiquetas: , , , , ,
    Fecha
    8/7/11
    Hora
    18:28:00
    0
    Comm
    by
    daras

    Cabiar el colordel widget de Seguidores en Blogger
    {[['', '']]}

    A mas de uno os abra pasado que al descargar un template para blogger al ir a instalar Gadget de seguidores o el gadget de estadísticas os habréis dado cuenta de que el color del texto de estos gadget se muestra de color negro y que cuando habéis intentado cambiar el color del gadget a sido imposible debido a que como son templates programados por personas independientes a blogger lo que ocurre es que estas plantillas no aparecen escrito las variables de definiciones que es de donde cogen los gadget automáticamente las colores para las fuentes , lo que hay que hacer para solucionar este problema es irnos en blogger /escritorio/diseño/editor de html,una vez hay copiais el siguiente codigo:

    /*----------------------------------------------------
          {--------}  Variable definitions  {--------}
----------------------------------------------------*/

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#ffffff" value="#ccd9ea"/>

   <Group description="Page" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.background.color" description="Background Color" type="color" default="#000000" value="#becdd9"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#ffffff" value="#606060"/>
   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#888888" value="#4183d9"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#444444" value="#2160b0"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#cccccc" value="#4183d9"/>
   </Group>

   <Group description="Gadget Title" selector="h2">
     <Variable name="widget.title.font" description="Font" type="font"
        default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="italic bold 14px Fontdiner Swanky"/>
     <Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
   </Group>

   <Group description="Gadget Text" selector=".sidebar .widget">
     <Variable name="widget.font" description="Font" type="font"
        default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="italic normal 16px Corsiva"/>
     <Variable name="widget.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#666666" value="#ffffff"/>
   </Group>

   <Group description="Gadget Links" selector=".sidebar .widget">
     <Variable name="widget.link.color" description="Link Color" type="color" default="$(link.color)" value="#becfde"/>
     <Variable name="widget.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#b2a3dd"/>
     <Variable name="widget.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#becfde"/>
   </Group>

   <Group description="Gadget Background" selector=".sidebar .widget">
     <Variable name="widget.background.color" description="Background Color" type="color" default="#141414" value="transparent"/>
     <Variable name="widget.border.color" description="Border Color" type="color" default="#222222" value="transparent"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#000000" value="transparent"/>
   </Group>

*/


    Una vez ayas copiado el código anterior, lo pegas justo  al principio del templates justo detrás de la zona donde pone: autor,nombre...etc. todo esto tiene que ir detrás de la esta zona como aparece en la foto de debajo.


    read more

    Etiquetas: , , , ,
    Fecha
    7/7/11
    Hora
    16:14:00
    1
    Comm
    by
    daras

    Como poner botón ir hacia arriba con efecto deslizante jQuery
    {[['', '']]}

    1. Lo primero que hay que hacer es ir a blogger entrar en el escritorio y seleccionar Diseño/Editor de HTML.
    2. Después de todo esto seleccionamos la pestaña: "expandir plantilla de artilugios" y buscamos </head>.
    3. Una una vez encontrado </head>, copiamos y pegamos justo antes de </head> el siguiente codigo:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

/*
Author: mg12
Update: 2008/05/05
Author URI: http://www.neoease.com/
*/
(function() {

function $(id) {
return document.getElementById(id);
}

function setStyleDisplay(id, status) {
$(id).style.display = status;
}

function goTop(a, t) {
a = a || 0.1;
t = t || 16;

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;

if (document.documentElement) {
 x1 = document.documentElement.scrollLeft || 0;
 y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
 x2 = document.body.scrollLeft || 0;
 y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;

var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));

var speed = 1 + a;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0) {
 var f = "MGJS.goTop(" + a + ", " + t + ")";
 window.setTimeout(f, t);
}
}

function switchTab(showPanels, hidePanels, activeTab, activeClass, fadeTab, fadeClass) {
$(activeTab).className = activeClass;
$(fadeTab).className = fadeClass;

var panel, panelList;
panelList = showPanels.split(',');
for (var i = 0; i < panelList.length; i++) {
 var panel = panelList[i];
 if ($(panel)) {
  setStyleDisplay(panel, 'block');
 }
}
panelList = hidePanels.split(',');
for (var i = 0; i < panelList.length; i++) {
 panel = panelList[i];
 if ($(panel)) {
  setStyleDisplay(panel, 'none');
 }
}
}

function loadCommentShortcut() {
$('comment').onkeydown = function (moz_ev) {
 var ev = null;
 if (window.event){
  ev = window.event;
 } else {
  ev = moz_ev;
 }
 if (ev != null && ev.ctrlKey && ev.keyCode == 13) {
  $('submit').click();
 }
}
$('submit').value += ' (Ctrl+Enter)';
}

function getElementsByClassName(className, tag, parent) {
parent = parent || document;

var allTags = (tag == '*' && parent.all) ? parent.all : parent.getElementsByTagName(tag);
var matchingElements = new Array();

className = className.replace(/\-/g, '\\-');
var regex = new RegExp('(^|\\s)' + className + '(\\s|$)');

var element;
for (var i = 0; i < allTags.length; i++) {
 element = allTags[i];
 if (regex.test(element.className)) {
  matchingElements.push(element);
 }
}

return matchingElements;
}

window['MGJS'] = {};
window['MGJS']['$'] = $;
window['MGJS']['setStyleDisplay'] = setStyleDisplay;
window['MGJS']['goTop'] = goTop;
window['MGJS']['switchTab'] = switchTab;
window['MGJS']['loadCommentShortcut'] = loadCommentShortcut;
window['MGJS']['getElementsByClassName'] = getElementsByClassName;

})();


//]]>

</script>

    • Luego buscamos:"]]></b:skin>"y justo antes pegamos el siguiente codigo:

    a#to_top {
width:24px;
height:30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3zNHoNLSazt7ky3W1q2cYtwderE2seCTuPAvv5pWRxgkYYcXeuJCkovMz4bTsM4IEMlCriezpd57R8h8a8O-xPOqMHhMSDHyO9BQG0kfktGwgAIGcq-XSoEuVo6WWt8XHRvMRr9rMO8/s1600/ico_subir.png) repeat-x scroll 0px 0px;
bottom: 5px;
position: fixed;
right:0px;
z-index:0;
-moz-border-radius-bottomleft:12px;
-webkit-border-radius-bottomleft:12px;
-moz-border-radius-topleft:12px;
-webkit-border-radius-topleft:12px;
border-top: 3px solid #282828;
border-left:3px solid #282828;
border-bottom: 3px solid #282828;
}

    • Luego se van al final del codigo de la plantilla y justo antes de </body> pegais el siguiente codigo:
    <a id="to_top" class="to_top" href="#to_top" onclick='MGJS.goTop();return false;' style="display: block; "></a>

    Y una vez echo todo esto os debería quedar algo como lo que aparece en la imagen del la derecha,y al pulsar sobre el icono os llevara al principio de la pagina.




    read more

    Etiquetas: , , , ,
    Fecha
    3/7/11
    Hora
    18:19:00
    0
    Comm
    by
    daras

    Poner un icono delante de: Etiquetas, Lista de enlaces.
    {[['', '']]}

    Para poner un icono delante de los widgets de lista de enlaces y las etiquetas en blogger como este"", lo primero tienes que ir a "blogger" luego  ir a "diseño" y picar en "Editor de HTML" le das a expandir plantilla de artilugios y justo antes de ]]></b:skin> pegas los siguientes códigos html:

    • Este es el cogido de widgets del "lista de enlaces": 

    #LinkList{
 background: url( IMAGEN DEL ICONO DE 16X16) left 12px no-repeat;
 padding: 6px 0px 6px 25px;
 margin: 0;
        border-bottom: 1px solid #8A0808;
        color:#ccc;
 }

    • Este es el cogido de widgets del "Etiquetas": 

    .sidebar ul {
 list-style-type: none;
 margin: 0px 0px 10px 0px;
 padding: 0px;
 }
 
.sidebar ul li {
 list-style-type: none;
 margin: 0px 0px 5px 0px;
 padding: 0px;
 }

.sidebar ul ul {
 list-style-type: none;
 margin: 0px;
 padding: 0px;
 }
 
.sidebar ul li, .sidebar ul li ul li {
 background: url(IMAGEN DEL ICONO DE 16x16) left 12px no-repeat;
 padding: 6px 0px 6px 25px;
 margin: 0;
        border-bottom: 1px solid #8A0808;
        color:#ccc;
 }

.sidebar li a:link, .sidebar li a:visited {
        font-size: 16px;
        color:#ccc;
}

.sidebar li a:hover {
        color:#FFC600;
        text-decoration: none;
}

    • IMAGEN DEL ICONO DE 16X16:Aqui de pone la url del icono que vas a poner ,"NOTA:EL TAMAÑO DEL ICONO QUE PONGAN TIENE QUE SER DE 16x16".
    • Padding: NO TOCAR.
    • Margin:No Tocar.
    • Border-bottom:Es el color de la linia que aparece ceparando cada link.
    • Color:regula el color del testo el color tiene que estar escrito en html.

    NOTA: El color esta determinado  por  estos cogidos  de colores html como este "#8A0808"Si quiere obtener el codigo de colores html puede acerloen es pagina: http://videodarasgamen-v2.blogspot.com/2011/05/html-color-codes.html 

    read more

    Etiquetas: , , , ,
    Fecha
    1/7/11
    Hora
    13:12:00
    0
    Comm
    by
    daras

    Poner boton de me gusta en el blog.
    {[['', '']]}

    Para añadir el botón "me gusta" de Facebook en nuestro blog están fácil como meteros en el link que os dejo y configurarlo a vuestro gusto ,"plugins sociales" cuando entres te saldrán distintas opciones picas en Like Button hay tellenas todo lo necesario cuando ayas acabado te dará un código iframe .Bueno para los que tenga mas curiosidad a continuación  os esplicamos para que sirve cada uno de los elementos de ese código que os an dado:

    Funcionamiento

    El botón es más bien un iframe al que se le pasan por parámetros las características del elemento. El código es más o menos como sigue:

    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblogandweb.com%2F&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>

    Los parámetros son:
    • href – Con la URL a compartir.
    • layout – Estilo del botón. Valores: standard o button_count
    • show_faces – Muestra o no el avatar de quienes del gusta la anotación. Valores: true o false.
    • width – Ancho del iframe.
    • action – Texto del botón. Valores like o recommend.
    • font – Fuente a utilizar.
    • colorscheme – Esquema de colores. Valores: light, dark o evil.
    Estos valores se pueden cambiar directo en el código o usar el formulario de personalización de Facebook, el resultado es el mismo.

    Agreagar boton "me gusta" a blogger


    1. Ir al código de la plantilla y expandir artilugios.
    Home → Diseño → Edición de HTML → Expandir plantillas de artilugios
    2. Elegir el lugar a agregar el código. El lugar tradicional para hacerlo en el post-footer, es decir, al pie de cada entrada, entonces, se busca el código:

    <div class='post-footer-line post-footer-line-1'>
    Y abajo se agrega el siguiente código:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light"' scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>

</b:if>
    El resultado es un botón como el siguiente:
    Nota: Puede usarse post-footer-line-1 o cualquier otra en el footer. El código a agregar puede modificarse con los parámetros que se listaron en la parte de funcionamiento.

    Agregar botón "me gusta" a WordPress


    1. Para agregar el botón a cada entrada individual, se abre el archivo single.php del theme.
    2. Ubicarse en el lugar donde se pretende aparezca el botón, el barra de marcadores sociales, el footer del post o abajo del título, por ejemplo. Y agregar el siguiente código:

    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>

    El resultado:
    Y lo mismo que en Blogger, al código pueden modificarse los parámetros, de acuerdo con la sección de funcionamiento.
    read more

    Etiquetas: , , , , , ,
    Fecha
    11/5/11
    Hora
    15:39:00
    1
    Comm
    by
    daras

    Tabla de colores en HTML/Hexadecimal
    {[['', '']]}

    Esta tabla de selecion de colores html puedes crear el color que quieras  y abajo en el cuadro te daras el color de color que tu as creado.


    Esta tabla de selecion de colores html es mas basica que las demas y es muy facil de usar solo tienes que picar en un color y en el momento debajo en un cuadro te mostrara el codigo del color en html y el color elegido.

    Selected color code is
    read more

    Etiquetas: , , ,
    D Directa Torrent TV Online Mini juegos