viernes, 16 de octubre de 2009
jueves, 15 de octubre de 2009
| 0 comentarios |
un reproductor con varios audiolist
lo primero
es editar tu repro con el macromedia
entran a la funcion del repro y buskan
la sgte linea
creo todos saben localizar eso verdad? .. la mayoria le pone su
name et etc xD...
bueno aki solo le cambiamos y le ponemos lo sgte :
lo k se hizo fue agregarle una variable ahora suben a su host el repro y sus audiolist cada uno con su respectivo name ejm
etc etc
ahora para llamarlo seria asi
turepro.swf?genero=alternativo ia no es nesesario
.xml pk yta esta escrito dentro del repro ...
Espero que esto te sirva ..
si no tienen el macromedia lo descargan de mi otro blog www.pro-river.blogspot.com con serial jejeje
es editar tu repro con el macromedia
entran a la funcion del repro y buskan
la sgte linea
creo todos saben localizar eso verdad? .. la mayoria le pone su
name et etc xD...
bueno aki solo le cambiamos y le ponemos lo sgte :
lo k se hizo fue agregarle una variable ahora suben a su host el repro y sus audiolist cada uno con su respectivo name ejm
etc etc
ahora para llamarlo seria asi
turepro.swf?genero=alternativo ia no es nesesario
.xml pk yta esta escrito dentro del repro ...
Espero que esto te sirva ..
si no tienen el macromedia lo descargan de mi otro blog www.pro-river.blogspot.com con serial jejeje
miércoles, 14 de octubre de 2009
| 0 comentarios |
poner un reproductor en las entradas
direccion
http://www.longtailvideo.com/support/jw-player-setup-wizard?example=2
.----------------------------------------
antes del /head poner
<script src='http://unscorpio.super-red.es/js/swfobject.js' type='text/javascript'/>
ya en la entrada poner esto...
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img height="195" src="http://sites.google.com/site/imgunscorpio/tombaxter.jpg" width="200" /></div>
<div id="tombaxter">
Tom Baxter- Better</div>
<script type="text/javascript">var so = new SWFObject('http://riverauaslp.googlepages.com/player.swf','mpl','200','20','9');so.addParam('allowscriptaccess','always');so.addParam('allowfullscreen','true');so.addParam('flashvars','&file=http://sites.google.com/site/riveraunscorpio/Home/TomBaxter-Better.mp3&link=http://sites.google.com/site/riveraunscorpio/Home/TomBaxter-Better.mp3&dock=false');so.write('tombaxter');</script>
cambiar
<div id="tombaxter"> por cualquier otro identificador unico en cada entrada,,
descarga el player.swf y swfobject.js
este es el resultado final RESULTADO
»» read more
http://www.longtailvideo.com/support/jw-player-setup-wizard?example=2
.----------------------------------------
antes del /head poner
<script src='http://unscorpio.super-red.es/js/swfobject.js' type='text/javascript'/>
ya en la entrada poner esto...
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img height="195" src="http://sites.google.com/site/imgunscorpio/tombaxter.jpg" width="200" /></div>
<div id="tombaxter">
Tom Baxter- Better</div>
<script type="text/javascript">var so = new SWFObject('http://riverauaslp.googlepages.com/player.swf','mpl','200','20','9');so.addParam('allowscriptaccess','always');so.addParam('allowfullscreen','true');so.addParam('flashvars','&file=http://sites.google.com/site/riveraunscorpio/Home/TomBaxter-Better.mp3&link=http://sites.google.com/site/riveraunscorpio/Home/TomBaxter-Better.mp3&dock=false');so.write('tombaxter');</script>
cambiar
<div id="tombaxter"> por cualquier otro identificador unico en cada entrada,,
descarga el player.swf y swfobject.js
este es el resultado final RESULTADO
| 0 comentarios |
plantillas
http://www.bloggertricks.com/2009/05/recent-posts-with-thumbnails-widget-for.html
http://blotemplates.blogspot.com/2009/07/zitizen.html
»» read more
http://blotemplates.blogspot.com/2009/07/zitizen.html
| 0 comentarios |
comentarios recientes en blogger
en agregar elemento javascript donde quieres que se muestre
<br/><script language="javascript">
var numcomments = 10;
var numchars = 60;
</script>
<script src="http://unscorpio.blogspot.com/feeds/comments/default?start-index=2&
alt=json-in-script&callback=commentDisplay"></script>
antes de /head
<script src='https://sites.google.com/site/fondosytododemas/recentcoment.js' type='text/javascript'/>
»» read more
<br/><script language="javascript">
var numcomments = 10;
var numchars = 60;
</script>
<script src="http://unscorpio.blogspot.com/feeds/comments/default?start-index=2&
alt=json-in-script&callback=commentDisplay"></script>
antes de /head
<script src='https://sites.google.com/site/fondosytododemas/recentcoment.js' type='text/javascript'/>
| 0 comentarios |
slide de imagenes para blogger
en añadir elemento javascript donde quieras que se muestre
<div id="myGallery">
<div class="imageElement">
<h3>Blogger</h3>
<p>Blogger Tutorial</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogger Templates</h3>
<p>Get Blogger templates !</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Software</h3>
<p>Get software for free here!</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800" class="full"/>
<img src="http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Wallpapers</h3>
<p>Nice wallpapers !</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800" class="full"/>
<img src="http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogging</h3>
<p>Learning</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogger Hack</h3>
<p>Blogger Tricks!</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="thumbnail"/>
</div>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
</div>
antes de /head
<script src='http://gujaratisite.com/blogger/indianmonsters.js' type='text/javascript'/>
<script src='http://gujaratisite.com/blogger/indianmonsters1.js' type='text/javascript'/>
antes de ]]></b:skin>
#myGallery, #myGallerySet, #flickrGallery
{width: 590px;height: 200px;z-index: 5;}
#flickrGallery
{width: 500px;height: 334px;}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{display: none;}
.jdGallery
{overflow: hidden;position: relative;}
.jdGallery img
{border: 0;margin: 0;}
.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDb0Dw7ebRQtYF7Ll79V_OQjE7z7R9hmz6osLw1zZhASroXqHeVDksxdFSVGYRILzIKYa1xZJJ8HvQzqq7Y9AVlH4iyEG5PogXwIqORf7jklu3T3TGqAOdajvxIfRw9yG1WK0Z9KgH06c/?imgmax=800');
}
.jdGallery .loadingElement
{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDb0Dw7ebRQtYF7Ll79V_OQjE7z7R9hmz6osLw1zZhASroXqHeVDksxdFSVGYRILzIKYa1xZJJ8HvQzqq7Y9AVlH4iyEG5PogXwIqORf7jklu3T3TGqAOdajvxIfRw9yG1WK0Z9KgH06c/?imgmax=800');}
.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 50px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
* html .jdGallery .slideInfoZone
{bottom: -1px;}
.jdGallery .slideInfoZone h2
{padding: 7px 10px 2px 10px;font-size: 12px;margin: 0;font-weight: bold;color: #ffffff;text-transform: uppercase;background: #111111;letter-spacing:0em;}
.jdGallery .slideInfoZone p
{font-size: 12px;margin: 2px 5px;color: #fff;padding: 0px 0px 0px 5px;font-family:arial;}
.jdGallery div.carouselContainer
{position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;}
.jdGallery a.carouselBtn
{position: absolute;bottom: 0;right: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;}
.jdGallery .carousel
{position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
.jdExtCarousel
{overflow: hidden;position: relative;}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{position: relative;}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{margin-bottom: 10px;}
.jdGallery .carousel .label, .jdExtCarousel .label
{font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{color: #b5b5b5;}
.jdGallery a
{font-size: 100%;text-decoration: none;color: inherit;}
.jdGallery a.right, .jdGallery a.left
{position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;}
* html .jdGallery a.right, * html .jdGallery a.left
{filter:alpha(opacity=50);}
.jdGallery a.right:hover, .jdGallery a.left:hover
{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.jdGallery a.left
{left: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOXxN8c1t9OuGR7AHSD2YjXMnItHxyLfMpzfgHofqdr9Lspbizw7XyZUx5M2X9uYV8ZETHgHqM-ZE6hv3q8UZilnnHXg5lZ1oVD3emq23Q21H_xrBh3y3nP5-9N7QIsYlC_c9tdRFkS2g/?imgmax=800') no-repeat center left;}
* html .jdGallery a.left { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOXxN8c1t9OuGR7AHSD2YjXMnItHxyLfMpzfgHofqdr9Lspbizw7XyZUx5M2X9uYV8ZETHgHqM-ZE6hv3q8UZilnnHXg5lZ1oVD3emq23Q21H_xrBh3y3nP5-9N7QIsYlC_c9tdRFkS2g/?imgmax=800') no-repeat center left; }
.jdGallery a.right
{right: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMfZZWpFZziZfe2jB5aSE07C6sqTLdNtTeZg7odNBlfaD_og5y4CqFHD6EBQIQadByAdpYw6teh-iGf9MhzkFXRv0BZB0ECr-50wdcHKUwEOKYEE4mrlMRgP7DquhWI4q1VDo5kXNMtk/?imgmax=800') no-repeat center right;}
* html .jdGallery a.right { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMfZZWpFZziZfe2jB5aSE07C6sqTLdNtTeZg7odNBlfaD_og5y4CqFHD6EBQIQadByAdpYw6teh-iGf9MhzkFXRv0BZB0ECr-50wdcHKUwEOKYEE4mrlMRgP7DquhWI4q1VDo5kXNMtk/?imgmax=800') no-repeat center right; }
.jdGallery a.open
{left: 0;top: 0;width: 100%;height: 100%;}
.withArrows a.open
{position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFIouxZ6EgGaBgnp4nD8puCI5BYhgZeaFQEIld7PLyLjL-TdZ_hvehxa0JIFGBRXLiO66-np1RaZWbDY2qf5pNedfWkvqS1Hp3zc0NGhIWJiBAirCaVbktOeAxcV8RkFqJFPxun4ZFTg/?imgmax=800') no-repeat center center; }
* html .withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFIouxZ6EgGaBgnp4nD8puCI5BYhgZeaFQEIld7PLyLjL-TdZ_hvehxa0JIFGBRXLiO66-np1RaZWbDY2qf5pNedfWkvqS1Hp3zc0NGhIWJiBAirCaVbktOeAxcV8RkFqJFPxun4ZFTg/?imgmax=800') no-repeat center center;filter:alpha(opacity=80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #333;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);}
.jdGallery .gallerySelector
{z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;}
.jdGallery .gallerySelector h2
{margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;}
.jdGallery .gallerySelector .gallerySelectorWrapper
{overflow: hidden;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;
color: #fff;cursor: pointer;float: left;}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{background: #333;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}
.status-msg-wrap{
display:none;
}
»» read more
<div id="myGallery">
<div class="imageElement">
<h3>Blogger</h3>
<p>Blogger Tutorial</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogger Templates</h3>
<p>Get Blogger templates !</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Software</h3>
<p>Get software for free here!</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800" class="full"/>
<img src="http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Wallpapers</h3>
<p>Nice wallpapers !</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800" class="full"/>
<img src="http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogging</h3>
<p>Learning</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogger Hack</h3>
<p>Blogger Tricks!</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="thumbnail"/>
</div>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
</div>
antes de /head
<script src='http://gujaratisite.com/blogger/indianmonsters.js' type='text/javascript'/>
<script src='http://gujaratisite.com/blogger/indianmonsters1.js' type='text/javascript'/>
antes de ]]></b:skin>
#myGallery, #myGallerySet, #flickrGallery
{width: 590px;height: 200px;z-index: 5;}
#flickrGallery
{width: 500px;height: 334px;}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{display: none;}
.jdGallery
{overflow: hidden;position: relative;}
.jdGallery img
{border: 0;margin: 0;}
.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDb0Dw7ebRQtYF7Ll79V_OQjE7z7R9hmz6osLw1zZhASroXqHeVDksxdFSVGYRILzIKYa1xZJJ8HvQzqq7Y9AVlH4iyEG5PogXwIqORf7jklu3T3TGqAOdajvxIfRw9yG1WK0Z9KgH06c/?imgmax=800');
}
.jdGallery .loadingElement
{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDb0Dw7ebRQtYF7Ll79V_OQjE7z7R9hmz6osLw1zZhASroXqHeVDksxdFSVGYRILzIKYa1xZJJ8HvQzqq7Y9AVlH4iyEG5PogXwIqORf7jklu3T3TGqAOdajvxIfRw9yG1WK0Z9KgH06c/?imgmax=800');}
.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 50px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
* html .jdGallery .slideInfoZone
{bottom: -1px;}
.jdGallery .slideInfoZone h2
{padding: 7px 10px 2px 10px;font-size: 12px;margin: 0;font-weight: bold;color: #ffffff;text-transform: uppercase;background: #111111;letter-spacing:0em;}
.jdGallery .slideInfoZone p
{font-size: 12px;margin: 2px 5px;color: #fff;padding: 0px 0px 0px 5px;font-family:arial;}
.jdGallery div.carouselContainer
{position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;}
.jdGallery a.carouselBtn
{position: absolute;bottom: 0;right: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;}
.jdGallery .carousel
{position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
.jdExtCarousel
{overflow: hidden;position: relative;}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{position: relative;}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{margin-bottom: 10px;}
.jdGallery .carousel .label, .jdExtCarousel .label
{font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{color: #b5b5b5;}
.jdGallery a
{font-size: 100%;text-decoration: none;color: inherit;}
.jdGallery a.right, .jdGallery a.left
{position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;}
* html .jdGallery a.right, * html .jdGallery a.left
{filter:alpha(opacity=50);}
.jdGallery a.right:hover, .jdGallery a.left:hover
{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.jdGallery a.left
{left: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOXxN8c1t9OuGR7AHSD2YjXMnItHxyLfMpzfgHofqdr9Lspbizw7XyZUx5M2X9uYV8ZETHgHqM-ZE6hv3q8UZilnnHXg5lZ1oVD3emq23Q21H_xrBh3y3nP5-9N7QIsYlC_c9tdRFkS2g/?imgmax=800') no-repeat center left;}
* html .jdGallery a.left { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOXxN8c1t9OuGR7AHSD2YjXMnItHxyLfMpzfgHofqdr9Lspbizw7XyZUx5M2X9uYV8ZETHgHqM-ZE6hv3q8UZilnnHXg5lZ1oVD3emq23Q21H_xrBh3y3nP5-9N7QIsYlC_c9tdRFkS2g/?imgmax=800') no-repeat center left; }
.jdGallery a.right
{right: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMfZZWpFZziZfe2jB5aSE07C6sqTLdNtTeZg7odNBlfaD_og5y4CqFHD6EBQIQadByAdpYw6teh-iGf9MhzkFXRv0BZB0ECr-50wdcHKUwEOKYEE4mrlMRgP7DquhWI4q1VDo5kXNMtk/?imgmax=800') no-repeat center right;}
* html .jdGallery a.right { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMfZZWpFZziZfe2jB5aSE07C6sqTLdNtTeZg7odNBlfaD_og5y4CqFHD6EBQIQadByAdpYw6teh-iGf9MhzkFXRv0BZB0ECr-50wdcHKUwEOKYEE4mrlMRgP7DquhWI4q1VDo5kXNMtk/?imgmax=800') no-repeat center right; }
.jdGallery a.open
{left: 0;top: 0;width: 100%;height: 100%;}
.withArrows a.open
{position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFIouxZ6EgGaBgnp4nD8puCI5BYhgZeaFQEIld7PLyLjL-TdZ_hvehxa0JIFGBRXLiO66-np1RaZWbDY2qf5pNedfWkvqS1Hp3zc0NGhIWJiBAirCaVbktOeAxcV8RkFqJFPxun4ZFTg/?imgmax=800') no-repeat center center; }
* html .withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFIouxZ6EgGaBgnp4nD8puCI5BYhgZeaFQEIld7PLyLjL-TdZ_hvehxa0JIFGBRXLiO66-np1RaZWbDY2qf5pNedfWkvqS1Hp3zc0NGhIWJiBAirCaVbktOeAxcV8RkFqJFPxun4ZFTg/?imgmax=800') no-repeat center center;filter:alpha(opacity=80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #333;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);}
.jdGallery .gallerySelector
{z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;}
.jdGallery .gallerySelector h2
{margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;}
.jdGallery .gallerySelector .gallerySelectorWrapper
{overflow: hidden;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;
color: #fff;cursor: pointer;float: left;}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{background: #333;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}
.status-msg-wrap{
display:none;
}
| 0 comentarios |
nuevas formas para read more en blogger
para el read more
expandir artilugios
forma 1............................
buscar <data:post.body/> (por lo regular es despues de <div class='post-body entry-content'>)
remplazar por
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
forma 2.................
antes de /head colocar
<script type=’text/javascript’>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src=’http://files.bloggerplugins.org/excerpt.js’ type=’text/javascript’/>
</head>
buscar <data:post.body/>
remplazar
<b:if cond=’data:blog.pageType == "item"’>
<data:post.body/>
<b:else/>
<div expr:id=’"summary" + data:post.id’>
<data:post.body/>
</div>
<script type=’text/javascript’>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style=’clear: both;’/>
<span style=’padding-top:5px;;float:right;text-align:right;’><a expr:href=’data:post.url’ rel=’bookmark’><b>Read More…</b></a></span>
</b:if>
»» read more
expandir artilugios
forma 1............................
buscar <data:post.body/> (por lo regular es despues de <div class='post-body entry-content'>)
remplazar por
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
forma 2.................
antes de /head colocar
<script type=’text/javascript’>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src=’http://files.bloggerplugins.org/excerpt.js’ type=’text/javascript’/>
</head>
buscar <data:post.body/>
remplazar
<b:if cond=’data:blog.pageType == "item"’>
<data:post.body/>
<b:else/>
<div expr:id=’"summary" + data:post.id’>
<data:post.body/>
</div>
<script type=’text/javascript’>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style=’clear: both;’/>
<span style=’padding-top:5px;;float:right;text-align:right;’><a expr:href=’data:post.url’ rel=’bookmark’><b>Read More…</b></a></span>
</b:if>
| 0 comentarios |
que te agregen al blogroll
que te agregen a su blogroll
<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input value="" name="widget.title" type="hidden" />
<textarea style="display: none;" name="widget.content">
<!-- Código del enlace -->
<a href="http://TUBLOG.blogspot.com">TU BLOG</a>
</textarea>
<input value="Agrega a NOMBRETUBLOG a tu Blogroll" name="go" type="submit">
<input type="hidden" name="infoUrl" value="http://blogandweb.com/2007/06/06/como-crear-un-widget-para-que-agreguen-un-enlace-a-tu-blog/"/>
</form>
»» read more
<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input value="" name="widget.title" type="hidden" />
<textarea style="display: none;" name="widget.content">
<!-- Código del enlace -->
<a href="http://TUBLOG.blogspot.com">TU BLOG</a>
</textarea>
<input value="Agrega a NOMBRETUBLOG a tu Blogroll" name="go" type="submit">
<input type="hidden" name="infoUrl" value="http://blogandweb.com/2007/06/06/como-crear-un-widget-para-que-agreguen-un-enlace-a-tu-blog/"/>
</form>
| 0 comentarios |
colocar la fecha en una pestañita
para colocar una pestaña la fecha
buscamos <data:post.dateHeader/> y lo rempazamos x
<div class='PostTime'>
<script type='text/javascript'>
var timestamp = "<data:post.dateHeader/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<div class='post-month'><script type='text/javascript'>document.write(date_mmm);</script></div>
<div class='post-day'><script type='text/javascript'>document.write(date_dd);</script></div>
</div>
despues buscamos ]]></b:skin> y arriba ponemos
/*------fecha d post------*/
.PostTime {
width:55px;
height:50px;
text-align:center;
position:absolute;
margin-left:-97px !important;
margin-left:-77px;
border:1px solid #830000;
background:#ac0100;
}
.post-month {
font-family:Arial;
padding-top:6px;
font-weight:bold;
font-size:15px;
color:#FFF;
}
.post-day {
font-family:Arial;
padding-top:2px;
font-weight:bold;
font-size:18px;
color:#FFF;
}
/*------fin fecha d post------*/
»» read more
buscamos <data:post.dateHeader/> y lo rempazamos x
<div class='PostTime'>
<script type='text/javascript'>
var timestamp = "<data:post.dateHeader/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<div class='post-month'><script type='text/javascript'>document.write(date_mmm);</script></div>
<div class='post-day'><script type='text/javascript'>document.write(date_dd);</script></div>
</div>
despues buscamos ]]></b:skin> y arriba ponemos
/*------fecha d post------*/
.PostTime {
width:55px;
height:50px;
text-align:center;
position:absolute;
margin-left:-97px !important;
margin-left:-77px;
border:1px solid #830000;
background:#ac0100;
}
.post-month {
font-family:Arial;
padding-top:6px;
font-weight:bold;
font-size:15px;
color:#FFF;
}
.post-day {
font-family:Arial;
padding-top:2px;
font-weight:bold;
font-size:18px;
color:#FFF;
}
/*------fin fecha d post------*/
| 0 comentarios |
formato en una entrada
para colocar codigo en una entrada busca
]]></b:skin>
antes pega
.resaltar {
border:3px groove #666699;
text-align:left;
font-family:Trebuchet;
margin:10px 20px 10px 20px;
padding:10px 20px 10px 20px;
color:#666699;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzaLLkG8jROfWdjzIH66etWZbOLPRaK6EP_AbuX_4HoNOosUiB9ufV94gaoy3iTwqRWu8ikBQWBle7hN4N2A6yLILARuZ_f4W2RUpgcIIy1eSA232KFObot8Ort2W4JSVrJq9o-v1-LU8/s400/codigo.jpg);
}
ya en la entrada coloca
<p class="resaltar">
CODIGO
</p>
en codigo coloca el codigo jejej
»» read more
]]></b:skin>
antes pega
.resaltar {
border:3px groove #666699;
text-align:left;
font-family:Trebuchet;
margin:10px 20px 10px 20px;
padding:10px 20px 10px 20px;
color:#666699;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzaLLkG8jROfWdjzIH66etWZbOLPRaK6EP_AbuX_4HoNOosUiB9ufV94gaoy3iTwqRWu8ikBQWBle7hN4N2A6yLILARuZ_f4W2RUpgcIIy1eSA232KFObot8Ort2W4JSVrJq9o-v1-LU8/s400/codigo.jpg);
}
ya en la entrada coloca
<p class="resaltar">
CODIGO
</p>
en codigo coloca el codigo jejej
| 0 comentarios |
cambiar el header por una imagen blogger
para quitar el header o cambiarlo por una imagen y poder agregar mas widyets alli
nos vamos a edicion html buscamos
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cosicas de prueba y prueba y prueba (cabecera)' type='Header'/>
</b:section>
</div>
eliminamos
maxwidgets='1' showaddelement='no'
despues en
locked='true'
lo cambiamos por
locked='false'
y listo..
»» read more
nos vamos a edicion html buscamos
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cosicas de prueba y prueba y prueba (cabecera)' type='Header'/>
</b:section>
</div>
eliminamos
maxwidgets='1' showaddelement='no'
despues en
locked='true'
lo cambiamos por
locked='false'
y listo..
| 0 comentarios |
formulario de contacto en php blogger
esto va en la entrada o donde queramos el formulario en una entrada o en agregar elemento, javascript etc..
<form action="http://unscorpio.super-red.es/js/email.php" method="post" name="myform" onsubmit="return valid(this)">
<input type="hidden" name="recipient" value="tucorreo@msn.com"><input type="hidden" name="subject" value="Contacto vía e-mail"><input type="hidden" name="redirect" value="http://unscorpio.blogspot.com">
Nombre (obligatorio):
<input type="text" size="30" name="realname">
E-mail: (obligatorio, no será mostrado)
<input type="text" size="30" name="email">
Sitio Web:
<input type="text" size="30" name="website" id="website">
Tu mensaje:
<textarea cols=40 rows=6 name="Comments" wrap="soft"></textarea>
<input type="submit" value="Enviar"> <input type="reset" value="Limpiar">
</form>
esto antes del /head
<script type='text/javascript'>
//<![CDATA[
function valid(form) {
var field = form.email;
var str = field.value;
if (window.RegExp) {
var reg1str = "(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)";
var reg2str = "^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}|[0-9]{1,3})(\]?)$";
var reg1 = new RegExp(reg1str);
var reg2 = new RegExp(reg2str);
if (!reg1.test(str) && reg2.test(str)) {
return true;
}
field.focus();
field.select();
return false;
} else {
if(str.indexOf("@") >= 0)
return true;
field.focus();
field.select();
return false;
}
}
//]]>
</script>
esto es el email.ph que hay que alojar,,,, crear un nuevo documento de texto con lo siguiente y guardarlo como
nombre: emil.php
Tipo: Todos los archivos
Codificación: UTF-8
este es el codigo
<?
$env_report = $_SERVER['REMOTE_ADDR'];
$recipient = $_POST['recipient'];
$subj = $_POST['subject'];
$redirect = $_POST['redirect'];
$realname = $_POST['realname'];
$email = $_POST['email'];
$Comments = $_POST['Comments'];
$website = $_POST['website'];
$mes = "".$Comments."nnn Sitio Web: ".$website."n E-mail: ".$email."n ";
$from = $realname."<".$email.">";
$a = mail($recipient, $subj,$mes,"From: $fromnReply-To: $emailnX-Mailer: PHP/" . phpversion());
if($a) echo "<script>alert('Tu e-mail ha sido enviado. Gracias!'); function go(){ top.location.href='$redirect'; } ; setTimeout(go(),4000);</script>";
?>
Sube el archivo a tu hosting y reemplaza el link “http://unscorpio.super-red.es/js/email.php” (que aparece en el código del formulario) por el tuyo.
»» read more
<form action="http://unscorpio.super-red.es/js/email.php" method="post" name="myform" onsubmit="return valid(this)">
<input type="hidden" name="recipient" value="tucorreo@msn.com"><input type="hidden" name="subject" value="Contacto vía e-mail"><input type="hidden" name="redirect" value="http://unscorpio.blogspot.com">
Nombre (obligatorio):
<input type="text" size="30" name="realname">
E-mail: (obligatorio, no será mostrado)
<input type="text" size="30" name="email">
Sitio Web:
<input type="text" size="30" name="website" id="website">
Tu mensaje:
<textarea cols=40 rows=6 name="Comments" wrap="soft"></textarea>
<input type="submit" value="Enviar"> <input type="reset" value="Limpiar">
</form>
esto antes del /head
<script type='text/javascript'>
//<![CDATA[
function valid(form) {
var field = form.email;
var str = field.value;
if (window.RegExp) {
var reg1str = "(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)";
var reg2str = "^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}|[0-9]{1,3})(\]?)$";
var reg1 = new RegExp(reg1str);
var reg2 = new RegExp(reg2str);
if (!reg1.test(str) && reg2.test(str)) {
return true;
}
field.focus();
field.select();
return false;
} else {
if(str.indexOf("@") >= 0)
return true;
field.focus();
field.select();
return false;
}
}
//]]>
</script>
esto es el email.ph que hay que alojar,,,, crear un nuevo documento de texto con lo siguiente y guardarlo como
nombre: emil.php
Tipo: Todos los archivos
Codificación: UTF-8
este es el codigo
<?
$env_report = $_SERVER['REMOTE_ADDR'];
$recipient = $_POST['recipient'];
$subj = $_POST['subject'];
$redirect = $_POST['redirect'];
$realname = $_POST['realname'];
$email = $_POST['email'];
$Comments = $_POST['Comments'];
$website = $_POST['website'];
$mes = "".$Comments."nnn Sitio Web: ".$website."n E-mail: ".$email."n ";
$from = $realname."<".$email.">";
$a = mail($recipient, $subj,$mes,"From: $fromnReply-To: $emailnX-Mailer: PHP/" . phpversion());
if($a) echo "<script>alert('Tu e-mail ha sido enviado. Gracias!'); function go(){ top.location.href='$redirect'; } ; setTimeout(go(),4000);</script>";
?>
Sube el archivo a tu hosting y reemplaza el link “http://unscorpio.super-red.es/js/email.php” (que aparece en el código del formulario) por el tuyo.
| 0 comentarios |
mostrar gadgets solo en las entradas
hacer que algunos gadgets estén ocultos en la portada, pero al entrar a un post éstos aparezcan.
»» read more
Haremos el mismo procedimiento, hay que entrar a la edición HTML del blog con los artilugios expandidos y localizar el gadget. Luego agregar lo que está en color rojo:
<b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Como ven, el procedimiento fue exactamente el mismo, sólo cambia la primera línea en rojo que agregamos, que es la condicional que le ordena al gadget aparecer sólo cuando se está en las páginas individuales.
De igual forma este truco se aplica para cualquier gadgtet, sólo hay que localizar la línea <b:includable id='main'> para pegar después de ella la condicional, y la línea </b:includable> que es antes de ella donde se cierra la condicional.
| 0 comentarios |
ver gadgets solo en la portada
Sólo hay que localizar el gadget con los artilugios expandidos y agregar lo que está en rojo.
Como ven, la primera parte que agregamos va justo después de
<b:includable id='main'> y la segunda parte justo antes de </b:includable>
»» read more
<b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Como ven, la primera parte que agregamos va justo después de
<b:includable id='main'> y la segunda parte justo antes de </b:includable>
jueves, 8 de octubre de 2009
| 0 comentarios |
mapa en header con link
<map name="mapa1">
<area shape="RECT" coords="29,10,115,85"
href="http://8150549071015215515-a-1802744773732722657-s-sites.googlegroups.com/site/mp3unscorpio/Reproductor004.swf" target="blank" title="MUSICA"/>
<area shape="RECT" coords="153,12,243,91" href="http://www.pro-river.blogspot.com" target="blank" title="PROGRAMAS"/>
<area shape="RECT" coords="274,11,355,88" href="http://www.movie-river.com" target="blank" title="PELICULAS"/>
<area shape="RECT" coords="396,14,657,93" href="http://www.psicofxp.com" target="blank" title="CONTACTAME"/>
<area shape="RECT" coords="733,3,892,95" href="http://www.unscorpio.blogspot.com" title="HOME"/></map>
<img usemap="#mapa1" src="http://riverauaslp.googlepages.com/head.jpg"/>
<area shape="RECT" coords="29,10,115,85"
href="http://8150549071015215515-a-1802744773732722657-s-sites.googlegroups.com/site/mp3unscorpio/Reproductor004.swf" target="blank" title="MUSICA"/>
<area shape="RECT" coords="153,12,243,91" href="http://www.pro-river.blogspot.com" target="blank" title="PROGRAMAS"/>
<area shape="RECT" coords="274,11,355,88" href="http://www.movie-river.com" target="blank" title="PELICULAS"/>
<area shape="RECT" coords="396,14,657,93" href="http://www.psicofxp.com" target="blank" title="CONTACTAME"/>
<area shape="RECT" coords="733,3,892,95" href="http://www.unscorpio.blogspot.com" title="HOME"/></map>
<img usemap="#mapa1" src="http://riverauaslp.googlepages.com/head.jpg"/>
para transformarel codigo html a texto plano nos vamos a http://nosetup.org/php_on_line/convertir_html_texto
| 0 comentarios | blogger
imagen en las sidebar
Para poner la imagen como fondo del titulo de las entradas del blog, buscamos esto en el CSS de nuestra plantilla:
.post h3 {
Justo debajo, añadimos esto:
background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;
Yo tengo border: 0px, si queremos que la imagen se vea bordeada cambiamos el cero por el número que queramos, a mayor número, borde más grueso.
He puesto height: 30px, que marca el alto de la imagen, si no ponemos nada la imagen se adaptará al alto del título que, para mi gusto queda estrecha...
Si cambiamos el 30 por un número mayor, la imagen se verá más ancha y viceversa.
Fijaros que el color que he puesto para el borde es ffffff, o lo que es lo mismo, blanco, si usamos la imagen con borde podemos cambiarle el color por el que nos guste.
Para poner una imagen en el título de la sidebar, buscamos esto en el CSS de nuestra plantilla:
.sidebar h2 {
Aquí he de aclarar que haciendo las pruebas en una de mis plantillas (Mínima), me encontré con que el .sidebar h2 { no aparecía por ningún lado, así que se me ocurrió añadirlo directamente, y funcionó. :-)
Lo añadí en la zona de /* Sidebar Content */ que es donde en la Mínima están las otras propiedades de la sidebar.
Después de .sidebar h2 }, añadimos lo mismo que para el título de las entradas, es decir, esto:
background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;
Los cambios que se pueden hacer son los mismos que en la imagen del título de las entradas.
Lo he probado en cuatro plantillas distintas y el resultado ha sido óptimo.
Si la imagen es más pequeña que el ancho de las entradas o la sidebar, esta se repetirá automáticamente hasta conseguir la medida adecuada, para evitarlo he utilizado una imagen del ancho de las entradas más o menos.
Si lo que queremos es simplemente darle un fondo de color a los títulos, haremos prácticamente lo mismo, pero el código que debemos añadir es este:
background:#0033FF;
He puesto en el ejemplo un tono de color azul, pero podemos cambiarlo por el que mejor quede con el blog.
En WebTaller podéis consultar una tabla de colores con sus respectivos códigos.
»» read more
.post h3 {
Justo debajo, añadimos esto:
background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;
Yo tengo border: 0px, si queremos que la imagen se vea bordeada cambiamos el cero por el número que queramos, a mayor número, borde más grueso.
He puesto height: 30px, que marca el alto de la imagen, si no ponemos nada la imagen se adaptará al alto del título que, para mi gusto queda estrecha...
Si cambiamos el 30 por un número mayor, la imagen se verá más ancha y viceversa.
Fijaros que el color que he puesto para el borde es ffffff, o lo que es lo mismo, blanco, si usamos la imagen con borde podemos cambiarle el color por el que nos guste.
Para poner una imagen en el título de la sidebar, buscamos esto en el CSS de nuestra plantilla:
.sidebar h2 {
Aquí he de aclarar que haciendo las pruebas en una de mis plantillas (Mínima), me encontré con que el .sidebar h2 { no aparecía por ningún lado, así que se me ocurrió añadirlo directamente, y funcionó. :-)
Lo añadí en la zona de /* Sidebar Content */ que es donde en la Mínima están las otras propiedades de la sidebar.
Después de .sidebar h2 }, añadimos lo mismo que para el título de las entradas, es decir, esto:
background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;
Los cambios que se pueden hacer son los mismos que en la imagen del título de las entradas.
Lo he probado en cuatro plantillas distintas y el resultado ha sido óptimo.
Si la imagen es más pequeña que el ancho de las entradas o la sidebar, esta se repetirá automáticamente hasta conseguir la medida adecuada, para evitarlo he utilizado una imagen del ancho de las entradas más o menos.
Si lo que queremos es simplemente darle un fondo de color a los títulos, haremos prácticamente lo mismo, pero el código que debemos añadir es este:
background:#0033FF;
He puesto en el ejemplo un tono de color azul, pero podemos cambiarlo por el que mejor quede con el blog.
En WebTaller podéis consultar una tabla de colores con sus respectivos códigos.
miércoles, 7 de octubre de 2009
| 0 comentarios |
comentarios recientes en blogger
en agregar elemento javascript
<br/><script language="javascript">
var numcomments = 10;
var numchars = 60;
</script>
<script src="http://unscorpio.blogspot.com/feeds/comments/default?start-index=2&
alt=json-in-script&callback=commentDisplay"></script>
antes de /head
<script src='https://sites.google.com/site/fondosytododemas/recentcoment.js' type='text/javascript'/>
Suscribirse a:
Entradas (Atom)