Nube Color Negro Para Etiquetas De Blogger

En este articulo te explicare cómo añadir un atractivo widget de etiquetas negra en forma de nube a blogger. Este widget de etiquetas es limpio y bonito, los visitantes pueden encontrar todas las categorías de tu blog fácilmente. Anade estilo y presencia a tu sitio.

Pasos para insertar este widget de etiquetas negras a tu blog.
 1. Entrar a la cuenta de blogger y Click desplegable.

2. A continuación, seleccione "Plantilla", como a continuación.


3. Ahora se puede ver en vivo en el blog, haga clic en el botón Editar HTML "

4. Ahora haga clic en el botón Continuar.
  
5. Encuentre esta etiqueta ]]> </ b: skin>  usando Ctrl + F 

6. Pegue el siguiente código antes de etiqueta ]]> </ b: skin>

/*-----Custom Labels widget by tricksblogspot.blogspot.com/----*/

#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}

#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;  
border-bottom-color: #D8D8D8;}

7. Ahora Haga clic en Guardar plantilla.

    Listo

How Made Round and Augmented Avatars in Blogger

I've always tried to have a good design in my comments and now with the new nested comments CSS inadequacies all I had in my comments but thank God the CSS is wonderful and I've slowly been rebuilding and between those Rebuilding this the increase in size the avatar and change it so that by default is 36 * 36px and square but with a bit of CSS can be increased to 50px and put it round.

With the hack today I present the avatars remain as follows:

To add this trick WILL NEED paste before]]> </ b: skin> the following:

.avatar-image-container,
.avatar-image-container img{
 max-width:50px !important;
 width:50px !important;
 max-height:50px !important;
 height:50px !important;
 padding: 0 !important;
 border:0px;
}

With the above code will increase the size of the avatar to 50px, clarification you can increase even more the size of the avatar but it is highly recommended.

Now if you want round avatars paste before]]> </ b: skin> the following:

.avatar-image-container,
.avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
}

.avatar-image-container{
 border:3px solid #fff !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

As time is very easy, I hope this little trick pleases you and use it.

Hover Effects to Your Blogger Blog Images

Add  different effects to those photos.The COOL thing about this is you just have to add some jQuery and Css to your template then you can easily add from Five hover effects to add some live to your blog photos.

Lets look through the effects and you can also check out this sample in action here.

The 5 effects will be :

Effect 1 - Popout, this is a basic pop out effect on hover the photos will pop out from the page.
Effect 2 - SliceDown, The image will have an dark overlay and on hover a slice effect reveals the image clearly.
Effect 3 - BoxRandom, The image has a light overlay and on hover the image is revealed by boxes randomly clearing.
Effect 4 - FoldLeft, Once again the image has a light overlay and this time on hover an accordion fold effect reveals the image.
Effect 5 - RainGrowReverse, This time on hover the image is revealed from corner to corner.


Add The PICS Effects To YOUR Blogger

Note:Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your (New Design) Blogger Dashboard- Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html >

Step 2. Find this piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

    </head>


Step 3. Copy and Paste the following code Directly Above / Before </head>
---------------------------------------------------------------------------------------------------------------------
    <script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    /*<![CDATA[*/
    jQuery(function($pice){
    $pice('.effect1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
    });
    $pice('.effect2').adipoli({
    'startEffect' : 'overlay',
    'hoverEffect' : 'sliceDown'
    });
    $pice('.effect3').adipoli({
    'startEffect' : 'transparent',
    'hoverEffect' : 'boxRandom'
    });
    $pice('.effect4').adipoli({
    'startEffect' : 'overlay',
    'hoverEffect' : 'foldLeft'
    });
    $pice('.effect5').adipoli({
    'startEffect' : 'transparent',
    'hoverEffect' : 'boxRainGrowReverse'
    });

    });
    /*]]>*/

    </script>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

    ]]></b:skin>


Step 5. Now Copy And Paste This Code Directly Above / Before ]]></b:skin>

    .adipoli-wrapper{position:relative;display:inline-block;margin:auto}
    .adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
    .adipoli-box{display:block;position:absolute;z-index:0}
    .post img{border:0!important;margin:0!important;padding:0!important}
    .adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}


Step 6. Save your template.

How to Add The Effect To Your Pics

Now we need to add a class tag to pics we want the effect on.So as you seen them on the demo ; if you want to use Effect 1 you add class="effect1" for Effect 2 you add class="effect2" and so on.Below I show were to add this class tag on your pics.

Then if your upload the pics or images directly onto Blogger we have an easy way to add the class.The code below is how the html for an image looks when uploaded to Blogger.

Important - This is when you upload the image in compose mode then switch to html mode.

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" /></a></div>


You can see highlighted div class="separator" we change this to div class="effect1" (or effect2 etc..) like this below :

    <div class="effect1" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" /></a></div>


When you add pics or images in html mode or adding externally hosted images your image code will be like this :

    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" /></a>


We add the class as shown below :

    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png"><img class="effect1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" /></a>


For this we used the idea from the Adipoli jQuery Image Hover Plugin.