Cara Membuat Vertical Tab Menu Bergerak Pada Blog

 Hi kali ini gue mau bagikan sedikit cara menambahkan vertical tab menu versi gue. kalian bisa liat contohnya di bagian sidebar gue di bagian My Profile. So check this out

1. Login ke blogger dengan ID anda.

2. Kemudian Layout - Add Gadget - HTML/JavaScript

3. Pastekan Kode dibawah ini 

 <center>&nbsp&nbsp&nbsp&nbsp<img src="http://lh5.googleusercontent.com/-icFvgYxa_WY/AAAAAAAAAAI/AAAAAAAAAbE/f0DYLJsSOMA/s512-c/photo.jpg" width=180;/>
<style type="text/css">

.AccordionContainer
{
border: none;
margin-left:10px;
}

.AccordionTitle
{
  position:relative;
  width:200px;
  height:5px;
  overflow:hidden;
  cursor:pointer;
  font-family:Arial;
  font-size:7pt;
  color: white;
  font-weight:bold;
  vertical-align:middle;
  text-align:center;
  background-repeat:repeat-x;
   padding-bottom: 2px;
  display:table-cell; display: block;

background: -moz-linear-gradient(center top, #ffffff 0%,#FF77FF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f ));
  -moz-user-select:none;
padding: 10px;
}

.AccordionContent
{
  position:relative;
  width:200px;
  height:0px;
  overflow:auto;
  display:none;
border: solid 1px #FF77FF;
border-color:rgb(225, 225, 225);
background-color:#FCFCFC;
padding:10px;

}

a:link {text-decoration:none;}
a:link {color:#000000;}
a:visited {text-decoration:none;}
a:hover {color:#2E9AFE;}
a:active {text-decoration:underline;}
</style>


<script type="text/javascript">
var ContentHeight = "60";
var TimeToSlide = 400.0;
var openAccordion = '';
function runAccordion(index)
{var nID = "Accordion" + index + "Content"; if(openAccordion == nID) nID = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"+ openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
</script>
<script type="text/javascript">
function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = ContentHeight + 'px';
if(closing != null)
{
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);
if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
if(closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33);
}
</script>

<div id="AccordionContainer" class="AccordionContainer">

<div onclick="runAccordion(1);">
 <div class="AccordionTitle" onselectstart="return false;">
ABOUT ME
</div>
</div>
<div id="Accordion1Content" class="AccordionContent"> <center>
ISI BERUPA TULISAN / BISA BERUPA LINK</center>

</div>

<div onclick="runAccordion(2);">
 <div class="AccordionTitle" onselectstart="return false;">
COLLAGE
</div>
</div>
<div id="Accordion2Content" class="AccordionContent"><center>
ISI BERUPA TULISAN / BISA BERUPA LINK</center>
</div>

<div onclick="runAccordion(3);">
 <div class="AccordionTitle" onselectstart="return false;">
STATUS
</div>
</div>
<div id="Accordion3Content" class="AccordionContent"><center>
ISI BERUPA TULISAN / BISA BERUPA LINK </center>
</div>
</div>

untuk lebih gampang mengeditnya kalian bisa copy paste kode tersebut disini http://htmledit.squarefree.com/

Note : Warna Biru merupakan warna tab
           Warna Merah merupakan Link  foto sesuai dengan keinginan kalian
           Jika anda ingin menambahkan lebih dari 3 tab. maka  angka yang berwarna Pink diganti menjadi 4 
           dan seterusnya contoh kode nya seperti dibawah ini

<div onclick="runAccordion(4);">
 <div class="AccordionTitle" onselectstart="return false;">
JUDUL TAB
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
ISI BERUPA TULISAN / BISA BERUPA LINK
&</div>

4. Kemudian Save. Selamat Mencoba yah :)