Harmony Clean Flat Responsive WordPress Blog Theme

Sidebar Widget style rainbow

6.6.13 Ramadhan Liya 2 Comments Category :

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

RELATED POSTS

2 Comment

  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 -.-