Reino Kawaii

<style>
#tabs {
  height: 100px; /* altura geral */
  margin:0 auto;
  position:relative;
  width: 180px; /* largura geral */
}
#tabs div {
  padding: 10px;
  -moz-border-radius: 20px;
}
#tabs h3 { /* titulos */
  color: #ff78b0;
background: #fee;
box-shadow:1px 2px 3px #fcc;
  cursor: pointer;
  display: block;
  font-size: 12px;
  font-weight: normal;
  font-family: 'Verdana';
  height: 20px;
  line-height: 20px;
  margin: 0;
  padding: 5px;
  text-align: justify;
  width: 50px;
  -moz-border-radius: 20px;
}
.tabcontent {  /* conteudo */
  display: block;
  height: 180px;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 40px;
  width: 100%;
}
#tabs:hover h3, #tabs:focus h3, #tabs:active h3 {
  z-index: 0;
}
#tabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
  opacity: 0;
  z-index: 0;
}
#tab1 .tabcontent { /* Personaliza a primeira tab */
  background-color: #fff;
box-shadow: 1px 2px 3px #fee;
border: 1px dashed #fcc;
border-radius: 5px;
  z-index: 2;
}
#tab1 h3 {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 3;
}
#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
  background-color: #fee;
  color: #fa0c6b;
  z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
  opacity: 1;
  z-index: 3;
}

#tab2 .tabcontent { /* Personaliza a segunda tab */
  background-color: #fff;
box-shadow: 1px 2px 3px #fee;
border: 1px dashed #fcc;
border-radius: 5px;
  opacity: 0;
  z-index: 1;
}
#tab2 h3 {
  left: 130px;
  position: absolute;
  top: 0;
}
#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
  background-color: #fee;
  color: #fa0c6b;
  z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
  opacity: 1;
  z-index: 3;
}
</style>
<div id="tabs">
  <!-- Primeira Tab -->
  <div id="tab1" class="tabbox">
    <h3>Cute</h3>
    <div class="tabcontent">
      Conteúdo da tab 1.
    </div>
  </div>
  <!-- Segunda Tab -->
  <div id="tab2" class="tabbox">
    <h3>Kawaii</h3>
    <div class="tabcontent">
      Conteúdo da tab 2.
    </div>
  </div>
</div>

.tabviewnav {
margin:0;
padding:3px 15px; /* Se o modelo que usar não for feito pelo Designer do Blogger troque 15px  por 0 */
font-size:21px;
font-weight:italic;
font-family: 'Monotype Corsiva';
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#FFCCFF;
box-shadow: 1px 2px 3px #fee;
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#FF3399;
text-shadow: 1px 2px 3px #fff;
}
.tabviewnav li a:hover {
color:#FFCCCC;
background:#FF6699;
opacity: .3;
    filter:alpha(opacity=30);
text-decoration:none;
box-shadow: 2px 2px 2px 2px #fee;
text-shadow: 1px 2px 3px #fff;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:pink;
color:#FF3399;
}
.tabviewcont .tabviewtab {
padding:5px;
border:2px solid pink;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVW4SHQcmq1xfDHsjLtcNSnLdg9fhowyQeG527_LitYA-GcR9ddWYg2-qRwC2oNRmTMCmTPqMAGL76__hhJST2zvQoxHnJjFFktM_pJ9GmsCbYaOZnh67iMnIq1eVTymrrnAn8fFenJH9F/s1600/bg.gif) repeat;
 opacity: .5;
    filter:alpha(opacity=50);
box-shadow: 2px 2px 2px 2px #fee;
border-radius:0 0 5px 5px;
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border:2px solid pink;
margin:0 5px;
padding:2px 0 5px 0;
}

<script src='http://db.tt/sRgIZkDC' type='text/javascript'/>

<div class='tabview'>
<b:section class='tabviewtab' id='Gadget1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Gadget2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Gadget3' maxwidgets='1'/>
</div>