Un widget multitab per blogger e siti ~ Template x blogger

Oggi ti propongo un' altra Multitab molto carina e facilissima da installare sia in un blog che in qualsiasi sito web.
Il risultato, salvo modifiche ai fogli di stile, sarà simile a questo:

Come installarla:

1- Vai su Layout --> Modifica HTML e espandi i modelli widget (fai come al solito un backup)

2- Incolla il codice qui sotto appena prima del tag </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://pwam.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js'></script>

<style type="text/css">
.widgets545 {
  width:295px;
  overflow:hidden;
  margin-top:5px;
  margin-bottom:5px;
  padding:0px 0px 0px 0px;
  background:#e8dbcc;

}

.widgets545 a {
  color: #222;
  text-decoration: none;
  }

.widgets545 a:hover {
  color: #009;
  text-decoration: underline;
  }

ul.tabnav{

  padding:0px 0px 0px 0px;
  height:26px;
  margin:0px 0px;
  background:#FFFFFF;

}


.tabnav li {
  display: inline;
  list-style: none;
  float:left;
  text-align:center;
  margin-right:8px;

  }


.tabnav li a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: normal;
  padding: 5px 8px 6px 8px;
  width:70px;
  font-weight:normal;
  font: 12px tahoma, helvetica,arial,sans-serif;
  color: #E8DBCC;
  text-decoration: none;
  display:block;
  background:#5F381D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMlE-vVY15yUOhAUjjYYfU_8VhdTtDFdipkjoFgzSDDCzo8O1qxZjzw9vWJLT1QmCorc8jMBuqIrcfrzuMvUugb0NSGzS0RYj-xkO25MPFGhkQvgPxpiQOVdsqdpLzZUWVRDzMa98rkOae/) repeat-x;
  border-top:1px solid #7F1E00;
  border-left:1px solid #7F1E00;
  border-right:1px solid #7F1E00;
  }

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
  text-decoration:none;
  background: #E8DBCC;
  color: #AE8269;
  border-top:1px solid #DFD2C3;
  border-left:1px solid #DFD2C3;
  border-right:1px solid #DFD2C3;
  }


.tabdiv {

  padding: 5px 5px 5px 5px;
  font-family:Tahoma,Century gothic, Arial, sans-serif;
  border-bottom:1px solid #DFD2C3;
  border-left:1px solid #DFD2C3;
  border-right:1px solid #DFD2C3;
  }
.tabdiv a:link,.tabdiv  a:visited {

          color:#333;

  }
.tabdiv a:hover{

  color: #2676A1;
  }
.tabdiv ul{

  list-style-type:none;
  margin:0px 0px;
  padding:0px 0px;

          }

.tabdiv ul li{

  height:100%;
  line-height:28px;
  padding: 0px 0px 0px 0px;
  color:#333;

}

.tabdiv li a:link,.tabdiv li a:visited{
  background:#f9f5f1;
  display:block;
  margin-left:5px;
  overflow:hidden;
  line-height:24px;
  padding:2px 5px ;
  margin:2px 0px;
  color:#6F6B53;
  font-size:13px;
}

.tabdiv li a:hover {
  background:#fff;
  color: #3F200C;
  text-decoration:none;
          }
.ui-tabs-hide {
  display: none;
          }
</style>

3- Salva

4- Vai su layout --> Elementi pagina e aggiungi un gadget tipo html / java

5- Incolla questo codice:

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(document).ready(function() {
$jx('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});
</script>
<div id="tabzine" class="widgets545">
<ul class="tabnav">
<li><a href="#tab11"> Recent </a></li>
<li><a href="#tab22"> Popular </a></li>
<li><a href=" #tab33"> Comments  </a></li>
</ul>

<div id="tab11" class="tabdiv">

Tab 1 Content

</div>


<div id="tab22" class="tabdiv">

Tab 2 Content

</div>


<div id="tab33" class="tabdiv">

Tab 3 Content

</div>

</div>