Tutorial : Membuat Secret Box


Seharian ini sibuk edit-edit blogskin...
Dan sekarang mau buat tuto Secret Box. Contohnya kamu bisa lihat punya aku ya ^^

Langkahnya :
1. Pergi ke sini dulu.
2. Hapus semua kode dan ganti dengan kode ini :


<style>
.adv2 ul{background:url(http://i61.tinypic.com/s3oenm.png);padding:5px;border:1px dashed #000;text-align:center;width:200px;color:#000}
.adv2 p{padding:5px;;width:200px;color:#000;dashed #000;text-align:center}
a.tablo{-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#fff;
width:20px;
text-decoration:none;
border:1px dashed #666;
border-radius:33px;
color:#666;
display:inline-block;
text-align:center;
}
a.tablo:hover{background:#666;color:#000;}
 </style>
<div id="adv2" class="adv2">
<ul><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a>
</ul>
<div id="wnsb" style="width:200px;">
<center>Hi! this is my secret box ><</center>
</div>
<div id="1" style="display: none;">
put your code here </div>
<div id="2" style="display: none;">
You can also put banner codes or anything  here.
</div>
<div id="3" style="display: none;">
navigation no.3
</div>
<div id="4" style="display: none;">
navigation no 4</div>
</div>
3. Edit sedemikian rupa sampai memenuhi kriteria kamu, kemudian CoPas kodenya.
4. Masuk ke Dashboard > Layout > Add Gadget
5. Pilih Add HTML/JavaScript
6. CoPas kode yang sudah kamu edit tadi.
7. Save
Terima Kasih Sudah Berkunjung dan Membaca Artikel ini ya ^^

0 komentar:

Posting Komentar