Mostrando entradas con la etiqueta Consejos Blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta Consejos Blogger. Mostrar todas las entradas

lunes, 28 de julio de 2014

Quieres saber cuál es el Feed de tu blog en Blogger ?



Hola chicas, hoy les quiero ensenar como poder conseguir el Feed de su blog!
Es algo simple y quizás muchas ya sepan como se hace, pero bueno.. digamos que esta entrada sera para quienes no sepan como hacer! ..obvio nO! :)
Personalmente no sabia como se hacia, hasta que en "Mejora tu Blog" encontré la ayuda e información requerida y aprendí hacerlo. Por eso lo comparto, porque siempre hay quienes no saben como hacerlo!
Cabe dejar saber que la url de tu feed es útil para cuando quieres enlazar las publicaciones de tu blog con con facebook por ejemplo.

Bueno, comencemos con este Tips Blogger:   ---  (clic mas abajo en: mas información)

Más información »

martes, 3 de diciembre de 2013

{Blockquote} ♥ Añadiendo estilo a los textos citados



Holy mis amores, que tal si platicamos un poquillo sobre los Blockquote! ..Les parece bien? ..Bueno pues comencemos!!!

Los blockquote no son mas que textos citados en Blogger, son aquellos que van entre las etiquetas <blockquote></blockquote> y que se ven de un modo diferente al resto del texto.

Y hoy quiero compartirles un estilo de blockquote que muy posiblemente les va a gustar. Personalmente a mi me gusta mucho, por su simpleza y estilo.

Aquí les dejo un ejemplo del mismo, espero le guste:





La primera imagen es como te quedara, la segunda imagen es como se visualiza al poner el cursor por encima. El color gris que esta alrededor es solo que al tomar la captura salio así, pero no te quedara así al usarlo en tu blog, lo que si tendrá es el color purple en los bordes, con la imagen de fondo en tonos purple.

Si te ha gusto este blockquote, te invito a seguir las siguientes instrucciones...

Para agregar este blockquote  ve a "Diseño | Edición HTML" y allí busca la siguiente línea: 

]]></b:skin>

Para buscar la etiqueta anterior solo tienes que presionar en tu teclado: { F3 ó Ctrl + F }
Una vez la encuentres, copia el siguiente renglón de código y pegalo justo encima de ]]></b:skin>

.post blockquote {
max-height: 400px;
width:450px;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
border-left:5px solid #f75970;
border-top:1px dashed #f75970;
border-bottom:1px dashed #f75970;
border-right:1px dashed #f75970;
border-radius: 15px 15px 15px 15px;
overflow:auto;
background:#fff url(http://3.bp.blogspot.com/-eOEn-fzPsWs/Up5PPzJvPgI/AAAAAAAABVY/cU0mZctCcs4/s1600/bgpolkadothearts.gif) repeat;
padding:10px 10px 10px 15px;
}
.post blockquote:hover {
border-left:5px solid #e0bcd2;
border-top:1px dashed #e0bcd2;
border-bottom:1px dashed #e0bcd2;
border-right:1px dashed #e0bcd2;
border-radius: 15px 15px 15px 15px;
overflow:auto;
background:#fff url(http://3.bp.blogspot.com/-xUQOZgyQjuo/Up5PPVpfgGI/AAAAAAAABVQ/5-vy4woRgHg/s1600/bgcrosspurp.gif) repeat;
padding:10px 10px 10px 15px;
}



Todo lo que esta en este color resaltado  es lo que ustedes pueden modificar a su gusto. Arriba en el código, donde dice 400 allí esta indicando el máximo de altura que tendrá tu blockquote. Si lo quisieras mas grande solo tienes cambiar el numero por un valor mas alto.Y listo! 

Ya tendras un hermoso blockquote en tu blog! 
Espero te hayas gustado, y de ser así te invito a comentarnos y compartirnos la url de tu blog para que podamos ver como te quedo. Cualquier duda que tengas no temas en preguntar, estamos para ayudarte y a la mayor brevedad posible te responderemos!
Dios te bendiga y gracias por estar aquí!

Kiss, MarG  


Util Menú vertical con CSS3 y jQuery para Blogger



Hola chicas, hoy les quiero compartir un tutorial bastante interesante para mi gusto! Se trata de un menu vertical como bien lo muestra la imagen mas arriba. Esto lo he encontrado en Mil Trucos Blogger, y al parecer el lo vio en Ayuda Blogger. Este maravilloso menu vertical hecho con CSS3 y libreria jQuery que ademas de tener un aspecto genial ahorra mucho espacio en el blog, seguro que a mas de uno le gustara este genial truco para tu blog en Blogger.

C O M E N C E M O S


Para agregar este menu ve a "Diseño | Edición HTML" y alli busca la siguiente línea:

</head>


Ahora, justo antes de la etiqueta anterior deberás agregar lo siguiente:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script><script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
 <script type="text/javascript"> $(function(){ $('.slide-out-div').tabSlideOut({ tabHandle: '.handle',         // no-tocar, corresponde a la class del botón pathToTabImage: 'http://3.bp.blogspot.com/-SRwZItqEcjo/TpOMh16a3dI/AAAAAAAAAMY/LeIqvUxWNMI/s1600/square-arrow-right.gif', // Imagen del boton imageHeight: '36px',         //alto de la imagen imageWidth: '36px',         //ancho de la imagen tabLocation: 'left',            //ubicación del contenedor speed: 300,                     //velocidad de la animación action: 'click',                   //cambiar por hover si deseas que el script se active al pasar el mouse topPos: '200px',               //posición superior del contenedor leftPos: '20px',                  //posición a la izquierda del contenedor fixedPosition: true            //esto permite que el botón siga la pantalla, cambiar a false en caso contrario.});});</script>

Importante:
  • Si ya tenías jQuery instalado omite el código resaltado en azul.


Ahora antes de ]]></b:skin> debes agregar lo siguiente:


.slide-out-div {padding: 0;width: 150px;color:fff;
.slide-out-div ul {margin:0;margin-left:-40px;}.slide-out-div li {text-align:right;width:120px;color:#fff;margin-top:2px;font-size:13px;background: #2facd6; /*Color de fondo de los enlaces*/padding:4px;list-style:none;}      
.slide-out-div li:hover {background: #2d2d2d; /*Color de fondo al pasar el mouse por un enlace*/padding:4px;list-style:none;-moz-transition: 0.2s; -webkit-transition: 0.2s; -o-transition:1s; transition: 1s;-webkit-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);}         .slide-out-div li a {color:#fff; text-decoration:none;font-weight:none;font-family: Century Gothic, sans-serif; }


Ahora antes de </body> deberás agregar el siguiente código que corresponde a la estructura del menú.

<div class='slide-out-div'>      <a class='handle' href=''/><ul>    <li><a href='/'>Inicio</a></li>    <li><a href='URL'>Enlace 1</a></li>    <li><a href='URL'>Enlace 2</a></li>    <li><a href='URL'>Enlace 3</a></li>    <li><a href='URL'>Enlace 4</a></li>    <li><a href='URL'>Enlace 5</a></li>    <li><a href='URL'>Enlace 6</a></li></ul>      </div>


En esta ultima parte es en la que debieras agregar tus enlaces. Donde dice URL agregas el link de la pagina que quieres enlazar en el menú. Y donde dice Enlace 1 agregas nombre que le pondrás a tu enlace para que se visualizara en el en el menú.
Haras lo mismo con los demás enlaces y url que se muestra en el código anterior, agregando sus respectivos enlaces y nombres, conforme el ejemplo anteriormente explicado.
En donde dice Inicio, allí puedes cambiar la palabra por otra que gustes, ejemplo: Home, Portada, Principal, etc..

Espero te hayas gustado tanto como a mi este tuto, y lo agregues en tu blog. Cualquier duda no temas en hacerla en los comentarios y en la mayor brevedad posible te estaremos ayudando.
Bendiciones!

Thanks to: MilTrucosBlogger



viernes, 4 de octubre de 2013

10 aplicaciones para usar en google chrome! ...te encantaran, echa un vistazo!



Aplicaciones para usar en tu navegador de google chrome.
Como habíamos dicho en el post anterior: Te recomiendo usar google chrome; este navegador te permite adquirir muchas aplicaciones de gran utilidad para ti y que te facilitaran tu tiempo en internet.
Yo te voy a mencionar algunas de las que mas me gustan. También te dejare el enlace donde conseguir las aplicaciones y puedes tener una búsqueda mas personalizada conforme tu propio interés.
En esta entrada puedes ver el enlace para descargar Google Chrome.

Aquí el enlace para ir a Chrome Web Atore 
Pero antes, echa un vistazo a estas que te presento a continuación!

Ahora comencemos con la presentación de algunas de las tantas aplicaciones que mas uso y me gustan. Les traigo un total de 10 aplicaciones para usar en google chrome:

1.- LeiTu Image Search
Buscar LeiTu La imagen es una extensión de Chrome. Cuando vea una imagen y quiere más imágenes como esa, usted puede usar esto. Búsqueda de imágenes similares!

2.- Color Picker
Un ojo sencilla herramienta cuentagotas lo que le permite elegir los colores de las páginas web.

3.- Descargar mod FB Album
Descargar Album Facebook y Instagram instante. (Amigo * Etiquetas *, las fotos originales y fotos Cronología son compatibles.)

4.- Facebook Colour Changer
Le da la opción de cambiar el esquema de color de facebook para cualquier cosa que desee mediante un selector de color.
(de esta hay una similar para twitter).

5.- FB Refresh
Actualizar tu usuario de Facebook con tu propio diseño personalizado!
Para una mejor comprencion de lo que hablo, mira bien la imagen que esta arriba al comienzo de este post.
Esa es una vista previa de mi face en mi pc cuando voy a iniciar sesion. Podemos cambiar la imagen por la que nos guste y cuantas veces queramos.

6.- +Photo Zoom
+ Photo Zoom es una extensión simple que proporciona rápido y sencillo zoom para las fotos dentro de su flujo de Google+.
(de esta hay tambien similares para facebook, twitter y toda la web en si).

7.- History Eraser App
Elimina URLs mecanografiado, Caché, Cookies, la descarga y el historial de exploración ... al instante, con sólo un clic en el botón Borrador!

8.- Lightshot (herramienta de captura de pantallas)
Fácil y conveniente herramienta para capturas de pantalla. Permite tomar capturas de cualquier area seleccionada (video y flash…).

9.- Pixlr Editor

Con todas las funciones en el editor navegador de fotos!
Pixlr presenta un completo editor de fotos ofrecido directamente en tu navegador, descargar no, sin esperas y 100% libre.

10.- Mi tema de Chrome
Crea y Comparte Tus Propios Temas de Google Chrome.
Dale un toque personal a tu navegador. Crear y compartir temas personalizados Chrome utilizando sus propias imágenes y diseños.

Te recomiendo echar siempre un vistazo, a la información a lado de cada aplicación. Algunas están en ingles pero con el traductor automático de google en google chrome te ayudara a adaptarlo para que te traduzca siempre al español automáticamente!
Esta es otra de las facilidades de este navegador!
Verdaderamente es una minita de oro jajaja!
Se que muchos utilizan este servidor y lo conocen perfectamente, pero créeme  siempre hay quienes no y por falta de conocimiento e información aun no lo tienen!

Dios te bendiga, y recuerda:
Usemos sabiamente el Internet!
(Aquí algunas capturas de mi navegador utilizando algunas de las aplicaciones aquí mencionadas. Clic en la imagen para visualizar mejor)