Featured

Mostrando entradas con la etiqueta truco. Mostrar todas las entradas
Mostrando entradas con la etiqueta truco. Mostrar todas las entradas
COLOCAR UNA IMÁGEN CON TEXTO EN UN LADO EXPLICITO O TODO ALREDEDOR.



Las Imágenes son la portada de una publicación donde el Lector se fija en la primera mirada y a continuación va a por el texto que tiene que ser de calidad pero primero va a la imágen por esto el texto tiene que estar muy bien colocado alrededor de la Imágen.

ahora os explicare el caso más clásico es el de envolver con texto una foto que se ubicará contra el margen izquierdo.

Aqui lo que debemos hacer es “flotar” hacia la izquierda el elemento, en este caso, la imagen.

FIRMA TUS ENTRADAS! AUTOMÁTICAMENTE..
En blogger puedes poner tu firma al final de cada uno de tus post de forma automática de forma muy sencilla.

La firma es importante porque hace que el visitante recuerde tu blog mas fácilmente, es uno de esos detalles que añaden un poco de personalidad a las plantillas de blogger, quién dice firma dice foto anuncio… da igual lo que importa es añadir esos pequeños detalles que hacen que tu blog sea especial.
Quiero poner una firma al final de todos mis posts pero que ya salga sola, que no tenga que ponerla cada vez que hago una entrada.

Boton de entradas al azar para Blogger





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

Un clic en “Diseño” 

                                               

2-Clic en “Añadir un gadget”

                                                               

3-Busca el widget que dice “HTML-Javascript” y ábrelo 

                                                                           

4-Coloca el siguiente codigo en el interior

                                                                             


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

Da un clic en “Guardar”  Y listo.


Fuente: redeando.blogspot.com 

Fecha:18/03/2017

Publicado por: 




Índice de entradas Personalizable Vertical basado en Etiquetas



Hoy voy a mostrar cómo agregar un índice de las entradas a una página del blog. Tiene muchas opciones de configuración para adaptarlo a vuestro propio diseño las cuales describiré a continuación.
Esta basado en las Etiquetas y lleva el atributo new, que te indica cuales la pagina nueva que se ha editado últimamente se puede ver todas en una Pagina.
Como veis en la imagen, En la izquierda están las Etiquetas y a la derecha el Nombre de la entrada

Después de ver la demostración si Quieres añadirlo a tu blog sigue los pasos siguientes.

En primer lugar tenemos que crear una nueva página. Panel de Administración  Páginas,Pagina Nueva, Página en blanco. El editor de la página se abrirá y ahora haga clic en la ficha HTML. 

Una vez en la ficha HTML del editor de páginas, agregue el código siguiente


<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#252524; /*color fondo etiquetas*/
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:white;}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;}
#tabbed-toc .toc-tabs {
width:15%;
float:left;}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* color enlace etiqueta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {
background-color:#4B4B4B; /* background de etiquetas */
color:white;} /* color enlace etiqueta con background */
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#ccc; /* background de la primera etiqueta */
color:white; /* color enlace primera etiqueta con background */
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:85%;
float:right;
background-color:#ffffff; /* color separación entre entradas */
border-left:5px solid #ccc; /* borde separación entre etiquetas y entradas */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#3A3A3A; /* color enlace de entradas */
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;}
#tabbed-toc .panel li:nth-child(even) {
background-color:#DFDDDD;} /* primer color separación entre entradas */
#tabbed-toc .panel li:nth-child(even) {
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li.bold a {
background-color:#333; /* color background de las entradas */
color:white; /* color del enlace con el background de las entradas */
outline:none;}
@media (max-width:700px) {
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;}
#tabbed-toc .toc-content {
border:none;}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;}}
</style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.amorsevillista.com/" title="indice">Amor Sevillista</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "https://famagblogfacil.blogspot.com.es", /* url de tu blog */
containerId: "tabbed-toc",
activeTab: 1,//()
showDates:false,
numChars: 200,
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 5,
newText: " - <em style='color:red;'>Nuevo!</em>"
};
</script>
<script src='https://dl.dropboxusercontent.com/u/54259066/indice.js
' type='text/javascript'></script>

Ahora cambie la dirección URL en "Url de tu blog"

Puedes cambiar otros ajustes, lo he descrito brevemente en el código .

Después de realizar los cambios, guarda la página y enlázala en el menu o donde quieras, ahora ya puedes ver todo el contenido del blog en una sola página.


Fuente:   amorsevillista

Fecha:09/03/2017

Publicado por:



Entradas populares con forma de cubo 3D 



Todos los que utilizamos la plataforma de Blogger, conocemos el gadget de entradas populares, que nos informa de los articulos mas visitados de nuestro blog. El aspecto 'de casa' de este artilugio es un poquito simple, pero siempre se puede rediseñar como ya os he mostrado en otras tantas entradas. En este caso lo vamos a 'convertir' en un cubo que ira girando con efecto 3D, mostrando los posts en cada una de sus caras.

Para instalarlo en el blog, obviamente debemos tener el gadget de entradas populares, marcando solamente la casilla de imagen en miniatura,

Despues, deberemos copiar el siguiente codigo y pegarlo en un gadget HTML/Javascript y situarlo encima del anterior, como podeis observar en la imagen de la izquierda. Guardamos los cambios y la disposicion y ya lo tenemos. Facilito ¿Verdad? Si lo deseais, podeis ver una demo en el Sidebar en entradas Populares


<style type="text/css">
.cube { width: 200px; height: 200px;margin: 0 auto;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
(function($) { // Hide scope, no $ conflict

/* Image cube manager. */
function ImageCube() {
    this._defaults = {
        direction: 'random', // Direction of rotation: random|up|down|left|right
        randomSelection: ['up', 'down', 'left', 'right'], // If direction is random, select one of these
        speed: 1000, // Time taken (milliseconds) to transition
        easing: 'linear', // Name of the easing to use during transitions
        repeat: true, // True to automatically trigger a new transition after a pause
        pause: 1000, // Time (milliseconds) between transitions
        selection: 'forward', // How to choose the next item to show:
            // 'forward', 'backward', 'random'
        shading: true, // True to add shading effects, false for no effects
        opacity: 0.8, // Maximum opacity (0.0 - 1.0) for highlights and shadows
        imagePath: '', // Any extra path to locate the highlight/shadow images
        full3D: true, // True to add cubic perspective, false for 2D rotation
        segments: 20, // The number of segments that make up each 3D face
        reduction: 30, // The amount (pixels) of reduction for far edges of the cube
        expansion: 10, // The amount (pixels) of expansion for the near edge of the cube
        lineHeight: [0.0, 1.25], // Hidden and normal line height (em) for text
        letterSpacing: [-0.4, 0.0], // Hidden and normal letter spacing (em) for text
        beforeRotate: null, // Callback before rotating
        afterRotate: null // Callback after rotating
    };
};

var UP = 0;
var DOWN = 1;
var LEFT = 2;
var RIGHT = 3;

var PROP_NAME = 'imageCube';

$.extend(ImageCube.prototype, {
    /* Class name added to elements to indicate already configured with image cube. */
    markerClassName: 'hasImageCube',

    /* Override the default settings for all image cube instances.
       @param  options  (object) the new settings to use as defaults */
    setDefaults: function(options) {
        extendRemove(this._defaults, options || {});
    },

    /* Attach the image cube functionality to a div.
       @param  target   (element) the containing division
       @param  options  (object) the settings for this image cube instance (optional) */
    _attachImageCube: function(target, options) {
        target = $(target);
        if (target.hasClass(this.markerClassName)) {
            return;
        }
        var allOptions = $.extend({_position: target.css('position')},
            this._defaults, options || {});
        $.data(target[0], PROP_NAME, allOptions);
        target.addClass(this.markerClassName).css({position: 'relative'}).
            children().each(function() {
                var child = $(this);
                $.data(this, PROP_NAME,
                    {width: child.css('width'), height: child.css('height'),
                    position: child.css('position'), lineHeight: child.css('lineHeight'),
                    letterSpacing: child.css('letterSpacing')});
                child.css({width: target.css('width'), height: target.css('height'),
                    position: 'absolute', lineHeight: allOptions.lineHeight[1],
                    letterSpacing: allOptions.letterSpacing[1]});
            }).not(':first').hide();
        this._prepareRotation(target[0]);
    },

    /* Note current visible child and schedule a repeat rotation (if required).
       @param  target  (element) the containing division */
    _prepareRotation: function(target) {
        target = $(target);
        target.children('.imageCubeShading,.imageCubeFrom,.imageCubeTo').remove();
        var options = $.data(target[0], PROP_NAME);
        options.current = target.children(':visible')[0];
        var randomSelection = function(collection) {
            return (!collection.length ? collection : collection.filter(
                ':eq(' + Math.floor(Math.random() * collection.length) + ')'));
        };
        options.next = (options.selection == 'random' ?
            randomSelection(target.children(':hidden')) :
            (options.selection == 'backward' ? $(options.current).prev() :
            $(options.current).next()));
        options.next = (options.next.length ? options.next :
            (options.selection == 'random' ? options.current :
            (options.selection == 'backward' ? target.children(':last') :
            target.children(':first'))))[0]; // Cycle around if at the end
        if (options.repeat && !options._timer) {
            options._timer = setTimeout(function() {
                    $.imagecube._rotateImageCube(target[0]); },
                options.pause);
        }
        $.data(target[0], PROP_NAME, options);
    },

    /* Rotate the image cube to the next face.
       @param  target    (element) the containing division
       @param  next      (jQuery or element or string or number) next face to show (optional)
       @param  callback  (function) a function to call when finished with the rotation (optional) */
    _rotateImageCube: function(target, next, callback) {
        if (typeof next == 'function') {
            callback = next;
            next = '';
        }
        target = $(target);
        this._stopImageCube(target[0], true);
        var options = $.data(target[0], PROP_NAME);
        if (next != null) {
            next = (typeof next == 'number' ? target.children(':eq(' + next + ')') : $(next));
            if (target.children().filter(function() { return this === next[0]; }).length > 0) {
                options.next = next;
            }
        }
        var callbackArgs = [options.current, options.next];
        if (options.beforeRotate) {
            options.beforeRotate.apply(target[0], callbackArgs);
        }
        var animTo = {};
        animTo[PROP_NAME] = 1.0;
        target.attr(PROP_NAME, 0.0).animate(animTo, options.speed, options.easing,
            function() {
                if (options.afterRotate) {
                    options.afterRotate.apply(target[0], callbackArgs);
                }
                if (callback) {
                    callback.apply(target[0]);
                }
            });
    },

    /* Retrieve the currently visible child of an image cube div.
       @param  target  (element) the containing division
       @return  (element) the currently displayed child of target division */
    _currentImageCube: function(target) {
        return ($(target).hasClass(this.markerClassName) ?
            $.data(target, PROP_NAME).current : null);
    },

    /* Retrieve the next visible child of an image cube div.
       @param  target  (element) the containing division
       @return  (element) the next to be displayed child of target division */
    _nextImageCube: function(target) {
        return ($(target).hasClass(this.markerClassName) ?
            $.data(target, PROP_NAME).next : null);
    },

    /* Stop the image cube automatically rotating to the next face.
       @param  target     (element) the containing division
       @param  timerOnly  (boolean) true if only temporarily stopping (optional) */
    _stopImageCube: function(target, timerOnly) {
        var options = $.data(target, PROP_NAME);
        if (options._timer) {
            clearTimeout(options._timer);
            options._timer = null;
        }
        if (!timerOnly) {
            options.repeat = false;
        }
        $.data(target, PROP_NAME, options);
    },

    /* Start the image cube automatically rotating to the next face.
       @param  target  (element) the containing division */
    _startImageCube: function(target) {
        this._changeImageCube(target, {repeat: true});
    },

    /* Reconfigure the settings for an image cube div.
       @param  target   (element) the containing division
       @param  options  (object) the new settings for this image cube instance or
                        (string) the name of the setting
       @param  value    (any, optional) the value of the setting */
    _changeImageCube: function(target, options, value) {
        if (typeof options == 'string') {
            var opts = {};
            opts[options] = value;
            options = opts;
        }
        var curOptions = $.data(target, PROP_NAME);
        extendRemove(curOptions || {}, options || {});
        $.data(target, PROP_NAME, curOptions);
        this._prepareRotation(target);
    },

    /* Remove the image cube functionality from a div.
       @param  target  (element) the containing division */
    _destroyImageCube: function(target) {
        target = $(target);
        if (!target.hasClass(this.markerClassName)) {
            return;
        }
        this._stopImageCube(target[0]);
        var options = $.data(target[0], PROP_NAME);
        target.stop().css({position: options._position}).
            removeClass(this.markerClassName).
            children('.imageCubeShading,.imageCubeFrom,.imageCubeTo').remove();
        target.children().each(function() {
            $(this).css($.data(this, PROP_NAME)).show();
            $.removeData(this, PROP_NAME);
        });
        $.removeData(target[0], PROP_NAME);
    },

    /* Prepare the image cube for animation.
       @param  target  (element) the containing division */
    _prepareAnimation: function(target) {
        var options = $.data(target, PROP_NAME);
        var target = $(target);
        var offset = {left: 0, top: 0};
        target.parents().each(function() { // Check if this area is fixed
            var $this = $(this);
            if ($this.css('position') == 'fixed') {
                offset.left -= $this.offset().left;
                offset.top -= $this.offset().top;
                return false;
            }
        });
        var dims = {width: target.width(), height: target.height()};
        var direction = (options.direction != 'random' ? options.direction :
            options.randomSelection[Math.floor(Math.random() * options.randomSelection.length)]);
        direction = Math.max(0, $.inArray(direction, ['up', 'down', 'left', 'right']));
        options._curDirection = direction;
        var upDown = (direction == UP || direction == DOWN);
        var leftRight = (direction == LEFT || direction == RIGHT);
        var upLeft = (direction == UP || direction == LEFT);
        var firstOpacity = (upLeft ? 0 : options.opacity);
        var pFrom = $(options.current);
        var pTo = $(options.next);
        // Calculate borders and padding for both elements
        var border = [];
        var parseBorders = function(p) {
            var b = [0, 0, 0, 0];
            if (!$.browser.msie || p.css('border')) {
                for (var i = 0; i < 4; i++) {
                    b[i] = p.css('border' + ['Left', 'Right', 'Top', 'Bottom'][i] + 'Width');
                    var extra = ($.browser.msie ? 1 : 0);
                    b[i] = parseFloat(
                        {thin: 1 + extra, medium: 3 + extra, thick: 5 + extra}[b[i]] || b[i]);
                }
            }
            return b;
        };
        border[0] = parseBorders(pFrom);
        border[1] = parseBorders(pTo);
        var pad = [];
        pad[0] = [parseFloat(pFrom.css('padding-left')), parseFloat(pFrom.css('padding-right')),
            parseFloat(pFrom.css('padding-top')), parseFloat(pFrom.css('padding-bottom'))];
        pad[1] = [parseFloat(pTo.css('padding-left')), parseFloat(pTo.css('padding-right')),
            parseFloat(pTo.css('padding-top')), parseFloat(pTo.css('padding-bottom'))];
        var extras = [];
        extras[0] = [($.boxModel ? border[0][0] + border[0][1] + pad[0][0] + pad[0][1] : 0),
            ($.boxModel ? border[0][2] + border[0][3] + pad[0][2] + pad[0][3] : 0)];
        extras[1] = [($.boxModel ? border[1][0] + border[1][1] + pad[1][0] + pad[1][1] : 0),
            ($.boxModel ? border[1][2] + border[1][3] + pad[1][2] + pad[1][3] : 0)];
        // Define the property ranges per element
        var stepProps = [];
        stepProps[0] = {elem: pFrom[0], // Currently displayed element
            props: {left: {start: offset.left,
                end: offset.left + (direction == RIGHT ? dims.width : 0), units: 'px'},
            width: {start: dims.width - extras[0][0],
                end: (upDown ? dims.width - extras[0][0] : 0), units: 'px'},
            top: {start: offset.top,
                end: offset.top + (direction == DOWN ? dims.height : 0), units: 'px'},
            height: {start: dims.height - extras[0][1],
                end: (upDown ? 0 : dims.height - extras[0][1]), units: 'px'},
            paddingLeft: {start: pad[0][0], end: (leftRight ? 0 : pad[0][0]), units: 'px'},
            paddingRight: {start: pad[0][1], end: (leftRight ? 0 : pad[0][1]), units: 'px'},
            paddingTop: {start: pad[0][2], end: (upDown ? 0 : pad[0][2]), units: 'px'},
            paddingBottom: {start: pad[0][3], end: (upDown ? 0 : pad[0][3]), units: 'px'},
            borderLeftWidth: {start: border[0][0], end: (leftRight ? 0 : border[0][0]), units: 'px'},
            borderRightWidth: {start: border[0][1], end: (leftRight ? 0 : border[0][1]), units: 'px'},
            borderTopWidth: {start: border[0][2], end: (upDown ? 0 : border[0][2]), units: 'px'},
            borderBottomWidth: {start: border[0][3], end: (upDown ? 0 : border[0][3]), units: 'px'},
            lineHeight: {start: options.lineHeight[1],
                end: (upDown ? options.lineHeight[0] : options.lineHeight[1]), units: 'em'},
            letterSpacing: {start: options.letterSpacing[1],
                end: (upDown ? options.letterSpacing[1] : options.letterSpacing[0]), units: 'em'}}};
        stepProps[1] = {elem: pTo[0], // New element to be displayed
            props: {left: {start: offset.left + (direction == LEFT ? dims.width : 0),
                end: offset.left, units: 'px'},
            width: {start: (upDown ? dims.width - extras[1][0] : 0),
                end: dims.width - extras[1][0], units: 'px'},
            top: {start: offset.top + (direction == UP ? dims.height : 0),
                end: offset.top, units: 'px'},
            height: {start: (upDown ? ($.browser.msie ? 1 : 0) : dims.height - extras[1][1]),
                end : dims.height - extras[1][1], units: 'px'},
            paddingLeft: {start: (leftRight ? 0 : pad[1][0]), end: pad[1][0], units: 'px'},
            paddingRight: {start: (leftRight ? 0 : pad[1][1]), end: pad[1][1], units: 'px'},
            paddingTop: {start: (upDown ? 0 : pad[1][2]), end: pad[1][2], units: 'px'},
            paddingBottom: {start: (upDown ? 0 : pad[1][3]), end: pad[1][3], units: 'px'},
            borderLeftWidth: {start: (leftRight ? 0 : border[1][0]), end: border[1][0], units: 'px'},
            borderRightWidth: {start: (leftRight ? 0 : border[1][1]), end: border[1][1], units: 'px'},
            borderTopWidth: {start: (upDown ? 0 : border[1][2]), end: border[1][2], units: 'px'},
            borderBottomWidth: {start: (upDown ? 0 : border[1][3]), end: border[1][3], units: 'px'},
            lineHeight: {start: (upDown ? options.lineHeight[0] : options.lineHeight[1]),
                end: options.lineHeight[1], units: 'em'},
            letterSpacing: {start: (upDown ? options.letterSpacing[1] : options.letterSpacing[0]),
                end: options.letterSpacing[1], units: 'em'}}};
        if (options.shading) {
            // Initialise highlight and shadow objects (or colours on IE)
            var setHighShad = function(props, startOpacity, endOpacity) {
                return {left: {start: props.left.start, end: props.left.end, units: 'px'},
                    width: {start: props.width.start, end: props.width.end, units: 'px'},
                    top: {start: props.top.start, end: props.top.end, units: 'px'},
                    height: {start: props.height.start, end: props.height.end, units: 'px'},
                    paddingLeft: {start: props.paddingLeft.start + props.borderLeftWidth.start,
                        end: props.paddingLeft.end + props.borderLeftWidth.end, units: 'px'},
                    paddingRight: {start: props.paddingRight.start + props.borderRightWidth.start,
                        end: props.paddingRight.end + props.borderRightWidth.end, units: 'px'},
                    paddingTop: {start: props.paddingTop.start + props.borderTopWidth.start,
                        end: props.paddingTop.end + props.borderTopWidth.end, units: 'px'},
                    paddingBottom: {start: props.paddingBottom.start + props.borderBottomWidth.start,
                        end: props.paddingBottom.end + props.borderBottomWidth.end, units: 'px'},
                    opacity: {start: startOpacity, end: endOpacity, units: ''}};
            };
            stepProps[2] = {elem: // Highlight shading (up/left)
                $(($.browser.msie ? '<img src="' + options.imagePath + 'imageCubeHigh.png"' :
                '<div') + ' class="imageCubeShading" style="background-color: white; opacity: ' +
                firstOpacity + '; z-index: 10; position: absolute;"' +
                ($.browser.msie ? '/>' : '></div>'))[0],
                props: setHighShad(stepProps[upLeft ? 0 : 1].props,
                firstOpacity, options.opacity - firstOpacity)};
            stepProps[3] = {elem: // Shadow shading (down/right)
                $(($.browser.msie ? '<img src="' + options.imagePath + 'imageCubeShad.png"' :
                '<div') + ' class="imageCubeShading" style="background-color: black; opacity: ' +
                (options.opacity - firstOpacity) + '; z-index: 10; position: absolute;"' +
                ($.browser.msie ? '/>' : '></div>'))[0],
                props: setHighShad(stepProps[upLeft ? 1 : 0].props,
                options.opacity - firstOpacity, firstOpacity)};
        }
        // Set up full 3D rotation
        if (options.full3D) {
            for (var i = 0; i < options.segments; i++) {
                target.append(pFrom.clone().addClass('imageCubeFrom').
                    css({display: 'block', position: 'absolute', overflow: 'hidden'}));
                if (options.shading) {
                    target.append($(stepProps[upLeft ? 2 : 3].elem).clone());
                }
            }
            for (var i = 0; i < options.segments; i++) {
                target.append(pTo.clone().addClass('imageCubeTo').
                    css({display: 'block', position: 'absolute', width: 0, overflow: 'hidden'}));
                if (options.shading) {
                    target.append($(stepProps[upLeft ? 3 : 2].elem).clone());
                }
            }
            pFrom.hide();
            pTo.css({width: dims.width - extras[1][0], height: dims.height - extras[1][1]});
        }
        else {
            // Initialise from and to objects
            var initCSS = function(props) {
                return {left: props.left.start + 'px', width: props.width.start + 'px',
                    top: props.top.start + 'px', height: props.height.start + 'px',
                    lineHeight: props.lineHeight.start + 'em',
                    padding: props.paddingTop.start + 'px ' + props.paddingRight.start + 'px ' +
                    props.paddingBottom.start + 'px ' + props.paddingLeft.start + 'px',
                    borderLeftWidth: props.borderLeftWidth.start + 'px',
                    borderRightWidth: props.borderRightWidth.start + 'px',
                    borderTopWidth: props.borderTopWidth.start + 'px',
                    borderBottomWidth: props.borderBottomWidth.start + 'px',
                    letterSpacing: props.letterSpacing.start + 'em', overflow: 'hidden'};
            };
            pFrom.css(initCSS(stepProps[0].props));
            pTo.css(initCSS(stepProps[1].props)).show();
            if (options.shading) {
                target.append(stepProps[2].elem).append(stepProps[3].elem);
            }
        }
        // Pre-compute differences
        for (var i = 0; i < stepProps.length; i++) {
            for (var name in stepProps[i].props) {
                var prop = stepProps[i].props[name];
                prop.diff = prop.end - prop.start;
            }
        }
        return stepProps;
    },

    /* Draw one panel of the 3D perspective view of the cube.
       @param  target     (element) the container
       @param  pos        (number) the current position (0.0 - 1.0)
       @param  stepProps  (object[]) details about the items being animated
       @return  (boolean) true if drawn in 3D, false if not */
    _drawFull3D: function(target, pos, stepProps) {
        var options = $.data(target, PROP_NAME);
        if (!options.full3D) {
            return false;
        }
        var target = $(target);
        var direction = options._curDirection;
        var upDown = (direction == UP || direction == DOWN);
        var upLeft = (direction == UP || direction == LEFT);
        var width = target.width();
        var height = target.height();
        if (width == 0 || height == 0) {
            return true;
        }
        var current = (1 - pos) * (upDown ? height : width);
        var segments = options.segments;
        var maxExpand = options.expansion * (1 - Math.abs(2 * current - (upDown ? height : width)) /
            (upDown ? height : width));
        var maxReduce = options.reduction - (options.reduction * current / (upDown ? height : width));
        var update = function(className, al, at, bl, bt, cl, ct, dl, dt, opacity, props, attr) {
            var ws = [bl - al, cl - dl];
            var w = Math.max(ws[0], ws[1]);
            var hs = [dt - at, ct - bt];
            var h = Math.max(hs[0], hs[1]);
            var wStep = (upDown ? (ws[0] - ws[1]) / (segments - 1) / 2 : w / segments);
            var hStep = (upDown ? h / segments : (hs[0] - hs[1]) / (segments - 1) / 2);
            var pbw = props.paddingLeft[attr] + props.paddingRight[attr] +
                props.borderLeftWidth[attr] + props.borderRightWidth[attr];
            var pbh = props.paddingTop[attr] + props.paddingBottom[attr] +
                props.borderTopWidth[attr] + props.borderBottomWidth[attr];
            var ral = Math.round(al);
            var rat = Math.round(at);
            var thisLeft = ral;
            var thisTop = rat;
            var i = 0;
            for (var j = 0; j < target[0].childNodes.length; j++) {
                var child = target[0].childNodes[j];
                if (child.className != className) {
                    continue;
                }
                var nextLeft = Math.round(al + (i + 1) * wStep);
                var nextTop = Math.round(at + (i + 1) * hStep);
                var wCur = ws[0] - (upDown ? 2 * i * wStep : 0);
                var hCur = hs[0] - (upDown ? 0 : 2 * i * hStep);
                child.style.left = (upDown ? thisLeft : al) + 'px';
                child.style.top = (upDown ? at : thisTop) + 'px';
                child.style.width = Math.max(0, wCur - pbw) + 'px';
                child.style.height = Math.max(0, hCur - pbh) + 'px';
                child.style.letterSpacing = (upDown ? wCur / w * (options.letterSpacing[1] -
                    options.letterSpacing[0]) + options.letterSpacing[0] :
                    pos * props.letterSpacing.diff + props.letterSpacing.start) +
                    props.letterSpacing.units;
                child.style.lineHeight = (!upDown ? hCur / h * (options.lineHeight[1] -
                    options.lineHeight[0]) + options.lineHeight[0] :
                    pos * props.lineHeight.diff + props.lineHeight.start) +
                    props.lineHeight.units;
                child.style.clip = 'rect(' + (!upDown ? 'auto' : (thisTop - rat) + 'px') + ',' +
                    (upDown ? 'auto' : (nextLeft - ral) + 'px') + ',' +
                    (!upDown ? 'auto' : (nextTop - rat) + 'px') + ',' +
                    (upDown ? 'auto' : (thisLeft - ral) + 'px') + ')';
                if (options.shading) {
                    var shading = child.nextSibling;
                    shading.style.left = thisLeft + 'px';
                    shading.style.top = thisTop + 'px';
                    shading.style.width = (upDown ? ws[0] - 2 * i * wStep : nextLeft - thisLeft) + 'px';
                    shading.style.height = (upDown ? nextTop - thisTop : hs[0] - 2 * i * hStep) + 'px';
                    shading.style.opacity = opacity;
                    if ($.browser.msie) {
                        shading.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
                    }
                }
                thisLeft = nextLeft;
                thisTop = nextTop;
                i++;
            }
        };
        update('imageCubeFrom',
            [maxReduce, -maxExpand, 0, width - current][direction], // top left
            [0, height - current, maxReduce, -maxExpand][direction],
            [width - maxReduce, width + maxExpand, current, width][direction], // top right
            [0, height - current, -maxExpand, maxReduce][direction],
            [width + maxExpand, width - maxReduce, current, width][direction], // bottom right
            [current, height, height + maxExpand, height - maxReduce][direction],
            [-maxExpand, maxReduce, 0, width - current][direction], // bottom left
            [current, height, height - maxReduce, height + maxExpand][direction],
            (!options.shading ? 0 : (upLeft ? pos : 1 - pos) *
            stepProps[2].props.opacity.diff + stepProps[2].props.opacity.start),
            stepProps[0].props, 'start');
        update('imageCubeTo',
            [-maxExpand, options.reduction - maxReduce, current, 0][direction], // top left
            [current, 0, -maxExpand, options.reduction - maxReduce][direction],
            [width + maxExpand, width - (options.reduction - maxReduce), width, width - current][direction], // top right
            [current, 0, options.reduction - maxReduce, -maxExpand][direction],
            [width - (options.reduction - maxReduce), width + maxExpand, width, width - current][direction], // bottom right
            [height, height - current, height - (options.reduction - maxReduce), height + maxExpand][direction],
            [options.reduction - maxReduce, -maxExpand, current, 0][direction], // bottom left
            [height, height - current, height + maxExpand, height - (options.reduction - maxReduce)][direction],
            (!options.shading ? 0 : (upLeft ? pos : 1 - pos) *
            stepProps[3].props.opacity.diff + stepProps[3].props.opacity.start),
            stepProps[1].props, 'end');
        return true;
    }
});

/* jQuery extend now ignores nulls!
   @param  target  (object) the object to extend
   @param  props   (object) the attributes to modify
   @return  (object) the updated target */
function extendRemove(target, props) {
    $.extend(target, props);
    for (var name in props) {
        if (props[name] == null) {
            target[name] = null;
        }
    }
    return target;
}

/* Attach the image cube functionality to a jQuery selection.
   @param  command  (string) the command to run (optional, default 'attach')
   @param  options  (object) the new settings to use for these image cube instances
   @return  (jQuery) for chaining further calls */
$.fn.imagecube = function(options) {
    var otherArgs = Array.prototype.slice.call(arguments, 1);
    if (options == 'current' || options == 'next') {
        return $.imagecube['_' + options + 'ImageCube'].
            apply($.imagecube, [this[0]].concat(otherArgs));
    }
    return this.each(function() {
        if (typeof options == 'string') {
            $.imagecube['_' + options + 'ImageCube'].
                apply($.imagecube, [this].concat(otherArgs));
        }
        else {
            $.imagecube._attachImageCube(this, options);
        }
    });
};

/* Enable synchronised animation for all of the image cube properties.
   @param  fx  (object) the effects instance to animate */
$.fx.step[PROP_NAME] = function(fx) {
    if (fx.state == 0 || !fx.stepProps) { // Initialisation
        fx.start = 0.0;
        fx.end = 1.0;
        fx.stepProps = $.imagecube._prepareAnimation(fx.elem);
        var elem = fx.stepProps[0].elem;
        fx.saveCSS = {borderLeftWidth: elem.style.borderLeftWidth,
            borderRightWidth: elem.style.borderRightWidth,
            borderTopWidth: elem.style.borderTopWidth,
            borderBottomWidth: elem.style.borderBottomWidth,
            padding: elem.style.padding};
    }

    if (!$.imagecube._drawFull3D(fx.elem, fx.pos, fx.stepProps)) {
        for (var i = 0; i < fx.stepProps.length; i++) { // Update all elements
            var comp = fx.stepProps[i];
            for (var name in comp.props) { // Update all properties
                var prop = comp.props[name];
                comp.elem.style[name] = (fx.pos * prop.diff + prop.start) + prop.units;
                if ($.browser.msie && name == 'opacity') {
                    comp.elem.style.filter = 'alpha(opacity=' +
                        ((fx.pos * prop.diff + prop.start) * 100) + ')';
                }
            }
        }
    }

    if (fx.state == 1) { // Tidy up afterwards
        $(fx.stepProps[0].elem).hide().css(fx.saveCSS);
        $(fx.stepProps[1].elem).show();
        $.imagecube._prepareRotation(fx.elem);
    }
};

/* Initialise the image cube functionality. */
$.imagecube = new ImageCube(); // singleton instance

})(jQuery);
</script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
});

</script>
<script>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(0($){$.h.j=0(){4 a=[];$6=$(\'.2-3 k\');a.5(\'<7 l="8"  m="n o">\');$(9).1(\'p\').q(0(){a.5($(9).1(\'.r-s\').t())});a.5(\'</7>\');$6.u(a.v(\'\'));4 b=$(\'.2-3\').1("d");b.f("w");b.f("x");4 c=$(\'.2-3\').1("a");c.g("y","");$(\'.2-3\').1("d").g(\'z\',0(i,e){A e.B("C-c","D")})}})(E);$(0(){$(\'#8\').F()});',42,42,'function|find|popular|posts|var|push|list|div|linksCube|this||||img||removeAttr|attr|fn||abupopularcube|ul|id|class|cube|repeatingCube|li|each|item|thumbnail|html|replaceWith|join|width|height|target|src|return|replace|s72|s300|jQuery|imagecube'.split('|'),0,{}))
</script>

Esto es todo.

Ahora mira en el blog y veras el cubo.



Fuente:  redeando

Fecha: 09/03/2017

Publicado por:



Poner dos imagenes una al lado de otra en una entrada.


Cuando hacemos una entrada en Blogger siempre o casi siempre ponemos una imagen para acompañar la entrada, pero cuando hay que poner do imagenes juntas aquí viene el problema (como ponerlas) Aquí os traigo un sencillo código para poner dos o tres imágenes una al lado de otra,como una mini galería.

Bueno no me enrollo mas y aquí os dejo en código como siempre os digo esta provado y lo podéis ver seguidamente.



Para dos imagenes

<IMG SRC="LINK DE LA IMAGEN 1" WIDTH=90 HEIGHT=180 BORDER=2 hspace=1><IMG SRC="LINK DE LA IMAGEN 2" WIDTH=90 HEIGHT=180 BORDER=2 hspace= 1>

Solo recordaros que lo teneis que instalar en HTLM.

Configuracion

"LINK DE LA IMAGEN 1 y 2"    Aqui van las URL de la imagenes

BORDER=2                             El tamaño del borde del marco, si no quereis marco poner 0

hspace=1                                   El espacio de imagen a imagen

WIDTH=90 HEIGHT=180      El Ancho y el Alto

Si Quereis colocar tres imagenes el código es este.

<IMG SRC="LINK DE LA IMAGEN 1" WIDTH=90 HEIGHT=180 BORDER=2 hspace=1><IMG SRC="LINK DE LA IMAGEN 2" WIDTH=90 HEIGHT=180 BORDER=2 hspace= 1><IMG SRC="LINK DE LA IMAGEN 3" WIDTH=90 HEIGHT=180 BORDER=2 hspace= 1>


La configuracion es la misma

i quereis centrar las imagenes en la pagina teneis que colocar este código delante del primer <IMG

 <center><IMG

 y el cierre despues del ultimo1>

1></center> 

Recordar que en Blogger para que se vean tres imagenes una al lado de otra el maximo de ancho de la imagen tiene que ser de 200px como maximo si no la tercera imagen se colocan en la parte de abajo

Si quereis colocar mas imagenes solo teneis que añadir esta linea detras de las otras sucesibamente.

<IMG SRC="LINK DE LA IMAGEN 2" WIDTH=90 HEIGHT=180 BORDER=2 hspace= 1>

Bueno esto es todo hasta otra.


Fecha:17/02/2017

Publicado por:                               



Entradas Relacionadas con miniaturas


Colocar un gadget de "Entradas Relacionadas" es una de las cosas que mas se han estado exigiendo este último tiempo, lo cual facilita mucho más el recorrido a los visitantes por nuestro Blog, tal cual lo mencionamos en la forma anterior para agregar dicho Gadget. En este caso no lo vamos a hacer por medio de otro sitio que agregue el Gadget de manera automática, sino lo vamos a hacer nosotros mismos mezclando un poco de código. Para que se den una idea de cómo se ve acá les dejo una foto:

Como verán, son unas simples miniaturas que, al apoyar el mouse sobre ellas se ve el título de dicha entrada, a mi en lo personal me gusta mucho y es hasta agradable a la vista :)

Vamos a "Plantilla" 
                                                                   

Abre "Editar HTLM"
                                                                       


En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

                                                                                     


Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo antes  del código que encontraste

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Ahora expandimos los artilugios y debajo de  <div class='post-footer'>  agregamos lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Entradas Relacionadas</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;http://www.webaholic.co.in/other/no-image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<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=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if>

Listo, esto fue todo, ahora guardamos la plantilla y ya podemos disfrutar de nuestras miniaturas de entradas relacionadas.


Fuente;   hogarblogger

Fecha:16/02/2017

Publicado por:             



               

Colocar "Entradas Relacionadas" en Blogger



Anteriormente vimos cómo colocar los gadgets de entradas relacionadas con miniaturas , después otra forma de poner las entradas relacionadas con un efecto y también otra que era proveída por un sitio externo que nos permitía colocar entradas relacionadas con imágenes o con texto.

 Mostrar o Ocultar el contenido de una Entrada



Algunas veces tenemos mucho contenido que agregar en una entrada pero no queremos mostrarlo todo de un solo golpe, ya sea porque no queremos que la entrada se haga demasiado larga o porque queremos que el contenido se vaya descubriendo poco a poco.
Y sí, ya antes habíamos visto cómo expandir y contraer partes de una entrada usando Scriptaculous y que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de hacerlo usando un simple javascript que aunque no tendrá efecto alguno cumple su función muy bien, que será la de mostrar y ocultar contenido.

Galeria de imagenes y texto


Es muy fácil crear tablas para Blogger, además puedes incluir imágenes o texto, en Blogger In te enseñamos a crear tablas para tu blog.

Con un sencillo código podemos incluir tablas vistosas para vuestros blogs, como véis en la imágen superior yo he creado varias en mi blog, 

Tú también puedes aprovechar éste recurso para dar a tu blog una presencia organizada incluyendo tablas allí donde no puedes usar el tabulador.