online HTML to XML parser | Blogger adsense converter | escape tool

This online converter will convert your adsense,chitika, adbrite and any HTML code into XML coding which are compatible with the blogger templates.

Enter Code:

 
Parsed Code

This Adsense Parser / escape Online tool is Very Cool. Instead of Manually parse adsense code you can easily conver any html code to xml format. This tool are very easy and accurately escape tool which are hassle free parse the any html code. How To use ? when you enter html code in to above box parse code will be generated automatically just copy and past this code to your blogger use. 

Añadir Adsense en los post de plantillas mobiles de Blogger

Fuente: Add Adsense Below Post Title of Mobile Blogger Templates

I've customized the mobile view of OgbongeBlog in such a way that I now have an Adsense 320x50 mobile banner been displayed under post titles as well as an Adsense 250x250 ad unit been displayed at the end of each post on the mobile view.



Besides that, I created an extra section above the header region and right there, I can also add an Adsense mobile banner or a non-adsense 320x50 banner. In this tutorial, I'm sharing with you how to add Adsense ad inside blog posts of Blogger mobile templates, directly below post titles.



Just follow me through the steps.



==> Log in to www.google.com/adsense to generate the Adsense code for the ad unit you want to add to the mobile view. eg 320x50 mobile banner.



Now, we need to parse the ad code.



==> Go to http://www.freehtmlparser.blogspot.com/

==> Copy and paste your ad code inside the box and click the "Encode" button

==> Copy and paste the code somewhere eg in a notepad



==> Ensure you have enabled CUSTOM Blogger mobile template.



If not sure, login to your Blogger dashboard, go to "Template". Under "Mobile", select "Yes. Show mobile template on mobile devices" and choose "Custom" from the "choose mobile template" dropdown box and save your settings.



==> Now, we need to find the code for the Blogger Mobile Template Post title so we can place the Adsense code directly below it.



==> So, back up your template and go to "Template" > "Edit HTML"



==> Click inside the HTML and use CTRL F to find the code below:

<b:includable id='mobile-post' var='post'>

==> Once you find the code, scroll down gently till you see the code below:

<div class='post-body entry-content'
expr:id='&quot;post-body-&quot; + data:post.id'
itemprop='articleBody'>

==> Paste your parsed Adsense code directly below the code above.



Save your template.



View one of your blog posts on mobile view using default browser of your mobile device (NOT Opera Mini) and you should see the ad below the post title on POST pages (Not on the homepage).

NB:  You can place any ad code there be it AdDynamo, Infolink, media.net ad etc

Via: Añadir dos columnas de gadgets arriba o abajo de las entradas.

Para añadir un gadget arriba o abajo de las entradas bastara con arrastrar el gadget hasta donde queramos que aparezca,

Pero si queremos añadir dos columnas de gadget arriba o abajo de las entradas. tal y como vemos en la siguiente imagen

Si quieres las columnas de gadgets encima de las entradas, entonces agrega arriba de lo anterior esto:

<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:

<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Video Mejorar Rendimiento de Windows 7 en 3 minutos

Modificar las plantillas móviles de Blogger

Desde que Blogger habilito la versión móvil de nuestras paginas, solo podíamos seleccionar algunas plantillas predeterminadas y nada mas. Ahora desde el blog de desarrolladores de Blogger nos indican que es posible modificar y seleccionar algunas cosas en esa versión móvil que se muestra automáticamente al acceder desde un dispositivo móvil a nuestras paginas.



La primera opción es poder seleccionar que widget queremos que se vean en la versión móvil y cuales no queremos que se vean, para ello solo deberemos acceder a la edición de nuestra plantilla y añadir las siguientes etiquetas:

Esto es lo que tenemos habitualmente



<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>



Si queremos que se vea ese widget en concreto le añadimos



<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>



Si no queremos que se vea le añadiremos



<b:widget id='BlogArchive1' title='Blog Archive' mobile='no' type='BlogArchive'>



Si queremos que se vea solo en la versión móvil, pondremos



<b:widget id='BlogArchive1' title='Blog Archive' mobile='only' type='BlogArchive'>

También es posible añadir el condicional <b:if cond="data:mobile"> en los códigos de los widget por si queremos mostrar una cosa u otra dependiendo de que la versión sea vista móvil o no.

Os dejo el ejemplo



<div class="widget-content">

<b:if cond="data:mobile">

<!-- Show a text link in mobile view.-->

<a href="http://www.blogger.com">

Powered By Blogger

</a>

<b:else/>

<!-- Show an image link in desktop view.-->

<a href="http://www.blogger.com">

<img expr:src="data:fullButton" alt="Powered By Blogger"/>

</a>

</b:if>

</div>

También es posible modificar las plantillas mediante CSS pero es algo más complejo y lo explicaremos mas adelante

Como poner Adsense en vista móvil para blogger

Vito en: Como poner Adsense en vista móvil para blogger
Bien en esta entrada os voy a enseñar a poner un banner de adsense para la vista móvil en blogger justo debajo del título. Tenemos 2 opciones, una fácil con problemas que luego explicaré más adelante y otra un poco más complicada pero con óptimos resultados.



Antes de todo debemos habilitar la vista móvil en blogger/plantilla y donde pone móvil pulsamos abajo y la ventana que se nos abre la dejamos de la siguiente manera

Opción 1

Con esta opción debemos localizar el gadget o widget que queremos que sea visible para la vista móvil y añadiendo los atributos en HTML podremos elegir entre:

mobile='yes' para que sea visible tanto en vista de escritorio como en móvil

mobile='no' para que no sea visible en vista móvil

mobile='only' visible solo en vista móvil



Supongamos que queremos que el widget Adsense sea visible en vista móvil también, pues nos vamos a plantilla/editar HTML localizamos el widget y añadimos mobile='yes'



<b:widget id='Label1' mobile='yes' locked='false' title='Adsense' type='Label'/>



Recuerda que donde pone Label1 es el numero del widget y donde pone title es el nombre.



El problema de esto es que a la hora de poner mobile='only' para que sea visible solo desde la vista móvil, el widget desaparece del diseño y cuando queramos cambiar algo dará el error bX-7d26hw al guardar los cambios.



Opción 2

Para poner Adsense debajo de la descripción de nuestro blog para que quede de esta manera

Lo aremos con el siguiente condicional <b:if cond='data:blog.isMobile'> visible solo en vista móvil </b:if> de esta manera a la hora de cargar la página, le estamos diciendo a blogger que esa parte la queremos que sea visible solo en vista móvil. Entonces al lío.



Nos vamos a plantilla/editar HTML y pulsamos Ctrl+F para abrir el buscador y escribimos </header> justo debajo ponemos lo siguiente:



<!-- Adsense vista movil -->

<b:if cond='data:blog.isMobile'> 

<div align='center'>



Tu código Adsense en texto plano aquí



</div>

</b:if>

<!-- Adsense vista movil -->



Para pasar adsense en texto plano



Una vez hecho esto, guardamos cambios y probamos la vista móvil, recuerdo que debes añadir /?m=1 de tal forma www.tublog.com/?m=1 para hacer visible la vista móvil desde el escritorio.



Explicación de lo que hemos hecho



</header> es el cierre de la cabecera donde va el título del blog

<!-- Adsense vista movil --> para localizar el widget facilmente ya que lo que escribamos dentro de <!-- --> no es visible

<b:if cond='data:blog.isMobile'> le estamos diciendo que sea visible solo en vista móvil

<div align='center'> que esté centrado en la pantalla



y los correspondientes cierres de cada atributo </div> </b:if>

Ver o Incrustar otra web en tu blog

Fuente Blog de Lujo

Hacer que se vea en una entrada, columna, footer... otra web es bien sencillo con una simple orden. Basta usar "iframe" para darle una anchura y altura que nos guste.

Alguien se preguntará, ¿para qué sirve?. Sólo puedo responder:

1. Sobre todo enseña una web sin que salgan de la tuya o tu blog. Puede ser una fórmula para que tus visitas se queden algo más de tiempo al mostrarle esa facilidad.
2. Para reducir el número de pestañas abiertas en los navegadores.
3. Mostrar una entrada antigua sin necesidad de colocar un enlace para abrir o cerrar una página.
4. Un truco para experimentar.

■ En este blog lo he usado varias veces con los siguientes ejemplos:




<iframe src="http://www.ismyblogworking.com" width="520px" height="210px"></iframe>


<iframe src="http://blogdeladymarian.blogspot.com" width="550px" height="200px"></iframe>


El modelo a seguir es:

<iframe src="url-de-la-web-que-desees-mostrar" width="nº-de-ancho px" height="nº-de-alto px"></iframe>

**Recordad que width o height se expresan en píxeles (px). P.ej: 420px - 550px - 670px ...

Estas instrucciones se pueden colocar en una entrada de nuetro blog o en un gadget HTLM/Javascript si queremos colocarlo en algún lado de nuestra sidebar, footer, crosscol...

Actualización:

Para que no salgan las líneas deslizantes en los bordes es necesario añadir la orden:

scrolling="no"

dentro de la opción iframe .P.ej:


<iframe scrolling="no" src="url-del-sitio-web" width="550px" height="200px"></iframe>