Sidebar Widget style rainbow

Tutorial ini memang agak sedikit ribet. Tapi sebenarnya widgetnya simple banget. yaa.. paling tidak bisa menghemat ruangan di sidebar blog. Jadi, sorry jika penjelasan saya juga kurang bisa dipahami.*kakubahasa.
Example :




1 2 3 4

CODE WIDGET 1

CODE WIDGET 2

CODE WIDGET 3

CODE WIDGET 4

Steps :

• Copy code di bawah ini

.siden{text-align:center; display:inline-block; width: 12px; background:#FFEFD0; font:12px georgia; padding:5px;color:transparent;border-radius:50%;}
.siden:hover{ background: url(http://i.imgur.com/Q7YUPcc.gif)fixed; color:#000; -webkit-transition-duration: 0.2s}
.sidan{text-align:center; display:inline-block; width: 12px; background:#FCD4DC; font:12px georgia; padding:5px;color:transparent;border-radius:50%;}
.sidan:hover{ background: url(http://i.imgur.com/Q7YUPcc.gif)fixed; color:#000; -webkit-transition-duration: 0.2s}
.sidun{text-align:center; display:inline-block; width: 12px; background:#FCFAD4; font:12px georgia; padding:5px;color:transparent;border-radius:50%;}
.sidun:hover{ background: url(http://i.imgur.com/Q7YUPcc.gif)fixed; color:#000; -webkit-transition-duration: 0.2s}
.sidin{text-align:center; display:inline-block; width: 12px; background:#D4ECFC; font:12px georgia; padding:5px;color:transparent;border-radius:50%;}
.sidin:hover{ background: url(http://i.imgur.com/Q7YUPcc.gif)fixed; color:#000; -webkit-transition-duration: 0.2s}

• Paste di atas code </style>
• Copy code di bawah ini

<span class="siden" onClick="document.getElementById('page').innerHTML=document.getElementById('intro').innerHTML"title="kotak1">1</span><span class="sidan" onClick="document.getElementById('page').innerHTML=document.getElementById('cbox').innerHTML"title="kotak2">2</span><span class="sidun" onClick="document.getElementById('page').innerHTML=document.getElementById('contact').innerHTML"title="kotak3">3</span><span class="sidin" onClick="document.getElementById('page').innerHTML=document.getElementById('credit').innerHTML"title="kotak4">4</span></center>

• Pastekan di bawah code sidebar title kamu. 

Misal code title sidebar kamu :

<div class="h2">Introduction</div>

• Maka, paste di bawahnya.
• Copy code di bawah ini

<div id="page"></div><div id="intro" style="display: none;"><center>CODE WIDGET 1</center><br /><div id="cbox" style="display: none;"><center>CODE WIDGET 2</center><br /><div id="contact" style="display: none;"><center>CODE WIDGET 3</center><br /><div id="credit" style="display: none;"><center>CODE WIDGET 4</center><br />

• Paste di bawah code pada steps 3
• Preview dulu. Jika tdk failed,
• Save

Biru : Title kotak widget
Merah : Kode widget