Buzzdungeon
  mi template
 
Mi template
Nombre:
Mi template
Autor:
Buzzdungeon

Tags:buzzdungeonjavascriptjquerygris

Extra Contenido de tu <head>:

<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css"> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#comentarios:lt(1)").load('/comentarios.htm table[align="center"] td br+a'); 
   $("#sidebarmenu h3:first").addClass("active"); 
   $("#sidebarmenu div:not(:first)").hide(); 
   $("#sidebarmenu h3").click(function(){ 
   $(this).next("div").slideToggle("slow") 
   .siblings("div:visible").slideUp("slow"); 
   $(this).toggleClass("active"); 
   $(this).siblings("h3").removeClass("active"); 
   }); 
 
   $(".box span").click(function(){ 
      $(this).parent().fadeOut("slow"); 
   }); 
    
   if($(window).height() > $("#contenedor").height()){ 
      $("html,body").css({ 
         'background-attachment':'fixed' 
      }); 
   } 
 
   var left = (($(window).width()-(728))/2); 
   $('table[height="102"]').css('left',left); 
 
   $(".img-grid li a").mouseenter(function(){ 
      $(this).children("span").fadeIn("medium"); 
   }).mouseleave(function(){ 
      $(this).children("span").fadeOut("slow"); 
   }); 
 
   var offset   = $("#sidebar").offset(), topPadding = 15; 
   $(window).scroll(function(){ 
      if($(window).scrollTop() > offset.top){ 
         $("#sidebar").stop().animate({ 
            marginTop: $(window).scrollTop() - offset.top + topPadding 
         },'slow'); 
      }else{ 
         $("#sidebar").stop().animate({ 
            marginTop: 0 
         },'slow'); 
   } 
   }); 
}); 
var actual = window.location; 
function popUp(variable){ 
   window.open(variable,'Compartir','toolbar=0,resizable=1,scrollbars=0,status=0,width=650,height=300'); 
} 
</script> 

Texto sobre el diseño:

<div id="topbar"> 
</div> 
<div id="menu" class="shadow"> 
   <div class="container"> 
      <ul> 
         <li><a href="/inicio.htm">Inicio</a></li> 
         <li><a href="#">Link</a></li> 
         <li><a href="#">Link</a></li> 
         <form method="get" action="search.htm"> 
            <input type="text" name="q" placeholder="Buscar"> 
            <input type="submit" value="Ir"> 
         </form> 
      </ul> 
 
   </div> 
</div> 
 
<div class="clear"></div> 
 
<div id="contenedor" class="container shadow"> 
   <div id="contenido"> 
      <div id="pagetitle">Tu web - mi template 
         <span class="social"> 
            <img src="https://img.webme.com/pic/b/buzzdungeon/facebook.png" alt="Compartir en Facebook" onclick="popUp('http://www.facebook.com/sharer.php?u='+actual+'&t=mi template')"> 
            <img src="https://img.webme.com/pic/b/buzzdungeon/twitter.png" alt="Compartir en Twitter" onclick="popUp('http://twitter.com/home?status=mi template - '+actual)"> 
            <img src="https://img.webme.com/pic/b/buzzdungeon/plus.png" alt="Compartir en G+" onclick="popUp('https://m.google.com/app/plus/x/?v=compose&content=mi template - '+actual)"> 
            <img src="https://img.webme.com/pic/b/buzzdungeon/email.png" alt="Enviar por email" onclick="popUp('http://www.algoutil.es/email/?url='+actual+'&title=mi template')"> 
         </span> 
      </div>

Texto por debajo de la página:

</div> 
   <div id="sidebar"> 
      <div id="sidebarmenu"> 
         <h3>TU WEB<span></span></h3> 
         <div style="padding:5px 0px!important;"> 
            <ul id="menuprincipal"> 
               <li><a href="/inicio.htm">Inicio</a></li> 
               <li><a href="#">Link</a></li> 
               <li><a href="#">Link</a></li> 
               <li><a href="#">link</a></li> 
            </ul> 
         </div> 
         <h3>Contacto rapido<span></span></h3> 
         <div> 
            Contenido aca  
         </div> 
         <h3>Titulo<span></span></h3> 
         <div> el contenido del segundo elemento </div> 
      </div> 
      <h3> Últimos comentarios!</h3> 
      <p id="comentarios"></p> 
   </div> 
</div> 
 
<div class="clear"></div> 
 
<p id="footer"><a href="http://buzzdungeon.es.tl">Creado por juan_fer (buzzdungeon)</a> | <a href="http://leaverou.github.com/prefixfree">Css3 compatible</a> | <a href="http://meyerweb.com/eric/tools/css/reset/">Reset css</a></p>

CSS-Code sin Style Tags:

body,html{ 
   background:linear-gradient(rgba(0,0,0,0) 15%,rgba(0,0,0,0.15) 100%), url(https://img.webme.com/pic/b/buzzdungeon/fondo.png) repeat; 
   font-family: Arial, Helvetica, sans-serif; 
   font-size:15px; 
} 
p{ 
   padding:10px 5px; 
} 
input, textarea{ 
   background:#f9f9f9; 
   border:1px solid #bbb; 
   box-shadow:inset 0 1px 2px #ddd,0 1px 1px rgba(0,0,0,0.1); 
   margin:2px 0; 
   color:#666; 
   padding:3px; 
   outline:none; 
} 
input:focus, textarea:focus{ 
   box-shadow:inset 0 1px 2px #ddd; 
} 
input[type="submit"],input[type="button"],button{ 
   background: #999; 
   box-shadow:0 1px 1px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.4); 
   color:#ddd; 
   font-weight:bold; 
} 
input[type="submit"]:active,input[type="button"]:active,button:active{ 
   box-shadow:inset 0 1px 1px rgba(0,0,0,0.1); 
} 
table[height="102"]{ 
   position: absolute; 
   top:5px; 
} 
#topbar{ 
   background:linear-gradient(rgba(0,0,0,0.4) 10%,rgba(0,0,0,0.7) 100%), url(https://img.webme.com/pic/b/buzzdungeon/fondo.png) repeat; 
   height:100px; 
   width:100%; 
} 
#menu{ 
   background:lightgray; 
   box-shadow:inset 0 1px 3px white, 0px 2px 5px #999, inset 0 -1px 8px rgba(0,0,0,0.2); 
   height:30px; 
   position: relative; 
   z-index:30; 
} 
#menu form{ 
   float:right; 
} 
#menu ul{ 
   height:30px; 
} 
#menu ul li{ 
   float: left; 
   padding:6px 10px; 
} 
#menu ul li a{ 
   color:#555; 
   font-weight:bold; 
   text-decoration:none; 
   text-shadow:0 1px 0 rgba(255,255,255,0.8); 
} 
#menu ul li a:hover{ 
   color:#222; 
   text-shadow:0 1px 0 #eee; 
} 
#contenedor{ 
   background:linear-gradient(left, rgba(237, 237, 237, 1) 0%,rgba(246, 246, 246, 1) 50%,rgba(237, 237, 237, 1) 100%); 
   border-radius:5px; 
   min-height:200px; 
   overflow: hidden; 
} 
#comentarios a{ 
   color:#666; 
   display:block; 
   padding:2px 0; 
   text-decoration:none; 
} 
#contenido{ 
   border-radius:5px 0 0 0; 
   float: left; 
   width:750px; 
} 
#pagetitle{ 
   background:#ddd; 
   border-bottom:1px solid rgba(0,0,0,0.1); 
   border-left:1px solid rgba(255,255,255,0.5); 
   border-radius:5px 0 0 0; 
   border-top:1px solid rgba(255,255,255,0.5); 
   font-weight:bold; 
   font-size:1.2em; 
   padding:7px; 
   text-shadow:1px 1px 0 rgba(255,255,255,0.7); 
} 
#sidebar{ 
   background:#ddd; 
   border-bottom:1px solid rgba(0,0,0,0.1); 
   border-left:1px solid rgba(255,255,255,0.5); 
   border-radius:0 0 0 5px; 
   border-top:1px solid rgba(255,255,255,0.6); 
   box-shadow:0 0 6px rgba(0,0,0,0.5); 
   float: left; 
   margin-bottom:15px; 
   padding:4px; 
   width:201px; 
} 
#footer{ 
   text-align:center; 
} 
#footer a{ 
   color:#333; 
   text-decoration:none; 
   text-shadow:0 1px 0 rgba(255,255,255,0.7); 
} 
#footer a:hover{ 
   color:#000; 
} 
 
/*INICIO ACORDEON*/ 
#sidebarmenu{ 
   float: right; 
   width:200px; 
} 
#sidebarmenu input{ 
   width:100%; 
} 
#sidebarmenu textarea{ 
   height:80px; 
   width:100%; 
} 
#sidebarmenu h3, #sidebar h3{ 
   background: #BBB; 
   border-radius: 3px; 
   box-shadow:inset 0 -1px 5px rgba(0,0,0,0.2); 
   color: #555; 
   cursor: pointer; 
   font-size: 17px; 
   font-weight: normal; 
   height: 1.7em; 
   line-height: 1.7em; 
   margin: 0 0 2px; 
   padding: 0 15px; 
   position: relative; 
} 
#sidebar > h3{ 
   clear: both; 
   cursor: auto; 
} 
#sidebarmenu h3:hover { 
   background: #b1b1b1; 
   box-shadow: 0 -1px 5px rgba(0,0,0,0.2) inset; 
   color: #333; 
} 
#sidebarmenu h3 span { 
   background: url(https://img.webme.com/pic/b/buzzdungeon/up.png) no-repeat; 
   display: block; 
   height: 16px; 
   position: absolute; 
   right: 15px; 
   top: 7px; 
   width: 16px; 
} 
#sidebarmenu h3.active span { 
   background: url(https://img.webme.com/pic/b/buzzdungeon/down.png) no-repeat; 
} 
#sidebarmenu div { 
   color: #AAA; 
   font-family: Georgia; 
   font-size: 13px; 
   line-height: 1.5; 
   padding: 10px; 
} 
#sidebarmenu ul li a{ 
   color:#666; 
} 
  /*FIN ACORDEON*/ 
#menuprincipal li{ 
   background:#e9e9e9; 
   border:1px solid #bbb; 
   font-weight:bold; 
   margin:2px 0px; 
   text-align:center; 
   padding:2px 0px; 
} 
#menuprincipal li:hover{ 
   background:#eee; 
} 
#menuprincipal li a{ 
   display: block; 
   text-decoration:none; 
   text-shadow:0 1px 0 white; 
} 
#menuprincipal li a:hover{ 
   color:#444; 
} 
#container{ 
   padding:3px 8px; 
   color:#222; 
   text-shadow:0 1px 0 white; 
} 
.box{ 
   color:rgba(0,0,0,0.8); 
   margin:3px auto; 
   text-shadow:0 1px 0 rgba(255,255,255,0.5); 
   width:730px; 
} 
.box p{ 
   padding:10px 10px; 
} 
.box span{ 
   color:rgba(0,0,0,0.6); 
   cursor: pointer; 
   float:right; 
   padding:2px; 
} 
.box.rojo{ 
   background:#FFCFCF; 
   border:1px solid #FF7A7A; 
} 
.box.azul{ 
   background:lightblue; 
   border:1px solid #3689FF; 
} 
.box.verde{ 
   background:lightgreen; 
   border:1px solid green; 
} 
.box.gris{ 
   background:#dfdfdf; 
   border:1px solid #999; 
} 
.center{ 
   text-align:center; 
} 
.clear{ 
   clear:both; 
   margin:20px; 
} 
.container{ 
   margin: 0 auto; 
   width:960px; 
} 
.img-grid{ 
   margin:5px auto; 
   overflow: hidden; 
   width:715px; 
} 
.img-grid li{ 
   float: left; 
   padding:3px; 
} 
.img-grid li a{ 
   color:rgba(0,0,0,0.7); 
   font-weight:bold; 
   text-decoration:none; 
   text-shadow:0 1px 0 rgba(255,255,255,0.5); 
} 
.img-grid li span{ 
   background:rgba(0,0,0,0.3); 
   display: none; 
   margin:130px 0 0 6px; 
   padding:5px 3px; 
   position: absolute; 
   width:154px; 
} 
.img-grid li img{ 
   background:white; 
   border:1px solid #dedede; 
   border-radius:5px; 
   box-shadow:0 1px 1px rgba(0,0,0,0.1); 
   height:150px!important; 
   padding:5px; 
   width:160px!important; 
} 
.img-grid li:hover img{ 
   background:#efefef; 
   border:1px solid #ddd;    
   box-shadow:none; 
} 
.shadow{ 
   box-shadow:0px 2px 5px #999; 
} 
.social{ 
   float: right; 
   margin-top:-3px; 
} 
.social img{ 
   cursor: pointer; 
   height:24px; 
   width:24px; 
} 
.fixed{ 
   position: fixed; 
   top:10px; 
} 
table[width="100%"][align="center"] table[width="100%"]{ 
   border:1px dashed #ccc; 
   background: #eee !important; 
   margin:10px 0 !important; 
} 
form[method="post"]{ 
   border:1px dashed #ccc; 
   background: #eee !important; 
   margin:10px 0 !important; 
   padding:0 0 8px 0; 
} 
table hr{ 
   margin:0 !important; 
   display:none; 
} 
#pre_header {display: none;} 
#post_header {display: none;} 
#header_container {display: none;} 
lli.nav_element{display: none;} 
li.nav_element a{display: none;} 
h1#title{display: none;} 
h2#title span {display: none;} 
#title {display: none;} 
#nav_container {display:none;} 
#container + p{display:none;}
 
 
Hoy hubo 6 visitantes (22 clics a subpáginas)
 
 
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis