featured

julio 20, 2020

POST RECIENTES CON IMÁGENES PARA MI BLOG DE BLOGGER.

Widget de publicaciones recientes para blogs de Blogger, este widget lo podrás usar en cualquier bloc de Blogger.
Su función e instalación es sumamente fácil, lo único que tendrás que hacer es seguir mis instrucciones y nada mas.
A este widget de Blogger se lo conoce como publicaciones recientes, lo podrás insertar en cualquier parte de su bloc.
Una de las funciones que realiza este widget de publicaciones recientes es indicar las nuevas publicaciones y las antiguas publicaciones de tu bloc, con una imagen en miniatura y también se mostrara un texto de 60 caracteres.

Blogger entradas featured widget

enero 02, 2019

MENÚ PARA BLOGGER HORIZONTAL "BALLOON" .

Para que tengas una opcion original para poner los enlaces en tu blog o web, aqui te traigo otro menu diseñado con CSS e imagenes.
Le he puesto este nombre, porque en ingles 'balloon' quiere decir globo.
Como veras, al pasar el cursor sobre los enlaces, aparece un globo tipo comic de color negro que le da un aspecto original y visualmente diferente.

featured menú widget

enero 02, 2019

Botón 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

Blogger entradas featured truco

marzo 20, 2017

Mostrar un widget desplegable de categorías para blogger

Despues de presentarte un widget acordeón para blogger, os voy a dar a conocer un widget sencillo en el cual podreis utilizarlo como mejor os convenga. Este widget sirve para insertar manualmente los links de sus artículos que quieras mostrar por categorías, podrás aumentar las categorías y mostrar al momento que los usuarios le den un clic en su categoría. 

En este widget se desplegara un cuadro en el cual les mostrara los nombres de los artículos que quieran dar a conocer y así obtener mas vistas de algunos post que tal vez los usuarios hayan pasado por alto.

featured tutorial widget

marzo 10, 2017

Í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 featured índice truco

marzo 09, 2017

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:

cubo featured truco

marzo 09, 2017

< Poner dos imágenes 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.

featured imagenes truco

febrero 17, 2017

Entradas Relacionadas con miniatura.

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:

Blogger entradas featured truco

febrero 16, 2017

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.

Blogger entradas featured truco

febrero 16, 2017

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.

Blogger featured truco

febrero 16, 2017

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.

Blogger featured galeria imagenes truco

febrero 16, 2017

Barra de Titulo en Movimiento.

Bueno Amigos hoy traigo algo muy interesante, se trata de la barra del titulo del blog (la de el navegador) moviéndose, les dejo una imagen.

Traigo dos códigos diferentes pero funcionan igual de bien los dos empezaremos por el mas trabajoso entre "" lo digo porque tienes que meterte en la plantilla pero implementar este código es facilisimo si ya vereis;

Barra Blogger featured truco

enero 31, 2017

Barra de notificaciones para Blogger.

Aquí les traigo un sencillo código para agregar una barra de notificaciones transparente para tu blog en Blogger,muchas veces es importante notificar a nuestros usuarios sobre alguna noticia importante, rápida y de temporada. 

Por ejemplo, notificarles sobre algún cupón o promoción que queramos compartir, un evento, etc, así que por lo general no necesitas crear o publicar una entrada que pasará mucho permanentemente visible y que no debemos de eliminar posteriormente ya que una vez indexada nos dará un error 404, el cual no deseamos en nuestro blog.  el cual se puede utilizar para resaltar informaciones, noticias, etc., y que cuenta con un botón de cierre.

Barra Blogger featured notificaciones truco

enero 31, 2017

Abrir dos o más enlaces con un solo link en tu blog.

El truco se logra gracias a una función javascript; el código a usar es el siguiente:

Cambia lo resaltado en color azul por lo que se indica en cada caso. Ten en cuanta que este código lo debes pegar en la edición html de la plantilla o de la entrada donde quieras que se abran dos enlaces a la vez.

Blogger featured truco

enero 30, 2017

Como Hacer una copia de seguridad de las entradas y comentarios en Blogger

En la plataforma de Blogger se puede hacer una copia de seguridad de todo el contenido del blog, la copia de seguridad del contenido incluye las entradas, las páginas y los comentarios de una forma fácil y segura, con unos simples pasos.

Para ello sigue las siguientes instrucciones:

1 Ir a Blogger.com

2 Un clic en Configuración

3 Un clic en Otros

4 Justo alado del tema “Contenido (páginas, entradas y comentarios)” encontraras la pestaña “Hacer copia de seguridad del contenido”

5 Un clic en Hacer copia de seguridad del contenido

6 Les mostrara una nueva ventana

7 Un clic en Guardar en tu ordenador

Listo, ahora ya tienes una copia, de todas las entradas, páginas y comentarios de tu blog de Blogger guardadas en tu ordenador

Blogger copia de seguridad featured

enero 28, 2017

Como enviar un Sitemap a Bing y a Yahoo

En este post explicare claramente como vosotros podéis enviar un Sitemap a Bing y a Yahoo. Actualmente solo tendrás que enviar un Sitemap directamente a Bing y se asociara a Yahoo ya que Yahoo completo la transición algorítmica a Bing. Yahoo Site Explorer fusiono en las Herramientas para Webmaster de Bing con un contrato de asociación. A partir de entonces solo deberás presentar un mapa de tu sitio web o blog a Bing, con el fin de contar con la calidad del tráfico web de Yahoo y Bing. solo tienes que seguir las instrucciones que te voy a indicar.

Bueno, para que puedan enviar un Sitemap de su blog o pagina web a Bing solo deberán seguir las siguientes instrucciones.

1 Tendras que tener una cuenta de Hotmail.com   https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1482078279&rver=6.4.6456.0&wp=MBI_SSL_SHARED&wreply=https:%2F%2Fmail.live.com%2Fdefault.aspx%3Frru%3Dinbox&lc=3082&id=64855&mkt=es-es&cbcxt=mai

2 Una vez que ya tengas habilitado y registrado en tu cuenta de Hotmail.com, sigue las sigue las siguientes instrucciones

3 Abre el siguiente link de las Herramientas para Webmaster de Bing con tu cuenta de Hotmail e “inicia sesión”

-------------------------------------------------------------------------------------------------------------------------

http://www.bing.com/toolbox/webmaster     http://www.bing.com/toolbox/webmaster

-------------------------------------------------------------------------------------------------------------------------

4  Una vez que hayas iniciado sesión se te mostrara una ventana como la siguiente imagen

5 Ingresa la dirección de tu blog o pagina web donde dice “Agregar un sitio”, y luego le das un clic en “AGREGAR” mira la imagen a continuación

6 Luego se te mostrara una nueva ventana en la cual tendrás que dar un clic en “AGREGAR”, mira la imagen a continuación

7 Al dar un clic en “AGREGAR” te mostrara una nueva ventana en la cual te indica varias formas de insertar el rastreador de Bing, elige la opción 2, la cual dice “Opción 2: copia y pega una etiqueta <meta> en tu página web predeterminada” a continuación mira la imagen

8 Deberás copiar el código que te proporciona Bing, dentro del Editor HTML de tu plantilla, por ejemplo este es el código que me proporciono Bing para que lo inserte después del código <head> de mi plantilla: 

<meta name="msvalidate.01" content="615BCD2374130C*****82ED6C114F1" /> Lógicamente a ustedes les llegara otro código diferente.

9 Para insertar el código proporcionado por Bing en su plantilla de blogger, deberán seguir las siguientes instrucciones:

A.    Dirígete a blogger

B.     Da un clic en “Plantilla”

C.     Luego un clic en “Editar HTML”

D.    Busca el código <head> al principio de tu plantilla e inserta el código que te proporciono Bing abajo del <head>, y luego le das un clic en “Guardar plantilla” mira la imagen a continuación

10 Una vez que hayas insertado el código proporcionado por Bing en tu plantilla, dirígete nuevamente a las Herramientas para Webmaster de Bing y le das un clic en “COMPROBAR”, mira la imagen a continuación

11 Luego se te abrirá una nueva venta en la cual ya podrás administrar las herramientas para Webmaster de Bing, mira la imagen

12 Normalmente tomara en la mayoría de las páginas web para que se indexe de entre 3 días para Bing y YAHOO para poder empezar a mostrar los datos de su sitio recién presentado, pero aún puede tardar unos 5 días. Así que se paciente y espera que tus enlaces de blogs puedan aparecer en los motores de búsqueda de Bing y YAHOO dentro de unos 3 o 5 días.

13 Ahora dale un clic donde dice “Enviar un mapa del sitio”

- Dentro de la caja ingrese el siguiente link

--------------------------------------------------------------------------------------------------------------------------

http://www.grupodelecluse.com/feeds/posts/default?orderby=updated

--------------------------------------------------------------------------------------------------------------------------

- Cambie www.grupodelelcuse.com por la direccion URL de su blog de Blogger o dominio personalizado

- Luego de un clic en "Enviar"

14 Luego te saldrá una ventana mostrando el Último envió y las URL enviadas, mira la imagen a continuación

15 Por ultimo podemos enviar 10 URLs de nuestro blog o paginas web, para dar a conocer e indexar nuestras URLs, vamos a dar un clic en “Configurar mi sitio”

Luego un clic en “Enviar direcciones URL”

Ahora se te abrirá una nueva ventana, en la cual podrás enviar hasta 10 direcciones URLs de tu blog o pagina web por día. Inserta una dirección URL de tu blog o pagina web y luego le das un clic en “ENVIAR”, podrás realizar estos envíos hasta completar 10 veces y nadas. Mira la imagen.

Recuerda volver todos los días a las Herramientas para Webmaster de Bing para insertar otras 10 URLs de tu blog o pagina web, hasta que acabes de insertar todas las URLs, y no envíes las mismas URLs que ya enviaste la semana anterior, tienes que enviar nuevas URLs que hayas publicado, así te quedaría, mira la imagen.

16 Para enviar un Sitemap automático a Bing y Yahoo, es recomendable que se lo haga cada semana, o cada vez que tengas por lo menos unas 10 publicaciones nuevas de tu blog o pagina web, realizar este PIN es muy fácil solo tendrás que copiar un link realizando un solo cambio, copia el siguiente link:

--------------------------------------------------------------------------------------------------------------------------

http://www.bing.com/webmaster/ping.aspx?siteMap=http%3A%2F%2Fwww.grupodelecluse.com%2Fatom.xml%3Fredirect%3Dfalse%26start-index%3D1%26max-results%3D500

--------------------------------------------------------------------------------------------------------------------------

Realiza este cambio:

Deberás borrar la dirección URL que esta marcado de color amarillo www.grupodelecluse.com  y remplazarlo por la dirección URL de tu blog o pagina web, luego copias todo el link y lo insertas en tu navegador y le das un enter, mira la imagen

17 Si tu pagina web o blog tiene mas de 500 publicaciones y menos de 1000, tendras que seguir las mismas instrucciones del Paso 15, realizando un solo cambio con el nombre de tu blog o pagina web, y copias el siguiente link:

http://www.bing.com/webmaster/ping.aspx?siteMap=http%3A%2F%2Fwww.grupodelecluse.com%2Fatom.xml%3Fredirect%3Dfalse%26start-index%3D501%26max-results%3D500

18 Y por ultimo si tu blog o página web tiene más de 1000 publicaciones y menos de 1500, tendrás que seguir las mismas instrucciones realizando un solo cambio con el nombre de tu blog o pagina web, copia el siguiente link en tu navegador

--------------------------------------------------------------------------------------------------------------------------

http://www.bing.com/webmaster/ping.aspx?siteMap=http%3A%2F%2Fwww.grupodelecluse.com%2Fatom.xml%3Fredirect%3Dfalse%26start-index%3D1001%26max-results%3D500

--------------------------------------------------------------------------------------------------------------------------

Eso es todo espero les haya servido de mucha ayuda este grandioso tutorial de cómo enviar un mapa de su pagina web o blog Sitemap a Bing y Yahoo.

featured Sitemap

enero 28, 2017

Insertar el buscador personalizado de Google en Blogger

En esta nueva guía de como agregar un buscador personalizado de Google en tu blog de Blogger, podrás realizar paso a paso su implementación, de una forma fácil y segura, lo que necesitas es seguir las instrucciones tal como lo muestro en este tutorial creado para usuarios de Blogger

El motor de búsqueda personalizada en que tipos de pantalla funciona

Funciona en todos los tipos de pantalla tanto para ordenadores de escritorio, Smartphone, Tabletas.

Qué es la Búsqueda personalizada

La Búsqueda personalizada de Google te permite añadir un motor de búsqueda a tu sitio web para ayudar a los usuarios a encontrar la información que buscan.

Por ejemplo:

- Aplicar el diseño de tu sitio al cuadro de búsqueda y a la página de resultados.

- Usar funciones de búsqueda como las búsquedas restringidas, las opciones de autocompletar o los resultados promocionados para mejorar la experiencia de búsqueda de los usuarios.

- Comprender el comportamiento de tus usuarios enlazando tu motor de búsqueda a Google Analytics.

- Obtener ingresos con tu motor de búsqueda mediante Google AdSense.

Cómo funciona

Una vez que se haya creado el motor de búsqueda personalizada de Google, se deberá copiar un código generado por Google, luego pegarlo en un widget HTML/Javascript justo debajo de de la descripción de tu blog de Blogger, para hacerlo más visible a los usuarios que visitan tu blog.

Los internautas podrán buscar fácilmente en el motor de búsqueda personalizada que se encuentra en tu blog.

Al buscar en el motor de búsqueda personalizada se desplegara una pantalla en la cual primero aparecerá los anuncios publicitarios generados por AdSense basados en su contenido, y justo debajo de los anuncios estarán los resultados de tu blog.

buscador featured Google

enero 28, 2017