Traductor flotante con jQuery en Blogger

Nota: para buscar algún código en especifico mas facil y rapido presiona "Ctrl +F"

En esta oportunidad creé un script que tuviese la propiedad de ser flotante y animado a base de jQuery.


Puedes ver trabajando el script en este blog de pruebas

¿Cómo añadirlo en Blogger?

Paso 1: Añadiendo jQuery:

Importante: Si tienes jQuery instalado en tu plantilla no hará falta volverlo a añadir.

En ''Diseño | Edición HTML'' selecciona ''Expandir plantillas de artilugios''. Busca la siguiente línea:

]]></b:skin>

Debajo de esta, pega el siguiente código:

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

Paso 2: Añadiendo los valores y atributos del script:

Ahora busca la siguiente sección:

</head>

Arriba de esta, pega el siguiente código:

<script type='text/javascript'> $(document).ready(function() { var $sidebar = $(&quot;#traductor&quot;), $window = $(window), offset = $sidebar.offset(), topPadding = 55; $window.scroll(function() { if ($window.scrollTop() &gt; offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); </script>

Paso 3: Añadiendo los estilos y flotaciones:

Ahora busca la siguiente línea:

]]></b:skin>

Debajo de ésta pega el siguiente fragmento CSS:

#traductor { float: left; margin-left: 251px; background: #000; position: absolute; border-radius: 6px; width:40px; border:6px solid #fff; } #traductor .contenido { clear: left; padding: 8px; }

Guarda todos los cambios y listo.

Paso 4: Añadiendo el gadget:

Ahora en ''Diseño | Elementos de la página'' agrega un gadget ''HTML/Javascript'', en el cual deberás pegar el siguiente código:

<div id='traductor'> <div class='contenido'> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGIBUR0bENjiASyyV9VP4wXA7uweMeOoouEC6faK1jbVoYWNIHAdA4rqJ-JPI9ydFStjZ8irhiPl8Cqsg3uVzOjESFcF3UCQq2oL8Bxn1zmRZM-JRMkT17GeHQmZjdLBUtImgbe4SpFQ/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimGFTxyRTvF0qFYSh0RCURjiX-Dx2PV-MaaOjL09OUc6P4CnQEu2hoLsKDIMVKTIyaGNCcBMJ6muaWkOeJKAesaTpqGvKUyK6DSWtzJKPokKyjGMz15F1FMx2_BnJwCYcicw4PysJE_cU/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSu3nmACp1PSrDEOj-jFDgB7MPEVPQAIMbn6CZIk4glE7K2G2KN534sJdsX7FeujEbpI8OdrH5-0YGDKjOE5vPvJbAb87SLDl8Qq8rAmXnsUUHSmFnyQnM0-Q1vy1NUrhlzSLKHWYcCJA/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spanish" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spanish" border="0" align="absbottom" title="Spanish" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ibKsWK9MZ11h94VgFm4vvhvcIxGgOwWvc8JysdjcD28sKDQY9stHLLady7jh6prsjFNP9BKUqEdipA392RhkD4OUOC-0og6yQhw_3KT37f7fs9Wx_s7vQyrX-M6uu_Rw91-oxNVqIGQ/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbM0Umni0VSBvHvpNr12HnzTb9mp8oE6HICwWsUV4rc0xKRlfn0brG_TSTvNJdZgpKan-vr_3Gt69ZtNTStN2czfKdPCHky5EFFHKxeEDBIWZrJ3L9bQRFbmC0MCpEWMkC50ng9s7OqQ/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQbhhyuga4dd0yyLAlMIn7GqKm1-sN7WnZidrRAXN3Y9S42CpDpXSYEfm-olMzAP4OeEPh0rwcYawFIOOTpL-8Iy8tf2UdPvTrOQFrtPhAZCKuS8f8iDnT5mWrdOuHAU8MTg8N0Sw6IU/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifQ14ReE3uBUUM1_pMd66Wt2H9HkZfDVWViBzoZnybF_850waDaMtbg-bv0qz1np8JgBe3LnBGq1dZdYvvt6L8p-CycPzNX65t4h3VtObaWTCAQHW5f9TmJLpxKEG4Jla-_WXYGXbadjk/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRtoutzqb_6w5cV2zwpwXdIiwwUk4yzosd43IkCbMLf3NDtsJcp-S06UKLDPaTYH1tjrEZQ3GRLytW5ggfo1HhoFhBRs0i0MPp9C-l_aTT-rtO0qCLna7HQtpvxay-8bwCuUFj8yC_eE/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1psT7Dnb-pCPUS2D7Vh2LkGdCQu2BI8OL6fRgEdEaRJxPrLQZlE_TMa-rfobdEyikZaggjymbeBjuBl25G4AdM886b4KrYyxJEeWZ5Xxh5H2HL4un47zcSjEWXIVvt7RRWyTRLfs_DD0/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcn9fYnW3hWeXIm2DmncTbGDd5buKqS3DjXpeMm5m5imoPghTSh5NbBEs45bpuRdohi6RwNrpJgGvJ4pd5UczA-EbjSHA-8zahf-X-0B22B7Dg0KjxIL8f5NCvP_FyMkro-tAqehsJp0/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE0RgAiaVgmox642qElADrp7Nh_fR3RmfKbeBZzaVdItJ7nfG2uA-NAY6SRK7gdrrALrSowM7vQ_q2EyPknJ4nKdeBkSTN6_fTLsAAFhztIPrVjNbD-XgyScWigzxCoZl14GQyWsauq5k/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQJseyIN53fi3IFhP-oCbT4ABh1c-nEkN-by76cRGyTrggLD-oJm4no_ndUx-RwbdLuuKzPLU8Ks4fOd2ksqJvIWGpKLOv6uR73oTQL_l2MWjbk980bS2isNOt7VHDIzkJ6tZGvYIyAs/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> </div> </div> Guarda el gadget y listo.

Consideraciones:

• Si el traductor se ve sobrepuesto o muy lejos, cambia el siguiente atributo:

margin-left: 251px;

Un valor mayor o menor hará que el gadget aumente el margen o disminuya.

• Si deseas que el traductor aparezca a la izquierda, simplemente utiliza un valor negativo, es decir:

margin-left: -600px;

Recuerda que ninguna plantilla es igual a otra, por lo que deberás setear manualmente el valor para darle una mejor ubicación.

Crear un sistemap (mapa del blogs) o tabla de contenido

En este tutorial haremos un sistemap (mapa del sitio) en nuetro blogs donde  muestra todas las categorías de nuestro blog con sus respectivas entradas ahorra mucho tiempo a tus lectores a la hora de buscar el contenido, también le muestra a los visitantes si son mensajes nuevos o antiguos

Para poder  ver un ejemplo  de como queda, puede visitar nuetro Mapa del Sitio


Bueno ahora pasemos a ponerlo en nuestros blog:


1.- Nos vamos a Diseño -> Edición de HTML

2.-Buscamos ]]></b:skin>

3.- Justo antes pegamos este código:

/*--------Tabla de Contenido-----*/ .judul-label{ background-color:#E5ECF9; font-weight:bold; line-height:1.4em; margin-bottom:5px; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 1px 1px 4px #AAAAAA; box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #e9e9e9; border: 2px solid white !important; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); } .data-list{ line-height:1.5em; margin-left:5px; margin-right:5px; padding-left:15px; padding-right:5px; white-space:nowrap; text-align:left; font-family:"Arial",sans-serif; font-size:12px; } .list-ganjil{ background-color:#F6F6F6; } .headactive{ color: #fef4e9; border: 2px solid white !important; background: #1C8DFF; background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); background: -moz-linear-gradient(top, #9dc2e7, #438cd2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); }


MODIFICAMOS #9dc2e7 y #438cd2 que es el color de tabla cuando muestra las entradas


4.- Guardamos la Plantilla

5.- Vamos a crear una Página nueva

6.-Ponemos un título a nuestra página tabla de contenido,índice, la que ustedes deseen.

7.-En la Edición de HTML pegamos este código:


<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script><script src="http://ciudad-fnx.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><script type="text/javascript">var accToc=true;</script><script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>



ahora solo publicamos la pagina y nos quedara algo asi

Botones Flotantes con efecto deslizante para Compartir ( Twitter,Faceook,Google+)

Fuente: ayuda bloggers

Nota: para buscar algún código en especifico mas facil y rapido presiona "Ctrl +F"

En este tutorial les enselare ah colocar botones flotantes con efecto deslizante que le da gran elegancia a nuetro blogs, los botones son Twitter, facebook, y google +


Recomiendo el uso del boton de google+ ya que de la cantidad de votaciones que obtengamos en nuestras entradas, se valdrá nuestra posición en Google.

Vista previa de los botones:

Añadiendo esta función en Blogger:

Paso 1: Añadiendo la sección:

En ''Diseño | Edición HTML'' buscamos la siguiente línea:

<data:post.body/>

Arriba de esta, pegaremos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='cajaflotante'> <div class='boton'> <a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='NOMBRE-TWITTER' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> <div class='boton'> <div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=53&amp;height=65&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;send=false&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:65px;'/></div> </div> <div class='plusbutton'> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'/> <g:plusone expr:href='data:post.url' size='tall'/> </div> </div> </b:if>

Reemplaza lo que está en color rojo por tu nombre de usuario en Twitter

Paso 2: Añadiendo CSS:

Ahora buscaremos la siguiente línea:

]]></b:skin>

Arriba de esta, pegaremos el siguiente código:

#cajaflotante { float: right; margin-left: -92px; background: #fff; position: absolute; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 5px 5px 5px #C0C0C0; -webkit-box-shadow: 5px 5px 5px #C0C0C0; } #cajaflotante .boton { margin:0px auto; padding: 5px; } #cajaflotante .plusbutton { margin:0px auto; padding:0 15px; }

Paso 3: Añadiendo jQuery a la plantilla:

Omite este paso si ya tienes jQuery instalado en tu Blog.

Ahora buscaremos la siguiente línea:

]]></b:skin>

Inmediatamente después de esta, pegaremos el siguiente código:

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

Paso 4: Añadiendo el script:

Ahora buscaremos la siguiente sección:

</head>

Arriba de esta, pega el siguiente código:

<script type='text/javascript'> $(document).ready(function() { var $sidebar = $("#cajaflotante"), $window = $(window), offset = $sidebar.offset(), topPadding = 65; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); </script>

Ahora guarda los cambios y listo: