06 Juni 2013

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


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="sidenonClick="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

2 komentar:

  1. makasih kak atas tutonnya :) pakai ya kak

    BalasHapus
  2. saya guna tuto nih . Nice one . ^^

    BalasHapus

NO HARSH WORDS
please, don't SPAM here!
I'll reply if I didn't busy -.-