Como personalizar la cabecera de la barra lateral de otro color

#ID h2{
background:#575656;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}

#Profile1 h2{
background:#575656;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}

Fecha: 04-10-2017

Fuente

Publicado por        

Cómo identificar los widgets o los gadget en Blogger

ÍNDICE DE 3 COLUMNAS

<table style="font-family: verdana; font-size: 11px; letter-spacing: 3px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%; cellpadding="20" cellspacing="10""><tbody>
<tr>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>

<table style="font-family: verdana; font-size: 11px; letter-spacing: 3px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%; cellpadding="20" cellspacing="10""><tbody>
<tr>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>

Una utilidad muy buena para los blogs es incluir un widget para que los usuarios puedan ver entradas aleatorias. Esto se consigue con Javascript y un enlace simple, una imagen o, como en este caso un boton. Con un poco de codigo de CSS3, he diseñado este boton naranja tan chulo con efecto 'presionado', que haciendo click sobre el, te muestra un post al azar automaticamente. Para ponerlo en tu blog de Blogger, tan solo tienes que copiar el codigo de abajo y añadirlo en un gadget HTML, asi de sencillo

<div id='postaleatorio'></div>
<script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Ver una entrada al azar'; document.getElementById('postaleatorio').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script>
<style type='text/css'>
@import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' );
#postaleatorio a {
position: relative;
color: rgba(255,255,255,1) !important;
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;

-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}

#postaleatorio a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>

<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–>

Colocar una Barra deslizante en tus entradas

Fuente:  clasicylove

Fecha:25/02/2017

Publicado por:    

<table background="http://www.lasetaazul.com/estudio/imagenes/fondo_estudio.png" border="0" cellpadding="5" cellspacing="5" style="width: 100%px;"><tbody>

<tr><td>Contenido de la entrada aquí</td></tr>

</tbody></table>

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #31353e;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #3d464f;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#3d464f;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #3d464f;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#5687B8;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#eee;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#222;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#111;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "http://tutorialesblogger.blogspot.com/",
 feedNum: 30,
 labelName: false,
 numChars: 0,
 thumbWidth: 80,
 navText: "Siguiente ?",
 frontText: "Atras ?",
 resetToc: "Reset",
 noImage: "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
 loading: "<span>Cargando...</span>",
 searching: "<span>Mencari...</span>",
 noResult: "No se ha encontrada nada con ese titulo"
};
//]]>
</script>
<br />
<div id="table-outer">
<table border="0">
        <tbody>
<tr>
                <td><label for="orderFeedBy">Ordenar las entradas por:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">ULTIMA ENTRADA</option>
                        <option value="updated">PUBLICAR INFORMACIÓN ACTUALIZADA</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">Filtrar las entradas por categorias</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">MEMUAT...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">Buscar por palabras claves:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<br />
<br />
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script src="https://dl.dropboxusercontent.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Mapa.js" type="text/javascript"></script></div>