felixsalguero

Hace mucho días que no publicaba en File Virtual por problemas personales, hoy e decido traerles a todos ustedes este sensacional gadget de las Redes Sociales.

Como podrán apreciar en la imagen  las redes sociales que tiene este gadget son RSS Feed, Facebook, Twitter y Google+ con su respectivo iconos a lado.

Vista previa

                                        NORMAL                                     AL DESPLEGARLO

Para añadirlo vamos a Diseño, Añadir Gadget, HTML/Javascript y adentro pegamos:

<div align="center"><div class="glossy-selectbox"><input type="checkbox">
<label style="text-align:center;font-size:15px;font-family:Arial;position:relative;left:-15px;" data-default="SIGUENOS EN LAS REDES" data-focus="Encuentranos en..."></label><ul>
<li><a href="#RSS" class="social-rss" href="#" target="_blank">RSS Feed</a></li>
<li><a href="#FACEBOOK" class="social-facebook" href="#" target="_blank">Facebook</a></li>
<li><a href="#TWITTER" class="social-twitter" href="#" target="_blank">Twitter</a></li>
<li><a href="#GOOGLEPLUS" class="social-google" href="#" target="_blank">Google+</a></li>
</ul></div></div>
<style>
.glossy-selectbox {
display:inline-block;
font:normal bold 12px Arial,Sans-Serif;
position:relative;
width:250px;
background-color:#111;
text-align:left;
background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.7);
box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.7);
}
.glossy-selectbox:before,
.glossy-selectbox:after {
content:"";
display:block;
width:0;
height:0;
border:3px solid transparent;
border-width:5px 3px;
border-bottom-color:#999;
position:absolute;
top:25%;
right:5px;
z-index:4;
}
.glossy-selectbox:after {
border-color:#999 transparent transparent;
top:auto;
bottom:25%;
}
.glossy-selectbox input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.glossy-selectbox label {
display:block;
line-height:45px;
color:rgba(255,255,255,.5) !important;
padding:0 15px;
-webkit-transition:all 0s ease-out;
-moz-transition:all 0s ease-out;
-ms-transition:all 0s ease-out;
-o-transition:all 0s ease-out;
transition:all 0s ease-out;
}
.glossy-selectbox label:before {
content:attr(data-default);
}
.glossy-selectbox label:after {
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
border-left:1px solid rgba(0,0,0,.4);
-webkit-border-radius:0 7px 7px 0;
-moz-border-radius:0 7px 7px 0;
border-radius:0 7px 7px 0;
-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.glossy-selectbox input:hover + label {
color:white !important;
}
.glossy-selectbox input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.glossy-selectbox ul {
margin:0 0;
padding:0 0;
position:absolute;
top:100%;
left:14px;
right:14px;
background-color:#222;
border:1px solid #111;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
visibility:hidden;
opacity:0;
z-index:99;
}
.glossy-selectbox li {
margin:0 0;
padding:0 0;
list-style:none;
float:left;
width:50%;
display:inline;
}
.glossy-selectbox a {
display:block;
position:relative;
color:#999 !important;
text-decoration:none;
text-shadow:0 0 2px black;
line-height:30px;
border-top:1px solid #111;
border-right:1px solid #111;
padding:0 15px 0 32px;
-webkit-box-shadow:inset 0 0 0 1px #333;
-moz-box-shadow:inset 0 0 0 1px #333;
box-shadow:inset 0 0 0 1px #333;
/* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.glossy-selectbox a:nth-child(even) {
border-right-width:0;
}
.glossy-selectbox a:before {
content:"";
display:block;
width:16px;
height:16px;
position:absolute;
top:7px;
left:7px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 0;
}
.glossy-selectbox a:hover:before {
background-position:50% 100%;
}
.glossy-selectbox .social-rss:before {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjE4MjgwMzAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjE4MjgwMjAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNTQ1NjQ2NjBCMDNFMTExOEFFNUMxQUI0QURFQTMyOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlHzXt4AAAFnSURBVHja7JTPRwRxGIdnttQxomujRHQtJZZNLHWK9Ce0HaI/oGN0iOgUaXTqkE2H1Cl1qUvs2lXq0nFELBGdItb0vOv98pra3WyHLjM85vWddz7z/prXj+PY+8vlFwoFUajDPXzAFZzCY7uXwzD0Mmp3wThkYQMe4AmW2olkWjwbhRO4hcFWAj50wwQswB68GZ9puINcqwikBlU4h1UYhi2tiVz9cPmTiAjESgX2IQ/vsA4zUFPfHk1pqFkNpIgr+qVrGIEyTMGL+gzA4W+KKKGWtCvPsAif+ixru+OK2Kvh7hpHyfvMRLJjPrCZjEBeuoG1RMgicqD2ttbGtTjXLAWZyHkTiTjOamuPjN+cE3D5lkybZIxD4+xyvkjMR0OgCJNK0TgcGzuv96o5G3MCdXNo7bKx3Si/mrM+J7Csw1JT2zM/WFL425kfRVHHuyAIgsZP1PE+sG1M90G6D9J98N/74EuAAQBrM499eIKXUgAAAABJRU5ErkJggg==')}
.glossy-selectbox .social-facebook:before {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjE4MjgwNzAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjE4MjgwNjAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNTQ1NjQ2NjBCMDNFMTExOEFFNUMxQUI0QURFQTMyOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpkBkIAAACASURBVHjaYvz//z8DJYAxNTV1L5B2IkPvvlmzZjkzkamZAaaPiQiFziCXImEUQIwB+/BJspDgZKyhzcRAIcDnAkYc/P90c8F/fDZTzQXDwAAWchMQsgt2kGk5WB/jgwcPyHa+vLw82AV7oc4kFe+FeWG0PBgtD0bLg8FQHgAEGAA6pyme0xeFcQAAAABJRU5ErkJggg==')}
.glossy-selectbox .social-twitter:before {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjM1NzQwMDAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjM1NzNGRjAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNTQ1NjQ2NjBCMDNFMTExOEFFNUMxQUI0QURFQTMyOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psm+fpUAAAClSURBVHjaYvz//z8DJYAFxkhLS7MHUl1QbhkQH8SladasWZgGAMEKIJZAYksS4wImJLYEDjbRBpAF8BnwHws+CcT2lLjADBo+FHnhLyUGvADiFKzpAAtgHPBYINmAj5RG4z5Ko7EGiN+RHY3V1dXXgJQeEK+BRhdR0cgIKw8ePnxIdMDJy8tj9YI9NJAwAoqoAmW0PBgtD0bLAyqVB0BAVnkAEGAAd3tFMviqyf8AAAAASUVORK5CYII=')}
.glossy-selectbox .social-google:before {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjM1NzQwNDAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjM1NzQwMzAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNTQ1NjQ2NjBCMDNFMTExOEFFNUMxQUI0QURFQTMyOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pha4bDUAAACFSURBVHjaYkxNTd3LwMDgxAABjED8nwEB8PH3zZo1y5kJSTOpAKyPiYFCwAJ1FgOaM4nms6D5kVTASLEXqBIGDDj8+B+Hv/9T1QVMaLYw4uD/p0sY/McTBvSNBVw2/6eJC0AG7CBTL1gfS3V1NRuR+R+dzwZzwWh5MFoejJYHw6I8AAgwAO50IMDSbJUlAAAAAElFTkSuQmCC')}
.glossy-selectbox a:hover {
background-color:rgba(0,0,0,.2);
color:#ccc !important;
}
/* On click, then... */
.glossy-selectbox input:checked + label {
color:rgba(255,255,255,.4);
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-ms-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.glossy-selectbox input:checked + label:before {
content:attr(data-focus);
}
.glossy-selectbox input:checked + label:after {
background-color:rgba(0,0,0,.2);
-webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.glossy-selectbox input:checked ~ ul {
visibility:visible;
opacity:1;
}
</style>

Ten en consideración...

Lo que está en azúl, es el titulo que se mostrará cuando el gadget no esté desplegado.
Lo de verde, es el titulo del gadget al desplegarse.
Cambia lo que está en rojo por la URL que indica.

Gadget Selectbox Social

Leer +

felixsalguero

 

Algunas plantillas son un poco ajustadas y al poner videos estos se salen del post, y aunque podemos editar el tamaño de la pantalla del video en ocasiones el video no se aprecia igual que en su tamaño original, así que una buena solución para esto es abrir los videos en una ventana emergente, o sea en una ventana PopUp.
¿Cómo funciona? Lo que haremos será sustituir el video por una imagen que al darle click se abra una pequeña ventana para ver el video.


En youtube, por ejemplo, al ver un vídeo nos aparece un recuadro que dice URL...




Comprobarás que en el recuadro aparece la dirección del vídeo:

http://www.youtube.com/watch?v=DnzuKKG6-AA

Lo único que necesitas para realizar el truco son las cifras indicadas en rojo (que van siempre después de v=)

Este es el código:

<center><a title="Ver video" href="javascript:void(0);" onclick="window.open('http://www.youtube.com/v/DnzuKKG6-AA&autoplay=1', 'popup', 'left=390, top=200, width=600, height=480, toolbar=0, resizable=1')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNblAO-C45HmuGoSGRq0FO8Pk66OtLJI3vD9XmhQQoMfDNnzF9heDLK0qmNgCNNr7L5mqbHQkGWgiWQqDEHd2ZeNAh9_Qt9WltMpiYW7VB0zWX_l5unvt93T0hDHTKw6WUMStUqjnWGPxF/s1600/Ver-Online---Original.gif" title="Ver video" /></a></center>

Sustituye:

CIFRAS DEL VIDEO por las cifras de la dirección de tu vídeo.IMAGEN por la dirección de tu imagen
Nota

La línea indicada en verde es la dirección de la imagen que ves en el ejemplo. Puedes eliminar dicha línea y poner la dirección de tu imagen favorita.

Este código está programado para que el video se reproduzca automáticamente al abrirse la ventana, si deseas que se reproduzca hasta que el usuario le de click en Play entonces elimina esta parte: &autoplay=1
Puedes cambiar la URL de la imagen por otra, yo he hecho esta y puedes usarla si gustas

Abrir videos en ventana emergente (Popup)

Leer +

felixsalguero

En esta entrada vamos a ver cómo crear una galería de videos de YouTube usando jQuery. Es una elegante galería a la que le caben 5 videos y que por sus dimesiones la pondremos debajo de la cabecera del blog. En realidad puedes ponerla en cualquier parte, pero se recomienda en esa área por los 765px que mide de ancho la galería.

Puedes verla funcionando en este demo.

Para agregar este slider de videos en tu blog entra en Plantilla | Edición de HTML y antes de </head> agrega los scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
/*hoverscroll v.0.2.4*/
(function($) {
$.fn.hoverscroll = function(params) {
if (!params) { params = {}; }
params = $.extend({}, $.fn.hoverscroll.params, params);
this.each(function() {
var $this = $(this);
if (params.debug) {$.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);}
if (params.fixedArrows) {
$this.wrap('<div class="fixed-listcontainer"></div>')
}
else {
$this.wrap('<div class="listcontainer"></div>');
}

$this.addClass('list');
var listctnr = $this.parent();
listctnr.wrap('<div class="ui-widget-content hoverscroll' +
(params.rtl && !params.vertical ? " rtl" : "") + '"></div>');
//listctnr.wrap('<div class="hoverscroll"></div>');

var ctnr = listctnr.parent();

var leftArrow, rightArrow, topArrow, bottomArrow;
if (params.arrows) {
if (!params.vertical) {
if (params.fixedArrows) {
leftArrow = '<div class="fixed-arrow left"></div>';
rightArrow = '<div class="fixed-arrow right"></div>';

listctnr.before(leftArrow).after(rightArrow);
}
else {
leftArrow = '<div class="arrow left"></div>';
rightArrow = '<div class="arrow right"></div>';

listctnr.append(leftArrow).append(rightArrow);
}
}
else {
if (params.fixedArrows) {
topArrow = '<div class="fixed-arrow top"></div>';
bottomArrow = '<div class="fixed-arrow bottom"></div>';

listctnr.before(topArrow).after(bottomArrow);
}
else {
topArrow = '<div class="arrow top"></div>';
bottomArrow = '<div class="arrow bottom"></div>';

listctnr.append(topArrow).append(bottomArrow);
}
}
}
ctnr.width(params.width).height(params.height);

if (params.arrows && params.fixedArrows) {
if (params.vertical) {
topArrow = listctnr.prev();
bottomArrow = listctnr.next();

listctnr.width(params.width)
.height(params.height - (topArrow.height() + bottomArrow.height()));
}
else {
leftArrow = listctnr.prev();
rightArrow = listctnr.next();

listctnr.height(params.height)
.width(params.width - (leftArrow.width() + rightArrow.width()));
}
}
else {
listctnr.width(params.width).height(params.height);
}

var size = 0;

if (!params.vertical) {
ctnr.addClass('horizontal');
$this.children().each(function() {
$(this).addClass('item');

if ($(this).outerWidth) {
size += $(this).outerWidth(true);
}
else {
size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))
+ parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
}
});
$this.width(size);

if (params.debug) {
$.log('[HoverScroll] Computed content width : ' + size + 'px');
}
if (ctnr.outerWidth) {
size = ctnr.outerWidth();
}
else {
size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right'))
+ parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container width : ' + size + 'px');
}
}
else {
ctnr.addClass('vertical');
$this.children().each(function() {
$(this).addClass('item')

if ($(this).outerHeight) {
size += $(this).outerHeight(true);
}
else {
size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'))
+ parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));
}
});
$this.height(size);

if (params.debug) {
$.log('[HoverScroll] Computed content height : ' + size + 'px');
}
if (ctnr.outerHeight) {
size = ctnr.outerHeight();
}
else {
size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom'))
+ parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container height : ' + size + 'px');
}
}
var zone = {
1: {action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 16},
2: {action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 8},
3: {action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 4},
4: {action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 2},
5: {action: 'stop', from: 0.4 * size, to: 0.6 * size},
6: {action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 2},
7: {action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 4},
8: {action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 8},
9: {action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 16}
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
function checkMouse(x, y) {
x = x - ctnr.offset().left;
y = y - ctnr.offset().top;

var pos;
if (!params.vertical) {pos = x;}
else {pos = y;}

for (i in zone) {
if (pos >= zone[i].from && pos < zone[i].to) {
if (zone[i].action == 'move') {startMoving(zone[i].direction, zone[i].speed);}
else {stopMoving();}
}
}
}

function setArrowOpacity() {
if (!params.arrows || params.fixedArrows) {return;}

var maxScroll;
var scroll;

if (!params.vertical) {
maxScroll = listctnr[0].scrollWidth - listctnr.width();
scroll = listctnr[0].scrollLeft;
}
else {
maxScroll = listctnr[0].scrollHeight - listctnr.height();
scroll = listctnr[0].scrollTop;
}
var limit = params.arrowsOpacity;
var opacity = (scroll / maxScroll) * limit;

if (opacity > limit) { opacity = limit; }
if (isNaN(opacity)) { opacity = 0; }

var done = false;
if (opacity <= 0) {
$('div.arrow.left, div.arrow.top', ctnr).hide();
if(maxScroll > 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);
}
done = true;
}
if (opacity >= limit || maxScroll <= 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).hide();
done = true;
}

if (!done) {
$('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));
}
}

function startMoving(direction, speed) {
if (ctnr[0].direction != direction) {
if (params.debug) {
$.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);
}

stopMoving();
ctnr[0].direction = direction;
ctnr[0].isChanging = true;
move();
}
if (ctnr[0].speed != speed) {
if (params.debug) {
$.log('[HoverScroll] Changed speed: ' + speed);
}

ctnr[0].speed = speed;
}
}

function stopMoving() {
if (ctnr[0].isChanging) {
if (params.debug) {
$.log('[HoverScroll] Stoped moving');
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
clearTimeout(ctnr[0].timer);
}
}

function move() {
if (ctnr[0].isChanging == false) {return;}

setArrowOpacity();

var scrollSide;
if (!params.vertical) {scrollSide = 'scrollLeft';}
else {scrollSide = 'scrollTop';}

listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
ctnr[0].timer = setTimeout(function() {move();}, 50);
}

if (params.rtl && !params.vertical) {
listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();
}

ctnr
.mousemove(function(e) {checkMouse(e.pageX, e.pageY);})
.bind('mouseleave', function() {stopMoving();});

this.startMoving = startMoving;
this.stopMoving = stopMoving;

if (params.arrows && !params.fixedArrows) {
// Initialise arrow opacity
setArrowOpacity();
}
else {
// Hide arrows
$('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();
}
});

return this;
};

if (!$.fn.offset) {
$.fn.offset = function() {
this.left = this.top = 0;

if (this[0] && this[0].offsetParent) {
var obj = this[0];
do {
this.left += obj.offsetLeft;
this.top += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return this;
}
}

$.fn.hoverscroll.params = {
vertical: false,
width: 400,
height: 50,
arrows: true,
arrowsOpacity: 0.7,
fixedArrows: false,
rtl: false,
debug: false
};
$.log = function() {
try {console.log.apply(console, arguments);}
catch (e) {
try {opera.postError.apply(opera, arguments);}
catch (e) {}
}
};
})(jQuery);

// Aplicar desde aquí el hack de compatibilidad con Scriptaculous en caso de ser necesario

$(function(){
$("#slidervideo-tabs a").click(function(){
var container = $("#slidervideo-content");
container.html("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx7i49nFsexnjpmq0opkPgYuPFXSxhH7oTqMA_NroHEeGttqgs54pbhnG4e002E6UsxSRiybE0TcWMYDD1Dfy508eXlEJ4Bxtu2zT2nOjAP_IPRx1iH8f1U6QEeVblp18S9Fzf7BbtOD0/s400/loading.gif' class='loading-vid' />");
var id = $(this).attr("href").slice(1);
loadvideo(id);
return false;
});
$("#slidervideo-tabs").hoverscroll({vertical:true,width:300,height:330,arrows:false});
$("#slidervideo-tabs li").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
loadvideo();
});

function loadvideo (hash){if(hash){hash = hash.slice(3);$("#slidervideo-content").html(video[hash]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid"+hash+"]").parent().addClass("actVid");}else{$("#slidervideo-content").html(video[1]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid1]").parent().addClass("actVid");}}
//]]>
</script>

Luego agrega los estilos antes de ]]></b:skin>

/* Galería de videos
----------------------------------------------- */
#slidervideo {
background:#000; /* Color de fondo */
clear:both;
margin:0 auto;
padding:5px;
width:765px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#slidervideo, #slidervideo-content, #slidervideo-tabs {height:350px;overflow:hidden;}
#slidervideo-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}
.loading-vid {display:block;margin:165px auto 0;}
#slidervideo-tabs {float:right;width:300px;margin:0;}
#slidervideo-tabs li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdGhUg6nu3GRQiawfqJcZPRLhL5e2W3Zylz4caxLUVR79V2ZZ4BzXvE-qxac3W_RXyLsPnGwcx973xDwC4bxH16hzCkq08kIuSKbYc0BAS7IBDB3u6nWje32XGas8V-ZN7Z43U6SnTMI/s0/tab_bg.jpeg) repeat-x top left;float:left;height:60px;padding:5px;width:290px;list-style:none;}
#slidervideo-tabs li a {padding:0 !important;border:0 !important;}
#slidervideo-tabs li.hover {background:#333;}
#slidervideo-tabs li.actVid {background:#555;}
#slidervideo-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}
#slidervideo-tabs li span.vidTit {
display:block;
color:#CD332D; /* Color de los títulos */
font-size:14px; /* Tamaño de los títulos */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs li .vidDesc {
display:block;
color:#fff; /* Color de la descripción */
font-size:12px; /* Tamaño del texto de la descripción */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs a {text-decoration:none;}
#slidervideo-tabs li.actVid .vidDesc {color:#fff;}
.ui-widget-content{float:right;}
.tabs-outer {background-image: none !important;}
#slidervideo-tabs li a:hover {background: none !important;}

Ahora en un elemento HTML/Javascript pega la estructura del slider, este gadget es el que pondrás debajo de la cabecera:

<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="slidervideo">
<div id="slidervideo-content"></div>
<ul id="slidervideo-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/ID_video_1/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid2"><img src="//i2.ytimg.com/vi/ID_video_2/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/ID_video_3/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid4"><img src="//i2.ytimg.com/vi/ID_video_4/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/ID_video_5/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

</ul>
</div>

Agrega los IDs de los videos, sus nombres y su descripción y listo. La descripción deberá ser muy breve para que no tengas problemas de espacios.

Si no sabes cómo obtener la ID de un video abre el video en YouTube y mira en la barra de direcciones, los últimos caracteres son la ID que necesitas.

Toma en cuenta que la ID de cada video se agrega dos veces, uno es para que muestre el video y otra para la miniatura de las pestañas.

Galería de videos para el blog

Leer +

felixsalguero

Es un reproductor de videos HTML5.

Este proyecto se llama Video.js y es de código abierto (Open Source), lo que nos dice que puede ser desarrollado y distribuido libremente.

Video.js esta construido en HTML / CSS; corrige las inconsistencias entre navegadores, incorpora pantalla completa y subtítulos, gestiona el retorno a Flash u otras tecnologías de reproducción de vídeo cuando el HTML5 no es compatible, y también proporciona una consistente API de JavaScript  para interactuar con el vídeo.

El HTML5 mejora el rendimiento del vídeo al no requerir una segunda aplicación (un plugin) que se ejecute y se abra la puerta a la creación de interacciones entre el vídeo y otros elementos de la página que no ha sido posible antes.

Este es el reproductor que instalaremos en nuestro blog

Vamos a instalar este funcional reproductor en nuestro blog.

1. Agregar el JavasScript y CSS en la plantilla

Lo primero que haremos será ir a Plantilla - Editar HTML, presiona F3, busca </head> y justo antes pega el siguiente código:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"></link>
<script src="http://vjs.zencdn.net/c/video.js"></script>

2. Agregar el Reproductor

Cada vez que desees poner un video en tu blog utulizando este repoductor HTML5 debes tener en cuenta algunos aspectos.

• El vídeo debe estar en formato MP4, WebM, u Ogg.
• Es importante, pero no indispensable que tengas una imagen de fondo para el vídeo  esta es la imagen que se muestra cuando aun no comienza la reproducción.

Ahora el codigo del reproductor

<video id="video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">
</video>

El anterior código es el que debes poner en cada entrada que quieras agregar un vídeo, pero ten en cuenta algunas caracteristicas de este codigo:

• Modifica el ancho y la altura del vídeo en width y height.
• En poster va la imagen de fondo del video

Preload tiene tres opciones:

1. preload="auto": Indica que el archivo se cargara automaticamente durante el tiempo de carga de la pagina, es decir se cargara anticipadamente antes de presionar Play.
2. preload="none": Indica que no se realizara ninguna acción de carga anticipada del video
3. preload "metadata": se utiliza para que el navegador cargue por anticipado sólo los elementos de información adicional asociada con el archivo, que no incluyen el sonido.

Personalmente utilizo preload="auto" ya que anticipa la carga del vídeo.

Por ultimo lo que esta en rojo es el link del vídeo, que debe estar en MP4 preferiblemente.

Ademas, si quiere que la reproduccion comience automáticamente, agrega después de <video,   autoplay

Con esto ya tendrás un reproductor de vídeos en tu sitio web. Se pueden agregar otras características si tu lo deseas. Por ejemplo subtitulos, agregar varios vídeos, o personalizar el tema mediante CSS; en fin ve a Video.js y obtén información adicional en cuanto a este reproductor.

Para hacer las cosas mas fáciles  Video.js tiene una herramienta donde podrás sencillamente construir tu reproductor de videos: Video.js Builder

Cualquier inquietud comentala

Instalar Reproductor de Vídeos en Blogger

Leer +

felixsalguero

Para evitar que contenidos de blogs sean copiados
Sin expandir las plantillas de artilugios localizamos la etiqueta <body>.

Reemplazamos dicha etiqueta por uno de los siguientes códigos:
<body onmousedown='return false;' onselectstart='return false;'>

Con esto evitaremos que se seleccionen y, por consiguiente, que se copien contenidos de un blog.

<body oncontextmenu='return false;' onmousedown='return false;' onselectstart='return false;'>

Con esto, además del efecto anterior, se inhabilitará el botón derecho del mouse, evitando que se extraigan imágenes del blog.


Para plantillas nuevas

Vamos a Edición de HTML:

Sin expandir las plantillas de artilugios localizamos la siguiente línea, ubicada inmediatamente después de la la etiqueta </head>:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Eliminamos dicha línea y en su lugar ponemos uno (solamente uno) de los siguientes códigos:

<body onmousedown='return false;' onselectstart='return false;'>

Con esto evitaremos que se seleccionen y, por consiguiente, que se copien contenidos de un blog.


<body oncontextmenu='return false;' onmousedown='return false;' onselectstart='return false;'>

Con esto, además del efecto anterior, se inhabilitará el botón derecho del mouse, evitando que se extraigan imágenes del blog. 


prueba

Evitar copias de contenido de un blog

Leer +

felixsalguero

He estado algún tiempo sin publicar algo nuevo, también he estado respondiendo varios comentarios que muchos bloggers hacen en mis publicaciones. Hoy me he animado a realizar un pequeño aporte para engalanar y personalizar nuestros blogs.

Seguramente has visto la barra progresiva de color rojo que se mueve en la parte superior cuando se carga un vídeo en Youtube. Sentí mucha curiosidad sobre como instalarla en blogger, y me puse en la tarea de investigar. 

Inicie mi búsqueda y encontré un script llamado Nprogresss.js. Comencé a hacer algunas pruebas con el script original pero no obtenía resultados, así que profundice en la búsqueda hasta hallar en algunos blogs anglosajones e hindues este script adaptado para Blogger.

La barra de carga esta instalada en este blog de pruebas

Sin mas que decir, vamos a instalar el Gadget. Esto sera sencillo, puesto que solo habrá que hacer una operación para instalarlo. 

Para eso ve a Blogger-Plantilla-Editar HTML, das un clic dentro de la plantilla y oprimes Ctrl+F y buscas por:<body>

Pega este código justo después:

 

<style>#nprogress{pointer-events:none}#nprogress .bar{background:#29d;height:2px;

left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress

 .peg{-ms-transform:rotate(3deg) translate(0px,-4px);

-webkit-transform:rotate(3deg) translate(0px,-4px);

box-shadow:0 0 10px #29d, 0 0 5px #29d;display:

block;height:100%;opacity:1.0;position:absolute;right:0;

transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress 

.spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}

#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms 

linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 

2px transparent;border-left-color:#29d;border-radius:50%;border-top-color:

#29d;box-sizing:border-box;height:18px;width:18px}100%{-webkit-transform:rotate

(360deg);transform:rotate(360deg)}.photo{display:none}</style>

<div id='loadMore'/>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='http://goo.gl/10Okof'/>

El código resaltado en verde es Jquery, si ya lo tienes insertado en tu blog, debes omitirlo.
El código resaltado en azul, define el color de la barra. Modifícalo a tu gusto. Utiliza el selector de colores
El código resaltado en rojo ajusta el ancho de la barra. Cámbialo a tu parecer.

Con esto ya estaría funcionando la barra de carga en tu blog.

Barra de Carga de Youtube para Blogger

Leer +

felixsalguero

 

Si te gusta ofrecer a tus lectores la posibilidad de suscribirse al contenido que publicas o invitarles a seguirte en Twitter, esta es sin duda tu mejor herramienta.

Construí una pequeña cajita con los colores y las tonalidades típicas de blogger -lo que la convierte en un artilugio muy familiar- y con un bonito efecto al pasar el cursor por encima de cada enlace.

Es una alternativa a los botones individuales que solemos incluir en nuestra barra lateral para ofrecer las mismas ventajas a todo visitante y por suerte, con una rápida instalación.

El resultado será el mismo que aparece en la imagen de la izquierda. ¿Te animas? ¡Empecemos!

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade esta línea encima (antes):

<link href="https://sites.google.com/site/scriptsbalcon/b/blcajCSS.css" rel="stylesheet" type="text/css"/>

Guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

<div id="blCajaMeta">
<div id="blCajaMetaContenid">
<div class="blcaja1"><a href="URL FEED">Suscríbete a mi feed</a></div>
<div style="padding:2px;border-bottom:1px dashed #E1D4C0;"></div>
<div class="blcaja2"><a href="URL FEED EMAIL">Suscríbete vía email</a></div>
<div style="padding:2px;border-bottom:1px dashed #E1D4C0;"></div>
<div class="blcaja3"><a href="URL TWITTER">Sígueme en Twitter</a></div>
</div>
</div>
<style>#blCajaMeta {width:220px;}</style>

Ahora tan solo debes reemplazar URL FEED, URL FEED EMAIL y URL TWITTER por la dirección del feed de tu blog, la dirección de la suscripción por email o correo electrónico (aconsejo utilizar Feedburner) y la dirección de tu perfil en Twitter -respectivamente-.

Las frases del código (resaltadas en color grisáceo) pueden editarse a gusto propio.

La cifra en color rojo (220) indica la anchura de la caja. Auméntala o disminúyela para ajustar el marco a tu barra lateral.



Si es así, haz uso de esta otra línea en el primer paso (en lugar de la indicada):

<link href="https://sites.google.com/site/scriptsbalcon/b/blcajCSSfcbk.css" rel="stylesheet" type="text/css"/>

Y añade esto justo antes de los cierres </div> y </div> del segundo código:

<div style="padding:2px;border-top:1px dashed #E1D4C0;" class="blcaja4"><a href="URL FACEBOOK">Seguir en Facebook</a></div>

Sustituye URL FACEBOOK por la dirección de tu perfil o página en dicha red social y edita la frase a mostrar si lo consideras necesario.

¡Guarda el gadget y habrás terminado!

Añade una preciosa caja de suscripciones en tu blog

Leer +

felixsalguero

En esta entrada vamos a ver cómo poner los botones para compartir estilo Taringa, que incluye los botones de Facebook, Taringa, +1, y Twitter.

Para colocar estos botones entra en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y agrega antes de ]]></b:skin> los estilos:

.taringa-post-share li {
float: right;
margin-left: 5px;
list-style:none;
}
.taringa-post-share {
padding: 5px 35px 10px 1px;
margin-bottom: 10px;
margin-right: 0px;
background: url(URL de la imagen) no-repeat bottom right;
}
.clearfix:after {content:"0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}

Luego busca esta línea:

<div class='post-footer'>

Arriba de ella pega este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='taringa-post-share clearfix'>
<li><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></li>

<li class='t-big'><script type='text/javascript'>(function(){var x=document.createElement(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></li>

<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></li>

</ul>
</b:if>

Ahora, como la imagen del listón no se ajusta al ancho de las entradas, y como todos tienen un ancho distinto, he hecho tres imágenes, una de 500px de ancho, otra de 600px y otra más de 700px, así que donde se indica en el primer código pon la URL de la imagen que se ajuste más a tu blog.
Aquí abajo están las URLs de las imágenes en sus tres medidas.

IMAGEN DE 500pxhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYLH5dFvEH-uqhlOuQ0csClBgSlMNeekAK0R7HpkLleqGphLKYWmP0vN39NchlS2lAuzBPnpp1pFXxE-S4i3CSAwTjoN4AXVHvFKIO0lWV5P8SpiZLwtpx7wz6STcFnu_jOY8ZJyvfR0/s500/ribbon-taringa500px.png
IMAGEN DE 600pxhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_f9iJpWusj8S8-d0sG5h7dZaAmkLOZ2j_zXk101XXQzsZe39kgWehRWnRxJQVI1I28bYT-BNc02hlIYxYumBm-xcpce9ko-VP16zKfMT50Vl3OjQKFedU64dpDiXfF8wbpdQyOSax3SA/s600/ribbon-taringa600px.png
IMAGEN DE 700pxhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpWl8OmfguohNNDLq60E7uIKZM8juoN4B16DI4NcSexVocLvSCgwO1B5wlIXZL9XnfZNDBVMr5pM2CcsMFnOlYFhKtBmzQgNS32MYerWALAEZauMy8BvWlm18rKqBcdtuIdwXuJSfuqGw/s700/ribbon-taringa700px.png

Habiendo puesto la imagen ya estará todo listo. Los botones no se verán en la portada, así que debes ingresar a una entrada individual para poder verlos.

En caso de que no se vieran, busca la línea del segundo paso, y revisa si la tienes dos veces, si así fuera pega el código en la otra repetida.

El listón se verá inclinado hacia la derecha, si quisieras centrarlo habrá que aplicar un margen derecho, así que cambia donde dice margin-right: 0px; por un valor más alto, por ejemplo:
margin-right: 30px;
Eso hará que se desplacen a la izquierda.

Como puedes ver los botones lucirán muy bien, y seguro sera una forma muy llamativa de invitar a tus lectores a compartir las entradas de tu blog.

Botones para compartir estilo Taringa

Leer +

felixsalguero

Para agregar estos espectaculares marcadores sociales a tu blog ve a Plantilla, , Editar HTML, y busca lo siguiente:

 <b:skin>...</b:skin>

 Allí das clic en la flecha que aparece al lado de este código y busca la etiqueta  ]]></b:skin> y arriba de esta añade lo siguiente:

/* Share button by miltrucosblogger.info----------------------------------------------- */
.share-buttons li { list-style: none; float: left; padding-right: 20px; padding-bottom: 10px; } .sharetitle { float: left; font-size: 51px; font-weight: 900; text-transform: uppercase; line-height: 60px; padding-right: 10px; color: #2aa4cf; } .sharetitle2 { float: left; margin-left: -112px; margin-top: 50px; font-size: 20px; text-transform: uppercase; font-weight: 900; Color: #8a8c8e; } .sharetitle3 img { float: left; padding-right: 20px; padding-left: 10px; padding-top: 5px; } .share-buttons { padding-top: 20px; }
.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSSUzEdclb297CGrFyNKHfQXuqfOy83EN4waHU-07KfuQc9BVlEbKxzRu9O1diVPfMhyphenhyphen0hZPTO1bZxRsorETP7TxJTihXH-1R9tBTdxlijbLWcIz1_J7qk354AbOzt6Gf0H8Xqpg01ZwY/s10/like.png) no-repeat}
#social img:hover {opacity: 0.6;}

Ahora busca la siguiente linea:

<div class='post-footer-line post-footer-line-3'>

Debajo de la siguiente linea pega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-buttons'>
<div class='sharetitle'>Te Gusta?</div> <div class='sharetitle2'>Compartelo</div><div class='sharetitle3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5L0WZA3kujKp54TGtDNWkTi4CpnwpJRX3bhnpV9x3srqgGd9wUDML48Bk4COd_6CQud2YeZuletFb0iAgfE4lU1RhShyphenhyphenhCL2Rgn6J3caWG7pkBUrxHJdY2WEAztjM8iRdBe38Xzz5Ma5U/s1600/racka1.png'/></div>
<li><a class='twitter-share-button' data-count='vertical' data-related='' data-via='mtrucosblogger' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></li>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:70px; height:62px;'/></li>
 <li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size='tall'/> </li>
  </div>
</b:if>

Para finalizar das clic en Guardar Plantilla y listo hemos terminado.

Marcadores sociales para tu blog

Leer +

felixsalguero

Qué es Disqus

Disqus es un servicio en línea que ofrece una plataforma informática centralizada para discusiones en blogs y sitios Web. En la actualidad ocupa la posición 1392 en el Rank de Alexa, lo cual muestra claramente su popularidad en el mundo entero.

¿Cómo funciona?

Si un usuario entra a un sitio Web y remite un comentario en un sitio que utilice este sistema, el comentario es enviado a Disqus, que verifica si la persona que realizó el comentario tiene una cuenta allí, y rastrea todos los comentarios que haya hecho en todos los sitios Web que utilicen Disqus.

Disqus permite dejar comentarios en cualquier sitio Web, ingresando con las credenciales de Facebook, Twitter, Google, OpenID o Yahoo, por lo que resulta fácil y cómodo para todo usuario opinar sobre cualquier tema.

Este detalle sin duda es SÚPER importante para cualquier Webmaster, puesto que una de las razones por las que mucha gente no comenta en los sitios Web, es porque no quiere registrarse como usuario de ese sitio, sino tan solo dejar un comentario personal invirtiendo un par de minutos en ello.

Hay personas que están suscritas a 8, 10, 20 o más sitios y ni siquiera recuerdan las contraseñas para entrar en aunque sea UNO de ellos, por lo que simplemente evitan dejar comentarios. Este inconveniente es tan usual, que sin duda Disqus viene a ser una solución magnífica, casi caída del cielo.

La consecuencia de esto es que, si utilizas los contenidos adecuados, y los publicitas adecuadamente, las estadísticas de tu sitio pueden aumentar enormemente, tanto en número de visitas (por vez primera y visitantes frecuentes), como en clics, por lo que constituye una poderosa herramienta que puedes incluir en tu blog, ¡sin costo alguno!

La instalación de Disqus en tu blog de WordPress es bastante sencilla, pues nada más debes instalar un plugin, e incluso existe la posibilidad de utilizar código JavaScript para cualquier Sistema de Gestión de Contenidos.

Instalando la caja de comentarios de Disqus en Blogger.

1. Nos iremos a la página de registro de Disqus

2. Registramos correctamente nuestro blog.

3. Cuando rellenamos todos los campos le damos en Continue les saldrá una página en donde tienen que elegir que plataforma utilizarán, en mi caso yo utilizaré Blogger.

4. Después de elegir su plataforma les llevará a otra página en donde tienen que hacerle click en Add Nombre de tu sitio to my Blogger site sin cerrar la pestaña anterior, más abajo encontrarás un boton que dice "Continue to the getting started guide" le damos anticlick y Abrir enlace en una pestaña nueva dependiendo del navegador que uses.

5. Después de darle a Add Nombre de tu sitio to my Blogger site nos llevará a una página en donde tendrán que darle click en Añadir artilugio.

Con eso ya tendrán la caja de comentarios instalada en su sitio. Pero hay un problema, la caja de comentarios está en ingles ! 

También hay solución para eso, ahora nos vamos a al enlace que abrimos en una pestaña nueva anteriormente y le damos en Personalize your site y más abajo hacemos click en Configure.

Modifican todo lo que está en ingles al español, y su caja de comentarios estará lista.

No olvides comentar si te gustó la caja de comentarios

Disqus, caja de comentarios con distintas opciones para comentar

Leer +

felixsalguero

 

De nuevo vuelvo con un gadget para tu blog, esta vez te mostraré un widget parecido a uno anterior, pero diferente en varios aspectos, ya que este viene con un cuadro para la suscripcion por electronico, y solo con los botones de Facebook, Twitter, Google+ y RSS. (el anterior widget tiene mas botones)  

Los botones de las redes sociales tienen un color verde, así como la suscripción por correo electrónico  Este Gadget es perfecto para usarlo en la Sidebar (barra derecha del blog). Es muy elegante y podría decir que en poco espacio albergas casi la mayoría y mas relevantes tipos de suscripciones a tu blog.

Agregar Widget a Blogger

Para agregar este artilugio al blog, ve a Blogger.com - Diseño - Añadir un gadget - HTML/Javascript y pega allí el siguiente código:

<style type="text/css">
/* Terrenoblogger.co - botones sociales */
#TB-caja-suscripcion {width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.TB-caja-suscripcion-wrapper{background:url(https://ia800900.us.archive.org/24/items/TerrenobloggerFacebook/BackgroundBotonesSociales.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:16px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:capitalize}
.TB-caja-suscripcionform{clear:both;display:block;margin:10px 0}form.TB-caja-suscripcion-form{clear:both;display:block;margin:10px 0 0;width:auto}
.TB-caja-suscripcion-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihzfdjdfnDM3PVjC9iJqI2DFOMEKzK0diqn90EQNbOlAVEcLFite8kgEdXQdUd_gUUXaTWu6oUjeh2nCMlAE0jFvTCZmSznjGtakSjIksID8dFBc651XuNkbGJdWHj6D9ktABvgUMSokU/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.TB-caja-suscripcion-email-button{background:#00B047;border:1px solid #01B831;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:capitalize;width:100%}
.TB-caja-suscripcion-email-button:hover,.TB-caja-suscripcion-email-button:focus{background:#20B95D}
.TB-caja-suscripcion-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}</style>

<div id="TB-caja-suscripcion">
<div class="TB-caja-suscripcion-wrapper">
<br />
<a class="social-icons" href="https://facebook.com/USUARIO-FACEBOOK" target="_blank" title="Síguenos en Facebook">
<img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-facebook.png" /></a> 
<a class="social-icons" href="https://twitter.com/USUARIOTWITTER"><img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/ID-GOOGLE+" target="_blank" title="Síguenos en Google+"><img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-google%2b.png" /></a> 
<a class="social-icons" href="http://feeds.feedburner.com/USUARIO-FEEDBURNER" target="_blank" title="Suscríbete a nuestro Feed"><img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-rss.png" /></a>
<p>Suscríbete para recibir nuestras actualizaciones</p>
<div class="TB-caja-suscripcion-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-FEEDBURNER" class="TB-caja-suscripcion-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="USUARIO-FEEDBURNER" /> <input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="TB-caja-suscripcion-email-field" name="email" placeholder="Escribe tu Email Aquí" /> <input class="TB-caja-suscripcion-email-button" title="" type="submit" value="Suscribirme!" />&nbsp;</form></div></div></div>

Ahora cambia lo que esta resaltado en verde por cada uno de tus usuarios en las redes sociales y feedburner.

Será sencillo poner este Gadget en tu blog y se vera muy bien allí  Sin embargo, si surge algún inconveniente, coméntalo y te ayudare.

Widget con Suscripción y Botones Sociales para Blogger

Leer +

felixsalguero

Hace poco una de las nuevas novedades lanzadas por Blogger ha sido por fin el formulario de contacto nativo de Blogger, si por fin lo tenemos en Blogger.

El formulario se ve de la siguiente forma:

Para añadir el gadget ve a Diseño, Añadir gadget, Mas gadgets, Formulario de Contacto.

Desde allí solo podrás configurar el titulo del gadget, pero gracias al CSS, mas exactamente con la propiedad .contact-form, se pueden personalizar ciertos atributos:

/* Contenedor general */
.contact-form-widget {
width: 280px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #87CEEB;
color: #000;
}
/* Cajas de los datos y botón de envío */
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #87CEEB;
background: #4682B4;
color: #fff;
}

Quedando el formulario de la siguiente manera:

Este es un gadget muy nuevo por lo que hay todavía algunos detalles sin definir, pero con un poco de ingenio se puede dejar un formulario de contacto bastante profesional y elegante como el de la imagen anterior.

Vía/ Oloblogger

Gadget de Formulario de Contacto en Blogger

Leer +

felixsalguero

El siguiente gadget es visto en muchas de las grandes paginas web, ya que esto permite mantener al visitante mucho mas tiempo navegando en nuestro sitio.

Después que el usuario a leído alguna entrada, es importante recomendarle otro articulo; asi logramos que pueda estar mucho tiempo en nuestra pagina web y le damos una experiencia mas personalizada al lector.

Te invito a ver una demostración aquí: Demo

Agregar al blog

Utiliza el siguiente botón para agregar este Gadget a tu blog

Si quiere hacerlo manualmente, ve a Diseño - Agregar gadget - HTML/Javascript y pegas alli el siguiente codigo

<div id="TBslidein" style="display:none;"> 
<div class="help">?</div>
<div class="expand">+</div> 
<div class="close">X</div> 
<p>Recomendado</p>
<div id="TBslidein_image"></div> 
<div  id="TBslidein_title">Cargando...</div> </div> 
<script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof TB_onload_queue=='undefined')var TB_onload_queue=[];if(typeof TB_dom_loaded=='boolean')TB_dom_loaded=false;else var TB_dom_loaded=false;if(typeof TB_async_loader!='function'){function TB_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(TB_dom_loaded){newcallback()}else TB_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof TB_domLoaded!='function')function TB_domLoaded(callback){TB_dom_loaded=true;var len=TB_onload_queue.length;for(var i=0;i<len;i++){TB_onload_queue[i]()}}TB_domLoaded();TB_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){TB_async_loader("https://sites.google.com/site/terrenoblogger/javascript/TB-out-slide.js",function(){},"TB-out-slide")},"jQueryjs")} </script> 
<a href="http://www.terrenoblogger.co/2013/04/post-recomendado-deslizante-para-blogger.html" target="_blank"><img src="https://sites.google.com/site/terrenoblogger/javascript/terrenoblogger.png" alt="Post Recomendado deslizante para blogger" /></a> 

Anotaciones

• Este efecto utiliza Jquery, el cual esta en color azul; si tienes otra versión en tu blog, podría causar problemas.
• Puedes editar las frases Recomendado y Cargando...

Si este widget no te funciona, o surgen algunos inconvenientes, puedes comentarlos

Post Recomendado Deslizante para Blogger

Leer +

felixsalguero

La temporada navideña ya es oficial, y al menos los que estamos en el hemisferio norte relacionamos la nieve con la Navidad, así que es hora de abrigarnos porque haremos que caiga nieve en el blog.

En esta ocasión usaremos un script de Schillmania que hará que caigan unos finos copos de nieve en el blog y que se irán acumulando al final de la página. Además, la tormenta de nieve se mueve en dirección contraria al cursor, por lo que si movemos el cursor a la derecha entonces la nieve caerá desde la izquierda y viceversa.

Puedes ver un ejemplo en este blog de pruebas.

Para no complicarnos descargando y subiendo archivos, pegaremos el script directo en un gadget, así podrás quitar la nieve del blog cuando quieras con sólo eliminar el gadget.

Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript.

Si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript.

Ahí dentro del gadget pega el siguiente código:

<script type="text/javascript">
//<![CDATA[
// Nieve en el blog
/** @license
DHTML Snowstorm! JavaScript-based Snow for web pages
--------------------------------------------------------
Version 1.42.20111120 (Previous rev: 1.41.20101113)
Copyright (c) 2007, Scott Schiller. All rights reserved.
Code provided under the BSD License:
http://schillmania.com/projects/snowstorm/license.txt
*/
var snowStorm=function(e,d){function g(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function o(){e.setTimeout(function(){a.start(true)},20);a.events.remove(i?d:e,"mousemove",o)}function r(){if(!a.excludeMobile||!s)a.freezeOnBlur?a.events.add(i?d:e,"mousemove",o):o();a.events.remove(e,"load",r)}this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=40;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor="#ffffff";this.snowCharacter="&bull;";this.snowStick=true;
this.targetElement=null;this.useMeltEffect=true;this.usePositionFixed=this.useTwinkleEffect=false;this.freezeOnBlur=true;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,y=this,i=navigator.userAgent.match(/msie/i),z=navigator.userAgent.match(/msie 6/i),A=navigator.appVersion.match(/windows 98/i),s=navigator.userAgent.match(/mobile/i),B=i&&d.compatMode==="BackCompat",t=s||B||z,h=null,k=null,j=null,m=null,u=null,v=null,
p=1,n=false,q;a:{try{d.createElement("div").style.opacity="0.5"}catch(C){q=false;break a}q=true}var w=false,x=d.createDocumentFragment();this.timers=[];this.flakes=[];this.active=this.disabled=false;this.meltFrameCount=20;this.meltFrames=[];this.events=function(){function a(b){var b=f.call(b),c=b.length;l?(b[1]="on"+b[1],c>3&&b.pop()):c===3&&b.push(false);return b}function d(a,c){var e=a.shift(),f=[b[c]];if(l)e[f](a[0],a[1]);else e[f].apply(e,a)}var l=!e.addEventListener&&e.attachEvent,f=Array.prototype.slice,
b={add:l?"attachEvent":"addEventListener",remove:l?"detachEvent":"removeEventListener"};return{add:function(){d(a(arguments),"add")},remove:function(){d(a(arguments),"remove")}}}();this.randomizeWind=function(){var c;c=g(a.vMaxX,0.2);u=parseInt(g(2),10)===1?c*-1:c;v=g(a.vMaxY,0.2);if(this.flakes)for(c=0;c<this.flakes.length;c++)this.flakes[c].active&&this.flakes[c].setVelocities()};this.scrollHandler=function(){var c;m=a.flakeBottom?0:parseInt(e.scrollY||d.documentElement.scrollTop||d.body.scrollTop,
10);isNaN(m)&&(m=0);if(!n&&!a.flakeBottom&&a.flakes)for(c=a.flakes.length;c--;)a.flakes[c].active===0&&a.flakes[c].stick()};this.resizeHandler=function(){e.innerWidth||e.innerHeight?(h=e.innerWidth-(!i?16:16)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:e.innerHeight):(h=(d.documentElement.clientWidth||d.body.clientWidth||d.body.scrollWidth)-(!i?8:0)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:d.documentElement.clientHeight||d.body.clientHeight||d.body.scrollHeight);k=parseInt(h/2,10)};this.resizeHandlerAlt=
function(){h=a.targetElement.offsetLeft+a.targetElement.offsetWidth-a.flakeRightOffset;j=a.flakeBottom?a.flakeBottom:a.targetElement.offsetTop+a.targetElement.offsetHeight;k=parseInt(h/2,10)};this.freeze=function(){var c;if(a.disabled)return false;else a.disabled=1;for(c=a.timers.length;c--;)clearInterval(a.timers[c])};this.resume=function(){if(a.disabled)a.disabled=0;else return false;a.timerInit()};this.toggleSnow=function(){a.flakes.length?(a.active=!a.active,a.active?(a.show(),a.resume()):(a.stop(),
a.freeze())):a.start()};this.stop=function(){var c;this.freeze();for(c=this.flakes.length;c--;)this.flakes[c].o.style.display="none";a.events.remove(e,"scroll",a.scrollHandler);a.events.remove(e,"resize",a.resizeHandler);a.freezeOnBlur&&(i?(a.events.remove(d,"focusout",a.freeze),a.events.remove(d,"focusin",a.resume)):(a.events.remove(e,"blur",a.freeze),a.events.remove(e,"focus",a.resume)))};this.show=function(){var a;for(a=this.flakes.length;a--;)this.flakes[a].o.style.display="block"};this.SnowFlake=
function(a,e,l,f){var b=this;this.type=e;this.x=l||parseInt(g(h-20),10);this.y=!isNaN(f)?f:-g(j)-12;this.vY=this.vX=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=a.meltFrameCount;this.meltFrames=a.meltFrames;this.twinkleFrame=this.meltFrame=0;this.active=1;this.fontSize=10+this.type/5*10;this.o=d.createElement("div");this.o.innerHTML=a.snowCharacter;this.o.style.color=a.snowColor;this.o.style.position=n?"fixed":"absolute";this.o.style.width=
a.flakeWidth+"px";this.o.style.height=a.flakeHeight+"px";this.o.style.fontFamily="arial,verdana";this.o.style.overflow="hidden";this.o.style.fontWeight="normal";this.o.style.zIndex=a.zIndex;x.appendChild(this.o);this.refresh=function(){if(isNaN(b.x)||isNaN(b.y))return false;b.o.style.left=b.x+"px";b.o.style.top=b.y+"px"};this.stick=function(){t||a.targetElement!==d.documentElement&&a.targetElement!==d.body?b.o.style.top=j+m-a.flakeHeight+"px":a.flakeBottom?b.o.style.top=a.flakeBottom+"px":(b.o.style.display=
"none",b.o.style.top="auto",b.o.style.bottom="0px",b.o.style.position="fixed",b.o.style.display="block")};this.vCheck=function(){if(b.vX>=0&&b.vX<0.2)b.vX=0.2;else if(b.vX<0&&b.vX>-0.2)b.vX=-0.2;if(b.vY>=0&&b.vY<0.2)b.vY=0.2};this.move=function(){var d=b.vX*p;b.x+=d;b.y+=b.vY*b.vAmp;if(b.x>=h||h-b.x<a.flakeWidth)b.x=0;else if(d<0&&b.x-a.flakeLeftOffset<-a.flakeWidth)b.x=h-a.flakeWidth-1;b.refresh();if(j+m-b.y<a.flakeHeight)b.active=0,a.snowStick?b.stick():b.recycle();else{if(a.useMeltEffect&&b.active&&
b.type<3&&!b.melting&&Math.random()>0.998)b.melting=true,b.melt();if(a.useTwinkleEffect)if(b.twinkleFrame)b.twinkleFrame--,b.o.style.visibility=b.twinkleFrame&&b.twinkleFrame%2===0?"hidden":"visible";else if(Math.random()>0.9)b.twinkleFrame=parseInt(Math.random()*20,10)}};this.animate=function(){b.move()};this.setVelocities=function(){b.vX=u+g(a.vMaxX*0.12,0.1);b.vY=v+g(a.vMaxY*0.12,0.1)};this.setOpacity=function(a,b){if(!q)return false;a.style.opacity=b};this.melt=function(){!a.useMeltEffect||!b.melting?
b.recycle():b.meltFrame<b.meltFrameCount?(b.meltFrame++,b.setOpacity(b.o,b.meltFrames[b.meltFrame]),b.o.style.fontSize=b.fontSize-b.fontSize*(b.meltFrame/b.meltFrameCount)+"px",b.o.style.lineHeight=a.flakeHeight+2+a.flakeHeight*0.75*(b.meltFrame/b.meltFrameCount)+"px"):b.recycle()};this.recycle=function(){b.o.style.display="none";b.o.style.position=n?"fixed":"absolute";b.o.style.bottom="auto";b.setVelocities();b.vCheck();b.meltFrame=0;b.melting=false;b.setOpacity(b.o,1);b.o.style.padding="0px";b.o.style.margin=
"0px";b.o.style.fontSize=b.fontSize+"px";b.o.style.lineHeight=a.flakeHeight+2+"px";b.o.style.textAlign="center";b.o.style.verticalAlign="baseline";b.x=parseInt(g(h-a.flakeWidth-20),10);b.y=parseInt(g(j)*-1,10)-a.flakeHeight;b.refresh();b.o.style.display="block";b.active=1};this.recycle();this.refresh()};this.snow=function(){for(var c=0,d=0,e=0,f=null,f=a.flakes.length;f--;)a.flakes[f].active===1?(a.flakes[f].move(),c++):a.flakes[f].active===0?d++:e++,a.flakes[f].melting&&a.flakes[f].melt();if(c<a.flakesMaxActive&&
(f=a.flakes[parseInt(g(a.flakes.length),10)],f.active===0))f.melting=true};this.mouseMove=function(c){if(!a.followMouse)return true;c=parseInt(c.clientX,10);c<k?p=-2+c/k*2:(c-=k,p=c/k*2)};this.createSnow=function(c,d){var e;for(e=0;e<c;e++)if(a.flakes[a.flakes.length]=new a.SnowFlake(a,parseInt(g(6),10)),d||e>a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;y.targetElement.appendChild(x)};this.timerInit=function(){a.timers=!A?[setInterval(a.snow,a.animationInterval)]:[setInterval(a.snow,a.animationInterval*
3),setInterval(a.snow,a.animationInterval)]};this.init=function(){var c;for(c=0;c<a.meltFrameCount;c++)a.meltFrames.push(1-c/a.meltFrameCount);a.randomizeWind();a.createSnow(a.flakesMax);a.events.add(e,"resize",a.resizeHandler);a.events.add(e,"scroll",a.scrollHandler);a.freezeOnBlur&&(i?(a.events.add(d,"focusout",a.freeze),a.events.add(d,"focusin",a.resume)):(a.events.add(e,"blur",a.freeze),a.events.add(e,"focus",a.resume)));a.resizeHandler();a.scrollHandler();a.followMouse&&a.events.add(i?d:e,"mousemove",
a.mouseMove);a.animationInterval=Math.max(20,a.animationInterval);a.timerInit()};this.start=function(c){if(w){if(c)return true}else w=true;if(typeof a.targetElement==="string"&&(c=a.targetElement,a.targetElement=d.getElementById(c),!a.targetElement))throw Error('Snowstorm: Unable to get targetElement "'+c+'"');if(!a.targetElement)a.targetElement=!i?d.documentElement?d.documentElement:d.body:d.body;if(a.targetElement!==d.documentElement&&a.targetElement!==d.body)a.resizeHandler=a.resizeHandlerAlt;
a.resizeHandler();a.usePositionFixed=a.usePositionFixed&&!t;n=a.usePositionFixed;if(h&&j&&!a.disabled)a.init(),a.active=true};a.events.add(e,"load",r,false);return this}(window,document);
//]]>
</script>

Guarda los cambios y a aguantarse el frío virtual.

El número 40 es la velocidad en la que cae la nieve, con un valor más bajo caerá más rápida y con uno más alto caerá más despacio.

En color rojo está el código del color de la nieve, en este caso es blanca, pero puedes cambiarlo por otro en caso que tu blog sea de un color claro, sino pues no se verá.

Cuando acabe la temporada navideña sólo elimina el gadget donde pusiste el código y se habrá ido la nieve.

Nieve en el blog que se acumula al final de la página

Leer +

felixsalguero

Hoy les quiero compartir un truco el cual consta de una excelente caja de suscripciones que viene con los servicios de Facebook,RSS,Twitter y suscripcion por email.

Para agregar esta caja de suscripciones en tu blog pega en un elemento HTML/JAVASCRIPT lo siguiente:

<table><tbody><tr>  <td>
<a href="URL DE TU BLOG/feeds/posts/default" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij-HTpkugxKQiKzzNGRl3qJH3sD5S5LY4UDkORPdpOKJUvUZOM86eVxld1XhOqoTkzLeQf6_SdZRHKBkapyuJcKjb0WVzy5iPHNwBiK1mieWbbhaSr4SRJZ1ywZxnIuyx7nh-NmOuatwrL/s0/rss.png" border="0" /></a></td>  <td>
<a href="URL DE TU TWITTER" rel="nofollow" style="margin-left: " target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSeYMubty6KhWsIoGsasBcjeEKR6Yo-gUYFpII7RiLBRBsXZvcZqFiyF99nVkC85l1oNpEIOPOEE9XPG3QT_c51-0dh5ld8Hu-qH-hn96O0CmpP2YFiYjReTVdgJpxln8DJ8hyphenhyphenGTPVK1ys/s0/twitter.png" border="0" /></a></td>  <td>
<a href="URL DE TU FACEBOOK" rel="nofollow" style="margin-left: " target="_blank"><img class="sinborde" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZG_jL85HoJzqM7sblMunoOzC6IiDwQf7ByeNYwvVlJH0DI3OIOQ_COWB7RjWZZspXVqqSw1M05fe2O93UGpgIl006Ux2qfQRxboo1LCRencl68_njRF6h54b8WeSTGdhLnaBOGCauECBY/s0/facebook.png" border="0" /></a></td>  </tr></tbody></table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow">
<input onblur="if (this.value == &#39;&#39;) {this.value = &#39;submit email...&#39;;}" onfocus="if (this.value == &#39;submit email...&#39;) {this.value = &#39;&#39;;}" class="emailupdatesinput" gtbfieldid="10" name="email" value="tu email aqui..." type="text" /><input name="uri" value="NOMBRE FEEDBURNER" type="hidden" /><input class="joinemailupdates" value="Suscribirse" type="submit" /></form></div></div></div>
<style type="text/css"></style>

Reemplaza lo que esta en azul por lo que se indica y guarda los cambios

Caja de Suscripciones "Elegant Subscription" para Blogger

Leer +