IMGBOX

slide-M

 Вставляем в шаблон:

<style type='text/css'>
    
    body {
        position: absolute;
        margin: 0px;
        padding: 0px;
        background: #eee;
        width: 100%;
        height: 100%;
    }
    #border {
        position:absolute;
        width:800px;
        height:600px;
        margin-left:-220px;
        margin-top:-170px;
        left:50%;
        top:50%;
        background:#fff;
        border:#aaa solid 0px;
    }
    #caption {
        position:absolute;
        width:800px;
        height:600px;
        left:50%;
        top:50%;
        margin-left:-220px;
        margin-top:175px;
    }
    #screen {
        position:absolute;
        width:800px;
        height:600px;
        margin-left:-400px;
        margin-top:-350px;
        left:50%;
        top:50%;
        background:#fff;
    }
    #screen span {
        position:absolute;
        overflow:hidden;
        border:#aaa solid 1px;
        background:#fff;
    }
    #screen img{
        position:absolute;
        left:-32px;
        top:-32px;
        cursor: pointer;
        filter: alpha(opacity=100);
    }
    #caption {
        color: #666;
        font-family: georgia, &#39;times new roman&#39;, times, veronica, serif;
        font-size: 1em;
        text-align: center;
    }
    #caption b {
        font-size: 2em;
    }

</style>
    
    <style type='text/css'>
    
    
</style>
   
<script src='https://foglia2008.narod.ru/galDIAP/slide-M.js' type='text/javascript'/>

В поле сообщения:

<div id="border"></div>
	<div id="screen">
	<span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im6.jpg" alt=""></span>
	<span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="slide-M_files/im2.jpg" alt=""></span>
	<span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im3.jpg" alt=""></span>
	<span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im4.jpg" alt=""></span>
	<span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im5.jpg" alt=""></span>
	<span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im1.jpg" alt=""></span>
	<span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im7.jpg" alt=""></span>
	<span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im18.jpg" alt=""></span>
	<span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im8.jpg" alt=""></span>
	<span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im10.jpg" alt=""></span>
	<span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im12.jpg" alt=""></span>
	<span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im17.jpg" alt=""></span>
	<span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im14.jpg" alt=""></span>
	<span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im15.jpg" alt=""></span>
	<span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im16.jpg" alt=""></span>
	<span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_files/im9.jpg" alt=""></span>
	</div>
	<div id="caption">- click - </div>
	<script type="text/javascript">
	// starter
	siM.init();
	</script>

slide-M

- click -

Sidebar explicada

Чтобы сделать выезжающую панель Sidebar вставляем перед </head> следующий код:

<style type='text/css'>
  .elementoVisible {display:block;}
  .elementoOculto {display:none;}
  .linkContraido {
    ... propiedades de estilo para fuentes o imágenes ...
  }
  .linkExpandido {
    ... propiedades de estilo para fuentes o imágenes ...
  }
</style>

<script type='text/JavaScript'>
  function desplegarContraer(cual,desde) {
    var elElemento=document.getElementById(cual);
    if(elElemento.className == &#39;elementoVisible&#39;) {
      elElemento.className = &#39;elementoOculto&#39;;
      desde.className = &#39;linkContraido&#39;;
    } else {
      elElemento.className = &#39;elementoVisible&#39;;
      desde.className = &#39;linkExpandido&#39;;
    }
  }</script>

Содержание гаджета заключаем в следующие теги: 

<div class="linkContraido" onclick="desplegarContraer

('contenedorExterno',this);">НАЗВАНИЕ ГАДЖЕТА</div>
<div id="contenedorExterno" class="elementoOculto">
  <div>.... содержимое гаджета ...</div>
</div>

 http://vagabundia.blogspot.com/2008/01/sidebar-explicada.html 

 Border Radius herramienta online

Original Hover Effects

Hover Style #5

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

Read More

Hover Style #5

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

Read More

<link href='https://foglia2008.narod.ru/OriginalHover/style_common.css' rel='stylesheet' type='text/css'/>
        <link href='https://foglia2008.narod.ru/OriginalHover/style5.css' rel='stylesheet' type='text/css'/>

Note CSS File

/*
Description: WP-Note CSS File
Author: Luke
Author URI: http://luke.appspot.com
Date:2009-01-02
Modified Date:2009-12-29
*/

.note
{
text-align: center;
padding:0px 0px 10px 0px;
}


.noteclassic a, .noteimportant a, .notewarning a, .notetip a, .notehelp a {
color:#ED1B23;
font-weight:bold;
}

.noteclassic, .noteimportant, .notewarning, .notetip,.notehelp {
width: 80%;
margin-top:20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
padding: 15px 20px 15px 80px;
/*margin: 0px 0px 0px 0px;*/
-webkit-box-shadow: 2px 2px 3px #999;
-moz-box-shadow: 2px 2px 3px #999;
/*IE min-height hack*/
min-height:40px;
height:auto !important;
height:40px;
overflow:visible;

position:relative;
bottom:6px;
right: 6px;
border: 1px solid #999999;
/*Set the position of the background image*/
background-position: 20px 50%;
background-repeat: no-repeat;
text-align: justify;
}
.noteclassic, .noteimportant, .notewarning, .notetip,.notehelp{
/* IE5 hack */
/* \margin: 10px 0px -3px 0px; */
margin:10px;
/* ma\rgin: 0px 0px 0px 0px; */
}

.noteclassic {
background-color: #F5F2E2;
background-image: url(images/note.png);
}

.noteimportant {
background-color: #FFC;
background-image: url(images/important.png);
}

.notewarning {
background-color: #FDD;
background-image: url(images/warning.png);
}

.notetip {
background-color: #E4F6F8;
background-image: url(images/tip.png);
}

.notehelp {
background-color: #ddcac3;
background-image: url(http://www.proofsite.com.ua/wp-content/plugins/wp-note/images/note.png);
}

Otro Slider de jQuery

• 

  Sit amet felis. Mauris semper, velit semper laoreet dictum

  Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, ...

• 

  Category name clash

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. ...

• 

  Test with enclosures

  Here's an mp3 file that was uploaded as an attachment: Juan Manuel Fangio by Yue And here's a link to an external mp3 file: Acclimate by General Fuzz Both are CC licensed. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, ...

• 

  Block quotes

  Some block quote tests: Here's a one line quote. This part isn't quoted. Here's a much longer quote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem, varius aliquet, ...

• 

  Contributor post, approved

  I'm just a lowly contributor. My posts must be approved by the editor.Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at ...

Постраничная навигация для Blogger.

 Добавляем стили CSS постраничной навигации.

Не устанавливая флажка "Расширить шаблоны виджета" и используя для поиска сочетание клавиш Ctrl+F, определяем стили CSS, а именно, перед

]]></b:skin>

добавляем код:

.showpageNum {
  padding: 0px 5px;
  margin: 0px 2px;
  text-decoration: none;
  border: 1px solid #bba166;
  background-image: -moz-linear-gradient(#f4e9ce, #ddcca3);
  background-image: -o-linear-gradient(#f4e9ce, #ddcca3);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#f4e9ce), to(#ddcca3));
  filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#f4e9ce,endColorStr=#ddcca3); 
}

.showpageNum:hover {
  border: 1px solid #888;
  background: #f6edd9;
}

.showpagePoint {
  color: #fff;
  text-shadow: 0 1px 2px #333;
  padding: 0px 5px;
  margin: 0px 2px;
  border: 1px solid #999;
  background: #666;
}

.showpageOf {
  margin-right: 8px;
  text-shadow: 1px 1px 1px #fff;
}

Introducción a las transiciones con CSS

http://vagabundia.blogspot.com/2011/03/introduccion-las-transiciones-con-css.html

http://vagabundia.blogspot.com/2011/09/transiciones-sin-usar-hover.html 

Calligraffitti

<script type='text/javascript'>
if (navigator.userAgent.indexOf(&#39;MSIE 6&#39;) == -1) {
  WebFontConfig = {
    google: { families: [ &#39;Schoolbell&#39;, &#39;Calligraffitti&#39;, &#39;Crafty Girls&#39;, &#39;Tinos&#39; ],
    api: &#39;http://themes.googleusercontent.com/fonts/css?kit=vLVN2Y-z65rVu1R7lWdvyCrb7I3UYrecrCdA0oYN0X3nph1QT8DUKDE5ebV2Z-uf2CPhvNn0Mn77hcxNevxC1Q&#39;
    },
    loading: function() {
      if (window.jstiming) window.jstiming.load.tick(&#39;webfontLoading&#39;);
    },
    active: function() {
      if (window.jstiming) window.jstiming.load.tick(&#39;webfontActive&#39;);
    }
  };
  (function() {
    var wf = document.createElement(&#39;script&#39;);
    wf.src = &#39;//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&#39;;
    wf.type = &#39;text/javascript&#39;;
    wf.async = &#39;true&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0];
    s.parentNode.insertBefore(wf, s);
  })();
} else {
  document.documentElement.className = &#39;wf-inactive&#39;;
}
</script>
<style type='text/css'>
.wf-inactive .header h1, .wf-schoolbell-n4-loading .header h1, .wf-schoolbell-n4-inactive .header h1 {
  font-family: serif;
}
.wf-inactive .tabs-inner .widget li a, .wf-tinos-n4-loading .tabs-inner .widget li a, .wf-tinos-n4-inactive .tabs-inner .widget li a {
  font-family: serif;
}
.wf-inactive h3.post-title, .wf-calligraffitti-n4-loading h3.post-title, .wf-calligraffitti-n4-inactive h3.post-title, .wf-inactive .comments h4, .wf-calligraffitti-n4-loading .comments h4, .wf-calligraffitti-n4-inactive .comments h4 {
  font-family: serif;
}
.wf-inactive h2, .wf-craftygirls-n4-loading h2, .wf-craftygirls-n4-inactive h2 {
  font-family: serif;
}
</style>

Simple menú desplegable con CSS

►Este es un ejemplo sencillo para crear un menú desplegable que puede incluir submenús, que usa las posibilidades que nos brindan las nuevas propiedades del CSS3.

• inicio
• un item
• un submenú
  • submenú 1
  • submenú 2
  • submenú 3
• otro item
• otro

Como casi cualquier otro, el HTML se arma en una lista, utilizando etiquetas UL y LI que, se anidan si es que queremos crear un submenú. Esta sería una lista standard:

CSS3 Menu Navigation Effect

• MENU

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

http://www.alessioatzeni.com/blog/css3-menu-navigation-effect/

http://www.alessioatzeni.com/blog/page/4/

изменить внешний вид ссылки при наведении указателя мыши на них

•   Naturfotografen
•   Fotocommunity
•   1x.com
•   Macroforum
•   Deviantart 
•   Photodom 
•   Juza Forum 
•   photo.net 
•   National Geographic 
•   Ronnie Gaubert 
•   yesway.ru 

1. enlace que cambia a multicolor.

Фото галерея

Код фото галереи:

<style>
#gallery {width: 650px;height: 680px;margin: 20px auto;position: relative;} #gallery div {cursor:pointer;-webkit-box-shadow: 3px 3px 50px #555;-moz-box-shadow: 3px 3px 50px #555;box-shadow: 3px 3px 50px #555;-webkit-transition: all 1500ms linear;background-color: #444;opacity:0.9;overflow:hidden;position:absolute;} #gallery div#img1:hover, #gallery div#img2:hover, #gallery div#img3:hover, #gallery div#img4:hover, #gallery div#img5:hover, #gallery div#img6:hover {z-index: 999;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);opacity: 1;} #gallery span {background-color: #222;bottom:5px;color:#AABBCC;font-size:15px;font-weight:bold;padding:2px 10px;position:absolute;right:0;text-align:right;width:40%;} #gallery #img1 {-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);top: 30px;left: 50px;z-index:1;} #gallery #img2 {-webkit-transform: rotate(25deg);-moz-transform: rotate(25deg);top: 300px;left:250px;z-index:7;} #gallery #img3 {-webkit-transform: rotate(-5deg);-moz-transform: rotate(-15deg);top: 70px;left:250px;z-index:3;} #gallery #img4 {-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);top: 380px;left: 50px;z-index:4;} #gallery #img5 {-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);top: 200px;left: 200px;z-index:5;} #gallery #img6 {-webkit-transform: rotate(-50deg);-moz-transform: rotate(-50deg);top: 320px;left: 170px;z-index:11;}
</style>
<div id="gallery">
<div id="img1">
<img height="265" src="https://img0.liveinternet.ru/images/attach/d/0/137/105/137105068_4039910_IMG_3153.JPG" title="Лес" width="400" /></div>
<div id="img2">
<img height="244" src="https://img1.liveinternet.ru/images/attach/d/0/137/105/137105045_4039910__DSC4111_900.jpg" title="Туман" width="400" /></div>
<div id="img3">
<img height="266" src="https://img0.liveinternet.ru/images/attach/d/0/137/105/137105046_4039910__DSC4039_900.jpg" title="Озеро" width="400" /></div>
<div id="img4">
<img height="266" src="https://img1.liveinternet.ru/images/attach/d/0/137/105/137105047_4039910__DSC3951_900.jpg" title="Монастырь" width="400" /></div>
<div id="img5">
<img src="https://img1.liveinternet.ru/images/attach/d/0/137/84/137084249_4039910__DSC3970_900.jpg" /></div>
<div id="img6">
<img src="https://img1.liveinternet.ru/images/attach/d/0/137/85/137085707_4039910__DSC3951_900.jpg" /></div>
</div>



<div style="clear: both;">
</div>

galeria

• 
• 
• 
• 
• 
• 

Fold Out Popup

More dogs!






Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,


link example

Title
Pellentesque habitant morbi tristique senectus et netus



feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.




http://css-tricks.com/examples/FoldOutPopup/

Galería con efectos sólo con CSS

• 
• 
• 
• 

....... cualquier contenido ....... 

 

http://vagabundia.blogspot.com/2011/08/galeria-con-efectos-solo-con-css.html 

• 
• 
• 
•