Membuat Secret Box

Secret Box? Ada yang tahu enggak chingu? Haaa~ ketahuan nih dari namanya.. Secret = Rahasia, Box = Kotak, kalau di gabungin jadiiiii.... aku bukan superstar, hehe. Bukan Itu ya Chingu! Tapi, Kotak Rahasia !!! Wiissshh... ternyata bukan cuma kita lo ya yang punya rahasia! Blog juga punya nih :D ><

Yuk, bikin sekarang! Cekidot Chingu ><

Kita mulai dari buka akun blogger chingu ya... Dan pilih Tata Letak nya. Next, chingu scroll sampai paling bawah dan ketemu tulisan "Tambahkan Gadget" . Click dan tunggu sampai keluar sebuah kotak. Nah, kan ada beberapa macam pilihan ya? Sekarang Chingu pilih yang "HTML/JavaScript". Dan tunggu sampai keluar dua buah box di atas dan di bawah. Sekarang Chingu ngisi kotak yang bawah, soalnya yang atas untuk judul (jadi, boleh diisi boleh gak diisi).

isi kotak yang bawah adalah seperti berikut

<center><style>
a.hyunbox {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
cursor:url(http://media.tumblr.com/tumblr_m2wjtvuSCc1qfamg6.gif);background:#FFF;
text-decoration:none;
border:3px solid #FFFFFF;
color:#000;
box-shadow:1px 1px 3px #fff;
border-radius:15px;
display:inline-block;
text-align:center;
font:10px Arial;text-shadow:0px 0px 0px #fff;
padding: 10px;
}

a.hyunbox:hover{
background:#FFF; border: 3px dashed #fff;text-shadow:0px 0px 0px #fff;
color:#777;}
a.fsah{
position:right;
hight: 200px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
cursor:url(http://media.tumblr.com/tumblr_m2wjtvuSCc1qfamg6.gif);
text-decoration:none;
border-bottom:3px dashed #000;
color:#000;
border-radius:0px;
display:inline-block;
text-align:center;
font:10px Arial;text-shadow:0px 0px 0px #fff;
padding: 10px;}
.fsh{
background:url(URL IMG);padding:5px;border:1px solid #000;text-align:center;width:500px;color:#555;cursor:url(http://media.tumblr.com/tumblr_m2wjtvuSCc1qfamg6.gif);}
.faesh{
height: 200px;width:500px;color:#999; padding:5px;border:1px solid #000;;border-top:none;font:11px Arial; letter-spacing:1px;background:url(URL IMG);cursor:url(http://media.tumblr.com/tumblr_m2wjtvuSCc1qfamg6.gif);"}
</style>
<div class="fsh">
<style>
a.faebox{
width: 75px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
cursor:url(http://media.tumblr.com/tumblr_m2wjtvuSCc1qfamg6.gif);background:#FFF;
text-decoration:none;
border:3px solid #000;
color:#000;
box-shadow:1px 1px 3px #FFF;
border-radius:15px;
display:inline-block;
text-align:center;
font:12px Arial;text-shadow:0px 0px 0px #fff;
padding: 10px;
}

a.faebox:hover{background:#FFF;color:#000;}
a.faebox1{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
cursor:url(http://media.tumblr.com/tumblr_m2wjtvuSCc1qfamg6.gif);background:#FFF;
text-decoration:none;
border:3px solid #FFFFFF;
color:#fff;
box-shadow:1px 1px 3px #ddd;
border-radius:50px;
display:inline-block;
text-align:center;
font:12px Arial;text-shadow:0px 0px 0px #fff;
padding: 10px;
}

a.faebox1:hover{background:#FFF;color:#888;}
</style>
<a class="faebox"onclick="document.getElementById('sabox').innerHTML=document.getElementById('1').innerHTML" >1</a>
<a class="faebox"onclick="document.getElementById('sabox').innerHTML=document.getElementById('2').innerHTML" >2</a></div>

<div class="faesh"><div id="sabox">
SELAMAT DATANG !!! <br> SECRET BOX CHINGU SUDAH SIAP DIEDIT NIH >< <br> HAPPY AND ENJOY UNTUK NGEDITNYA YA CHINGU :D <br> KALAU BUTUH BANTUAN KUNJUNGI  <a href="http://fae-sa-hyun.blogspot.co.id"title="ASK ME">FAE SA HYUN BLOG</a> <BR> THANKS CHINGU ^^</div>
<div id="1" style="display: none;">
BOX 1 : SILAHKAN ISI SESUAI DENGAN KEHENDAK KALIAN CHINGU ><
</div>

<div id="2" style="display: none;"><br /><center>
SILAHKAN ISI SESUAI DENGAN KEHENDAK KALIAN CHINGU ><
</div></div> </center></div></center>

NB:

• Biru: ganti dengan url background chingu
• Merah: Isi sesuai dengan apa yang akan chingu gunakan yaa
• Pink: untuk mengganti judul box

Nah, chingu edit dulu ya kode-kodenya... Kalau udah sesuai dengan keinginan tinggal save.. dan terettt jadi dech :D  Tempat untuk ngeditnya bisa klik sini ya !!

---

Yuk! Berikan komentar Kalian dan Follow Blog Sa Hyun ^^

---