Estadísticas

Color de fondo para las entradas

Andres Aguilar | 23:33

Color de fondo para las entradas

Efecto Google Plegable

Andres Aguilar | 22:34

Efecto Google Plegable

Obtener Tumbnails de Youtube en su Maxima Resolución

Andres Aguilar | 09:09

Saludos comunidad bloggera, me enorgullece presentarles un método / alternativa que pueden utilizar para obtener los tumbnails de youtube (la imágenes pequeñas de los vídeos) pues si es de ayuda estas imágenes son una gran ayuda ya que algunas extan en HD con una resolución 1280x720 y esto lo he aprendido para recuperar algunas tumbnails de mi canal de videojuegos.

Obtener Tumbnails de Youtube en su Maxima Resolución

Elimina la caja de comentarios de Blogger

Andres Aguilar | 18:17

A todos tal vez nos ha decepcionado la caja de comentarios de blogger por diversos motivos, o sino es el caso de que queremos otro sistema de comentarios mas avanzado. Ya que las actualizaciones de parte de Google para blogger son eternas y no realizan grandes cambios en su interfaz. Tambien el dejar de tener comentarios para hacer un blog en donde no existan opiniones del publico o criticas destructivas.

Elimina la caja de comentarios de Blogger

Codificar HTML Online

Andres Aguilar | 17:21

En internet existe muchas maneras de tomar códigos html y copiarlos a webs que pretendan ser las originales o algo similar, esto se me vino después de crear la plantilla Tomorrowlandia, los diseños originales pueden ser simplemente copiados o tomados por otros, ahora les enseñare como pueden codificar HTML en sus blogs especialmente, aunque este metodo puede servir para cualquier web.

Conocie el otro dia una pagina titulada Santa Diversión en donde una de sus secciones es para cifrar codigos html y convertirlos en scripts, que practicamente es un lenguaje que las plantillas tambien pueden leer como HTML. solo que el javascript aqui es muy complejo para editar y dificil de decifrar, aunque en la misma web te dic que puedes decodificar codigos script para pasarlos a html.

En esta web te saldra un cuadro similar a este y dentro de el escribes el html para codificarlo.

Codificar HTML Online

Iconos Sociales Tomorrow

Andres Aguilar | 21:02

Con esta linda movida del tomorrowland, cree un clon de los iconos sociales que aparecieron en la pagina del tomorrowland brasil 2015. y es así como presento estos iconos para que los puedan agregar a su lindo blog.

Iconos Sociales Tomorrow

Plantilla Tomorrowlandia

Andres Aguilar | 18:31

Saludos a mi querida gente Blogger, quiero presentar ahora por primera y de forma exclusiva la plantilla Tomorrowlandia. "Acaso les parece el nombre conocido?", entonces les dejo una Demo descargable de la plantilla para que la revisen y la misma plantilla en formato de descarga totalmente gratis.

Plantilla Tomorrowlandia

Plantilla Blogger en Blanco

Andres Aguilar | 00:28

Esto es para todos aquellos que quieren emprender en blogger, y sobretodo cear sus propias plantillas desde cero. debo decir que aprender la codificación no es nadafacil, hace falta el conocimiento y la experiencia. yo estoy recien empezando en esto con mis pocos diseños para todos.

Esta plantilla en blanco que les proporciono te dejara en blog totalmente en blanco, basico y para que crees tus diseños libremente.

 Si aún no estas preparado es emjor que sigas practicando y cuando te des la oportunidad de ser desarollador blogger lo uses.

Descarga la plantilla.


Bueno, eso es todo por ahora. disfruta la plantilla y se creativo. Buena Suerte!

Plantilla Blogger en Blanco

Barra Google Black

Andres Aguilar | 23:56

Saludos amigo, pues bienvenidos a esta nueva entrada de CirculoBlogger. nos complace tenerlos aqui de nuevo. y esta vez presentrales la Barra Google Black, o tambien conocida como la barra negra de Google o la vieja barra de Google.

Barra Google Black

Embed Flash

Andres Aguilar | 21:45

Saludos mis amigos bloggeros, hoy estoy entusiasmado de compartir con ustedes un código para embeber archivos flash. así como presentaciones, anuncios y juegos en flash. vamos a hacerlo de una forma interesante.

Para agregar Flash haremos lo siguiente.

1) Vamos a crear una nueva entrada en nuestro blog.


2) Vamos a cambiar la entrada en HTML


Ahora vamos a pegar este codigo en la entrada:
<object width="640" height="640" data="file.swf"></object>
Ahora vas a reemplazar file.swf por la dirección del archivo flash para añadir a tu web.

• Recuerda que width="640" es el ancho y height="640" es el alto.

Bueno, ahora les dejo un demo de un juego que encontré en Internet que por cierto esta muy bueno y para pasar unas horas jugandolo.

Embed Flash

Footer Perla Negra para Blogger

Andres Aguilar | 20:38

Bueno, en un día he publicado 3 tipos diferentes de footers, me gusto hacerlo y ahora vere que más escuentro para adptar a blogger. pero ahora le toca al ultimo de mis footers adaptados. Les presento a el Footer Perla Negra. Nombrado así por su color puro negro, posee una barra social al final con varias cuentas, secciones de Agradecimientos, Creditos y Recomendaciones, Un mapa del sitio y para que recomienden la pagina por Facebok o Google+.

Footer Perla Negra para Blogger

Footer Hope Azul para Blogger

Andres Aguilar | 16:09

Sinceramente me he picado un poco con esto de los diseños y pies de pagina, ahora presento un diseño más detallado que el anterior que presente. igualmente esto lo he adaptado de PHPost para Blogger. me demoro un poco más que el anterior, pero de igual manera esta bien detallado.

El nombre de este footer es El Hope Azúl, al igual que la joya invaluable con el mismo nombre haciendo referencia al color mas usado y que realmente esto es una joya para los bloggeros.

Ahora empecemos a adaptar el footer a nuestro blog.

Empezaremos editando la plantilla en modo HTML.


Realizaremos una busqueda en la plantilla:


Ahora vamos a pegar el siguiente codigo encima de la etiqueta </b:skin>.
#footer-container{
background : url('images/footer.jpg') repeat-x left top;
background : rgb(10,7,7) url(images/footer.gif) repeat-x left top;
}
#footer {
position : relative;
margin : 100px auto; /* Distancia Relacionada con el blog */
width : 960px;
}
#footer .rings{
left : 271px;
top : -345px;
}
.footer-icon{
position : relative;
left : -150px;
top : -133px;
background : url('https://lh4.googleusercontent.com/-JYaeiQauDmc/VWtc7eX1_1I/AAAAAAAAAcg/s_LlklDUlks/w1517-h167-no/footer-ico.png') no-repeat left top;
height : 133px;
width : 1213px;
}
#footer-container{
background : url('https://lh4.googleusercontent.com/-chf_wTrxrbI/VWtc7c4SeaI/AAAAAAAAAcY/76QrFtvjVi4/w253-h402-no/footer.jpg') repeat-x left top;
_background : rgb(10,7,7) url(images/footer.gif) repeat-x left top;
}
#footer-container a{
_text-decoration : none !important;
}
#footer-container{
margin-top : 100px;
height: 321px;
        width: 100%;
         margin: auto;
}
.aereo-icon{
background : url(https://lh3.googleusercontent.com/-J7wa3T7p1gA/VWtc54W_9kI/AAAAAAAAAbs/jJC2-V7yYbA/s109-no/aereo.png) no-repeat left top;
top : -67px;
right : -55px;
position : absolute;
height : 87px;
width : 87px;
}
.more-read, .new{
width : 280px;
float : left;
border-right : 1px solid #044dba;
margin-top:-132px;
}
.new{
border : 0px;
}
#footer .side-title{
height : 55px;
padding-left : 75px;
padding-top : 10px;
margin : 0px;
}
.more-read .side-title{
background : url(https://lh3.googleusercontent.com/-s0TaRohgTgM/VWtc6LPvOAI/AAAAAAAAAb8/wXthCqG_ix4/s75-no/cuore.png) no-repeat left top;
}
.new .side-title{
background : url(https://lh3.googleusercontent.com/-RnxD6ZOzl2I/VWtc7bzOjTI/AAAAAAAAAcc/0IrZoN4LcIY/s75-no/twitter.png) no-repeat left top;
}
.more-read ul, .new ul{
width : 260px;
height: 170px;
margin-top: 30px;
}
.more-read ul li a, .last-comment ul li a, .new ul li a{
width : 240px;
height : 30px;
border-bottom : 1px solid #044dba;
display : block;
text-decoration : none;
padding : 5px 10px;
overflow : hidden;
}
.new ul li a{
width : 260px;
}
.more-read ul li a:hover, .new ul li a:hover{
background : #004a95;
}
.more-read ul li a strong{
color : #fff;
font-size : 12px;
display : block;
font-weight : bold;
overflow : hidden;
}
.more-read ul li a small{
color : rgb(173,172,153);
font-size : 12px;
}
.more-read ul li a small span{
text-decoration : underline;
}
.last-comment{
width : 358px;
margin-left : 20px;
margin-right : 20px;
float : left;
border-right : 1px solid #044dba;
margin-top: -132px;
}
.last-comment .side-title, #comments .side-title {
background: url(https://lh5.googleusercontent.com/-SEzMP2iyHds/VWtc6UbHkzI/AAAAAAAAAcA/b6RL43MGk74/s75-no/esclamativo.png) no-repeat left top;
}
.last-comment ul{
width : 318px;
height: 170px;
margin-top: 30px;
}
.last-comment ul li a{
width : 318px;
}
.last-comment ul li a:hover{
background : #004a95;
}
.last-comment ul li a span,.new ul li a span{
color : #fff;
font-size : 12px;
display : block;
overflow : hidden;
}
.last-comment ul li a small, .new ul li a small{
color : rgb(173,172,153);
font-size : 12px;
}
.info{
position : relative;
margin-top : 50px;
.margin-top : 70px;
zoom : 1;
}
.info div{
float : left;
color : #fff;
background : #004a95;
padding : 2px 10px;
}
.info .copyright{
background : none
}
.info .copyright div{
clear : both;
}
.info div.credits{
margin-left : 67px;
}
.info a{
text-decoration : none;
color : #fff;
}
.info a:hover{
color : rgb(173,172,153);
text-decoration : none;
}
div.rss-mail{
background : url('https://lh6.googleusercontent.com/-lqBfp_I_GMg/VWtlfic9Q1I/AAAAAAAAAc8/Htf9-UCiTG4/w325-h75-no/socialplustube.png') no-repeat left top;
width : 260px;
height : 55px;
right : 360px;
top : 35px;
display : block;
position : absolute;
float : right;
padding : 0px;
}
div.rss-mail a{
display : block;
padding-top : 22px;
height : 38px;
}
div.rss-mail a.rsslink:hover, div.rss-mail a.contactlink:hover{
color : #ADAC99 !important;
}
div.rss-mail a.rsslink{
width : 130px;
float : right;
cursor : pointer;
text-decoration : none;
color : #fff;
padding-left : 70px;
width : 60px;
}
div.rss-mail a.contactlink{
width : 130px;
float : left;
cursor : pointer;
text-decoration : none;
color : #fff;
padding-left : 3px;
width : 127px;
}
#footer .wrapper {
background: url("images/bgfooter.png") no-repeat scroll left bottom transparent;
border-top: 1px solid #EEE;
padding-bottom: 10px;
width: 1002px;
}
#footer .wrapper a:hover {
color: #666!important;
}
.last-action {
background: none repeat scroll 0 0 #FFFFFF;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
padding: 10px;
}
#footer ul li {
float: left;
display: block;
padding: 3px;
}
#footer ul li a {
color: #006595!important;
text-shadow: none!important;
margin: 0 10px;
font-weight: bold;
font-size: 11px;
}
#footer ul li span {
color: #999;
}
.clearfix, .container, .box, .markItUpHeader, .list-element {
display: block;
}
ul.footer-list li {
display: inline;
margin: 0 10px;
}
Despues vamos a volver a realizar una busqueda con la etiqueta: </body>; y pegaremos esto arriba.
<footer>

                <div id="pie">
                </div>
             
  <div class="wrapper clearfix">
        <div id="footer-container">
   <div id="footer">
        <div class="bottom">
   <div class="footer-icon"></div>
   <div class="aereo-icon"></div>
   <div class="more-read">
        <div class="side-title" style="position:absolute; top:-30px;">
         <h2 class="title" style="color:white;">De Interes</h2>
        </div>
        <ul>
                           <li>
          <a href="#">
           <strong><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png">
             ANUNCIE</img></strong>
           <small>Promociona tu web, empresa o producto</small>
       
          </a>
         </li>
                  <li>
          <a href="#">
           <strong><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png">
             BLOG</img></strong>
           <small>Informate sobre los cambios Aqui.</small>
          </a>
         </li>
                  <li>
          <a href="#">
           <strong><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png">
             CONTACTO</img></strong>
           <small>Dudas, comentarios y sugerencias</small>
          </a>
         </li>
                  <li>
                    <a href="http://circuloblogger.blogspot.com">
           <strong><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png">
             CIRCULO BLOGGER!</img></strong>
           <small>Adaptando tus ideas a Blogger</small>
          </a>
         </li>
                 </ul>

   </div>
   <div class="last-comment">
        <div class="side-title" style="position:absolute; top:-30px;">
         <h2 class="title" style="color:white;">Informacion</h2>
        </div>
                <ul>
         <li><a href="#">
           <span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
             DMCA</font></img></b></span>
           <small>Notice to Owners of Copyrighted Works</small>
          </a></li>
<li><a href="#">
           <span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
             PROTOCOLO</font></img></b></span>
           <small>Reglamento para la plataforma.</small>
          </a></li>
<li><a href="#">
           <span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
             ENLAZANOS</font></img></b></span>
           <small>Obten miles de visitas.</small>
          </a></li>
<li><a href="#">
           <span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
             TERMINOS Y CONDICIONES</font></img></b></span>
           <small>Condiciones de uso.</small>
          </a></li>
        </ul>
       
   </div>
   <div class="new" style="float:right;">
        <div class="side-title" style="position:absolute; top:-30px;">
         <h2 class="title" style="color:white;">Alternativas</h2>
        </div>
        <ul>
                  <li>
          <a href="#">
           <span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
             FOOTER ADAPTADO</font></img></b></span>
           <small><!--iprimidieci, -->De redLatinos en PHPost</small>
          </a>
         </li>
                  <li>
          <a href="#">
           <span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
             PRIVACIDAD</font></img></b></span>
           <small><!--iprimidieci, -->Tu informaci&oacute;n esta segura y no es compartida.</small>
          </a>
         </li>
                  <li>
          <a target="_blank" href="#">
           <span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
             PREMIUM</font></img></b></span>
           <small><!--iprimidieci, -->Chat con radio, buena musica gratis.</small>
          </a>
         </li>
                  <li>
          <a href="#">
           <span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
             CHAT</font></img></b></span>
           <small><!--iprimidieci, -->Acude a ellos para informacion</small>
          </a>
         </li>
        </ul>
   </div>
   <br class="clearer">
</br></div>
   <div class="info">
        <div class="copyright">    
     
        </div>
        <div class="rss-mail">
         <a class="rsslink" href="#" style="margin-top: 0px!important;">Youtube</a>
         <a target="_blank" href="#" style="margin-left: 13px; margin-top: 0px!important;">Google+</a>
        </div>
        <br class="clearer">

   </br></div>
  </div>
 </div>
</div>
</footer>
Y finalmente guardamos nuestra plantilla.

Les quedara algo similar a esto.


Ahora quiero decirles unos puntos importantes de este footer. Puedes editar los # con tus enlaces, y los textos en Negrilla por los textos tuyos. Te pido que no modifiques la linea de CIrculoblogger ya que es un agradecimiento por compartir este elemento y para que otros puedan conocer más a CirculoBlogger.

Bueno, lo demas es automatico y usenlo a su gusto en sus blogs. Saludos a todos.

Footer Hope Azul para Blogger

Footer Ónix para Blogger

Andres Aguilar | 13:43

Bienvenidos a esta entrada especial de CirculoBlogger. estoy encantado e decirles que adapte exitosa mente un footer de PHPost a blogger. pues no fue muy facil, ya que las lineas en blogger son totalmente diferentes en PHPost y viceversa. pero ahi tienen un catalogo de estilo muy grande, que pueda que utilice para adaptar a blogger, de todos modos blogger es más facil de usar.

A este footer lo he nombrado Ónix, dando mencion a la piedra negra utilizada en joyeria con el mismo nombre.

Footer Ónix para Blogger

Infobox & Ribbon CSS

Andres Aguilar | 00:34

Este es un diseño adaptado a blogger, el otro día lo encontre en internet y lo use en uno de mis blog, pero ahora lo comparto para mi circulo blogger. El infobox contiene un ribbon de color diferente que muestra el titulo o información general, y abajo para agregar o adjuntar algo.

Infobox & Ribbon CSS

Menú Slamp

Andres Aguilar | 00:24

Saludos amigo que visian mi blog. Aquí les tengo un diseño especial que desapareció del blog d ZKreations, Agradezco a Daniel que creo este menú y ahora lo comparto con una pequeña modificación. Puesto que en el diseño original no tenía nada mas que una imagen, hoy les presento diversas imagenes que pueen cambiar a su elección. Empecemos.

Menú Slamp

Inserta publicación de Facebook

Andres Aguilar | 23:56


Ahora le toca a Facebook, pues bueno amigos como Circulo Blogger no tiene facebook por el momento lo publicaremos desde una pagina que tengo titulada GTA Ecuador. Ahi vamos a enviar un post sobre circulo blogger que publicaremos.

Inserta publicación de Facebook

Inserta Tweets de Twitter.

Andres Aguilar | 23:15

Es hora que desempolve mi cuenta de Twitter. y les enseñe como insertar un tweet en nuestro blog. pues es una opción muy facil que nos brinda este servidor de mensajería de 148 caracteres. empecemos.

Inserta Tweets de Twitter.

Inserta Publicaciones de Google+

Andres Aguilar | 19:39

Bueno, esta herramienta de agregar este elemento a un post o una pagina en HTML es muy util, Tus seguidores podrán dar +1 a tu publicaciones y compartirlas con sus círculos y seguidores. Para ello iremos a Google+ y buscaremos la entrada que deseamos integrar a nuestro blog.

Inserta Publicaciones de Google+

Botones de Descarga

Andres Aguilar | 17:04

Hace ya creo un año atrás o puede ser hasta mas, descubrí este código HTML para webs, el cual le había adaptado a mi blog de GTA Ecuador, quise volver a buscar este asombroso efecto, pero de las búsquedas de google desapareció. Ahora que cambio mi blog de GTA Ecuador quiero compartirlo para que este estilo no se pierda.

Botones de Descarga

Codigo Google+ Comentarios

Andres Aguilar | 02:26

No hace mucho quise insertar los comentarios de Google+ en mi blog de Circulo Blogger, pero el problema es que mi plantilla es y sera incompatible con este plugin de Google+. Pero, sabían que extrayendo el código de Google+ Comentarios se puede añadir el plug-in para poder comentar en las entradas de nuestros blogs con Google+. Pues este recurso se o debo a el blog de Amor Sevillista.

Codigo Google+ Comentarios