Cómo identificar los widgets o los gadget en Blogger

<!–Related Posts with thumbnails Scripts and Styles Start–>

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

<style type=’text/css’>

#related-posts{float:left;width:auto;}

#related-posts a{border-right: 1px dotted #eaeaea;}

#related-posts a:hover{background: #EEEEEE;}

#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}

#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }

#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}

#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>

<script type=’text/javascript’ src=’http://helplogger.googlecode.com/svn/trunk/relatedposts.js’ />

</b:if>

<!–Related Posts with thumbnails Scripts and Styles End–>

<!– Related Posts with Thumbnails Code Start–>

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

<div id=’related-posts’>

<b:loop values=’data:post.labels’ var=’label’>

<b:if cond=’data:label.isLast != &quot;true&quot;’>

</b:if>

<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;’ type=’text/javascript’/></b:loop>

<script type=’text/javascript’>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div class=’clear’/><div style=”font-size: 9px;float: right; margin: 5px;”><a  style=”font-size: 9px; text-decoration: none;” href=”http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html” rel=”nofollow” >Related Posts Widget</a></div>

</b:if>

<!– Related Posts with Thumbnails Code End–>

<style>
#ayudadebloggernavbar {
    background: #3B5998;
    width: 100%;

    color: #FFF;
        margin: 10px 0;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#ayudadebloggernav {
    margin: 0;
    padding: 0;
}
#ayudadebloggernav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#ayudadebloggernav li {
    list-style: none;
    margin: 0;
    padding: 0;
   
}
#ayudadebloggernav li a, #ayudadebloggernav li a:link, #ayudadebloggernav li a:visited {
    color: #FFF;
    display: block;
   font:bold 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 11px 12px;
        text-decoration: none;
        border-right:0px solid #627AAD;
}
#ayudadebloggernav li a:hover, #ayudadebloggernav li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 11px 12px;
   

   
}
#ayudadebloggernav li {
    float: left;
    padding: 0;
}
#ayudadebloggernav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#ayudadebloggernav li ul a {
    width: 140px;
}
#ayudadebloggernav li ul ul {
    margin: -25px 0 0 161px;
}
#ayudadebloggernav li:hover ul ul, #ayudadebloggernav li:hover ul ul ul, #ayudadebloggernav li.sfhover ul ul, #ayudadebloggernav li.sfhover ul ul ul {
    left: -999em;
}
#ayudadebloggernav li:hover ul, #ayudadebloggernav li li:hover ul, #ayudadebloggernav li li li:hover ul, #ayudadebloggernav li.sfhover ul, #ayudadebloggernav li li.sfhover ul, #ayudadebloggernav li li li.sfhover ul {
    left: auto;
}
#ayudadebloggernav li:hover, #ayudadebloggernav li.sfhover {
    position: static;
}
#ayudadebloggernav li li a, #ayudadebloggernav li li a:link, #ayudadebloggernav li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 1px 0 0 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;

}
#ayudadebloggernav li li a:hover, #ayudadebloggernav li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;

}

#ayudadebloggernav li li li a, #ayudadebloggernav li li li a:link, #ayudadebloggernav li li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;
    margin: 1px 0 0  -14px;


}
#ayudadebloggernav li li li a:hover, #ayudadebloggernav li li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
}
</style>
<div id='ayudadebloggernavbar'>
          <ul id='ayudadebloggernav'>
            <li>
              <a href='/'>Inicio</a>
            </li>
            <li>
              <a href='#'>Quienes somos</a>
           </li>
            <li>
              <a href='#'>Contactos ?</a>
<ul>
        <li><a href='#'>Facebook 1</a></li>
                        <li><a href='#'>Twitter 2</a></li>
                        <li><a href='#'>Google+ 3</a></li>
 </ul>            
            </li>
<li>
              <a href='#'>Categorias ?</a>
<ul>
        <li><a href='#'>Temas 1</a></li>
                        <li><a href='#'>Temas 2</a></li>
                        <li><a href='#'>Temas 3</a></li>
 </ul>            
            </li>
<li>
              <a href='#'>Temas ?</a>
<ul>
        <li><a href='#'> Tema 1</a></li>
                        <li><a href='#'> Tema 2</a></li>
                        <li><a href='#'>Tema 3</a></li>
 </ul>            
            </li>  
 <li>
               <a href='#'>Sitemap ?</a>
                <ul>
                    <li><a href='#'> Tema 1</a></li>
                    <li><a href='#'> Tema 2</a></li>
                    <li><a href='#'>Tema 3</a>
                   <ul>
                    <li><a href='#'>Sub Tema 1</a></li>
                    <li><a href='#'>Sub Tema 2</a></li>
                    <li><a href='#'>Sub Tema 3</a></li>
                  </ul>
</li>
                  </ul>
            </li>
          </ul>
        </div>

<li>
<a href="#">Información</a>
</li>

 <!–Related Posts with thumbnails Scripts and Styles Start–>

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

<style type=’text/css’>

#related-posts{float:left;width:auto;}

#related-posts a{border-right: 1px dotted #eaeaea;}

#related-posts a:hover{background: #EEEEEE;}

#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}

#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }

#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}

#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>

<script type=’text/javascript’ src=’http://helplogger.googlecode.com/svn/trunk/relatedposts.js’ />

</b:if>

<!–Related Posts with thumbnails Scripts and Styles End–>

<!– Related Posts with Thumbnails Code Start–>

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

<div id=’related-posts’>

<b:loop values=’data:post.labels’ var=’label’>

<b:if cond=’data:label.isLast != &quot;true&quot;’>

</b:if>

<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;’ type=’text/javascript’/></b:loop>

<script type=’text/javascript’>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div class=’clear’/><div style=”font-size: 9px;float: right; margin: 5px;”><a  style=”font-size: 9px; text-decoration: none;” href=”http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html” rel=”nofollow” >Related Posts Widget</a></div>

</b:if>

<!– Related Posts with Thumbnails Code End–>

<a href="http://feeds2.feedburner.com/Marfan" title="Suscríbete al Feed" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR26RmDDbQnTF3NRRM8qbqZg3bpYz83oTavnDh6JcbEQwPxGPgm_EtW6HmzneT4wOqiCXm2QCcRRAVNgD5GFZrPl0svm9pQi1ucW79vPyzs0kU1pPXh0eeAw8sHCiszIMMw6k7j_Za5Q0/s1600/rss2.png "/><strong></strong> </a>
<a href="http://www.facebook.com/Marfan" title="Síguenos en Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkPgb_-PwHf5mqklOdbOg0mWyzeIgl2E1xId-PCg2LKP9aAQsxB_ih0dLSbnZtNsl0EFLtDuJHVldgWl1XmARt6QAWyib0F2NnOLv-FlRNQD94hUHFAiu8xb7In8AYeTYkXbV_VIA_uUA/s1600/facebook2.png"/><strong></strong> </a>
<a href="http://www.twitter.com/Marfan" title="Síguenos en Twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHl2Wvv61IzL8Lq654QC2EUWAFrB7d1jIymgrb9bMPm9OdFaTVIkC2eskfwnRWc_GBLEQms9UZ6Q7-pa1GJw5ZIDtFOwxDavIpt7g7n527MbMvZEMaqq0vSqKY3IuvSjp5ZS1bJA3Upfw/s1600/twitter2.png "/><strong></strong> </a>
<a href="https://plus.google.com/+Marfan" title="Agregar a mi Circulo" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjerfqbnvBMfSlkOuetPZFzLac_d-LESsE81cOKDOj-MzTFoKmr63-AJNJNMrR95_xV_WuQU9Rdwl5mfsPtS3BYYiFw1IBSV2MMyctArbbkQ4Pd2UT5aLGmV-tk6wiO0tu9K58-OZmKa-w/s1600/google-plus2.png "/><strong></strong> </a>
<a href="http://ec.linkedin.com/pub/Marfan/53/549/a91" title="Sígueme en LinkedIn" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpL15q1YXxe7cdJ5c_YJZlW24Y-GjSVQqo54AAHkXWioskRrzP45I7hYi6owH7Cnc145eGStdVTtwswKy-Vb0L3GKPjIa9m7I1VkJBtRTx96YnpmfaxMzBCYVmU9pg1JITMklA7HXvpuM/s1600/linkedin2.png "/><strong></strong> </a>

                                                                                     

Al momento de ahorrar espacio en nuestro blog de Blogger es necesario realizar varios trucos utilizando varios códigos con los cuales nos creara una caja con tres títulos múltiples y dentro de cada uno de ellos se puede ingresar contenido, este truco de Blogger lo pueden insertar en un widget o en una entrada, dependiendo el uso que lo quieran dar. La inserción del código es muy fácil de realizarlo, parte del código se ingresa en la plantilla y el ultimo código en el cual está el contenido y los títulos se lo ingresa de forma manual en nuestra entrada o en un widget, a este método se lo conoce como Tab Múltiple.

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"></link>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"></link>

 <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

 <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Anuncios Adsense</a></li>
    <li><a href="#tabs-2">Teléfonos fijo</a></li>
    <li><a href="#tabs-3">Telefono Móvil</a></li>
  </ul>
  <div id="tabs-1">
    <p>Los anuncios y demás material promocional de pago que se agreguen a sus páginas no deben superar en cantidad el contenido que se ofrece en ellas. Asimismo, dicho contenido debe ser valioso y de interés para los usuarios que visitan la página. Por esta razón, podemos limitar o inhabilitar la publicación de anuncios en páginas que tengan poco o ningún valor, o que incluyan demasiada publicidad, hasta que se realicen los cambios pertinentes..</p>
  </div>
  <div id="tabs-2">
    <p>Los dispositivos móviles antiguos con capacidad para Internet (conocidos como teléfonos de gama media) utilizan el protocolo de aplicaciones inalámbricas (WAP, Wireless Application Protocol) y solo pueden acceder parcialmente a Internet. Los sitios web que admiten dichos dispositivos suelen estar escritos en un lenguaje de marcas, como el lenguaje de marcas inalámbrico (WML, Wireless Markup Language) o HTML extensible estricto (XHTML estricto). En determinadas regiones del mundo, los dispositivos utilizan i-mode para acceder a los sitios web escritos en HTML compacto (CHTML).</p>
  </div>
  <div id="tabs-3">
    <p>Con el desarrollo de teléfonos como iPhone y Android, un número cada vez mayor de navegadores para móviles puede interpretar ahora JavaScript y HTML. No necesariamente. Un sitio verdaderamente responsive es aquél cuyo contenido está optimizado para móviles. Texto, imágenes, videos, diapositivas… porque es esto lo que en realidad le importa a un usuario.

Si un sitio se ajusta perfectamente a un teléfono inteligente, pero su contenido se ve desproporcionado, nunca será útil a quien lo lee desde dispositivos móviles..</p>
  </div>
</div>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Anuncios Adsense</a></li>
    <li><a href="#tabs-2">Teléfonos fijo</a></li>
    <li><a href="#tabs-3">Telefono Móvil</a></li>
  </ul>
  <div id="tabs-1">
    <p>Los anuncios y demás material promocional de pago que se agreguen a sus páginas no deben superar en cantidad el contenido que se ofrece en ellas. Asimismo, dicho contenido debe ser valioso y de interés para los usuarios que visitan la página. Por esta razón, podemos limitar o inhabilitar la publicación de anuncios en páginas que tengan poco o ningún valor, o que incluyan demasiada publicidad, hasta que se realicen los cambios pertinentes..</p>
  </div>
  <div id="tabs-2">
    <p>Los dispositivos móviles antiguos con capacidad para Internet (conocidos como teléfonos de gama media) utilizan el protocolo de aplicaciones inalámbricas (WAP, Wireless Application Protocol) y solo pueden acceder parcialmente a Internet. Los sitios web que admiten dichos dispositivos suelen estar escritos en un lenguaje de marcas, como el lenguaje de marcas inalámbrico (WML, Wireless Markup Language) o HTML extensible estricto (XHTML estricto). En determinadas regiones del mundo, los dispositivos utilizan i-mode para acceder a los sitios web escritos en HTML compacto (CHTML).</p>
  </div>
  <div id="tabs-3">
    <p>Con el desarrollo de teléfonos como iPhone y Android, un número cada vez mayor de navegadores para móviles puede interpretar ahora JavaScript y HTML. No necesariamente. Un sitio verdaderamente responsive es aquél cuyo contenido está optimizado para móviles. Texto, imágenes, videos, diapositivas… porque es esto lo que en realidad le importa a un usuario.

Si un sitio se ajusta perfectamente a un teléfono inteligente, pero su contenido se ve desproporcionado, nunca será útil a quien lo lee desde dispositivos móviles..</p>
  </div>
</div>