Memodifikasi Secret Box

15:05


Kali ini aku mau membahas tentang kode-kode secret box. Disini bakal diulas selengkap mungkin, namun juga ringkas, cara memodifikasi secret box, agar sesuai dengan harapan kita. Selain dapat menghemat penempatan widget, secret box juga dapat mempercantik tampilan blog kita.
Ide post ini didapat dari request Tya, beberapa hari yg lalu:




Request dari Tya


Copy code dibawah ini, dan meluncurlah ke website HTML Editor

<style>
.adv2 ul{http://www.templateof.com/postpic/2015/10/kawaii-pastel-goth-tumblr-backgrounds_289540.jpg);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>Click the number! [YOU CAN PUT IMG CODE]</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>

Perhatikan keterangan dibawah ini, dan rubah sesuai yang kamu inginkan:

BOLD : ubah URL tersebut dengan URL gambar yg kamu inginkan sebagai background dari kotak navigasi.
PINK : ubah sesuai keinginanmu; solid(batas normal), dashed(batas putus-putus), double(double garis)
HIJAU MUDA : adalah warna yang menjadi background tombol. Ubah sesuai keinginanmu. (tombol;1,2,3,4)
HIJAU TUA : adalah warna background tombol saat di hover atau pada saat tersentuh cursor. Ubah sesuai keinginanmu.
PINK TUA : adalah ukuran tombol.
MERAH : adalah kelengkungan kotak, ubah sesuai seleramu.
ORANGE : adalah warna tulisan pada tombol (tombol;1,2,3,4)
KUNING : ialah warna garis batas
BIRU MUDA : ialah warna tulisan pada tombol ketika dihover
BIRU TUA : ialah tulisan pada tombol, kamu dapat menggantinya, misalnya; C U T E, atau O P E N /ingat, satu angka ganti dengan satu huruf, jangan kata/
UNGU : adalah lebar kotak tempat objek berada
ABU-ABU TUA : adalah gambar/pesan sebelum kita menekan tombol.
ABU-ABU MUDA : adalah tempat kita menaruh objek.

Yodah, segitu aja keterangan yang menurutku penting. Kalau ingin menghilangkan border, atau background, kosongkan saja kodenya.

Bagi yang mau, ini ada bonus kode secret box hasil modifikasiku sendiri. Silahkan:



Makasih bagi yang udah baca atau sekedar visit. Bagi yang ada kesulitan atau masalah, bisa langsung tanyakan di comment box atau di CBOX. Jangan lupa follow blog ini untuk tutorial lainnya.

You Might Also Like

2 comments

Saran dan kritik sangat dibutuhkan untuk kemajuan blog ini.... Terima kasih atas masukkannya :)

Like us on Facebook