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 ...